Merge branch 'master' into make-console-error-and-log-fail-tests-#2196

.github/stale.yml

@@ -4,11 +4,12 @@ daysUntilStale: 45
 daysUntilClose: 15
 # Issues with these labels will never be considered stale
 exemptLabels:
-  - bug
-  - 'help wanted'
+  - todo
+  - ready
   - 'in progress'
   - 'do not merge'
   - 'needs review'
+  - 'high priority'
 
 # Label to use when marking an issue as stale
 staleLabel: inactive
@@ -16,11 +17,12 @@ staleLabel: inactive
 markComment: >
   Hi everyone! Seems like there hasn't been much going on in this issue lately.
   If there are still questions, comments, or bugs, please feel free to continue
-  the discussion. We do try to do some housekeeping every once in a while so
-  inactive issues will get closed after 60 days. Thanks!
+  the discussion. Unfortunately, we don't have time to get to every issue. We
+  are always open to contributions so please send us a pull request if you would
+  like to help. Inactive issues will be closed after 60 days. Thanks!
 # Comment to post when closing a stale issue. Set to `false` to disable
 closeComment: >
-  Hey there, it's me again! I am going to help our maintainers close this issue
-  so they can focus on development efforts instead. If the issue mentioned is
+  Hey there, it's me again! I am going close this issue to help our maintainers 
+  focus on the current development roadmap instead. If the issue mentioned is
   still a concern, please open a new ticket and mention this old one. Cheers
   and thanks for using Storybook!

addons/a11y/.storybook/addons.js

@@ -0,0 +1 @@
+import '../register';

addons/a11y/.storybook/components/Button/component.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const styles = {
+  button: {
+    padding: '12px 6px',
+    fontSize: '12px',
+    lineHeight: '16px',
+    borderRadius: '5px',
+  },
+  ok: {
+    backgroundColor: '#028402',
+    color: '#ffffff',
+  },
+  wrong: {
+    color: '#ffffff',
+    backgroundColor: '#4caf50',
+  }
+}
+
+function Button({ label, content, disabled, contrast }) {
+  return (
+    <button
+      style={{
+        ...styles.button,
+        ...styles[contrast],
+      }}
+      disabled={disabled}
+    >
+      { content }
+    </button>
+  )
+}
+
+Button.propTypes = {
+  label: PropTypes.string,
+  content: PropTypes.string,
+  disabled: PropTypes.bool,
+  contrast: PropTypes.oneOf(['ok', 'wrong'])
+};
+
+Button.defaultProps = {
+  disabled: false,
+  contrast: 'ok',
+};
+
+export default Button;

addons/a11y/.storybook/components/Button/stories.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { checkA11y } from './../../../src';
+
+import Button from './component';
+
+import Faker from 'faker';
+
+const text = Faker.lorem.words();
+
+storiesOf('<Button />', module)
+  .addDecorator(checkA11y)
+  .add('Default', () => (
+    <Button />
+  ))
+  .add('Content', () => (
+    <Button content={text} />
+  ))
+  .add('Label', () => (
+    <Button label={text} />
+  ))
+  .add('Disabled', () => (
+    <Button
+      disabled
+      content={text}
+    />
+  ))
+  .add('Invalid contrast', () => (
+    <Button
+      contrast="wrong"
+      content={Faker.lorem.words()}
+    />
+  ));

addons/a11y/.storybook/components/Form/components/Input.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function Input({ id, value, type, placeholder }) {
+  return (
+    <input
+      id={id}
+      value={value}
+      placeholder={placeholder}
+      type={type}
+    />
+  );
+}
+
+Input.propTypes = {
+  type: PropTypes.oneOf(['text', 'password']),
+  id: PropTypes.string,
+  value: PropTypes.string,
+  placeholder: PropTypes.string,
+}
+
+export default Input;

addons/a11y/.storybook/components/Form/components/Label.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const styles = {
+  label: {
+    padding: '0 6px',
+  },
+}
+
+function Label({ id, content }) {
+  return (
+    <label
+      style={styles.label}
+      htmlFor={id}
+    >
+      { content }
+    </label>
+  )
+}
+
+Label.propTypes = {
+  content: PropTypes.string,
+  id: PropTypes.string,
+};
+
+export default Label;

addons/a11y/.storybook/components/Form/components/Row.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Label from './Label';
+import Input from './Input';
+
+function Row({ label, input }) {
+  return (
+    <div>
+      {label}
+      {input}
+    </div>
+  );
+}
+
+Row.propTypes = {
+  label: PropTypes.instanceOf(Label),
+  input: PropTypes.instanceOf(Input),
+}
+
+export default Row;

addons/a11y/.storybook/components/Form/components/index.js

@@ -0,0 +1,9 @@
+import Input from './Input';
+import Label from './Label';
+import Row from './Row';
+
+export {
+  Input,
+  Label,
+  Row,
+};

addons/a11y/.storybook/components/Form/stories.js

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import * as Form from './components';
+
+import { storiesOf } from '@storybook/react';
+import { checkA11y } from './../../../src';
+
+import Faker from 'faker';
+
+const label = Faker.lorem.word();
+const placeholder = Faker.lorem.word();
+
+storiesOf('<Form />', module)
+  .addDecorator(checkA11y)
+  .add('Without Label', () => (
+    <Form.Row
+      input={<Form.Input />}
+    />
+  ))
+  .add ('With label', () => (
+    <Form.Row
+      label={<Form.Label
+        content={label}
+        id="1"
+      />}
+      input={<Form.Input id="1" />}
+    />
+  ))
+  .add ('With placeholder', () => (
+    <Form.Row
+      input={<Form.Input
+        id="1"
+        placeholder={placeholder}
+      />}
+    />
+  ))

addons/a11y/.storybook/components/Image/component.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function Image({ src, alt, presentation }) {
+  return (
+    <img
+      src={src}
+      alt={alt}
+      role={presentation && 'presentation'}
+    />
+  );
+}
+
+Image.propTypes = {
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string,
+  presentation: PropTypes.bool,
+};
+
+export default Image;

addons/a11y/.storybook/components/Image/stories.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { checkA11y } from './../../../src';
+
+import Image from './component';
+
+import Faker from 'faker';
+
+const image = Faker.image.animals();
+const alt = Faker.lorem.words();
+
+storiesOf('<Image />', module)
+  .addDecorator(checkA11y)
+  .add('Without alt', () => (
+    <Image src={image} />
+  ))
+  .add('With alt', () => (
+    <Image
+      src={image}
+      alt={alt}
+    />
+  ))
+  .add('Presentation', () => (
+    <Image
+      presentation
+      src={image}
+    />
+  ));

addons/a11y/.storybook/components/Typography/components/Heading.js

@@ -0,0 +1,24 @@
+import React, { cloneElement } from 'react';
+import PropTypes from 'prop-types';
+
+const headings = {
+  1: (<h1 />),
+  2: (<h2 />),
+  3: (<h3 />),
+  4: (<h4 />),
+};
+
+function Heading({ level, children }) {
+  return cloneElement(headings[level], {}, children)
+}
+
+Heading.propTypes = {
+  level: PropTypes.oneOf([1, 2, 3, 4]),
+  children: PropTypes.any,
+};
+
+Heading.defaultProps = {
+  level: 1,
+};
+
+export default Heading;

