Add addon-a11y to monorepo

addons/a11y/.babelrc

@@ -0,0 +1,3 @@
+{
+ "presets": ["react-app"]
+}

addons/a11y/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+coverage
+dist

addons/a11y/.npmignore

@@ -0,0 +1,7 @@
+node_modules
+.babelrc
+src
+docs
+.scripts
+.storybook
+*.md

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)