Move addon-a11y stories to official-storybook

addons/a11y/.storybook/addons.js

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

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

@@ -1,17 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import Faker from 'faker';
-
-import { checkA11y } from './../../../src';
-
-import Button from './component';
-
-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/stories.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import Faker from 'faker';
-
-import * as Form from './components';
-
-import { checkA11y } from './../../../src';
-
-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/stories.js

@@ -1,16 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import Faker from 'faker';
-
-import { checkA11y } from './../../../src';
-
-import Image from './component';
-
-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/stories.js

@@ -1,26 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import Faker from 'faker';
-
-import { checkA11y } from './../../../src';
-
-import * as Typography from './components';
-
-// eslint-disable-next-line no-script-url
-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

@@ -1,7 +0,0 @@
-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/package.json

@@ -34,10 +34,6 @@
     "glamorous": "^4.12.3",
     "prop-types": "^15.6.1"
   },
-  "devDependencies": {
-    "@storybook/react": "4.0.0-alpha.3",
-    "faker": "^4.1.0"
-  },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"

examples/official-storybook/package.json

@@ -39,5 +39,8 @@
     "react-chromatic": "^0.8.1",
     "react-dom": "^16.3.2",
     "uuid": "^3.2.1"
+  },
+  "dependencies": {
+    "faker": "^4.1.0"
   }
 }

examples/official-storybook/stories/addon-a11y.stories.js

@@ -1,10 +1,15 @@
 import React from 'react';
+import Faker from 'faker';
 import { storiesOf } from '@storybook/react';
 import { setOptions } from '@storybook/addon-options';
 
 import { checkA11y } from '@storybook/addon-a11y';
 import BaseButton from '../components/BaseButton';
 import DelayedRender from '../components/DelayedRender';
+import Button from '../components/addon-a11y/Button';
+import Image from '../components/addon-a11y/Image';
+import * as Form from '../components/addon-a11y/Form';
+import * as Typography from '../components/addon-a11y/Typography';
 
 const text = 'Testing the a11y addon';
 
@@ -26,3 +31,52 @@ storiesOf('Addons|a11y', module)
       <BaseButton label="This button has a delayed render of 1s" />
     </DelayedRender>
   ));
+
+storiesOf('Addons|a11y/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()} />);
+
+const label = Faker.lorem.word();
+const placeholder = Faker.lorem.word();
+
+storiesOf('Addons|a11y/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} />} />
+  ));
+
+const image = Faker.image.animals();
+const alt = Faker.lorem.words();
+
+storiesOf('Addons|a11y/Image', module)
+  .addDecorator(checkA11y)
+  .add('Without alt', () => <Image src={image} />)
+  .add('With alt', () => <Image src={image} alt={alt} />)
+  .add('Presentation', () => <Image presentation src={image} />);
+
+// eslint-disable-next-line no-script-url
+const href = 'javascript:void 0';
+
+storiesOf('Addons|a11y/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)}...`} />);