addons/a11y/.storybook/components/Typography/components/Link.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function Link({ href, content }) {
+  return (
+    <a href={href}>
+      { content }
+    </a>
+  );
+}
+
+Link.propTypes = {
+  href: PropTypes.string,
+  content: PropTypes.string,
+};
+
+export default Link;

addons/a11y/.storybook/components/Typography/components/Text.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function Text({ children }) {
+  return (
+    <p>
+      {children}
+    </p>
+  );
+}
+
+Text.propTypes = {
+  children: PropTypes.any,
+};
+
+export default Text;

addons/a11y/.storybook/components/Typography/components/index.js

@@ -0,0 +1,9 @@
+import Heading from './Heading';
+import Link from './Link';
+import Text from './Text';
+
+export {
+  Heading,
+  Link,
+  Text,
+};

addons/a11y/.storybook/components/Typography/stories.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { checkA11y } from './../../../src';
+
+import * as Typography from './components';
+
+import Faker from 'faker';
+
+const href = "javascript:void 0";
+
+storiesOf('<Typography />', module)
+  .addDecorator(checkA11y)
+  .add('Correct', () => (
+    <div>
+      <Typography.Heading level={1}>
+        {Faker.lorem.sentence()}
+      </Typography.Heading>
+
+      <Typography.Text>
+        {Faker.lorem.paragraph()}
+      </Typography.Text>
+
+      <Typography.Link
+        content={`${Faker.lorem.words(4)}...`}
+        href={href}
+      />
+    </div>
+  ))
+  .add('Empty Heading', () => (
+    <Typography.Heading level={2} />
+  ))
+  .add('Empty Paragraph', () => (
+    <Typography.Text />
+  ))
+  .add('Empty Link', () => (
+    <Typography.Link href={href} />
+  ))
+  .add('Link without href', () => (
+    <Typography.Link content={`${Faker.lorem.words(4)}...`} />
+  ));

addons/a11y/.storybook/config.js

@@ -0,0 +1,9 @@
+import * as storybook from '@storybook/react';
+
+const req = require.context('./components/', true, /stories\.js$/)
+
+const loadStories = () =>
+  req.keys().forEach(req);
+
+
+storybook.configure(loadStories, module)

addons/a11y/README.md

@@ -0,0 +1,51 @@
+# storybook-addon-a11y
+
+This storybook addon can be helpfull to make your UI components more accessibile.
+
+![](docs/screenshot.png)
+
+## Getting started
+
+First, install the addon.
+
+```sh
+$ npm install -D @storybook/addon-a11y
+```
+
+Add this line to your `addons.js` file (create this file inside your storybook config directory if needed).
+
+```js
+import '@storybook/addon-a11y/register';
+```
+
+import the `'checkA11y'` decorator to check your stories for violations within your components.
+
+```js
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { checkA11y } from '@storybook/addon-a11y';
+
+storiesOf('button', module)
+  .addDecorator(checkA11y)
+  .add('Accessible', () => (
+    <button>
+      Accessible button
+    </button>
+  ))
+  .add('Inaccessible', () => (
+    <button style={{ backgroundColor: 'red', color: 'darkRed', }}>
+      Inaccessible button
+    </button>
+  ));
+```
+
+## Roadmap
+
+* Make UI accessibile
+* Add color blindness filters ([Example](http://lowvision.support/))
+* Show in story where violations are.
+* Make it configurable
+* Add more example tests
+* Add tests
+* Make CI integration possible

addons/a11y/manager.js

@@ -0,0 +1,3 @@
+const manager = require('./dist/register');
+
+manager.init();

addons/a11y/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@storybook/addon-a11y",
+  "version": "3.2.15",
+  "description": "a11y addon for storybook",
+  "keywords": [
+    "a11y",
+    "accessibility",
+    "addon",
+    "storybook",
+    "valid",
+    "verify"
+  ],
+  "homepage": "https://github.com/storybooks/storybook#readme",
+  "bugs": {
+    "url": "https://github.com/storybooks/storybook/issues"
+  },
+  "license": "MIT",
+  "main": "dist/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/storybooks/storybook.git"
+  },
+  "scripts": {
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@storybook/addons": "^3.2.15",
+    "@storybook/components": "^3.2.15",    
+    "axe-core": "^2.0.7",
+    "prop-types": "^15.6.0"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  }
+}

addons/a11y/register.js

@@ -0,0 +1 @@
+require('./manager');

addons/a11y/src/A11yManager.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import WrapStory from './components/WrapStory';
+
+// Run all a11y checks inside
+class A11yManager {
+  wrapStory(channel, storyFn, context) {
+    const props = { context, storyFn, channel };
+
+    return <WrapStory {...props} />;
+  }
+}
+
+export default A11yManager;

addons/a11y/src/components/Panel.js

@@ -0,0 +1,63 @@
+import React, { Component } from 'react';
+import addons from '@storybook/addons';
+
+import Tabs from './Tabs';
+import Report from './Report';
+
+const styles = {
+  passes: {
+    color: '#2ecc71',
+  },
+  violations: {
+    color: '#e74c3c',
+  },
+};
+
+class Panel extends Component {
+  constructor(props, ...args) {
+    super(props, ...args);
+    this.state = {
+      passes: [],
+      violations: [],
+    };
+    this.channel = addons.getChannel();
+
+    this.onUpdate = this.onUpdate.bind(this);
+  }
+
+  componentDidMount() {
+    this.channel.on('addon:a11y:check', this.onUpdate);
+  }
+
+  componentWillUnmount() {
+    this.channel.removeListener('addon:a11y:check', this.onUpdate);
+  }
+
+  onUpdate({ passes, violations }) {
+    this.setState({
+      passes,
+      violations,
+    });
+  }
+
+  render() {
+    const { passes, violations } = this.state;
+
+    return (
+      <Tabs
+        tabs={[
+          {
+            label: <span style={styles.violations}>Violations</span>,
+            panel: <Report passes={false} items={violations} empty="No a11y violations found." />,
+          },
+          {
+            label: <span style={styles.passes}>Passes</span>,
+            panel: <Report passes items={passes} empty="No a11y check passed" />,
+          },
+        ]}
+      />
+    );
+  }
+}
+
+export default Panel;

