Merge pull request #318 from primer/storybook

Primer Storybook
primer · Sep 9, 2017 · 1908ce5 · 1908ce5
2 parents a413ab5 + 231c366
commit 1908ce5
Show file tree

Hide file tree

Showing 15 changed files with 779 additions and 0 deletions.
diff --git a/.storybook/Avatars.js b/.storybook/Avatars.js
@@ -0,0 +1,64 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+
+storiesOf('Avatars', module)
+.add('avatar', () => (
+  <img className='avatar' alt='Uncle Cat' width='72' height='72' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
+))
+.add('avatar-small', () => (
+  <img className='avatar avatar-small' width='32' height='32' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
+))
+.add('avatar-parent-child', () => (
+  <div>
+    <div className='avatar-parent-child float-left'>
+      <img className='avatar'width='48' height='48' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
+      <img className='avatar avatar-child' alt='Child cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
+    </div>
+  </div>
+))
+.add('avatar-stack', () => (
+  <div>
+    <div className='avatar-stack'>
+      <img className='avatar' alt='Uncle Cat' width='39' height='39' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
+      <img className='avatar' alt='Uncle Cat' width='39' height='39' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
+      <img className='avatar' alt='Uncle Cat' width='39' height='39' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
+    </div>
+  </div>
+
+))
+.add('CircleBadge--small', () => (
+  <div>
+    <a className='CircleBadge CircleBadge--small' href='#url' title='Travis CI'>
+      <img src='https://user-images.githubusercontent.com/334891/30004619-adc8ca86-90a0-11e7-8ccc-2322261d2ab1.png' className='CircleBadge-icon'/>
+    </a>
+  </div>
+))
+.add('CircleBadge--medium', () => (
+  <div>
+    <a className='CircleBadge CircleBadge--medium' href='#url' title='Travis CI'>
+      <img src='https://user-images.githubusercontent.com/334891/30004619-adc8ca86-90a0-11e7-8ccc-2322261d2ab1.png' className='CircleBadge-icon'/>
+    </a>
+  </div>
+))
+.add('CircleBadge--large', () => (
+  <div>
+    <a className='CircleBadge CircleBadge--large' href='#url' title='Travis CI'>
+      <img src='https://user-images.githubusercontent.com/334891/30004619-adc8ca86-90a0-11e7-8ccc-2322261d2ab1.png' className='CircleBadge-icon'/>
+    </a>
+  </div>
+))
+.add('DashedConnection', () => (
+  <div className='DashedConnection'>
+    <ul className='d-flex list-style-none flex-justify-between' aria-label='A sample GitHub workflow'>
+      <li className='CircleBadge CircleBadge--small' aria-label='GitHub'>
+        <img width='32' src='https://user-images.githubusercontent.com/334891/30004619-adc8ca86-90a0-11e7-8ccc-2322261d2ab1.png'/>
+      </li>
+      <li className='CircleBadge CircleBadge--small' aria-label='Slack'>
+        <img width='32' src='https://user-images.githubusercontent.com/334891/30004619-adc8ca86-90a0-11e7-8ccc-2322261d2ab1.png'/>
+      </li>
+      <li className='CircleBadge CircleBadge--small' aria-label='Travis CI'>
+        <img width='32' src='https://user-images.githubusercontent.com/334891/30004619-adc8ca86-90a0-11e7-8ccc-2322261d2ab1.png'/>
+      </li>
+    </ul>
+  </div>
+))
diff --git a/.storybook/Box.js b/.storybook/Box.js
@@ -0,0 +1,213 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+
+storiesOf('Box', module)
+  .add('Box', () => (
+    <div className='Box'>
+      Box
+    </div>
+  ))
+  .add('Box elements', () => (
+    <div className='Box'>
+      <div className='Box-header'>
+        <h3 className='Box-title'>
+          Box-title
+        </h3>
+      </div>
+      <div className='Box-body'>
+        Box-body
+      </div>
+      <div className='Box-footer'>
+        Box-footer
+      </div>
+    </div>
+  ))
+  .add('Box-row', () => (
+    <div className='Box'>
+      <ul>
+        <li className='Box-row'>
+          Box-row
+        </li>
+        <li className='Box-row'>
+          Box-row
+        </li>
+        <li className='Box-row'>
+          Box-row
+        </li>
+        <li className='Box-row'>
+          Box-row
+        </li>
+      </ul>
+    </div>
+  ))
+  .add('Box--condensed', () => (
+    <div className='Box Box--condensed'>
+      <div className='Box-header'>
+        <h3 className='Box-title'>
+          Box-title
+        </h3>
+      </div>
+      <div className='Box-body'>
+        Box-body
+      </div>
+      <ul>
+        <li className='Box-row'>
+          Box-row
+        </li>
+        <li className='Box-row'>
+          Box-row
+        </li>
+      </ul>
+      <div className='Box-footer'>
+        Box-footer
+      </div>
+    </div>
+  ))
+  .add('Box--spacious', () => (
+    <div className='Box Box--spacious'>
+      <div className='Box-header'>
+        <h3 className='Box-title'>
+          Box-title
+        </h3>
+      </div>
+      <div className='Box-body'>
+        Box-body
+      </div>
+      <ul>
+        <li className='Box-row'>
+          Box-row
+        </li>
+        <li className='Box-row'>
+          Box-row
+        </li>
+      </ul>
+      <div className='Box-footer'>
+        Box-footer
+      </div>
+    </div>
+  ))
+  .add('Box--blue', () => (
+    <div className='Box Box--blue'>
+      <div className='Box-header'>
+        <h3 className='Box-title'>
+          Box-title
+        </h3>
+      </div>
+      <div className='Box-body'>
+        Box-body
+      </div>
+      <ul>
+        <li className='Box-row'>
+          Box-row
+        </li>
+        <li className='Box-row'>
+          Box-row
+        </li>
+      </ul>
+      <div className='Box-footer'>
+        Box-footer
+      </div>
+    </div>
+  ))
+  .add('Box-header--blue', () => (
+    <div className='Box'>
+      <div className='Box-header Box-header--blue'>
+        <h3 className='Box-title'>Box-title</h3>
+      </div>
+      <div className='Box-body'>
+        Box-body
+      </div>
+    </div>
+  ))
+  .add('Box--danger', () => (
+    <div className='Box Box--danger'>
+      <div className='Box-row'>
+        Row one
+      </div>
+      <div className='Box-row'>
+        Row two
+      </div>
+    </div>
+  ))
+  .add('Box-row themes', () => (
+    <div>
+      <div className='Box mb-4'>
+        <div className='Box-row Box-row--gray'>
+          .Box-row--gray
+        </div>
+        <div className='Box-row Box-row--hover-gray'>
+          .Box-row--hover-gray
+        </div>
+        <div className='Box-row Box-row--yellow'>
+          .Box-row--yellow
+        </div>
+        <div className='Box-row Box-row--hover-blue'>
+          .Box-row--hover-blue
+        </div>
+        <div className='Box-row Box-row--blue'>
+          .Box-row--blue
+        </div>
+      </div>
+      <div className='Box'>
+        <div className='Box-row Box-row--focus-gray navigation-focus'>
+          .Box-row--focus-gray and .navigation-focus
+        </div>
+        <div className='Box-row Box-row--focus-gray'>
+          .Box-row--focus-gray
+        </div>
+        <div className='Box-row Box-row--focus-blue navigation-focus'>
+          .Box-row--focus-blue and .navigation-focus
+        </div>
+        <div className='Box-row Box-row--focus-blue'>
+          .Box-row--focus-blue
+        </div>
+      </div>
+    </div>
+  ))
+  .add('Box-row--unread', () => (
+    <div className='Box'>
+      <div className='Box-row'>
+        Box row
+      </div>
+      <div className='Box-row Box-row--unread'>
+        Box row unread
+      </div>
+      <div className='Box-row'>
+        Box row
+      </div>
+    </div>
+  ))
+  .add('Box-row-link', () => (
+    <div className='Box'>
+      <div className='Box-row'>
+        <a className='Box-row-link' href='#url'>Box row link</a>
+      </div>
+    </div>
+  ))
+  .add('Box border-dashed', () => (
+    <div className='Box border-dashed p-2'>
+      Box border-dashed
+    </div>
+  ))
+  .add('Box with flash-full', () => (
+    <div className='Box'>
+      <div className='Box-header'>
+        Box-header
+      </div>
+      <div className='flash flash-full'>
+        flash-full
+      </div>
+      <div className='flash flash-full flash-success'>
+        flash-full flash-success
+      </div>
+      <div className='flash flash-full flash-warn'>
+        flash-full flash-warn
+      </div>
+      <div className='flash flash-full flash-error'>
+        flash-full flash-error
+      </div>
+      <div className='Box-body'>
+        Box-body
+      </div>
+    </div>
+  ))
diff --git a/.storybook/Breadcrumb.js b/.storybook/Breadcrumb.js
@@ -0,0 +1,15 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+
+storiesOf('Breadcrumb', module)
+.add('breadcrumb', () => (
+  <div className='p-4'>
+    <nav aria-label='Breadcrumb'>
+      <ol>
+        <li className='breadcrumb-item text-small'><a href='/business'>Business</a></li>
+        <li className='breadcrumb-item text-small'><a href='/business/customers'>Customers</a></li>
+        <li className='breadcrumb-item breadcrumb-item-selected text-small text-gray' aria-current='page'>MailChimp</li>
+      </ol>
+    </nav>
+  </div>
+))
diff --git a/.storybook/Button.js b/.storybook/Button.js
@@ -0,0 +1,61 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+
+storiesOf('Button', module)
+  .add('btn', () => (
+    <button className='btn'>Button</button>
+  ))
+  .add('btn-primary', () => (
+    <div className='p-4 d-flex flex-justify-between'>
+      <button className='btn btn-primary'>Button</button>
+      <button className='btn btn-primary hover'>hover</button>
+      <button className='btn btn-primary focus'>focus</button>
+      <button className='btn btn-primary selected'>selected</button>
+      <button className='btn btn-primary disabled'>disabled</button>
+    </div>
+  ))
+  .add('btn-secondary', () => (
+    <div className='p-4 d-flex flex-justify-between'>
+      <button className='btn btn-secondary'>Button</button>
+      <button className='btn btn-secondary hover'>hover</button>
+      <button className='btn btn-secondary focus'>focus</button>
+      <button className='btn btn-secondary selected'>selected</button>
+      <button className='btn btn-secondary disabled'>disabled</button>
+    </div>
+  ))
+  .add('btn-danger', () => (
+    <div className='p-4 d-flex flex-justify-between'>
+      <button className='btn btn-danger'>Button</button>
+      <button className='btn btn-danger hover'>hover</button>
+      <button className='btn btn-danger focus'>focus</button>
+      <button className='btn btn-danger selected'>selected</button>
+      <button className='btn btn-danger disabled'>disabled</button>
+    </div>
+  ))
+  .add('btn-outline', () => (
+    <div className='p-4 d-flex flex-justify-between'>
+      <button className='btn btn-outline'>Button</button>
+      <button className='btn btn-outline hover'>hover</button>
+      <button className='btn btn-outline focus'>focus</button>
+      <button className='btn btn-outline selected'>selected</button>
+      <button className='btn btn-outline disabled'>disabled</button>
+    </div>
+  ))
+  .add('btn-blue', () => (
+    <div className='p-4 d-flex flex-justify-between'>
+      <button className='btn btn-blue'>Button</button>
+      <button className='btn btn-blue hover'>hover</button>
+      <button className='btn btn-blue focus'>focus</button>
+      <button className='btn btn-blue selected'>selected</button>
+      <button className='btn btn-blue disabled'>disabled</button>
+    </div>
+  ))
+  .add('btn-purple', () => (
+    <div className='p-4 d-flex flex-justify-between'>
+      <button className='btn btn-purple'>Button</button>
+      <button className='btn btn-purple hover'>hover</button>
+      <button className='btn btn-purple focus'>focus</button>
+      <button className='btn btn-purple selected'>selected</button>
+      <button className='btn btn-purple disabled'>disabled</button>
+    </div>
+  ))