docs(storybook): add readme and addons

Author: jaebradley

.storybook/addons.js

@@ -1,2 +1,3 @@
 import '@storybook/addon-options/register';
 import '@storybook/addon-actions/register';
+import '@storybook/addon-a11y/register';

.storybook/config.js

@@ -1,18 +1,23 @@
-import { configure } from '@storybook/react';
+import { configure, addDecorator } from '@storybook/react';
 import { setOptions } from '@storybook/addon-options';
 import { setDefaults } from '@storybook/addon-info';
+import centered from '@storybook/addon-centered';
+import { checkA11y } from '@storybook/addon-a11y';
+
+addDecorator(centered);
+addDecorator(checkA11y);
 
 setDefaults({
-  inline: true,
+  inline: false,
   header: true,
   source: true,
 });
 
 setTimeout(() => setOptions({
   name: 'REACT MADE WITH',
   url: 'https://github.com/jaebradley/react-made-with',
-  showDownPanel: true,
-  downPanelInRight: true,
+  showAddonPanel: true,
+  addonPanelInRight: true,
 }), 1000);
 
 function loadStories() {

package-lock.json

@@ -39,7 +39,9 @@
     "@commitlint/config-angular": "^6.1.0",
     "@commitlint/prompt": "^6.1.0",
     "@commitlint/prompt-cli": "^6.1.0",
+    "@storybook/addon-a11y": "^3.3.13",
     "@storybook/addon-actions": "^3.3.13",
+    "@storybook/addon-centered": "^3.3.13",
     "@storybook/addon-console": "^1.0.0",
     "@storybook/addon-info": "^3.3.13",
     "@storybook/addon-options": "^3.3.13",

package.json

@@ -1,19 +1,19 @@
 
 import React from 'react';
-import { storiesOf } from '@storybook/react';
+import { storiesOf, addDecorator } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import { faUserSecret, faPlus } from '@fortawesome/fontawesome-free-solid';
 
 import MadeWith from './index';
-// import README from './README.md';
+import README from './README.md';
 
-// const wrapComponent = (component) => (
-//   withInfo(README)(() => component)
-// );
+const wrapComponent = (component) => (
+  withInfo(README)(() => component)
+);
 
 storiesOf('Made With', module)
-  .add('basic usage', () => (
+  .add('basic usage', wrapComponent(
     <MadeWith
       love
       react
@@ -22,7 +22,7 @@ storiesOf('Made With', module)
       }}
     />
   ))
-  .add('with email address', () => (
+  .add('with email address', wrapComponent(
     <MadeWith
       love
       react
@@ -33,7 +33,7 @@ storiesOf('Made With', module)
       }}
     />
   ))
-  .add('with icon as display', () => (
+  .add('with icon as display', wrapComponent(
     <MadeWith
       react
       love
@@ -44,7 +44,7 @@ storiesOf('Made With', module)
       }}
     />
   ))
-  .add('custom separator', () => (
+  .add('custom separator', wrapComponent(
     <MadeWith
       love
       react

src/MadeWith/MadeWith.stories.js

@@ -0,0 +1,53 @@
+# MadeWith
+
+Component for `Made with` like ![alt-text](https://imgur.com/pWp6tZQ.png)
+
+## API
+
+### `maker (optional; shape)`
+
+Specifies the formatting of the maker
+
+* `identifier (optional; string)`
+
+When specified, is used to format the displayed author.
+
+If no `identifier` is specified, `null` is returned.
+
+When `identifier` receives an email address, it creates a hyperlink with a `mailto` URL (using the given email address) and a trailing [`FontAwesome` `envelope` icon](https://fontawesome.com/icons/envelope?style=solid). The displayed value associated with the `mailto` URL is the `display` prop value or the given email address.
+
+When `identifier` receives a URL, it creates a hyperlink that points to the given URL and a trailing [`FontAwesome` `link` icon](https://fontawesome.com/icons/link?style=solid).
+
+The only exceptions to this are when the URL has a `twitter.com` or `github.com` host, when the icons are the [`FontAwesome` `Twitter` icon](https://fontawesome.com/icons/twitter?style=brands) and the [`FontAwesome` `GitHub` icon](https://fontawesome.com/icons/github?style=brands)
+
+The displayed value associated with the hyperlink is the `display` prop value or the given URL.
+
+If the `identifier` is not an email address or a URL, it is wrapped in a `<span>`, unless the `display` prop is defined.
+
+* `display(optional; string, element)`
+
+When specified, is the displayed value that represents the maker.
+
+* `showIcon (optional; boolean)`
+
+Determines whether or not to show the icon generated by analyzing the `identifier` prop
+
+* `iconColor (optional; string)`
+
+Determines the color of any icon generated by analyzing the `identifier` prop
+
+### `love (optional; boolean)`
+
+Specifies if [the `FontAwesome` `heart` icon](https://fontawesome.com/icons/heart?style=solid) should be used. By default, `false`.
+
+### `react (optional; boolean)`
+
+Specifies if [the `FontAwesome` `react` icon](https://fontawesome.com/icons/heart?style=solid) should be used. By default, `false`.
+
+### `separator (optional; string or element)`
+
+Specifies how each "made with" type is separated. Be default, `and`.
+
+### `className (optional; string)`
+
+Specifies custom class name for component

src/MadeWith/README.md

@@ -1,12 +1,12 @@
-# Author
+# Maker
 
 Private (i.e API is not publicly exposed) component that determines the maker.
 
 ## API
 
 ### `identifier (optional; string)`
 
-When specified, is used to format the displayed author.
+When specified, is used to format the displayed maker.
 
 If no `identifier` is specified, `null` is returned.