addons/a11y/src/components/Report/Elements.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+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',
+  },
+};
+
+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>
+      <Rules rules={rules} passes={passes} />
+    </li>
+  );
+}
+Element.propTypes = {
+  element: PropTypes.shape({
+    any: PropTypes.array.isRequired,
+    all: PropTypes.array.isRequired,
+    none: PropTypes.array.isRequired,
+  }).isRequired,
+  passes: PropTypes.bool.isRequired,
+};
+
+/* 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>
+  );
+}
+Elements.propTypes = {
+  elements: PropTypes.arrayOf(
+    PropTypes.shape({
+      any: PropTypes.array.isRequired,
+      all: PropTypes.array.isRequired,
+      none: PropTypes.array.isRequired,
+    })
+  ).isRequired,
+  passes: PropTypes.bool.isRequired,
+};
+
+export default Elements;

addons/a11y/src/components/Report/Info.js

@@ -0,0 +1,39 @@
+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',
+  },
+};
+
+function Info({ item }) {
+  return (
+    <div style={styles.info}>
+      <p style={styles.help}>{item.help}</p>
+      <a style={styles.helpUrl} href={item.helpUrl} target="_blank">
+        More info...
+      </a>
+    </div>
+  );
+}
+
+Info.propTypes = {
+  item: PropTypes.shape({
+    help: PropTypes.node,
+    helpUrl: PropTypes.string,
+  }).isRequired,
+};
+
+export default Info;

addons/a11y/src/components/Report/Item.js

@@ -0,0 +1,63 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+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',
+  },
+};
+
+class Item extends Component {
+  static propTypes = {
+    item: PropTypes.shape({
+      description: PropTypes.string,
+      nodes: PropTypes.array,
+      tags: PropTypes.array,
+    }).isRequired,
+    passes: PropTypes.bool.isRequired,
+  };
+
+  constructor() {
+    super();
+
+    this.state = {
+      open: false,
+    };
+  }
+
+  onToggle = () =>
+    this.setState(prevState => ({
+      open: !prevState.open,
+    }));
+
+  render() {
+    const { item, passes } = this.props;
+    const { open } = this.state;
+
+    return (
+      <div style={styles.item}>
+        <button style={styles.headerBar} onClick={() => this.onToggle()}>
+          {item.description}
+        </button>
+        {open && <Info item={item} />}
+        {open && <Elements elements={item.nodes} passes={passes} />}
+        {open && <Tags tags={item.tags} />}
+      </div>
+    );
+  }
+}
+
+export default Item;

addons/a11y/src/components/Report/Rules.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const impactColors = {
+  minor: '#f1c40f',
+  moderate: '#e67e22',
+  serious: '#e74c3c',
+  critical: '#c0392b',
+  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',
+  },
+};
+
+function Rule({ rule, passes }) {
+  const color = passes ? impactColors.success : impactColors[rule.impact];
+
+  return (
+    <div style={styles.rule}>
+      <div
+        style={{
+          ...styles.status,
+          backgroundColor: color,
+        }}
+      >
+        {passes ? '✔' : '✘'}
+      </div>
+      <span style={styles.message}>{rule.message}</span>
+    </div>
+  );
+}
+
+Rule.propTypes = {
+  rule: PropTypes.shape({
+    message: PropTypes.node,
+  }).isRequired,
+  passes: PropTypes.bool.isRequired,
+};
+
+/* eslint-disable react/no-array-index-key */
+function Rules({ rules, passes }) {
+  return (
+    <div style={styles.rules}>
+      {rules.map((rule, index) => <Rule passes={passes} rule={rule} key={index} />)}
+    </div>
+  );
+}
+Rules.propTypes = {
+  rules: PropTypes.arrayOf(
+    PropTypes.shape({
+      message: PropTypes.node,
+    })
+  ).isRequired,
+  passes: PropTypes.bool.isRequired,
+};
+
+export default Rules;

addons/a11y/src/components/Report/Tags.js

@@ -0,0 +1,35 @@
+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',
+  },
+};
+
+function Tags({ tags }) {
+  return (
+    <div style={styles.tags}>
+      {tags.map(tag => (
+        <div key={tag} style={styles.tag}>
+          {tag}
+        </div>
+      ))}
+    </div>
+  );
+}
+Tags.propTypes = {
+  tags: PropTypes.arrayOf(PropTypes.node).isRequired,
+};
+
+export default Tags;

addons/a11y/src/components/Report/index.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Item from './Item';
+
+const styles = {
+  container: {
+    fontSize: '12px',
+  },
+  empty: {
+    fontSize: '11px',
+    padding: '20px 12px',
+    width: '100%',
+    display: 'block',
+    textAlign: 'center',
+    textTransform: 'uppercase',
+  },
+};
+
+function Report({ items, empty, passes }) {
+  if (items.length) {
+    return (
+      <div style={styles.container}>
+        {items.map(item => <Item passes={passes} item={item} key={item.id} />)}
+      </div>
+    );
+  }
+
+  return <span style={styles.empty}>{empty}</span>;
+}
+
+Report.propTypes = {
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      description: PropTypes.string,
+      nodes: PropTypes.array,
+      tags: PropTypes.array,
+    })
+  ).isRequired,
+  empty: PropTypes.string.isRequired,
+  passes: PropTypes.bool.isRequired,
+};
+
+export default Report;

addons/a11y/src/components/Tabs.js

@@ -0,0 +1,105 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { baseFonts } from '@storybook/components';
+
+const styles = {
+  container: {
+    width: '100%',
+    ...baseFonts,
+  },
+  tabs: {
+    borderBottom: '1px solid rgb(234, 234, 234)',
+    flexWrap: 'wrap',
+    display: 'flex',
+  },
+  tab: {
+    color: 'rgb(68, 68, 68)',
+    fontSize: '11px',
+    textDecoration: 'none',
+    textTransform: 'uppercase',
+    padding: '10px 15px',
+    letterSpacing: '1px',
+    cursor: 'pointer',
+    fontWeight: 500,
+    opacity: 0.7,
+    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);
+  }
+
+  onToggle(index) {
+    this.setState({
+      active: index,
+    });
+  }
+
+  renderPanel() {
+    const { tabs } = this.props;
+    const { active } = this.state;
+
+    return <div style={styles.panel}>{tabs[active].panel}</div>;
+  }
+
+  renderTabs() {
+    const { tabs } = this.props;
+    const { active } = this.state;
+
+    /* eslint-disable react/no-array-index-key */
+    return (
+      <div style={styles.tabs}>
+        {tabs.map((tab, index) => (
+          <button
+            key={index}
+            style={tabStyle(active === index)}
+            onClick={() => this.onToggle(index)}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <div style={styles.container}>
+        {this.renderTabs()}
+        {this.renderPanel()}
+      </div>
+    );
+  }
+}
+
+Tabs.propTypes = {
+  tabs: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.node,
+      panel: PropTypes.node,
+    })
+  ).isRequired,
+};
+
+export default Tabs;

addons/a11y/src/components/WrapStory.js

@@ -0,0 +1,37 @@
+import { Component } from 'react';
+import { findDOMNode } from 'react-dom';
+import PropTypes from 'prop-types';
+import axe from 'axe-core';
+
+class WrapStory extends Component {
+  static propTypes = {
+    context: PropTypes.shape({}),
+    storyFn: PropTypes.func,
+    channel: PropTypes.shape({}),
+  };
+  static defaultProps = {
+    context: {},
+    storyFn: () => {},
+    channel: {},
+  };
+
+  /* eslint-disable react/no-find-dom-node */
+  componentDidMount() {
+    const { channel } = this.props;
+    const wrapper = findDOMNode(this);
+
+    if (wrapper !== null) {
+      axe.a11yCheck(wrapper, {}, results => {
+        channel.emit('addon:a11y:check', results);
+      });
+    }
+  }
+
+  render() {
+    const { storyFn, context } = this.props;
+
+    return storyFn(context);
+  }
+}
+
+export default WrapStory;

addons/a11y/src/index.js

