diff --git a/.babelrc b/.babelrc index 9911a5be17c3..a4d3bd81ff67 100644 --- a/.babelrc +++ b/.babelrc @@ -1,10 +1,13 @@ { "presets": ["env", "stage-0", "react"], - "plugins": [ - "babel-plugin-macros", - ["transform-runtime", { - "polyfill": false, - "regenerator": true - }] - ] + "env": { + "plugins": [ + "emotion", + "babel-plugin-macros", + ["transform-runtime", { + "polyfill": false, + "regenerator": true + }] + ] + } } diff --git a/addons/a11y/package.json b/addons/a11y/package.json index 27182db30cc2..c575409a226c 100644 --- a/addons/a11y/package.json +++ b/addons/a11y/package.json @@ -14,13 +14,13 @@ "bugs": { "url": "https://github.com/storybooks/storybook/issues" }, - "license": "MIT", - "main": "dist/index.js", - "jsnext:main": "src/index.js", "repository": { "type": "git", "url": "git+https://github.com/storybooks/storybook.git" }, + "license": "MIT", + "main": "dist/index.js", + "jsnext:main": "src/index.js", "scripts": { "prepare": "node ../../scripts/prepare.js" }, @@ -31,10 +31,10 @@ "@storybook/core-events": "4.0.0-alpha.7", "axe-core": "^3.0.2", "babel-runtime": "^6.26.0", - "glamor": "^2.20.40", - "glamorous": "^4.13.0", + "emotion": "^9.1.3", "global": "^4.3.2", - "prop-types": "^15.6.1" + "prop-types": "^15.6.1", + "react-emotion": "^9.1.3" }, "peerDependencies": { "react": "*", diff --git a/addons/a11y/src/components/Panel.js b/addons/a11y/src/components/Panel.js index 99d93e526350..8e3617c81b18 100644 --- a/addons/a11y/src/components/Panel.js +++ b/addons/a11y/src/components/Panel.js @@ -1,19 +1,20 @@ import React, { Component } from 'react'; import addons from '@storybook/addons'; +import styled from 'react-emotion'; + import { CHECK_EVENT_ID } from '../shared'; import Tabs from './Tabs'; import Report from './Report'; -const styles = { - passes: { - color: '#0D6731', - }, - violations: { - color: '#AC2300', - }, -}; +const Passes = styled('span')({ + color: '#0D6731', +}); + +const Violations = styled('span')({ + color: '#AC2300', +}); class Panel extends Component { constructor(props, ...args) { @@ -49,11 +50,11 @@ class Panel extends Component { {violations.length} Violations, + label: {violations.length} Violations, panel: , }, { - label: {passes.length} Passes, + label: {passes.length} Passes, panel: , }, ]} diff --git a/addons/a11y/src/components/Report/Elements.js b/addons/a11y/src/components/Report/Elements.js index 5b75aad016e8..4b34e24870d3 100644 --- a/addons/a11y/src/components/Report/Elements.js +++ b/addons/a11y/src/components/Report/Elements.js @@ -1,20 +1,20 @@ import React from 'react'; import PropTypes from 'prop-types'; +import styled from 'react-emotion'; + import Rules from './Rules'; -const styles = { - element: { - fontWeight: 600, - }, - target: { - borderBottom: '1px solid rgb(130, 130, 130)', - width: '100%', - display: 'inline-block', - paddingBottom: '4px', - marginBottom: '4px', - }, -}; +const Item = styled('li')({ + fontWeight: 600, +}); +const ItemTitle = styled('span')({ + borderBottom: '1px solid rgb(130, 130, 130)', + width: '100%', + display: 'inline-block', + paddingBottom: '4px', + marginBottom: '4px', +}); function Element({ element, passes }) { const { any, all, none } = element; @@ -22,10 +22,10 @@ function Element({ element, passes }) { const rules = [...any, ...all, ...none]; return ( -
  • - {element.target[0]} + + {element.target[0]} -
    • + ); } Element.propTypes = { @@ -38,13 +38,12 @@ Element.propTypes = { }; /* eslint-disable react/no-array-index-key */ -function Elements({ elements, passes }) { - return ( -
      - {elements.map((element, index) => )} -
    - ); -} +const Elements = ({ elements, passes }) => ( +
      + {elements.map((element, index) => )} +
    +); + Elements.propTypes = { elements: PropTypes.arrayOf( PropTypes.shape({ diff --git a/addons/a11y/src/components/Report/Info.js b/addons/a11y/src/components/Report/Info.js index f3b50a6968ad..8b2679424d7b 100644 --- a/addons/a11y/src/components/Report/Info.js +++ b/addons/a11y/src/components/Report/Info.js @@ -1,31 +1,31 @@ import React from 'react'; import PropTypes from 'prop-types'; -const styles = { - info: { - backgroundColor: 'rgb(234, 234, 234)', - padding: '12px', - marginBottom: '10px', - }, - help: { - margin: '0 0 12px', - }, - helpUrl: { - marginTop: '12px', - textDecoration: 'underline', - color: 'rgb(130, 130, 130)', - display: 'block', - }, -}; +import styled from 'react-emotion'; + +const Wrapper = styled('div')({ + backgroundColor: 'rgb(234, 234, 234)', + padding: '12px', + marginBottom: '10px', +}); +const Help = styled('p')({ + margin: '0 0 12px', +}); +const Link = styled('a')({ + marginTop: '12px', + textDecoration: 'underline', + color: 'rgb(130, 130, 130)', + display: 'block', +}); function Info({ item }) { return ( -
    -

    {item.help}

    - + + {item.help} + More info... - -
    + + ); } diff --git a/addons/a11y/src/components/Report/Item.js b/addons/a11y/src/components/Report/Item.js index 840c895d09fa..cae1eeb03e53 100644 --- a/addons/a11y/src/components/Report/Item.js +++ b/addons/a11y/src/components/Report/Item.js @@ -1,24 +1,25 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import styled from 'react-emotion'; + import Info from './Info'; import Tags from './Tags'; import Elements from './Elements'; -const styles = { - item: { - padding: '0 14px', - cursor: 'pointer', - borderBottom: '1px solid rgb(234, 234, 234)', - }, - headerBar: { - padding: '12px 0px', - display: 'block', - width: '100%', - border: 0, - background: 'none', - }, -}; +const Wrapper = styled('div')({ + padding: '0 14px', + cursor: 'pointer', + borderBottom: '1px solid rgb(234, 234, 234)', +}); + +const HeaderBar = styled('button')({ + padding: '12px 0px', + display: 'block', + width: '100%', + border: 0, + background: 'none', +}); class Item extends Component { static propTypes = { @@ -30,13 +31,9 @@ class Item extends Component { passes: PropTypes.bool.isRequired, }; - constructor() { - super(); - - this.state = { - open: false, - }; - } + state = { + open: false, + }; onToggle = () => this.setState(prevState => ({ @@ -48,14 +45,12 @@ class Item extends Component { const { open } = this.state; return ( -
    - + + {item.description} {open && } {open && } {open && } -
    + ); } } diff --git a/addons/a11y/src/components/Report/RerunButton.js b/addons/a11y/src/components/Report/RerunButton.js index 659f1417ffaf..f419e3b197bf 100644 --- a/addons/a11y/src/components/Report/RerunButton.js +++ b/addons/a11y/src/components/Report/RerunButton.js @@ -1,6 +1,6 @@ -import glamorous from 'glamorous'; +import styled from 'react-emotion'; -const RerunButton = glamorous.button({ +const RerunButton = styled('button')({ position: 'absolute', bottom: 0, right: 0, diff --git a/addons/a11y/src/components/Report/Rules.js b/addons/a11y/src/components/Report/Rules.js index e531f49f9472..5702ea3b619e 100644 --- a/addons/a11y/src/components/Report/Rules.js +++ b/addons/a11y/src/components/Report/Rules.js @@ -1,6 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; +import styled from 'react-emotion'; + const impactColors = { minor: '#f1c40f', moderate: '#e67e22', @@ -9,52 +11,45 @@ const impactColors = { success: '#2ecc71', }; -const styles = { - rules: { - display: 'flex', - flexDirection: 'column', - padding: '4px', - fontWeight: '400', - }, - rule: { - display: 'flex', - flexDirection: 'row', - marginBottom: '6px', - }, - status: { - height: '16px', - width: '16px', - borderRadius: '8px', - fontSize: '10px', - display: 'inline-flex', - justifyContent: 'center', - alignItems: 'center', - color: '#fff', - textAlign: 'center', - flex: '0 0 16px', - }, - message: { - paddingLeft: '6px', - }, -}; +const List = styled('div')({ + display: 'flex', + flexDirection: 'column', + padding: '4px', + fontWeight: '400', +}); -function Rule({ rule, passes }) { - const color = passes ? impactColors.success : impactColors[rule.impact]; +const Item = styled('div')({ + display: 'flex', + flexDirection: 'row', + marginBottom: '6px', +}); - return ( -
    -
    - {passes ? '✔' : '✘'} -
    - {rule.message} -
    - ); -} +const Message = styled('div')({ + paddingLeft: '6px', +}); + +const Status = styled('div')(({ passes, impact }) => ({ + height: '16px', + width: '16px', + borderRadius: '8px', + fontSize: '10px', + display: 'inline-flex', + justifyContent: 'center', + alignItems: 'center', + color: '#fff', + textAlign: 'center', + flex: '0 0 16px', + backgroundColor: passes ? impactColors.success : impactColors[impact], +})); + +const Rule = ({ rule, passes }) => ( + + + {passes ? '✔' : '✘'} + + {rule.message} + +); Rule.propTypes = { rule: PropTypes.shape({ @@ -66,9 +61,7 @@ Rule.propTypes = { /* eslint-disable react/no-array-index-key */ function Rules({ rules, passes }) { return ( -
    - {rules.map((rule, index) => )} -
    + {rules.map((rule, index) => )} ); } Rules.propTypes = { diff --git a/addons/a11y/src/components/Report/Tags.js b/addons/a11y/src/components/Report/Tags.js index c367e5f53a95..2ad147f64cf4 100644 --- a/addons/a11y/src/components/Report/Tags.js +++ b/addons/a11y/src/components/Report/Tags.js @@ -1,32 +1,25 @@ import React from 'react'; import PropTypes from 'prop-types'; -const styles = { - tags: { - display: 'flex', - flexWrap: 'wrap', - margin: '12px 0', - }, - tag: { - margin: '0 6px', - padding: '5px', - border: '1px solid rgb(234, 234, 234)', - borderRadius: '2px', - color: 'rgb(130, 130, 130)', - fontSize: '12px', - }, -}; +import styled from 'react-emotion'; + +const Wrapper = styled('div')({ + display: 'flex', + flexWrap: 'wrap', + margin: '12px 0', +}); + +const Item = styled('div')({ + margin: '0 6px', + padding: '5px', + border: '1px solid rgb(234, 234, 234)', + borderRadius: '2px', + color: 'rgb(130, 130, 130)', + fontSize: '12px', +}); function Tags({ tags }) { - return ( -
    - {tags.map(tag => ( -
    - {tag} -
    - ))} -
    - ); + return {tags.map(tag => {tag})}; } Tags.propTypes = { tags: PropTypes.arrayOf(PropTypes.node).isRequired, diff --git a/addons/a11y/src/components/Report/index.js b/addons/a11y/src/components/Report/index.js index 74dd1f1dbb92..7a6b3e75eaa2 100644 --- a/addons/a11y/src/components/Report/index.js +++ b/addons/a11y/src/components/Report/index.js @@ -1,26 +1,13 @@ import React from 'react'; import PropTypes from 'prop-types'; import addons from '@storybook/addons'; +import { Placeholder } from '@storybook/components'; import { RERUN_EVENT_ID } from '../../shared'; import RerunButton from './RerunButton'; import Item from './Item'; -const styles = { - container: { - fontSize: '12px', - }, - empty: { - fontSize: '11px', - padding: '20px 12px', - width: '100%', - display: 'block', - textAlign: 'center', - textTransform: 'uppercase', - }, -}; - function onRerunClick() { const channel = addons.getChannel(); channel.emit(RERUN_EVENT_ID); @@ -29,11 +16,9 @@ function onRerunClick() { const Report = ({ items, empty, passes }) => (
    {items.length ? ( -
    - {items.map(item => )} -
    + items.map(item => ) ) : ( - {empty} + {empty} )} Re-run tests
    diff --git a/addons/a11y/src/components/Tabs.js b/addons/a11y/src/components/Tabs.js index d52fcf547464..2bdd3efcfff2 100644 --- a/addons/a11y/src/components/Tabs.js +++ b/addons/a11y/src/components/Tabs.js @@ -1,19 +1,28 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { baseFonts } from '@storybook/components'; -const styles = { - container: { - width: '100%', - position: 'relative', - ...baseFonts, - }, - tabs: { - borderBottom: '1px solid rgb(234, 234, 234)', - flexWrap: 'wrap', - display: 'flex', - }, - tab: { +import styled from 'react-emotion'; + +const Container = styled('div')({ + width: '100%', + position: 'relative', +}); + +const List = styled('div')({ + borderBottom: '1px solid rgb(234, 234, 234)', + flexWrap: 'wrap', + display: 'flex', +}); + +const Item = styled('button')( + ({ active }) => + active + ? { + opacity: 1, + fontWeight: 600, + } + : {}, + { color: 'rgb(68, 68, 68)', fontSize: '11px', textDecoration: 'none', @@ -26,70 +35,40 @@ const styles = { border: 'none', background: 'none', flex: 1, - }, - tabActive: { - opacity: 1, - fontWeight: 600, - }, -}; - -const tabStyle = active => ({ - ...styles.tab, - ...(active ? styles.tabActive : undefined), -}); + } +); class Tabs extends Component { - constructor(props) { - super(props); - - this.state = { - active: 0, - }; - - this.onToggle = this.onToggle.bind(this); - this.renderPanel = this.renderPanel.bind(this); - this.renderTabs = this.renderTabs.bind(this); - } + state = { + active: 0, + }; - onToggle(index) { + onToggle = index => { this.setState({ active: index, }); - } - - renderPanel() { - const { tabs } = this.props; - const { active } = this.state; - - return
    {tabs[active].panel}
    ; - } + }; - renderTabs() { + render() { const { tabs } = this.props; const { active } = this.state; - /* eslint-disable react/no-array-index-key */ - return ( -
    - {tabs.map((tab, index) => ( - - ))} -
    - ); - } - - render() { return ( -
    - {this.renderTabs()} - {this.renderPanel()} -
    + + + {tabs.map((tab, index) => ( + this.onToggle(index)} + > + {tab.label} + + ))} + +
    {tabs[active].panel}
    +     ); } } diff --git a/addons/actions/package.json b/addons/actions/package.json index 1682589cfb3a..d1ae2a09c74d 100644 --- a/addons/actions/package.json +++ b/addons/actions/package.json @@ -9,13 +9,13 @@ "bugs": { "url": "https://github.com/storybooks/storybook/issues" }, - "license": "MIT", - "main": "dist/index.js", - "jsnext:main": "src/index.js", "repository": { "type": "git", "url": "https://github.com/storybooks/storybook.git" }, + "license": "MIT", + "main": "dist/index.js", + "jsnext:main": "src/index.js", "scripts": { "prepare": "node ../../scripts/prepare.js" }, @@ -25,12 +25,12 @@ "@storybook/core-events": "4.0.0-alpha.7", "babel-runtime": "^6.26.0", "deep-equal": "^1.0.1", - "glamor": "^2.20.40", - "glamorous": "^4.13.0", + "emotion": "^9.1.3", "global": "^4.3.2", "lodash.isequal": "^4.5.0", "make-error": "^1.3.4", "prop-types": "^15.6.1", + "react-emotion": "^9.1.3", "react-inspector": "^2.3.0", "uuid": "^3.2.1" }, diff --git a/addons/actions/src/components/ActionLogger/index.js b/addons/actions/src/components/ActionLogger/index.js index a22ec9e703a6..d565ce463313 100644 --- a/addons/actions/src/components/ActionLogger/index.js +++ b/addons/actions/src/components/ActionLogger/index.js @@ -37,7 +37,8 @@ class ActionLogger extends Component { ActionLogger.propTypes = { onClear: PropTypes.func, - actions: PropTypes.array, // eslint-disable-line react/forbid-prop-types + // eslint-disable-next-line react/forbid-prop-types + actions: PropTypes.array, }; ActionLogger.defaultProps = { onClear: () => {}, diff --git a/addons/actions/src/components/ActionLogger/style.js b/addons/actions/src/components/ActionLogger/style.js index 1784321bb827..e2d4b67081f6 100644 --- a/addons/actions/src/components/ActionLogger/style.js +++ b/addons/actions/src/components/ActionLogger/style.js @@ -1,7 +1,7 @@ -import glamorous from 'glamorous'; +import styled from 'react-emotion'; import { Button as BaseButton } from '@storybook/components'; -export const Actions = glamorous.pre({ +export const Actions = styled('pre')({ flex: 1, margin: 0, padding: '8px 2px 20px 0', @@ -9,7 +9,7 @@ export const Actions = glamorous.pre({ color: '#666', }); -export const Action = glamorous.div({ +export const Action = styled('div')({ display: 'flex', padding: '3px 3px 3px 0', borderLeft: '5px solid white', @@ -18,7 +18,7 @@ export const Action = glamorous.div({ alignItems: 'start', }); -export const Button = glamorous(BaseButton)({ +export const Button = styled(BaseButton)({ position: 'absolute', bottom: 0, right: 0, @@ -26,10 +26,11 @@ export const Button = glamorous(BaseButton)({ textTransform: 'uppercase', letterSpacing: 1, paddingTop: 5, - paddingBootom: 5, + paddingBottom: 5, + border: '0 none', }); -export const Counter = glamorous.div({ +export const Counter = styled('div')({ margin: '0 5px 0 5px', backgroundColor: '#777777', color: '#ffffff', @@ -37,16 +38,16 @@ export const Counter = glamorous.div({ borderRadius: '20px', }); -export const Countwrap = glamorous.div({ +export const Countwrap = styled('div')({ paddingBottom: 2, }); -export const InspectorContainer = glamorous.div({ +export const InspectorContainer = styled('div')({ flex: 1, padding: '0 0 0 5px', }); -export const Wrapper = glamorous.div({ +export const Wrapper = styled('div')({ flex: 1, display: 'flex', position: 'relative', diff --git a/addons/actions/src/containers/ActionLogger/index.js b/addons/actions/src/containers/ActionLogger/index.js index 938381bfaf70..df814b21ad87 100644 --- a/addons/actions/src/containers/ActionLogger/index.js +++ b/addons/actions/src/containers/ActionLogger/index.js @@ -65,7 +65,8 @@ export default class ActionLogger extends React.Component { } ActionLogger.propTypes = { - channel: PropTypes.object, // eslint-disable-line react/forbid-prop-types + // eslint-disable-next-line react/forbid-prop-types + channel: PropTypes.object, api: PropTypes.shape({ onStory: PropTypes.func.isRequired, }).isRequired, diff --git a/addons/backgrounds/package.json b/addons/backgrounds/package.json index 34320068a70b..ec1f288227b9 100644 --- a/addons/backgrounds/package.json +++ b/addons/backgrounds/package.json @@ -12,14 +12,14 @@ "bugs": { "url": "https://github.com/storybooks/storybook/issues" }, - "license": "MIT", - "author": "jbaxleyiii", - "main": "dist/index.js", - "jsnext:main": "src/index.js", "repository": { "type": "git", "url": "https://github.com/storybooks/storybook.git" }, + "license": "MIT", + "author": "jbaxleyiii", + "main": "dist/index.js", + "jsnext:main": "src/index.js", "scripts": { "prepare": "node ../../scripts/prepare.js" }, @@ -27,8 +27,10 @@ "@storybook/addons": "4.0.0-alpha.7", "@storybook/core-events": "4.0.0-alpha.7", "babel-runtime": "^6.26.0", + "emotion": "^9.1.3", "global": "^4.3.2", "prop-types": "^15.6.1", + "react-emotion": "^9.1.3", "util-deprecate": "^1.0.2" }, "devDependencies": { diff --git a/addons/backgrounds/src/BackgroundPanel.js b/addons/backgrounds/src/BackgroundPanel.js index 96bbfbbf4a4f..a20d7c8737bb 100644 --- a/addons/backgrounds/src/BackgroundPanel.js +++ b/addons/backgrounds/src/BackgroundPanel.js @@ -3,17 +3,39 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import addons from '@storybook/addons'; +import styled from 'react-emotion'; + import Events from './events'; import Swatch from './Swatch'; -const storybookIframe = 'storybook-preview-iframe'; +const Wrapper = styled('div')({ + padding: 20, +}); + +const Title = styled('h5')({ + fontSize: 16, +}); + +const Pre = styled('pre')({ + padding: '30px', + display: 'block', + background: 'rgba(19,19,19,0.9)', + color: 'rgba(255,255,255,0.95)', + marginTop: '15px', + lineHeight: '1.75em', +}); + +const List = styled('div')({ + display: 'inline-block', + padding: 15, +}); +const Item = styled('div')({ + display: 'inline-block', + padding: 5, +}); +const storybookIframe = 'storybook-preview-iframe'; const style = { - font: { - fontFamily: - "-apple-system,'.SFNSText-Regular', 'San Francisco', Roboto, 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif", - fontSize: '14px', - }, iframe: { transition: 'background 0.25s ease-in-out', }, @@ -37,27 +59,18 @@ storiesOf("First Component", module) `.trim(); const Instructions = () => ( -
    -
    Setup Instructions
    + + Setup Instructions

    Please add the background decorator definition to your story. The background decorate accepts an array of items, which should include a name for your color (preferably the css class name) and the corresponding color / image value.

    Below is an example of how to add the background decorator to your story definition.

    - 
    +    
           {instructionsHtml}
-    
    
-
    + + ); export default class BackgroundPanel extends Component { @@ -125,13 +138,13 @@ export default class BackgroundPanel extends Component { if (!hasDefault) backgrounds.push(defaultBackground); return ( -
    + {backgrounds.map(({ value, name }) => ( -
    + -
    + ))} -
    + ); } } diff --git a/addons/backgrounds/src/Swatch.js b/addons/backgrounds/src/Swatch.js index 8356c6397b7c..02a7a7c0b7e3 100644 --- a/addons/backgrounds/src/Swatch.js +++ b/addons/backgrounds/src/Swatch.js @@ -1,60 +1,56 @@ import React from 'react'; import PropTypes from 'prop-types'; -const style = { - swatches: { - backgroundColor: '#fff', - textAlign: 'center', - padding: '0', - border: '1px solid rgba(0,0,0,0.1)', - borderRadius: '4px', - cursor: 'pointer', - display: 'inline-block', - width: '175px', - verticalAlign: 'top', - wordWrap: 'break-word', - }, - swatch: { - height: '80px', - borderRadius: '4px 4px 0 0', - transition: 'opacity 0.25s ease-in-out', - borderBottom: '1px solid rgba(0,0,0,0.1)', - }, - listStyle: { listStyle: 'none' }, - pushBottom: { marginBottom: '10px' }, - pushLeft: { marginLeft: '10px' }, - soft: { paddingLeft: '10px', paddingRight: '10px' }, - hard: { padding: '0' }, - flush: { margin: '0' }, - font: { - fontFamily: - "-apple-system, '.SFNSText-Regular', 'San Francisco', Roboto, 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif", - fontSize: '14px', - wordBreak: 'break-word', - }, -}; +import styled from 'react-emotion'; + +const Button = styled('button')({ + listStyle: 'none', + backgroundColor: '#fff', + textAlign: 'center', + border: '1px solid rgba(0,0,0,0.1)', + borderRadius: 4, + cursor: 'pointer', + display: 'inline-block', + width: 175, + verticalAlign: 'top', + wordWrap: 'break-word', + padding: 0, +}); +const Block = styled('div')(({ bg }) => ({ + height: 80, + borderRadius: '4px 4px 0 0', + transition: 'opacity 0.25s ease-in-out', + borderBottom: '1px solid rgba(0,0,0,0.1)', + background: bg, + backgroundSize: 'cover', + backgroundPosition: 'center', +})); + +const Box = styled('div')({ + listStyle: 'none', + paddingLeft: 10, + paddingRight: 10, +}); + +const Name = styled('h4')({ + float: 'left', + fontWeight: 'bold', +}); +const Value = styled('h4')({ + float: 'right', + fontWeight: 'normal', +}); const Swatch = ({ name, value, setBackground }) => ( - + + + ); Swatch.propTypes = { name: PropTypes.string.isRequired, diff --git a/addons/backgrounds/src/__tests__/Swatch.js b/addons/backgrounds/src/__tests__/Swatch.js index c446b7ecfe12..688a037b4365 100644 --- a/addons/backgrounds/src/__tests__/Swatch.js +++ b/addons/backgrounds/src/__tests__/Swatch.js @@ -21,12 +21,9 @@ describe('Swatch', () => { }); it('should render the value of the swatch and set it to be the background', () => { - const markup = shallow( - - ).html(); + const result = shallow(); - expect(markup.match(/background:bar/gim)).toHaveLength(1); - expect(markup.match(/bar/gim)).toHaveLength(2); + expect(result).toMatchSnapshot(); }); it('should emit message on click', () => { diff --git a/addons/backgrounds/src/__tests__/__snapshots__/Swatch.js.snap b/addons/backgrounds/src/__tests__/__snapshots__/Swatch.js.snap new file mode 100644 index 000000000000..7fab23c3d330 --- /dev/null +++ b/addons/backgrounds/src/__tests__/__snapshots__/Swatch.js.snap @@ -0,0 +1,23 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Swatch should render the value of the swatch and set it to be the background 1`] = ` + + + + + foo + : + + + + bar + + + + +`; diff --git a/addons/events/package.json b/addons/events/package.json index 9a8891c7b9c9..4f56d7144039 100644 --- a/addons/events/package.json +++ b/addons/events/package.json @@ -8,13 +8,13 @@ "react", "storybook" ], - "license": "MIT", - "main": "dist/index.js", - "jsnext:main": "src/index.js", "repository": { "type": "git", "url": "git@github.com:storybooks/storybook.git" }, + "license": "MIT", + "main": "dist/index.js", + "jsnext:main": "src/index.js", "scripts": { "prepare": "node ../../scripts/prepare.js" }, @@ -22,8 +22,10 @@ "@storybook/addons": "4.0.0-alpha.7", "@storybook/core-events": "4.0.0-alpha.7", "babel-runtime": "^6.26.0", + "emotion": "^9.1.3", "format-json": "^1.0.3", "prop-types": "^15.6.1", + "react-emotion": "^9.1.3", "react-lifecycles-compat": "^3.0.4", "react-textarea-autosize": "^6.1.0", "util-deprecate": "^1.0.2" diff --git a/addons/events/src/components/Event.js b/addons/events/src/components/Event.js index cef3d73d3068..f47100af5082 100644 --- a/addons/events/src/components/Event.js +++ b/addons/events/src/components/Event.js @@ -1,41 +1,14 @@ import React, { Component } from 'react'; +import PropTypes from 'prop-types'; import { polyfill } from 'react-lifecycles-compat'; + +import styled from 'react-emotion'; import json from 'format-json'; + import Textarea from 'react-textarea-autosize'; -import PropTypes from 'prop-types'; -const styles = { - label: { - display: 'table-cell', - boxSizing: 'border-box', - verticalAlign: 'top', - paddingRight: '5px', - paddingTop: '7px', - textAlign: 'right', - width: '100px', - fontSize: '12px', - color: 'rgb(68, 68, 68)', - fontWeight: '600', - }, - button: { - display: 'table-cell', - textTransform: 'uppercase', - letterSpacing: '3.5px', - fontSize: 12, - fontWeight: 'bolder', - color: 'rgb(130, 130, 130)', - border: '1px solid rgb(193, 193, 193)', - textAlign: 'center', - borderRadius: 2, - padding: 5, - cursor: 'pointer', - paddingLeft: 8, - margin: '0 0 0 5px', - backgroundColor: 'inherit', - verticalAlign: 'top', - outline: 0, - }, - textArea: { +const StyledTextarea = styled(Textarea)( + { flex: '1 0 0', boxSizing: 'border-box', margin: '0 0 0 5px', @@ -50,28 +23,66 @@ const styles = { minHeight: '32px', resize: 'vertical', }, - item: { - display: 'flex', - padding: '5px', - alignItems: 'flex-start', - boxSizing: 'border-box', - width: '100%', - }, - hidden: { - display: 'none', - }, - failed: { - border: '1px solid #fadddd', - backgroundColor: '#fff5f5', - }, -}; + ({ shown }) => + shown + ? {} + : { + display: 'none', + }, + ({ failed }) => + failed + ? { + border: '1px solid #fadddd', + backgroundColor: '#fff5f5', + } + : {} +); + +const Button = styled('button')({ + display: 'table-cell', + textTransform: 'uppercase', + letterSpacing: '3.5px', + fontSize: 12, + fontWeight: 'bolder', + color: 'rgb(130, 130, 130)', + border: '1px solid rgb(193, 193, 193)', + textAlign: 'center', + borderRadius: 2, + padding: 5, + cursor: 'pointer', + paddingLeft: 8, + margin: '0 0 0 5px', + backgroundColor: 'inherit', + verticalAlign: 'top', + outline: 0, +}); + +const Label = styled('label')({ + display: 'table-cell', + boxSizing: 'border-box', + verticalAlign: 'top', + paddingRight: 5, + paddingTop: 7, + textAlign: 'right', + width: 100, + fontWeight: '600', +}); + +const Wrapper = styled('div')({ + display: 'flex', + padding: 5, + alignItems: 'flex-start', + boxSizing: 'border-box', + width: '100%', +}); class Item extends Component { static propTypes = { name: PropTypes.string.isRequired, title: PropTypes.string.isRequired, onEmit: PropTypes.func.isRequired, - payload: PropTypes.any, // eslint-disable-line react/forbid-prop-types, react/no-unused-prop-types + // eslint-disable-next-line react/forbid-prop-types, react/no-unused-prop-types + payload: PropTypes.any, }; static defaultProps = { @@ -136,45 +147,34 @@ class Item extends Component { const { title, name } = this.props; const { failed, isTextAreaShowed } = this.state; - const extraStyle = {}; - Object.assign(extraStyle, isTextAreaShowed ? {} : { ...styles.hidden }); - Object.assign(extraStyle, failed ? { ...styles.failed } : {}); - return ( -
    - - -