From 458b14c0bcf7764093f8c4a8e539be606a253b0e Mon Sep 17 00:00:00 2001 From: Wojciech Kwiatek Date: Thu, 19 Oct 2017 20:42:31 +0200 Subject: [PATCH 1/6] Feat: Forkme ribbon option --- docs/Configuration.md | 18 ++++++ loaders/styleguide-loader.js | 1 + scripts/schemas/config.js | 9 +++ src/rsg-components/Ribbon/Ribbon.js | 11 ++++ src/rsg-components/Ribbon/Ribbon.spec.js | 34 +++++++++++ src/rsg-components/Ribbon/RibbonRenderer.js | 51 ++++++++++++++++ .../Ribbon/__snapshots__/Ribbon.spec.js.snap | 58 +++++++++++++++++++ src/rsg-components/Ribbon/index.js | 1 + src/rsg-components/StyleGuide/StyleGuide.js | 1 + .../StyleGuide/StyleGuideRenderer.js | 13 ++++- src/styles/theme.js | 1 + 11 files changed, 197 insertions(+), 1 deletion(-) create mode 100644 src/rsg-components/Ribbon/Ribbon.js create mode 100644 src/rsg-components/Ribbon/Ribbon.spec.js create mode 100644 src/rsg-components/Ribbon/RibbonRenderer.js create mode 100644 src/rsg-components/Ribbon/__snapshots__/Ribbon.spec.js.snap create mode 100644 src/rsg-components/Ribbon/index.js diff --git a/docs/Configuration.md b/docs/Configuration.md index 0ddc62e05..95197fe16 100644 --- a/docs/Configuration.md +++ b/docs/Configuration.md @@ -24,6 +24,7 @@ By default, Styleguidist will look for `styleguide.config.js` file in your proje * [`propsParser`](#propsparser) * [`require`](#require) * [`resolver`](#resolver) +* [`ribbon`](#ribbon) * [`sections`](#sections) * [`serverHost`](#serverhost) * [`serverPort`](#serverport) @@ -328,6 +329,23 @@ module.exports = { } ``` +#### `ribbon` + +Type: `Object`, optional + +Shows 'Fork Me' ribbon in the top-right corner. If `ribbon` key is present, then it's required to add `url` property. `text`, `color`, and `background` are optional. + +```javascript +module.exports = { + ribbon: { + url: 'http://example.com/', + text: 'Fork me on GitHub', + color: '#bbb', + background: '#aa0000', + } +}; +``` + #### `sections` Type: `Array`, optional diff --git a/loaders/styleguide-loader.js b/loaders/styleguide-loader.js index 4e7a24de4..ace454866 100644 --- a/loaders/styleguide-loader.js +++ b/loaders/styleguide-loader.js @@ -24,6 +24,7 @@ const CLIENT_CONFIG_OPTIONS = [ 'styles', 'compilerConfig', 'editorConfig', + 'ribbon', ]; module.exports = function() {}; diff --git a/scripts/schemas/config.js b/scripts/schemas/config.js index 453b0cdaa..0be0a40b8 100644 --- a/scripts/schemas/config.js +++ b/scripts/schemas/config.js @@ -146,6 +146,15 @@ module.exports = { return annotatedComponents.concat(exportedComponents); }, }, + ribbon: { + type: 'object', + example: { + url: 'http://example.com/', + text: 'Fork me on GitHub', + color: '#fff', + background: '#24292e', + }, + }, sections: { type: 'array', default: [], diff --git a/src/rsg-components/Ribbon/Ribbon.js b/src/rsg-components/Ribbon/Ribbon.js new file mode 100644 index 000000000..38964b587 --- /dev/null +++ b/src/rsg-components/Ribbon/Ribbon.js @@ -0,0 +1,11 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import RibbonRenderer from 'rsg-components/Ribbon/RibbonRenderer'; + +export default function Ribbon({}, { config }) { + return ; +} + +Ribbon.contextTypes = { + config: PropTypes.object, +}; diff --git a/src/rsg-components/Ribbon/Ribbon.spec.js b/src/rsg-components/Ribbon/Ribbon.spec.js new file mode 100644 index 000000000..a9c1b98f0 --- /dev/null +++ b/src/rsg-components/Ribbon/Ribbon.spec.js @@ -0,0 +1,34 @@ +import React from 'react'; +import { RibbonRenderer, styles } from './RibbonRenderer'; + +const props = { + classes: classes(styles), +}; + +it('should render ribbon with url', () => { + const actual = shallow(); + + expect(actual).toMatchSnapshot(); +}); + +it('should render ribbon with a text', () => { + const actual = shallow( + + ); + + expect(actual).toMatchSnapshot(); +}); + +it('should render ribbon with custom background and color', () => { + const actual = shallow( + + ); + + expect(actual).toMatchSnapshot(); +}); diff --git a/src/rsg-components/Ribbon/RibbonRenderer.js b/src/rsg-components/Ribbon/RibbonRenderer.js new file mode 100644 index 000000000..7869f1685 --- /dev/null +++ b/src/rsg-components/Ribbon/RibbonRenderer.js @@ -0,0 +1,51 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import Styled from 'rsg-components/Styled'; + +export const styles = ({ color, fontSize, fontFamily }) => ({ + root: { + position: 'fixed', + top: 0, + right: 0, + width: '149px', + height: '149px', + zIndex: 999, + }, + link: { + fontFamily: fontFamily.base, + position: 'relative', + right: -37, + top: -22, + display: 'block', + width: 190, + padding: '5px 15px', + textAlign: 'center', + color: 'white', + fontSize: fontSize.base, + background: color.ribbonBackground, + textDecoration: 'none', + textShadow: '0 -1px 0 rgba(0,0,0,.15)', + transformOrigin: '0 0', + transform: 'rotate(45deg)', + }, +}); + +export function RibbonRenderer({ classes, url, text, color, background }) { + return ( + + ); +} + +RibbonRenderer.propTypes = { + classes: PropTypes.object.isRequired, + url: PropTypes.string.isRequired, + text: PropTypes.string, + color: PropTypes.string, + background: PropTypes.string, +}; + +export default Styled(styles)(RibbonRenderer); diff --git a/src/rsg-components/Ribbon/__snapshots__/Ribbon.spec.js.snap b/src/rsg-components/Ribbon/__snapshots__/Ribbon.spec.js.snap new file mode 100644 index 000000000..7cc680bb6 --- /dev/null +++ b/src/rsg-components/Ribbon/__snapshots__/Ribbon.spec.js.snap @@ -0,0 +1,58 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should render ribbon with a text 1`] = ` + +`; + +exports[`should render ribbon with custom background and color 1`] = ` + +`; + +exports[`should render ribbon with url 1`] = ` + +`; diff --git a/src/rsg-components/Ribbon/index.js b/src/rsg-components/Ribbon/index.js new file mode 100644 index 000000000..a39b9ad67 --- /dev/null +++ b/src/rsg-components/Ribbon/index.js @@ -0,0 +1 @@ +export { default } from './Ribbon.js'; diff --git a/src/rsg-components/StyleGuide/StyleGuide.js b/src/rsg-components/StyleGuide/StyleGuide.js index 7b63f7a98..10e660ee0 100644 --- a/src/rsg-components/StyleGuide/StyleGuide.js +++ b/src/rsg-components/StyleGuide/StyleGuide.js @@ -68,6 +68,7 @@ export default class StyleGuide extends Component { homepageUrl={HOMEPAGE} toc={} hasSidebar={config.showSidebar && displayMode === DisplayModes.all} + ribbon={config.ribbon} > diff --git a/src/rsg-components/StyleGuide/StyleGuideRenderer.js b/src/rsg-components/StyleGuide/StyleGuideRenderer.js index d4cc054ed..8d00df1b6 100644 --- a/src/rsg-components/StyleGuide/StyleGuideRenderer.js +++ b/src/rsg-components/StyleGuide/StyleGuideRenderer.js @@ -4,6 +4,7 @@ import Logo from 'rsg-components/Logo'; import Markdown from 'rsg-components/Markdown'; import Styled from 'rsg-components/Styled'; import cx from 'classnames'; +import Ribbon from '../Ribbon'; const styles = ({ color, fontFamily, fontSize, sidebarWidth, mq, space, maxWidth }) => ({ root: { @@ -54,7 +55,15 @@ const styles = ({ color, fontFamily, fontSize, sidebarWidth, mq, space, maxWidth }, }); -export function StyleGuideRenderer({ classes, title, homepageUrl, children, toc, hasSidebar }) { +export function StyleGuideRenderer({ + classes, + title, + homepageUrl, + children, + toc, + hasSidebar, + ribbon, +}) { return (
@@ -71,6 +80,7 @@ export function StyleGuideRenderer({ classes, title, homepageUrl, children, toc, {toc}
)} + {ribbon && } ); } @@ -82,6 +92,7 @@ StyleGuideRenderer.propTypes = { children: PropTypes.node.isRequired, toc: PropTypes.node.isRequired, hasSidebar: PropTypes.bool, + ribbon: PropTypes.object, }; export default Styled(styles)(StyleGuideRenderer); diff --git a/src/styles/theme.js b/src/styles/theme.js index 910a24e37..68a158634 100644 --- a/src/styles/theme.js +++ b/src/styles/theme.js @@ -22,6 +22,7 @@ export const color = { baseBackground: '#fff', codeBackground: '#f5f5f5', sidebarBackground: '#f5f5f5', + ribbonBackground: '#f9970d', }; export const fontFamily = { From ffba4a03e7fe8cac1bb241d4493570cbb70446c8 Mon Sep 17 00:00:00 2001 From: Gleb Kost Date: Tue, 6 Mar 2018 23:16:29 +0100 Subject: [PATCH 2/6] tweak ribbon based on feedback --- examples/basic/styleguide.config.js | 3 +++ src/rsg-components/Ribbon/Ribbon.js | 3 ++- src/rsg-components/Ribbon/RibbonRenderer.js | 1 + src/rsg-components/StyleGuide/StyleGuide.js | 1 - src/rsg-components/StyleGuide/StyleGuide.spec.js | 2 +- src/rsg-components/StyleGuide/StyleGuideRenderer.js | 13 ++----------- .../__snapshots__/StyleGuide.spec.js.snap | 3 ++- 7 files changed, 11 insertions(+), 15 deletions(-) diff --git a/examples/basic/styleguide.config.js b/examples/basic/styleguide.config.js index 3b55f978c..96c9c2d23 100644 --- a/examples/basic/styleguide.config.js +++ b/examples/basic/styleguide.config.js @@ -1,6 +1,9 @@ module.exports = { components: 'src/components/**/[A-Z]*.js', defaultExample: true, + ribbon: { + url: 'https://github.com/styleguidist/react-styleguidist', + }, webpackConfig: { module: { rules: [ diff --git a/src/rsg-components/Ribbon/Ribbon.js b/src/rsg-components/Ribbon/Ribbon.js index 38964b587..e16bf0afd 100644 --- a/src/rsg-components/Ribbon/Ribbon.js +++ b/src/rsg-components/Ribbon/Ribbon.js @@ -3,7 +3,8 @@ import PropTypes from 'prop-types'; import RibbonRenderer from 'rsg-components/Ribbon/RibbonRenderer'; export default function Ribbon({}, { config }) { - return ; + const { ribbon } = config; + return ribbon ? : null; } Ribbon.contextTypes = { diff --git a/src/rsg-components/Ribbon/RibbonRenderer.js b/src/rsg-components/Ribbon/RibbonRenderer.js index 7869f1685..b17278d28 100644 --- a/src/rsg-components/Ribbon/RibbonRenderer.js +++ b/src/rsg-components/Ribbon/RibbonRenderer.js @@ -27,6 +27,7 @@ export const styles = ({ color, fontSize, fontFamily }) => ({ textShadow: '0 -1px 0 rgba(0,0,0,.15)', transformOrigin: '0 0', transform: 'rotate(45deg)', + cursor: 'pointer', }, }); diff --git a/src/rsg-components/StyleGuide/StyleGuide.js b/src/rsg-components/StyleGuide/StyleGuide.js index 10e660ee0..7b63f7a98 100644 --- a/src/rsg-components/StyleGuide/StyleGuide.js +++ b/src/rsg-components/StyleGuide/StyleGuide.js @@ -68,7 +68,6 @@ export default class StyleGuide extends Component { homepageUrl={HOMEPAGE} toc={} hasSidebar={config.showSidebar && displayMode === DisplayModes.all} - ribbon={config.ribbon} > diff --git a/src/rsg-components/StyleGuide/StyleGuide.spec.js b/src/rsg-components/StyleGuide/StyleGuide.spec.js index aa9e01f25..bec0b69ac 100644 --- a/src/rsg-components/StyleGuide/StyleGuide.spec.js +++ b/src/rsg-components/StyleGuide/StyleGuide.spec.js @@ -96,7 +96,7 @@ describe('sidebar rendering', () => { }); }); -it('renderer should render logo, table of contents and passed children', () => { +it('renderer should render logo, table of contents, ribbon and passed children', () => { const actual = shallow(
@@ -80,7 +72,7 @@ export function StyleGuideRenderer({ {toc} )} - {ribbon && } + ); } @@ -92,7 +84,6 @@ StyleGuideRenderer.propTypes = { children: PropTypes.node.isRequired, toc: PropTypes.node.isRequired, hasSidebar: PropTypes.bool, - ribbon: PropTypes.object, }; export default Styled(styles)(StyleGuideRenderer); diff --git a/src/rsg-components/StyleGuide/__snapshots__/StyleGuide.spec.js.snap b/src/rsg-components/StyleGuide/__snapshots__/StyleGuide.spec.js.snap index 79a0dbd9b..9ae8983f7 100644 --- a/src/rsg-components/StyleGuide/__snapshots__/StyleGuide.spec.js.snap +++ b/src/rsg-components/StyleGuide/__snapshots__/StyleGuide.spec.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`renderer should render logo, table of contents and passed children 1`] = ` +exports[`renderer should render logo, table of contents, ribbon and passed children 1`] = `
@@ -47,6 +47,7 @@ exports[`renderer should render logo, table of contents and passed children 1`] } />
+ `; From 4789ec3c0e289b9aa8c2553ec847e45a4deec400 Mon Sep 17 00:00:00 2001 From: Gleb Kost Date: Wed, 7 Mar 2018 15:01:33 +0100 Subject: [PATCH 3/6] move ribbon styling from config to theme --- docs/Configuration.md | 4 +--- scripts/schemas/config.js | 2 -- src/rsg-components/Ribbon/RibbonRenderer.js | 6 +++--- .../Ribbon/__snapshots__/Ribbon.spec.js.snap | 18 ------------------ src/styles/theme.js | 1 + 5 files changed, 5 insertions(+), 26 deletions(-) diff --git a/docs/Configuration.md b/docs/Configuration.md index 95197fe16..1295b8099 100644 --- a/docs/Configuration.md +++ b/docs/Configuration.md @@ -333,15 +333,13 @@ module.exports = { Type: `Object`, optional -Shows 'Fork Me' ribbon in the top-right corner. If `ribbon` key is present, then it's required to add `url` property. `text`, `color`, and `background` are optional. +Shows 'Fork Me' ribbon in the top-right corner. If `ribbon` key is present, then it's required to add `url` property; `text` property is optional. If you want to change styling of the ribbon, please, refer to the [theme section](#theme). ```javascript module.exports = { ribbon: { url: 'http://example.com/', text: 'Fork me on GitHub', - color: '#bbb', - background: '#aa0000', } }; ``` diff --git a/scripts/schemas/config.js b/scripts/schemas/config.js index 0be0a40b8..ab6139d7a 100644 --- a/scripts/schemas/config.js +++ b/scripts/schemas/config.js @@ -151,8 +151,6 @@ module.exports = { example: { url: 'http://example.com/', text: 'Fork me on GitHub', - color: '#fff', - background: '#24292e', }, }, sections: { diff --git a/src/rsg-components/Ribbon/RibbonRenderer.js b/src/rsg-components/Ribbon/RibbonRenderer.js index b17278d28..211f1a1aa 100644 --- a/src/rsg-components/Ribbon/RibbonRenderer.js +++ b/src/rsg-components/Ribbon/RibbonRenderer.js @@ -20,7 +20,7 @@ export const styles = ({ color, fontSize, fontFamily }) => ({ width: 190, padding: '5px 15px', textAlign: 'center', - color: 'white', + color: color.ribbonText, fontSize: fontSize.base, background: color.ribbonBackground, textDecoration: 'none', @@ -31,10 +31,10 @@ export const styles = ({ color, fontSize, fontFamily }) => ({ }, }); -export function RibbonRenderer({ classes, url, text, color, background }) { +export function RibbonRenderer({ classes, url, text }) { return ( diff --git a/src/rsg-components/Ribbon/__snapshots__/Ribbon.spec.js.snap b/src/rsg-components/Ribbon/__snapshots__/Ribbon.spec.js.snap index 7cc680bb6..ddfb524d8 100644 --- a/src/rsg-components/Ribbon/__snapshots__/Ribbon.spec.js.snap +++ b/src/rsg-components/Ribbon/__snapshots__/Ribbon.spec.js.snap @@ -7,12 +7,6 @@ exports[`should render ribbon with a text 1`] = ` Share the repo @@ -26,12 +20,6 @@ exports[`should render ribbon with custom background and color 1`] = ` Share the repo @@ -45,12 +33,6 @@ exports[`should render ribbon with url 1`] = ` Fork me on GitHub diff --git a/src/styles/theme.js b/src/styles/theme.js index 68a158634..0766c48ed 100644 --- a/src/styles/theme.js +++ b/src/styles/theme.js @@ -23,6 +23,7 @@ export const color = { codeBackground: '#f5f5f5', sidebarBackground: '#f5f5f5', ribbonBackground: '#f9970d', + ribbonText: '#fff', }; export const fontFamily = { From ef6329cd00920f872a89abb6b392ab49b85152f9 Mon Sep 17 00:00:00 2001 From: Gleb Kost Date: Wed, 7 Mar 2018 15:24:09 +0100 Subject: [PATCH 4/6] update ribbon tests --- src/rsg-components/Ribbon/Ribbon.spec.js | 44 ++++++++++--------- .../Ribbon/__snapshots__/Ribbon.spec.js.snap | 19 +++----- 2 files changed, 29 insertions(+), 34 deletions(-) diff --git a/src/rsg-components/Ribbon/Ribbon.spec.js b/src/rsg-components/Ribbon/Ribbon.spec.js index a9c1b98f0..ef8ab7b6d 100644 --- a/src/rsg-components/Ribbon/Ribbon.spec.js +++ b/src/rsg-components/Ribbon/Ribbon.spec.js @@ -1,34 +1,36 @@ import React from 'react'; +import Ribbon from './Ribbon'; import { RibbonRenderer, styles } from './RibbonRenderer'; const props = { classes: classes(styles), }; -it('should render ribbon with url', () => { - const actual = shallow(); +describe('Ribbon', () => { + it('should render ribbon if the ribbon is present in the config', () => { + const actual = shallow(, { context: { config: { ribbon: { url: 'foo.bar' } } } }); - expect(actual).toMatchSnapshot(); -}); + expect(actual).toMatchSnapshot(); + }); -it('should render ribbon with a text', () => { - const actual = shallow( - - ); + it('should return null if the ribbon is not present in the config', () => { + const actual = shallow(, { context: { config: {} } }); - expect(actual).toMatchSnapshot(); + expect(actual.type()).toBeNull(); + }); }); +describe('RibbonRenderer', () => { + it('should render ribbon with url', () => { + const actual = shallow(); + + expect(actual).toMatchSnapshot(); + }); + + it('should render ribbon with a text', () => { + const actual = shallow( + + ); -it('should render ribbon with custom background and color', () => { - const actual = shallow( - - ); - - expect(actual).toMatchSnapshot(); + expect(actual).toMatchSnapshot(); + }); }); diff --git a/src/rsg-components/Ribbon/__snapshots__/Ribbon.spec.js.snap b/src/rsg-components/Ribbon/__snapshots__/Ribbon.spec.js.snap index ddfb524d8..2c8ee427d 100644 --- a/src/rsg-components/Ribbon/__snapshots__/Ribbon.spec.js.snap +++ b/src/rsg-components/Ribbon/__snapshots__/Ribbon.spec.js.snap @@ -1,19 +1,12 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`should render ribbon with a text 1`] = ` - +exports[`Ribbon should render ribbon if the ribbon is present in the config 1`] = ` + `; -exports[`should render ribbon with custom background and color 1`] = ` +exports[`RibbonRenderer should render ribbon with a text 1`] = `
@@ -26,7 +19,7 @@ exports[`should render ribbon with custom background and color 1`] = `
`; -exports[`should render ribbon with url 1`] = ` +exports[`RibbonRenderer should render ribbon with url 1`] = `
From 614101f580462c77b1f1ff6323daf0504a78fafa Mon Sep 17 00:00:00 2001 From: Gleb Kost Date: Wed, 7 Mar 2018 18:35:08 +0100 Subject: [PATCH 5/6] review based changes --- src/rsg-components/Ribbon/RibbonRenderer.js | 12 +++++++----- src/rsg-components/Ribbon/index.js | 2 +- src/rsg-components/StyleGuide/StyleGuideRenderer.js | 2 +- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/rsg-components/Ribbon/RibbonRenderer.js b/src/rsg-components/Ribbon/RibbonRenderer.js index 211f1a1aa..65621dc5e 100644 --- a/src/rsg-components/Ribbon/RibbonRenderer.js +++ b/src/rsg-components/Ribbon/RibbonRenderer.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import Styled from 'rsg-components/Styled'; -export const styles = ({ color, fontSize, fontFamily }) => ({ +export const styles = ({ color, space, fontSize, fontFamily }) => ({ root: { position: 'fixed', top: 0, @@ -18,7 +18,7 @@ export const styles = ({ color, fontSize, fontFamily }) => ({ top: -22, display: 'block', width: 190, - padding: '5px 15px', + padding: `${space[0]}px ${space[2]}px`, textAlign: 'center', color: color.ribbonText, fontSize: fontSize.base, @@ -35,18 +35,20 @@ export function RibbonRenderer({ classes, url, text }) { return ( ); } +RibbonRenderer.defaultProps = { + text: 'Fork me on GitHub', +}; + RibbonRenderer.propTypes = { classes: PropTypes.object.isRequired, url: PropTypes.string.isRequired, text: PropTypes.string, - color: PropTypes.string, - background: PropTypes.string, }; export default Styled(styles)(RibbonRenderer); diff --git a/src/rsg-components/Ribbon/index.js b/src/rsg-components/Ribbon/index.js index a39b9ad67..9dd292281 100644 --- a/src/rsg-components/Ribbon/index.js +++ b/src/rsg-components/Ribbon/index.js @@ -1 +1 @@ -export { default } from './Ribbon.js'; +export { default } from 'rsg-components/Ribbon/Ribbon.js'; diff --git a/src/rsg-components/StyleGuide/StyleGuideRenderer.js b/src/rsg-components/StyleGuide/StyleGuideRenderer.js index 80fe20be8..922074ab9 100644 --- a/src/rsg-components/StyleGuide/StyleGuideRenderer.js +++ b/src/rsg-components/StyleGuide/StyleGuideRenderer.js @@ -4,7 +4,7 @@ import Logo from 'rsg-components/Logo'; import Markdown from 'rsg-components/Markdown'; import Styled from 'rsg-components/Styled'; import cx from 'classnames'; -import Ribbon from '../Ribbon'; +import Ribbon from 'rsg-components/Ribbon'; const styles = ({ color, fontFamily, fontSize, sidebarWidth, mq, space, maxWidth }) => ({ root: { From 9c9220db30088a2a2878015d20f886dc76bcb575 Mon Sep 17 00:00:00 2001 From: Gleb Kost Date: Mon, 12 Mar 2018 23:52:09 +0100 Subject: [PATCH 6/6] fix styles syntax --- src/rsg-components/Ribbon/RibbonRenderer.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/rsg-components/Ribbon/RibbonRenderer.js b/src/rsg-components/Ribbon/RibbonRenderer.js index 65621dc5e..a824b4293 100644 --- a/src/rsg-components/Ribbon/RibbonRenderer.js +++ b/src/rsg-components/Ribbon/RibbonRenderer.js @@ -7,8 +7,8 @@ export const styles = ({ color, space, fontSize, fontFamily }) => ({ position: 'fixed', top: 0, right: 0, - width: '149px', - height: '149px', + width: 149, + height: 149, zIndex: 999, }, link: { @@ -18,14 +18,14 @@ export const styles = ({ color, space, fontSize, fontFamily }) => ({ top: -22, display: 'block', width: 190, - padding: `${space[0]}px ${space[2]}px`, + padding: [[space[0], space[2]]], textAlign: 'center', color: color.ribbonText, fontSize: fontSize.base, background: color.ribbonBackground, textDecoration: 'none', - textShadow: '0 -1px 0 rgba(0,0,0,.15)', - transformOrigin: '0 0', + textShadow: [[0, '-1px', 0, 'rgba(0,0,0,.15)']], + transformOrigin: [[0, 0]], transform: 'rotate(45deg)', cursor: 'pointer', },