@@ -0,0 +1,13 @@
+import addons from '@storybook/addons';
+
+import A11yManager from './A11yManager';
+import * as shared from './shared';
+
+const manager = new A11yManager();
+
+function checkA11y(storyFn, context) {
+  const channel = addons.getChannel();
+  return manager.wrapStory(channel, storyFn, context);
+}
+
+export { checkA11y, shared };

addons/a11y/src/register.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import addons from '@storybook/addons';
+
+import Panel from './components/Panel';
+import { ADDON_ID, PANEL_ID } from './shared';
+
+function init() {
+  addons.register(ADDON_ID, () => {
+    addons.addPanel(PANEL_ID, {
+      title: 'Accessibility',
+      render() {
+        return <Panel />;
+      },
+    });
+  });
+}
+
+export { init };

addons/a11y/src/shared/index.js

@@ -0,0 +1,6 @@
+// addons, panels and events get unique names using a prefix
+const ADDON_ID = '@storybook/addon-a11y';
+const PANEL_ID = `${ADDON_ID}/panel`;
+const EVENT_ID = `${ADDON_ID}/event`;
+
+export { ADDON_ID, PANEL_ID, EVENT_ID };

addons/actions/package.json

@@ -28,12 +28,6 @@
     "react-inspector": "^2.2.1",
     "uuid": "^3.1.0"
   },
-  "devDependencies": {
-    "react": "^16.1.0",
-    "react-dom": "^16.1.0",
-    "react-test-renderer": "^16.1.0",
-    "shelljs": "^0.7.8"
-  },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"

addons/comments/package.json

@@ -33,17 +33,13 @@
     "moment": "^2.19.2",
     "prop-types": "^15.6.0",
     "react-render-html": "^0.6.0",
-    "react-textarea-autosize": "^5.2.0"
+    "react-textarea-autosize": "^5.2.1"
   },
   "devDependencies": {
     "@kadira/storybook-database-cloud": "*",
     "@kadira/storybook-deployer": "*",
     "@storybook/addon-actions": "^3.2.15",
-    "@storybook/react": "^3.2.15",
-    "react": "^16.1.0",
-    "react-dom": "^16.1.0",
-    "react-test-renderer": "^16.1.0",
-    "shelljs": "^0.7.8"
+    "@storybook/react": "^3.2.15"
   },
   "peerDependencies": {
     "react": "*"

addons/events/package.json

@@ -24,13 +24,9 @@
     "babel-runtime": "^6.26.0",
     "format-json": "^1.0.3",
     "prop-types": "^15.6.0",
-    "react-textarea-autosize": "^5.2.0",
+    "react-textarea-autosize": "^5.2.1",
     "uuid": "^3.1.0"
   },
-  "devDependencies": {
-    "react": "^16.1.0",
-    "react-dom": "^16.1.0"
-  },
   "peerDependencies": {
     "react": "*"
   }

addons/graphql/package.json

@@ -26,11 +26,6 @@
     "graphql": "^0.11.7",
     "prop-types": "^15.6.0"
   },
-  "devDependencies": {
-    "react": "^16.1.0",
-    "react-dom": "^16.1.0",
-    "shelljs": "^0.7.8"
-  },
   "peerDependencies": {
     "react": "*"
   }

addons/info/package.json

@@ -23,12 +23,8 @@
     "react-addons-create-fragment": "^15.5.3",
     "util-deprecate": "^1.0.2"
   },
-  "devDependencies": {
-    "react": "^16.1.0",
-    "react-dom": "^16.1.0",
-    "react-test-renderer": "^16.1.0"
-  },
   "peerDependencies": {
-    "react": "*"
+    "react": "*",
+    "react-dom": "*"
   }
 }

addons/knobs/package.json

@@ -23,16 +23,14 @@
     "moment": "^2.19.2",
     "prop-types": "^15.6.0",
     "react-color": "^2.11.4",
-    "react-datetime": "^2.10.3",
-    "react-textarea-autosize": "^5.2.0",
+    "react-datetime": "^2.11.0",
+    "react-textarea-autosize": "^5.2.1",
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@types/node": "^8.0.51",
-    "@types/react": "^16.0.22",
+    "@types/node": "^8.0.52",
+    "@types/react": "^16.0.23",
     "raw-loader": "^0.5.1",
-    "react": "^16.1.0",
-    "react-dom": "^16.1.0",
     "style-loader": "^0.19.0",
     "typescript": "^2.6.1",
     "typescript-definition-tester": "^0.0.5",

addons/links/package.json

@@ -23,11 +23,6 @@
   "dependencies": {
     "@storybook/addons": "^3.2.15"
   },
-  "devDependencies": {
-    "react": "^16.1.0",
-    "react-dom": "^16.1.0",
-    "shelljs": "^0.7.8"
-  },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"

addons/notes/package.json

@@ -24,11 +24,6 @@
     "prop-types": "^15.6.0",
     "util-deprecate": "^1.0.2"
   },
-  "devDependencies": {
-    "react": "^16.1.0",
-    "react-addons-test-utils": "^15.5.1",
-    "react-dom": "^16.1.0"
-  },
   "peerDependencies": {
     "react": "*"
   },

addons/options/package.json

@@ -22,12 +22,6 @@
   "dependencies": {
     "@storybook/addons": "^3.2.15"
   },
-  "devDependencies": {
-    "react": "^16.1.0",
-    "react-dom": "^16.1.0",
-    "react-test-renderer": "^16.1.0",
-    "shelljs": "^0.7.8"
-  },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"

addons/storyshots/package.json

