Merge pull request #2292 from storybooks/add-addon-a11y

Add addon-a11y to monorepo

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)