From 0266c97dc5588f323562ed09f98fafc23b294eb8 Mon Sep 17 00:00:00 2001
From: Jaco Bovenschen <jaco1994bovenschen@gmail.com>
Date: Tue, 4 Oct 2016 23:10:43 +0200
Subject: [PATCH] Create more example stories (#1)

* Add Button example

* Add semicolon behind import

* Add Image example

* Add Form examples

* Add Typography examples
---
 .../.storybook/components/Button/component.js | 46 +++++++++++++++++++
 .../.storybook/components/Button/stories.js   | 34 ++++++++++++++
 .../components/Form/components/Input.js       | 21 +++++++++
 .../components/Form/components/Label.js       | 25 ++++++++++
 .../components/Form/components/Row.js         | 20 ++++++++
 .../components/Form/components/index.js       |  9 ++++
 .../.storybook/components/Form/stories.js     | 36 +++++++++++++++
 .../.storybook/components/Image/component.js  | 19 ++++++++
 .../.storybook/components/Image/stories.js    | 29 ++++++++++++
 .../Typography/components/Heading.js          | 23 ++++++++++
 .../components/Typography/components/Link.js  | 16 +++++++
 .../components/Typography/components/Text.js  | 15 ++++++
 .../components/Typography/components/index.js |  9 ++++
 .../components/Typography/stories.js          | 41 +++++++++++++++++
 addons/a11y/.storybook/config.js              |  9 +++-
 addons/a11y/.storybook/stories.js             | 24 ----------
 addons/a11y/package.json                      |  1 +
 17 files changed, 352 insertions(+), 25 deletions(-)
 create mode 100644 addons/a11y/.storybook/components/Button/component.js
 create mode 100644 addons/a11y/.storybook/components/Button/stories.js
 create mode 100644 addons/a11y/.storybook/components/Form/components/Input.js
 create mode 100644 addons/a11y/.storybook/components/Form/components/Label.js
 create mode 100644 addons/a11y/.storybook/components/Form/components/Row.js
 create mode 100644 addons/a11y/.storybook/components/Form/components/index.js
 create mode 100644 addons/a11y/.storybook/components/Form/stories.js
 create mode 100644 addons/a11y/.storybook/components/Image/component.js
 create mode 100644 addons/a11y/.storybook/components/Image/stories.js
 create mode 100644 addons/a11y/.storybook/components/Typography/components/Heading.js
 create mode 100644 addons/a11y/.storybook/components/Typography/components/Link.js
 create mode 100644 addons/a11y/.storybook/components/Typography/components/Text.js
 create mode 100644 addons/a11y/.storybook/components/Typography/components/index.js
 create mode 100644 addons/a11y/.storybook/components/Typography/stories.js
 delete mode 100755 addons/a11y/.storybook/stories.js

diff --git a/addons/a11y/.storybook/components/Button/component.js b/addons/a11y/.storybook/components/Button/component.js
new file mode 100644
index 000000000000..6feb58e1a634
--- /dev/null
+++ b/addons/a11y/.storybook/components/Button/component.js
@@ -0,0 +1,46 @@
+import React, { PropTypes } from 'react';
+
+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;
diff --git a/addons/a11y/.storybook/components/Button/stories.js b/addons/a11y/.storybook/components/Button/stories.js
new file mode 100644
index 000000000000..a005a2c95d7b
--- /dev/null
+++ b/addons/a11y/.storybook/components/Button/stories.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { storiesOf } from '@kadira/storybook';
+
+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()}
+    />
+  ));
diff --git a/addons/a11y/.storybook/components/Form/components/Input.js b/addons/a11y/.storybook/components/Form/components/Input.js
new file mode 100644
index 000000000000..e36695b2f018
--- /dev/null
+++ b/addons/a11y/.storybook/components/Form/components/Input.js
@@ -0,0 +1,21 @@
+import React, { PropTypes } from 'react';
+
+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;
diff --git a/addons/a11y/.storybook/components/Form/components/Label.js b/addons/a11y/.storybook/components/Form/components/Label.js
new file mode 100644
index 000000000000..bce63fe1fbb3
--- /dev/null
+++ b/addons/a11y/.storybook/components/Form/components/Label.js
@@ -0,0 +1,25 @@
+import React, { PropTypes } from 'react';
+
+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;
diff --git a/addons/a11y/.storybook/components/Form/components/Row.js b/addons/a11y/.storybook/components/Form/components/Row.js
new file mode 100644
index 000000000000..fde8dbd0b4f1
--- /dev/null
+++ b/addons/a11y/.storybook/components/Form/components/Row.js
@@ -0,0 +1,20 @@
+import React, { PropTypes } from 'react';
+
+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;
diff --git a/addons/a11y/.storybook/components/Form/components/index.js b/addons/a11y/.storybook/components/Form/components/index.js
new file mode 100644
index 000000000000..0a9ea851f8e1
--- /dev/null
+++ b/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,
+};
diff --git a/addons/a11y/.storybook/components/Form/stories.js b/addons/a11y/.storybook/components/Form/stories.js
new file mode 100644
index 000000000000..26c1b8635488
--- /dev/null
+++ b/addons/a11y/.storybook/components/Form/stories.js
@@ -0,0 +1,36 @@
+import React from 'react';
+
+import * as Form from './components';
+
+import { storiesOf } from '@kadira/storybook';
+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}
+      />}
+    />
+  ))
diff --git a/addons/a11y/.storybook/components/Image/component.js b/addons/a11y/.storybook/components/Image/component.js
new file mode 100644
index 000000000000..1199cf4cd4fd
--- /dev/null
+++ b/addons/a11y/.storybook/components/Image/component.js
@@ -0,0 +1,19 @@
+import React, { PropTypes } from 'react';
+
+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;
diff --git a/addons/a11y/.storybook/components/Image/stories.js b/addons/a11y/.storybook/components/Image/stories.js
new file mode 100644
index 000000000000..6d260e85f97b
--- /dev/null
+++ b/addons/a11y/.storybook/components/Image/stories.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import { storiesOf } from '@kadira/storybook';
+
+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}
+    />
+  ));
diff --git a/addons/a11y/.storybook/components/Typography/components/Heading.js b/addons/a11y/.storybook/components/Typography/components/Heading.js
new file mode 100644
index 000000000000..d8cfc800c10d
--- /dev/null
+++ b/addons/a11y/.storybook/components/Typography/components/Heading.js
@@ -0,0 +1,23 @@
+import React, { PropTypes, cloneElement } from 'react';
+
+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;
diff --git a/addons/a11y/.storybook/components/Typography/components/Link.js b/addons/a11y/.storybook/components/Typography/components/Link.js
new file mode 100644
index 000000000000..2c24648164f5
--- /dev/null
+++ b/addons/a11y/.storybook/components/Typography/components/Link.js
@@ -0,0 +1,16 @@
+import React, { PropTypes } from 'react';
+
+function Link({ href, content }) {
+  return (
+    <a href={href}>
+      { content }
+    </a>
+  );
+}
+
+Link.propTypes = {
+  href: PropTypes.string,
+  content: PropTypes.string,
+};
+
+export default Link;
diff --git a/addons/a11y/.storybook/components/Typography/components/Text.js b/addons/a11y/.storybook/components/Typography/components/Text.js
new file mode 100644
index 000000000000..7de18d63773b
--- /dev/null
+++ b/addons/a11y/.storybook/components/Typography/components/Text.js
@@ -0,0 +1,15 @@
+import React, { PropTypes } from 'react';
+
+function Text({ children }) {
+  return (
+    <p>
+      {children}
+    </p>
+  );
+}
+
+Text.propTypes = {
+  children: PropTypes.any,
+};
+
+export default Text;
diff --git a/addons/a11y/.storybook/components/Typography/components/index.js b/addons/a11y/.storybook/components/Typography/components/index.js
new file mode 100644
index 000000000000..2b5d7e625987
--- /dev/null
+++ b/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,
+};
diff --git a/addons/a11y/.storybook/components/Typography/stories.js b/addons/a11y/.storybook/components/Typography/stories.js
new file mode 100644
index 000000000000..24c9fcf14ae7
--- /dev/null
+++ b/addons/a11y/.storybook/components/Typography/stories.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import { storiesOf } from '@kadira/storybook';
+
+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)}...`} />
+  ));
diff --git a/addons/a11y/.storybook/config.js b/addons/a11y/.storybook/config.js
index c4434721049e..7b05cdb738c1 100755
--- a/addons/a11y/.storybook/config.js
+++ b/addons/a11y/.storybook/config.js
@@ -1,2 +1,9 @@
 import * as storybook from '@kadira/storybook';
-storybook.configure(() => require('./stories'), module);
+
+const req = require.context('./components/', true, /stories\.js$/)
+
+const loadStories = () =>
+  req.keys().forEach(req);
+
+
+storybook.configure(loadStories, module)
diff --git a/addons/a11y/.storybook/stories.js b/addons/a11y/.storybook/stories.js
deleted file mode 100755
index 2a99992f2e9e..000000000000
--- a/addons/a11y/.storybook/stories.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@kadira/storybook';
-
-import { checkA11y } from './../src';
-
-storiesOf('Button', module)
-  .addDecorator(checkA11y)
-  .add('Default', () => (
-    <button>
-      Correct Button
-    </button>
-  ))
-  .add('Red button', () => (
-    <div>
-      <button style={{ backgroundColor: 'red', color: 'darkRed', }}>
-        Incorrect Button
-      </button>
-      <button>
-        Correct Button
-      </button>
-      <button style={{ backgroundColor: 'blue', color: 'lightBlue', height: '20px', width: '20px' }}>
-      </button>
-    </div>
-  ));
diff --git a/addons/a11y/package.json b/addons/a11y/package.json
index d4983438b1a7..f88b6ab432bd 100644
--- a/addons/a11y/package.json
+++ b/addons/a11y/package.json
@@ -26,6 +26,7 @@
     "babel-jest": "^15.0.0",
     "babel-polyfill": "^6.13.0",
     "babel-preset-react-app": "^0.2.1",
+    "faker": "^3.1.0",
     "jest": "^15.1.1",
     "lodash": "^4.16.2",
     "react": "^15.3.1",