@@ -22,13 +22,7 @@
   "devDependencies": {
     "@storybook/addons": "^3.2.15",
     "@storybook/channels": "^3.2.15",
-    "@storybook/react": "^3.2.15",
-    "babel-cli": "^6.26.0",
-    "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-env": "^1.6.0",
-    "babel-preset-react": "^6.24.1",
-    "react": "^16.1.0",
-    "react-dom": "^16.1.0"
+    "@storybook/react": "^3.2.15"
   },
   "peerDependencies": {
     "@storybook/addons": "^3.2.15",

app/react-native/package.json

@@ -71,9 +71,6 @@
     "ws": "^3.3.1"
   },
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "react": "^16.1.0",
-    "react-dom": "^16.1.0",
     "react-native": "^0.50.3"
   },
   "peerDependencies": {

app/react-native/src/preview/components/OnDeviceUI/index.js

@@ -27,6 +27,8 @@ const isDeviceInPortrait = () => {
 const openMenuImage = require('./menu_open.png');
 const closeMenuImage = require('./menu_close.png');
 
+const DRAWER_WIDTH = 250;
+
 export default class OnDeviceUI extends Component {
   constructor(...args) {
     super(...args);
@@ -36,7 +38,6 @@ export default class OnDeviceUI extends Component {
       isMenuOpen: false,
       selectedKind: null,
       selectedStory: null,
-      menuWidth: Dimensions.get('screen').width / 2,
       isPortrait: isDeviceInPortrait(),
     };
   }
@@ -58,7 +59,6 @@ export default class OnDeviceUI extends Component {
   handleDeviceRotation = () => {
     this.setState({
       isPortrait: isDeviceInPortrait(),
-      menuWidth: Dimensions.get('screen').width / 2,
     });
   };
 
@@ -86,7 +86,7 @@ export default class OnDeviceUI extends Component {
 
   render() {
     const { stories, events, url } = this.props;
-    const { isPortrait, menuAnimation, selectedKind, selectedStory, menuWidth } = this.state;
+    const { isPortrait, menuAnimation, selectedKind, selectedStory } = this.state;
 
     const iPhoneXStyles = ifIphoneX(
       isPortrait
@@ -106,7 +106,7 @@ export default class OnDeviceUI extends Component {
           {
             translateX: menuAnimation.interpolate({
               inputRange: [0, 1],
-              outputRange: [menuWidth * -1, 0],
+              outputRange: [-DRAWER_WIDTH - 30, 0],
             }),
           },
         ],
@@ -169,6 +169,7 @@ export default class OnDeviceUI extends Component {
           <StoryListView
             stories={stories}
             events={events}
+            width={DRAWER_WIDTH}
             selectedKind={selectedKind}
             selectedStory={selectedStory}
           />

app/react-native/src/preview/components/StoryListView/index.js

@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { ListView, View, Text, TouchableOpacity } from 'react-native';
-import { MinMaxView } from 'react-native-compat';
 import style from './style';
 
 const SectionHeader = ({ title, selected }) => (
@@ -86,25 +85,23 @@ export default class StoryListView extends Component {
 
   render() {
     return (
-      <MinMaxView maxWidth={250}>
-        <ListView
-          style={style.list}
-          renderRow={item => (
-            <ListItem
-              title={item.name}
-              selected={
-                item.kind === this.props.selectedKind && item.name === this.props.selectedStory
-              }
-              onPress={() => this.changeStory(item.kind, item.name)}
-            />
-          )}
-          renderSectionHeader={(sectionData, sectionName) => (
-            <SectionHeader title={sectionName} selected={sectionName === this.props.selectedKind} />
-          )}
-          dataSource={this.state.dataSource}
-          stickySectionHeadersEnabled={false}
-        />
-      </MinMaxView>
+      <ListView
+        style={[style.list, { width: this.props.width }]}
+        renderRow={item => (
+          <ListItem
+            title={item.name}
+            selected={
+              item.kind === this.props.selectedKind && item.name === this.props.selectedStory
+            }
+            onPress={() => this.changeStory(item.kind, item.name)}
+          />
+        )}
+        renderSectionHeader={(sectionData, sectionName) => (
+          <SectionHeader title={sectionName} selected={sectionName === this.props.selectedKind} />
+        )}
+        dataSource={this.state.dataSource}
+        stickySectionHeadersEnabled={false}
+      />
     );
   }
 }
@@ -123,6 +120,7 @@ StoryListView.propTypes = {
   }).isRequired,
   selectedKind: PropTypes.string,
   selectedStory: PropTypes.string,
+  width: PropTypes.number.isRequired,
 };
 
 StoryListView.defaultProps = {

app/react/package.json

@@ -75,10 +75,7 @@
     "webpack-hot-middleware": "^2.20.0"
   },
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "nodemon": "^1.12.1",
-    "react": "^16.1.0",
-    "react-dom": "^16.1.0"
+    "nodemon": "^1.12.1"
   },
   "peerDependencies": {
     "react": ">=15.0.0 || ^16.0.0",

app/vue/package.json

@@ -76,7 +76,6 @@
     "webpack-hot-middleware": "^2.20.0"
   },
   "devDependencies": {
-    "babel-cli": "^6.26.0",
     "nodemon": "^1.12.1",
     "vue": "^2.5.3",
     "vue-loader": "^13.5.0",

docs/package.json

@@ -30,15 +30,15 @@
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
     "bootstrap": "^3.3.7",
-    "gatsby": "^1.9.108",
-    "gatsby-link": "^1.6.26",
-    "gatsby-plugin-sharp": "^1.6.20",
+    "gatsby": "^1.9.112",
+    "gatsby-link": "^1.6.28",
+    "gatsby-plugin-sharp": "^1.6.21",
     "gatsby-remark-autolink-headers": "^1.4.8",
-    "gatsby-remark-copy-linked-files": "^1.5.20",
-    "gatsby-remark-images": "^1.5.31",
+    "gatsby-remark-copy-linked-files": "^1.5.21",
+    "gatsby-remark-images": "^1.5.32",
     "gatsby-remark-smartypants": "^1.4.8",
     "gatsby-source-filesystem": "^1.5.8",
-    "gatsby-transformer-remark": "^1.7.20",
+    "gatsby-transformer-remark": "^1.7.21",
     "gh-pages": "^1.0.0",
     "global": "^4.3.2",
     "highlight.js": "^9.12.0",

docs/yarn.lock

@@ -4173,24 +4173,24 @@ gatsby-cli@^1.1.20:
     yargs "^8.0.2"
     yurnalist "^0.2.1"
 
-gatsby-link@^1.6.26:
-  version "1.6.26"
-  resolved "https://registry.yarnpkg.com/gatsby-link/-/gatsby-link-1.6.26.tgz#5aa7eb2652c6669b49efdf2c01ee588a2fb2f362"
+gatsby-link@^1.6.28:
+  version "1.6.28"
+  resolved "https://registry.yarnpkg.com/gatsby-link/-/gatsby-link-1.6.28.tgz#12b799aa12663ae22f626195ab258e0ee5dddc9c"
   dependencies:
     babel-runtime "^6.26.0"
     prop-types "^15.5.8"
     ric "^1.3.0"
 
-gatsby-module-loader@^1.0.7:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/gatsby-module-loader/-/gatsby-module-loader-1.0.7.tgz#c103ca41765d21453cc104e77190e491210abc75"
+gatsby-module-loader@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/gatsby-module-loader/-/gatsby-module-loader-1.0.8.tgz#426800c29b9b67cae2b6181317cd300d823e7428"
   dependencies:
     babel-runtime "^6.26.0"
     loader-utils "^0.2.16"
 
-gatsby-plugin-sharp@^1.6.20:
-  version "1.6.20"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-sharp/-/gatsby-plugin-sharp-1.6.20.tgz#5bd14a0b840485ccf71964c83832cf749827bd67"
+gatsby-plugin-sharp@^1.6.21:
+  version "1.6.21"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-sharp/-/gatsby-plugin-sharp-1.6.21.tgz#990e856153b65be28316c23ab29b4e78dd5634de"
   dependencies:
     async "^2.1.2"
     babel-runtime "^6.26.0"
@@ -4205,9 +4205,9 @@ gatsby-plugin-sharp@^1.6.20:
     sharp "^0.17.3"
     svgo "^0.7.2"
 
-gatsby-react-router-scroll@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/gatsby-react-router-scroll/-/gatsby-react-router-scroll-1.0.3.tgz#b4b7850850d078b1816a15abf332c93b4d42e3f1"
+gatsby-react-router-scroll@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/gatsby-react-router-scroll/-/gatsby-react-router-scroll-1.0.4.tgz#01f953406f5bca5df03f7d345077b159d7702f3c"
   dependencies:
     babel-runtime "^6.26.0"
     scroll-behavior "^0.9.1"
@@ -4222,9 +4222,9 @@ gatsby-remark-autolink-headers@^1.4.8:
     mdast-util-to-string "^1.0.2"
     unist-util-visit "^1.1.1"
 
-gatsby-remark-copy-linked-files@^1.5.20:
-  version "1.5.20"
-  resolved "https://registry.yarnpkg.com/gatsby-remark-copy-linked-files/-/gatsby-remark-copy-linked-files-1.5.20.tgz#ebd53a07738b67d13d75cdecea3d8fdde3914c79"
+gatsby-remark-copy-linked-files@^1.5.21:
+  version "1.5.21"
+  resolved "https://registry.yarnpkg.com/gatsby-remark-copy-linked-files/-/gatsby-remark-copy-linked-files-1.5.21.tgz#5933aef21cc905320090464efcd3a7d756c25e3e"
   dependencies:
     babel-runtime "^6.26.0"
     cheerio "^1.0.0-rc.2"
@@ -4235,13 +4235,13 @@ gatsby-remark-copy-linked-files@^1.5.20:
     path-is-inside "^1.0.2"
     unist-util-visit "^1.1.1"
 
-gatsby-remark-images@^1.5.31:
-  version "1.5.31"
-  resolved "https://registry.yarnpkg.com/gatsby-remark-images/-/gatsby-remark-images-1.5.31.tgz#96839f7163973916991ac43708198c787f6b680b"
+gatsby-remark-images@^1.5.32:
+  version "1.5.32"
+  resolved "https://registry.yarnpkg.com/gatsby-remark-images/-/gatsby-remark-images-1.5.32.tgz#1e6bbc5991343f082f224869ffb14abb4a02c6ba"
   dependencies:
     babel-runtime "^6.26.0"
     cheerio "^1.0.0-rc.2"
-    gatsby-plugin-sharp "^1.6.20"
+    gatsby-plugin-sharp "^1.6.21"
     is-relative-url "^2.0.0"
     lodash "^4.17.4"
     slash "^1.0.0"
@@ -4272,9 +4272,9 @@ gatsby-source-filesystem@^1.5.8:
     slash "^1.0.0"
     valid-url "^1.0.9"
 
-gatsby-transformer-remark@^1.7.20:
-  version "1.7.20"
-  resolved "https://registry.yarnpkg.com/gatsby-transformer-remark/-/gatsby-transformer-remark-1.7.20.tgz#bb53920a02930d459387b002c083297de554512a"
+gatsby-transformer-remark@^1.7.21:
+  version "1.7.21"
+  resolved "https://registry.yarnpkg.com/gatsby-transformer-remark/-/gatsby-transformer-remark-1.7.21.tgz#07e9cdec46197ed834ae211b74c9fc2c88cf479a"
   dependencies:
     babel-runtime "^6.26.0"
     bluebird "^3.5.0"
@@ -4294,9 +4294,9 @@ gatsby-transformer-remark@^1.7.20:
     unist-util-select "^1.5.0"
     unist-util-visit "^1.1.1"
 
-gatsby@^1.9.108:
-  version "1.9.108"
-  resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-1.9.108.tgz#82c89f5d5c03a7f0c57b787ee3eba416008518b4"
+gatsby@^1.9.112:
+  version "1.9.112"
+  resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-1.9.112.tgz#30beff04a715baeed58f401a428f4a33a3bebed3"
   dependencies:
     async "^2.1.2"
     babel-code-frame "^6.22.0"
@@ -4336,8 +4336,8 @@ gatsby@^1.9.108:
     fs-extra "^4.0.1"
     gatsby-1-config-css-modules "^1.0.6"
     gatsby-cli "^1.1.20"
-    gatsby-module-loader "^1.0.7"
-    gatsby-react-router-scroll "^1.0.3"
+    gatsby-module-loader "^1.0.8"
+    gatsby-react-router-scroll "^1.0.4"
     glob "^7.1.1"
     graphql "^0.11.7"
     graphql-relay "^0.5.1"

examples/cra-kitchen-sink/.storybook/addons.js

@@ -5,3 +5,4 @@ import '@storybook/addon-notes/register';
 import '@storybook/addon-options/register';
 import '@storybook/addon-knobs/register';
 import '@storybook/addon-backgrounds/register';
+import '@storybook/addon-a11y/register';

examples/cra-kitchen-sink/package.json

@@ -21,6 +21,7 @@
     "uuid": "^3.1.0"
   },
   "devDependencies": {
+    "@storybook/addon-a11y": "^3.2.15",
     "@storybook/addon-actions": "^3.2.11",
     "@storybook/addon-backgrounds": "^3.2.14",
     "@storybook/addon-centered": "^3.2.10",

examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap

@@ -20,6 +20,7 @@ exports[`Storyshots Addon Backgrounds story 1 1`] = `
   <button
     disabled={false}
     onClick={[Function]}
+    style={Object {}}
   >
     You should be able to switch backgrounds for this story
   </button>
@@ -46,6 +47,7 @@ exports[`Storyshots Addon Backgrounds story 2 1`] = `
   <button
     disabled={false}
     onClick={[Function]}
+    style={Object {}}
   >
     This one too!
   </button>
@@ -65,6 +67,7 @@ exports[`Storyshots Addon Info.Decorator Use Info as story decorator 1`] = `
     <button
       disabled={false}
       onClick={[Function]}
+      style={Object {}}
     >
       Button
     </button>
@@ -411,6 +414,34 @@ exports[`Storyshots Addon Info.Decorator Use Info as story decorator 1`] = `
                   </td>
                   <td />
                 </tr>
+                <tr>
+                  <td>
+                    style
+                  </td>
+                  <td>
+                    other
+                  </td>
+                  <td>
+                    no
+                  </td>
+                  <td>
+                    <span>
+                      {
+                      <span
+                        style={
+                          Object {
+                            "color": "#666",
+                          }
+                        }
+                      >
+                        {
+                        }
+                      </span>
+                      }
+                    </span>
+                  </td>
+                  <td />
+                </tr>
               </tbody>
             </table>
           </div>
@@ -773,6 +804,7 @@ exports[`Storyshots Addon Info.Markdown Displays Markdown in description 1`] = `
     <button
       disabled={false}
       onClick={[Function]}
+      style={Object {}}
     >
       Button
     </button>
@@ -1198,6 +1230,34 @@ exports[`Storyshots Addon Info.Markdown Displays Markdown in description 1`] = `
                   </td>
                   <td />
                 </tr>
+                <tr>
+                  <td>
+                    style
+                  </td>
+                  <td>
+                    other
+                  </td>
+                  <td>
+                    no
+                  </td>
+                  <td>
+                    <span>
+                      {
+                      <span
+                        style={
+                          Object {
+                            "color": "#666",
+                          }
+                        }
+                      >
+                        {
+                        }
+                      </span>
+                      }
+                    </span>
+                  </td>
+                  <td />
+                </tr>
               </tbody>
             </table>
           </div>
@@ -1221,6 +1281,7 @@ exports[`Storyshots Addon Info.Options.header Shows or hides Info Addon header 1
     <button
       disabled={false}
       onClick={[Function]}
+      style={Object {}}
     >
       Button
     </button>
@@ -1534,6 +1595,34 @@ exports[`Storyshots Addon Info.Options.header Shows or hides Info Addon header 1
                   </td>
                   <td />
                 </tr>
+                <tr>
+                  <td>
+                    style
+                  </td>
+                  <td>
+                    other
+                  </td>
+                  <td>
+                    no
+                  </td>
+                  <td>
+                    <span>
+                      {
+                      <span
+                        style={
+                          Object {
+                            "color": "#666",
+                          }
+                        }
+                      >
+                        {
+                        }
+                      </span>
+                      }
+                    </span>
+                  </td>
+                  <td />
+                </tr>
               </tbody>
             </table>
           </div>
@@ -1608,6 +1697,7 @@ exports[`Storyshots Addon Info.Options.inline Inlines component inside story 1`]
     <button
       disabled={false}
       onClick={[Function]}
+      style={Object {}}
     >
       Button
     </button>
@@ -1861,6 +1951,34 @@ exports[`Storyshots Addon Info.Options.inline Inlines component inside story 1`]
                 </td>
                 <td />
               </tr>
+              <tr>
+                <td>
+                  style
+                </td>
+                <td>
+                  other
+                </td>
+                <td>
+                  no
+                </td>
+                <td>
+                  <span>
+                    {
+                    <span
+                      style={
+                        Object {
+                          "color": "#666",
+                        }
+                      }
+                    >
+                      {
+                      }
+                    </span>
+                    }
+                  </span>
+                </td>
+                <td />
+              </tr>
             </tbody>
           </table>
         </div>
@@ -1883,6 +2001,7 @@ exports[`Storyshots Addon Info.Options.propTables Shows additional component pro
     <button
       disabled={false}
       onClick={[Function]}
+      style={Object {}}
     >
       Button
     </button>
@@ -2229,6 +2348,34 @@ exports[`Storyshots Addon Info.Options.propTables Shows additional component pro
                   </td>
                   <td />
                 </tr>
+                <tr>
+                  <td>
+                    style
+                  </td>
+                  <td>
+                    other
+                  </td>
+                  <td>
+                    no
+                  </td>
+                  <td>
+                    <span>
+                      {
+                      <span
+                        style={
+                          Object {
+                            "color": "#666",
+                          }
+                        }
+                      >
+                        {
+                        }
+                      </span>
+                      }
+                    </span>
+                  </td>
+                  <td />
+                </tr>
               </tbody>
             </table>
           </div>
@@ -2343,6 +2490,7 @@ exports[`Storyshots Addon Info.Options.propTablesExclude Exclude component from
       <button
         disabled={false}
         onClick={[Function]}
+        style={Object {}}
       >
         Button
       </button>
@@ -2805,6 +2953,34 @@ exports[`Storyshots Addon Info.Options.propTablesExclude Exclude component from
                   </td>
                   <td />
                 </tr>
+                <tr>
+                  <td>
+                    style
+                  </td>
+                  <td>
+                    other
+                  </td>
+                  <td>
+                    no
+                  </td>
+                  <td>
+                    <span>
+                      {
+                      <span
+                        style={
+                          Object {
+                            "color": "#666",
+                          }
+                        }
+                      >
+                        {
+                        }
+                      </span>
+                      }
+                    </span>
+                  </td>
+                  <td />
+                </tr>
               </tbody>
             </table>
           </div>
@@ -2828,6 +3004,7 @@ exports[`Storyshots Addon Info.Options.source Shows or hides Info Addon source 1
     <button
       disabled={false}
       onClick={[Function]}
+      style={Object {}}
     >
       Button
     </button>
@@ -3089,6 +3266,34 @@ exports[`Storyshots Addon Info.Options.source Shows or hides Info Addon source 1
                   </td>
                   <td />
                 </tr>
+                <tr>
+                  <td>
+                    style
+                  </td>
+                  <td>
+                    other
+                  </td>
+                  <td>
+                    no
+                  </td>
+                  <td>
+                    <span>
+                      {
+                      <span
+                        style={
+                          Object {
+                            "color": "#666",
+                          }
+                        }
+                      >
+                        {
+                        }
+                      </span>
+                      }
+                    </span>
+                  </td>
+                  <td />
+                </tr>
               </tbody>
             </table>
           </div>
@@ -3112,6 +3317,7 @@ exports[`Storyshots Addon Info.Options.styles Change info styles // I think this
     <button
       disabled={false}
       onClick={[Function]}
+      style={Object {}}
     >
       Button
     </button>
@@ -3439,6 +3645,34 @@ exports[`Storyshots Addon Info.Options.styles Change info styles // I think this
                   </td>
                   <td />
                 </tr>
+                <tr>
+                  <td>
+                    style
+                  </td>
+                  <td>
+                    other
+                  </td>
+                  <td>
+                    no
+                  </td>
+                  <td>
+                    <span>
+                      {
+                      <span
+                        style={
+                          Object {
+                            "color": "#666",
+                          }
+                        }
+                      >
+                        {
+                        }
+                      </span>
+                      }
+                    </span>
+                  </td>
+                  <td />
+                </tr>
               </tbody>
             </table>
           </div>
@@ -4308,6 +4542,7 @@ exports[`Storyshots Addon Info.React Docgen Comments from component declaration
     <button
       disabled={false}
       onClick={[Function]}
+      style={Object {}}
     >
       Button
     </button>
@@ -4682,6 +4917,34 @@ exports[`Storyshots Addon Info.React Docgen Comments from component declaration
                   </td>
                   <td />
                 </tr>
+                <tr>
+                  <td>
+                    style
+                  </td>
+                  <td>
+                    other
+                  </td>
+                  <td>
+                    no
+                  </td>
+                  <td>
+                    <span>
+                      {
+                      <span
+                        style={
+                          Object {
+                            "color": "#666",
+                          }
+                        }
+                      >
+                        {
+                        }
+                      </span>
+                      }
+                    </span>
+                  </td>
+                  <td />
+                </tr>
               </tbody>
             </table>
           </div>
@@ -4811,6 +5074,7 @@ exports[`Storyshots Addon Notes using deprecated API 1`] = `
 <button
   disabled={false}
   onClick={[Function]}
+  style={Object {}}
 >
   😀 😎 👍 💯
 </button>
@@ -4820,11 +5084,57 @@ exports[`Storyshots Addon Notes withNotes 1`] = `
 <button
   disabled={false}
   onClick={[Function]}
+  style={Object {}}
 >
   Button with notes - check the notes panel for details
 </button>
 `;
 
+exports[`Storyshots Addon a11y Default 1`] = `
+<button
+  disabled={false}
+  onClick={[Function]}
+  style={Object {}}
+>
+  
+</button>
+`;
+
+exports[`Storyshots Addon a11y Disabled 1`] = `
+<button
+  disabled={true}
+  onClick={[Function]}
+  style={Object {}}
+>
+  Testing the a11y addon
+</button>
+`;
+
+exports[`Storyshots Addon a11y Invalid contrast 1`] = `
+<button
+  disabled={false}
+  onClick={[Function]}
+  style={
+    Object {
+      "backgroundColor": "black",
+      "color": "black",
+    }
+  }
+>
+  Testing the a11y addon
+</button>
+`;
+
+exports[`Storyshots Addon a11y Label 1`] = `
+<button
+  disabled={false}
+  onClick={[Function]}
+  style={Object {}}
+>
+  Testing the a11y addon
+</button>
+`;
+
 exports[`Storyshots App full app 1`] = `
 <div
   className="App"

examples/cra-kitchen-sink/src/components/BaseButton.js

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 /** BaseButton component description imported from comments inside the component file */
-const BaseButton = ({ disabled, label, onClick }) => (
-  <button disabled={disabled} onClick={onClick}>
+const BaseButton = ({ disabled, label, onClick, style }) => (
+  <button disabled={disabled} onClick={onClick} style={style}>
     {label}
   </button>
 );
@@ -11,6 +11,7 @@ const BaseButton = ({ disabled, label, onClick }) => (
 BaseButton.defaultProps = {
   disabled: false,
   onClick: () => {},
+  style: {},
 };
 
 BaseButton.propTypes = {
@@ -20,6 +21,8 @@ BaseButton.propTypes = {
   label: PropTypes.string.isRequired,
   /** onClick handler */
   onClick: PropTypes.func,
+  /** Custom styles */
+  style: PropTypes.shape({}),
 };
 
 export default BaseButton;

examples/cra-kitchen-sink/src/stories/addon-a11y.stories.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { checkA11y } from '@storybook/addon-a11y';
+import BaseButton from '../components/BaseButton';
+
+const text = 'Testing the a11y addon';
+
+storiesOf('Addon a11y', module)
+  .addDecorator(checkA11y)
+  .add('Default', () => <BaseButton label="" />)
+  .add('Label', () => <BaseButton label={text} />)
+  .add('Disabled', () => <BaseButton disabled label={text} />)
+  .add('Invalid contrast', () => (
+    // FIXME has no effect on score
+    <BaseButton style={{ color: 'black', backgroundColor: 'black' }} label={text} />
+  ));

lib/addons/package.json

@@ -17,8 +17,5 @@
   },
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
-  },
-  "devDependencies": {
-    "shelljs": "^0.7.8"
   }
 }

lib/channel-postmessage/package.json

@@ -11,8 +11,5 @@
     "@storybook/channels": "^3.2.15",
     "global": "^4.3.2",
     "json-stringify-safe": "^5.0.1"
-  },
-  "devDependencies": {
-    "shelljs": "^0.7.8"
   }
 }

lib/channel-websocket/package.json

@@ -10,8 +10,5 @@
   "dependencies": {
     "@storybook/channels": "^3.2.15",
     "global": "^4.3.2"
-  },
-  "devDependencies": {
-    "shelljs": "^0.7.8"
   }
 }

lib/channels/package.json

@@ -6,8 +6,5 @@
   "main": "dist/index.js",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
-  },
-  "devDependencies": {
-    "shelljs": "^0.7.8"
   }
 }

lib/codemod/package.json

@@ -13,8 +13,5 @@
   },
   "dependencies": {
     "jscodeshift": "^0.3.30"
-  },
-  "devDependencies": {
-    "shelljs": "^0.7.8"
   }
 }

lib/components/package.json

@@ -18,10 +18,6 @@
     "glamorous": "^4.11.0",
     "prop-types": "^15.6.0"
   },
-  "devDependencies": {
-    "react": "^16.1.0",
-    "react-dom": "^16.1.0"
-  },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"

lib/ui/package.json

@@ -26,15 +26,15 @@
     "lodash.debounce": "^4.0.8",
     "lodash.pick": "^4.4.0",
     "lodash.sortby": "^4.7.0",
-    "mantra-core": "^1.7.0",
+    "@storybook/mantra-core": "^1.7.0",
     "podda": "^1.2.2",
     "prop-types": "^15.6.0",
     "qs": "^6.5.1",
     "react-icons": "^2.2.7",
     "react-inspector": "^2.2.1",
-    "react-komposer": "^2.0.0",
+    "@storybook/react-komposer": "^2.0.0",
     "react-modal": "^3.1.2",
-    "react-split-pane": "^0.1.68",
+    "react-split-pane": "^0.1.71",
     "react-treebeard": "^2.0.3",
     "redux": "^3.7.2"
   },

lib/ui/src/compose.js

@@ -1,4 +1,4 @@
-import { setDefaults } from 'react-komposer';
+import { setDefaults } from '@storybook/react-komposer';
 
 let context;
 let actions;

lib/ui/src/index.js

@@ -1,4 +1,4 @@
-import { createApp } from 'mantra-core';
+import { createApp } from '@storybook/mantra-core';
 import Podda from 'podda';
 
 import buildContext from './context';

netlify.toml

@@ -0,0 +1,6 @@
+[build]
+  publish = "netlify-build"
+  command = "bash scripts/netlify-build.sh"
+[build.environment]
+  NODE_VERSION = "8"
+  YARN_VERSION = "1.3.2"

package.json

@@ -52,8 +52,8 @@
     "commander": "^2.11.0",
     "cross-env": "^5.1.1",
     "danger": "^2.0.1",
-    "enzyme": "^3.1.1",
-    "enzyme-adapter-react-16": "^1.0.4",
+    "enzyme": "^3.2.0",
+    "enzyme-adapter-react-16": "^1.1.0",
     "eslint": "^4.11.0",
     "eslint-config-airbnb": "^16.1.0",
     "eslint-config-prettier": "^2.7.0",
@@ -68,7 +68,7 @@
     "github-release-from-changelog": "^1.2.1",
     "glob": "^7.1.2",
     "husky": "^0.14.3",
-    "inquirer": "^3.2.3",
+    "inquirer": "^4.0.0",
     "jest": "^21.2.0",
     "jest-cli": "^21.2.1",
     "jest-enzyme": "^4.0.1",
@@ -79,6 +79,7 @@
     "nodemon": "^1.12.1",
     "npmlog": "^4.1.2",
     "prettier": "^1.8.2",
+    "process-nextick-args": "^1.0.7",
     "puppeteer": "^0.13.0",
     "raf": "^3.4.0",
     "react": "^16.1.0",

scripts/netlify-build.sh

@@ -0,0 +1,28 @@
+#!/bin/sh
+
+mkdir netlify-build
+
+yarn
+yarn add gauge --ignore-workspace-root-check # netlify quirk
+yarn bootstrap --core
+
+echo "netlify-build docs"
+pushd docs
+yarn install
+popd
+yarn docs:build
+mv docs/public/* netlify-build/
+
+echo "netlify-build React examples"
+pushd examples/cra-kitchen-sink
+yarn add tapable # netlify quirk
+yarn build-storybook
+mv storybook-static ../../netlify-build/cra-kitchen-sink
+popd
+
+echo "netlify-build Vue examples"
+pushd examples/vue-kitchen-sink
+yarn build-storybook
+mv storybook-static ../../netlify-build/vue-kitchen-sink
+popd
+

scripts/repo-dirty-check.js

@@ -4,7 +4,7 @@ const shell = require('shelljs');
 // exit with code 1 if there are some changed files
 if (shell.exec('git status --porcelain').stdout.trim() !== '') {
   console.error(
-    'Git repo is dirty, please consider updating lockfiles by running `yarn bootstrap --core --docs`'
+    'Git repo is dirty, please consider updating lockfiles by running `yarn bootstrap --reset --core --docs`'
   );
   process.exit(1);
 }