storybookjs · ndelangen · May 19, 2018 · May 10, 2018 · May 10, 2018 · May 10, 2018
diff --git 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
+      }]
+    ]
+  }
 }
@@ -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": "*",

@@ -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 {
       <Tabs
         tabs={[
           {
-            label: <span style={styles.violations}>{violations.length} Violations</span>,
+            label: <Violations>{violations.length} Violations</Violations>,
             panel: <Report passes={false} items={violations} empty="No a11y violations found." />,
           },
           {
-            label: <span style={styles.passes}>{passes.length} Passes</span>,
+            label: <Passes>{passes.length} Passes</Passes>,
             panel: <Report passes items={passes} empty="No a11y check passed" />,
           },
         ]}

@@ -1,31 +1,31 @@
 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;
 
   const rules = [...any, ...all, ...none];
 
   return (
-    <li style={styles.element}>
-      <span style={styles.target}>{element.target[0]}</span>
+    <Item>
+      <ItemTitle>{element.target[0]}</ItemTitle>
       <Rules rules={rules} passes={passes} />
-    </li>
+    </Item>
   );
 }
 Element.propTypes = {
@@ -38,13 +38,12 @@ Element.propTypes = {
 };
 
 /* eslint-disable react/no-array-index-key */
-function Elements({ elements, passes }) {
-  return (
-    <ol style={styles.element}>
-      {elements.map((element, index) => <Element passes={passes} element={element} key={index} />)}
-    </ol>
-  );
-}
+const Elements = ({ elements, passes }) => (
+  <ol>
+    {elements.map((element, index) => <Element passes={passes} element={element} key={index} />)}
+  </ol>
+);
+
 Elements.propTypes = {
   elements: PropTypes.arrayOf(
     PropTypes.shape({

@@ -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 (
-    <div style={styles.info}>
-      <p style={styles.help}>{item.help}</p>
-      <a style={styles.helpUrl} href={item.helpUrl} target="_blank">
+    <Wrapper>
+      <Help>{item.help}</Help>
+      <Link href={item.helpUrl} target="_blank">
         More info...
-      </a>
-    </div>
+      </Link>
+    </Wrapper>
   );
 }
 

@@ -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 (
-      <div style={styles.item}>
-        <button style={styles.headerBar} onClick={() => this.onToggle()}>
-          {item.description}
-        </button>
+      <Wrapper>
+        <HeaderBar onClick={this.onToggle}>{item.description}</HeaderBar>
         {open && <Info item={item} />}
         {open && <Elements elements={item.nodes} passes={passes} />}
         {open && <Tags tags={item.tags} />}
-      </div>
+      </Wrapper>
     );
   }
 }

@@ -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,