mirror of
https://github.com/primer/css.git
synced 2024-12-03 03:33:40 +03:00
Diana Mounter
GitHub
commit
1908ce57ae
64
.storybook/Avatars.js
Normal file
64
.storybook/Avatars.js
Normal file
@ -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>
|
||||
))
|
||||
213
.storybook/Box.js
Normal file
213
.storybook/Box.js
Normal file
@ -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>
|
||||
))
|
||||
15
.storybook/Breadcrumb.js
Normal file
15
.storybook/Breadcrumb.js
Normal file
@ -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>
|
||||
))
|
||||
61
.storybook/Button.js
Normal file
61
.storybook/Button.js
Normal file
@ -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>
|
||||
))
|
||||
49
.storybook/Flash.js
Normal file
49
.storybook/Flash.js
Normal file
@ -0,0 +1,49 @@
|
||||
import React from 'react'
|
||||
import { storiesOf } from '@storybook/react'
|
||||
|
||||
storiesOf('Flash alerts', module)
|
||||
.add('flash', () => (
|
||||
<div className='p-4'>
|
||||
<div className='flash'>
|
||||
flash
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
.add('flash-warn', () => (
|
||||
<div className='p-4'>
|
||||
<div className='flash flash-warn'>
|
||||
flash-warn
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
.add('flash-error', () => (
|
||||
<div className='p-4'>
|
||||
<div className='flash flash-error'>
|
||||
flash-error
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
.add('flash-success', () => (
|
||||
<div className='p-4'>
|
||||
<div className='flash flash-success'>
|
||||
flash-success
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
.add('flash with action button', () => (
|
||||
<div className='p-4'>
|
||||
<div className="flash">
|
||||
<button type="submit" className="btn btn-sm primary flash-action">Complete action</button>
|
||||
Flash message with action here.
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
.add('flash-full', () => (
|
||||
<div className='p-4'>
|
||||
<div className="container-lg">
|
||||
<div className="flash flash-full">
|
||||
Full width flash message.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
92
.storybook/Typography.js
Normal file
92
.storybook/Typography.js
Normal file
@ -0,0 +1,92 @@
|
||||
import React from 'react'
|
||||
import { storiesOf } from '@storybook/react'
|
||||
|
||||
storiesOf('Typography', module)
|
||||
.add('h1-h6', () => (
|
||||
<div>
|
||||
<h1 className='h1'>h1</h1>
|
||||
<h1 className='h2'>h2</h1>
|
||||
<h1 className='h3'>h3</h1>
|
||||
<h1 className='h4'>h4</h1>
|
||||
<h1 className='h5'>h5</h1>
|
||||
<h1 className='h6'>h6</h1>
|
||||
</div>
|
||||
))
|
||||
.add('f1-f6', () => (
|
||||
<div>
|
||||
<h1 className='f1'>f1</h1>
|
||||
<h1 className='f2'>f2</h1>
|
||||
<h1 className='f3'>f3</h1>
|
||||
<h1 className='f4'>f4</h1>
|
||||
<h1 className='f5'>f5</h1>
|
||||
<h1 className='f6'>f6</h1>
|
||||
</div>
|
||||
))
|
||||
.add('f light', () => (
|
||||
<div>
|
||||
<h1 className='f00-light'>f00-light</h1>
|
||||
<h1 className='f0-light'>f0-light</h1>
|
||||
<h1 className='f1-light'>f1-light</h1>
|
||||
<h1 className='f2-light'>f2-light</h1>
|
||||
<h1 className='f3-light'>f3-light</h1>
|
||||
</div>
|
||||
))
|
||||
.add('line-height', () =>(
|
||||
<div>
|
||||
<p className="lh-default">
|
||||
lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default lh-default
|
||||
|
||||
</p>
|
||||
<p className="lh-condensed">
|
||||
lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed lh-condensed
|
||||
</p>
|
||||
<p className="lh-condensed-ultra">
|
||||
lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra lh-condensed-ultra
|
||||
</p>
|
||||
</div>
|
||||
))
|
||||
.add('typographic styles', () => (
|
||||
<div>
|
||||
<h3 className='text-normal'>text-normal</h3>
|
||||
<p className='text-bold'>text-bold</p>
|
||||
<p className="text-uppercase">text-uppercase</p>
|
||||
<p className="no-wrap">no-wrap</p>
|
||||
<p className="ws-normal">ws-normal</p>
|
||||
<p className="wb-break-all">wb-break-all</p>
|
||||
<p className="no-underline">no-underline</p>
|
||||
<p className="text-emphasized">text-emphasized</p>
|
||||
<p className="text-small">text-small</p>
|
||||
<p className="lead">lead</p>
|
||||
</div>
|
||||
))
|
||||
.add('text alignment', () => (
|
||||
<div>
|
||||
<p className="text-left">text-left</p>
|
||||
<p className="text-center">text-center</p>
|
||||
<p className="text-right">text-right</p>
|
||||
</div>
|
||||
))
|
||||
.add('responsive text alignment', () => (
|
||||
<div>
|
||||
<p className="text-left text-sm-center text-lg-right">Left in a small viewport, centered in mid-sized viewports, and right aligned in larger viewports</p>
|
||||
</div>
|
||||
))
|
||||
.add('list-style-none', () => (
|
||||
<div>
|
||||
<ul className="list-style-none">
|
||||
<li>list-style-none</li>
|
||||
<li>list-style-none</li>
|
||||
<li>list-style-none</li>
|
||||
</ul>
|
||||
</div>
|
||||
))
|
||||
.add('text shadows', () => (
|
||||
<div>
|
||||
<div className="bg-purple p-5">
|
||||
<h3 className="text-white text-shadow-dark">.text-shadow-dark helps white text stand out on dark or photographic backgrounds</h3>
|
||||
</div>
|
||||
<div className="bg-yellow p-5">
|
||||
<h3 className="text-shadow-light">.text-shadow-light creates an embossed effect for dark text</h3>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
1
.storybook/addons.js
Normal file
1
.storybook/addons.js
Normal file
@ -0,0 +1 @@
|
||||
import '@storybook/addon-options/register'
|
||||
40
.storybook/blankslate.js
Normal file
40
.storybook/blankslate.js
Normal file
@ -0,0 +1,40 @@
|
||||
import React from 'react'
|
||||
import { storiesOf } from '@storybook/react'
|
||||
|
||||
storiesOf('Blankslate', module)
|
||||
.add('blankslate', () => (
|
||||
<div className='blankslate'>
|
||||
<h3>This is a blank slate</h3>
|
||||
<p>Use it to provide information when no dynamic content exists.</p>
|
||||
</div>
|
||||
))
|
||||
.add('blankslate-narrow', () => (
|
||||
<div className='blankslate blankslate-narrow'>
|
||||
<h3>This is a blank slate</h3>
|
||||
<p>Use it to provide information when no dynamic content exists.</p>
|
||||
</div>
|
||||
))
|
||||
.add('blankslate-large', () => (
|
||||
<div className='blankslate blankslate-large'>
|
||||
<h3>This is a blank slate</h3>
|
||||
<p>Use it to provide information when no dynamic content exists.</p>
|
||||
</div>
|
||||
))
|
||||
.add('blankslate-spacious', () => (
|
||||
<div className='blankslate blankslate-spacious'>
|
||||
<h3>This is a blank slate</h3>
|
||||
<p>Use it to provide information when no dynamic content exists.</p>
|
||||
</div>
|
||||
))
|
||||
.add('blankslate-capped', () => (
|
||||
<div className='blankslate blankslate-capped'>
|
||||
<h3>This is a blank slate</h3>
|
||||
<p>Use it to provide information when no dynamic content exists.</p>
|
||||
</div>
|
||||
))
|
||||
.add('blankslate-clean-background', () => (
|
||||
<div className='blankslate blankslate-clean-background'>
|
||||
<h3>This is a blank slate</h3>
|
||||
<p>Use it to provide information when no dynamic content exists.</p>
|
||||
</div>
|
||||
))
|
||||
17
.storybook/config.js
Normal file
17
.storybook/config.js
Normal file
@ -0,0 +1,17 @@
|
||||
import { configure } from '@storybook/react'
|
||||
import { setOptions } from '@storybook/addon-options'
|
||||
import '../modules/primer-css/index.scss'
|
||||
|
||||
setOptions({
|
||||
name: 'Primer',
|
||||
url: 'http://primercss.io/',
|
||||
showDownPanel: false,
|
||||
})
|
||||
|
||||
const req = require.context('.', true, /\.js$/)
|
||||
|
||||
const load = () => {
|
||||
req.keys().forEach(req)
|
||||
}
|
||||
|
||||
configure(load, module)
|
||||
145
.storybook/forms.js
Normal file
145
.storybook/forms.js
Normal file
@ -0,0 +1,145 @@
|
||||
import React from 'react'
|
||||
import { storiesOf } from '@storybook/react'
|
||||
|
||||
storiesOf('Forms', module)
|
||||
.add('form-control', () => (
|
||||
<div>
|
||||
<input className='form-control' type='text' placeholder='Standard input' aria-label='Standard input'/>
|
||||
</div>
|
||||
))
|
||||
.add('input-lg', () => (
|
||||
<div>
|
||||
<input className='form-control input-lg' type='text' placeholder='Large input' aria-label='Large input'/>
|
||||
</div>
|
||||
))
|
||||
.add('input-sm', () => (
|
||||
<div>
|
||||
<input className='form-control input-sm' type='text' placeholder='Small input' aria-label='Small input'/>
|
||||
</div>
|
||||
))
|
||||
.add('input-block', () => (
|
||||
<div>
|
||||
<input className='form-control input-block' type='text' placeholder='Block input' aria-label='Block input'/>
|
||||
</div>
|
||||
))
|
||||
.add('input-monospace', () => (
|
||||
<div>
|
||||
<input className='form-control input-monospace' type='text' placeholder='Monospace input' aria-label='SHA'/>
|
||||
</div>
|
||||
))
|
||||
.add('form-select', () => (
|
||||
<div>
|
||||
<select className='form-select' aria-label='Important decision'>
|
||||
<option>Select</option>
|
||||
<option value='option 2'>Option 2</option>
|
||||
</select>
|
||||
</div>
|
||||
))
|
||||
.add('select-sm', () => (
|
||||
<div>
|
||||
<select className='form-select select-sm' aria-label='Important decision'>
|
||||
<option>Select</option>
|
||||
<option value='option 2'>Option 2</option>
|
||||
</select>
|
||||
</div>
|
||||
))
|
||||
.add('radio', () => (
|
||||
<div>
|
||||
<label>
|
||||
<input type='radio' id='derp' name='radio'/>
|
||||
Radio
|
||||
</label>
|
||||
</div>
|
||||
))
|
||||
.add('checkbox', () => (
|
||||
<div>
|
||||
<label>
|
||||
<input type='checkbox'/>
|
||||
checkbox
|
||||
</label>
|
||||
</div>
|
||||
))
|
||||
.add('textarea', () => (
|
||||
<div>
|
||||
<textarea className='form-control'>
|
||||
</textarea>
|
||||
</div>
|
||||
))
|
||||
.add('form-actions', () => (
|
||||
<div className='form-actions'>
|
||||
<button type='submit' className='btn btn-primary'>Save changes</button>
|
||||
<button type='button' className='btn'>Cancel</button>
|
||||
</div>
|
||||
))
|
||||
.add('label highlight', () => (
|
||||
<div>
|
||||
<form>
|
||||
<div className='form-checkbox'>
|
||||
<label>
|
||||
<input type='checkbox' checked='checked'/>
|
||||
<em className='highlight'>Available for hire</em>
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
))
|
||||
.add('form-checkbox-details', () => (
|
||||
<div className='form-checkbox'>
|
||||
<label aria-live='polite'>
|
||||
<input type='radio' className='form-checkbox-details-trigger' name='hireme'/>
|
||||
Available for hire
|
||||
<span className='form-checkbox-details text-normal'>
|
||||
<span className='d-block mb-1'>Available hours per week</span>
|
||||
<input type='text' name='' className='form-control input-contrast' size='3'/>
|
||||
<span className='text-small text-gray pl-2'>hours per week</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
))
|
||||
.add('formgroup', () => (
|
||||
<form>
|
||||
<dl className='form-group'>
|
||||
<dt><label for='example-text'>Example Text</label></dt>
|
||||
<dd><input className='form-control' type='text' value='Example Value' id='example-text'/></dd>
|
||||
</dl>
|
||||
|
||||
<dl className='form-group'>
|
||||
<dt><label for='example-select'>Example Select</label></dt>
|
||||
<dd>
|
||||
<select className='form-select' id='example-select'>
|
||||
<option>Choose an option</option>
|
||||
<option>Git</option>
|
||||
<option>Subversion</option>
|
||||
<option>Social Coding</option>
|
||||
<option>Beets</option>
|
||||
<option>Bears</option>
|
||||
<option>Battlestar Galactica</option>
|
||||
</select>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<dl className='form-group'>
|
||||
<dt><label for='example-textarea'>Example Textarea</label></dt>
|
||||
<dd>
|
||||
<textarea className='form-control' id='example-textarea'></textarea>
|
||||
</dd>
|
||||
</dl>
|
||||
</form>
|
||||
))
|
||||
.add('form validation', () => (
|
||||
<div>
|
||||
<form>
|
||||
<dl className='form-group errored'>
|
||||
<dt><label for='example-text-errored'>Example Text</label></dt>
|
||||
<dd><input className='form-control' type='text' value='Example Value' id='example-text-errored' aria-describedby='form-error-text'/></dd>
|
||||
<dd className='error' id='form-error-text'>This example input has an error.</dd>
|
||||
</dl>
|
||||
<br />
|
||||
<dl className='form-group warn'>
|
||||
<dt><label for='example-text-warn'>Example Text</label></dt>
|
||||
<dd><input className='form-control' type='text' value='Example Value' id='example-text-warn' aria-describedby='form-warning-text'/></dd>
|
||||
<dd className='warning' id='form-warning-text'>This example input has a warning.</dd>
|
||||
</dl>
|
||||
</form>
|
||||
</div>
|
||||
))
|
||||
24
.storybook/octicons.js
Normal file
24
.storybook/octicons.js
Normal file
@ -0,0 +1,24 @@
|
||||
import React from 'react'
|
||||
import {storiesOf} from '@storybook/react'
|
||||
import octicons from 'octicons'
|
||||
import SVGInline from 'react-svg-inline'
|
||||
|
||||
const Octicon = (props) => {
|
||||
const {name} = props
|
||||
if (name in octicons) {
|
||||
return <SVGInline svg={octicons[name].toSVG(props)} />
|
||||
} else {
|
||||
throw new Error(`No such octicon: "${name}"!`)
|
||||
}
|
||||
}
|
||||
|
||||
const story = storiesOf('octicons', module)
|
||||
const sizes = [64, 32, 16]
|
||||
|
||||
Object.keys(octicons).forEach(name => {
|
||||
story.add(name, () => (
|
||||
<div>{sizes.map((size, i) => (
|
||||
<Octicon name={name} width={size} height={size} key={i} />
|
||||
))}</div>
|
||||
))
|
||||
})
|
||||
8
.storybook/postcss.config.js
Normal file
8
.storybook/postcss.config.js
Normal file
@ -0,0 +1,8 @@
|
||||
// FIXME this should go away when we merge and release:
|
||||
// <https://github.com/primer/primer-module-build/pull/19>
|
||||
const plugins = require("primer-module-build/lib/.postcss.json")
|
||||
delete plugins.use
|
||||
|
||||
module.exports = {
|
||||
plugins,
|
||||
}
|
||||
2
.storybook/preview-head.html
Normal file
2
.storybook/preview-head.html
Normal file
@ -0,0 +1,2 @@
|
||||
<link rel="stylesheet" href="https://unpkg.com/primer-css@9.2.0/build/build.css">
|
||||
<script src="https://github.com/site/assets/styleguide.js" async></script>
|
||||
34
.storybook/webpack.config.js
Normal file
34
.storybook/webpack.config.js
Normal file
@ -0,0 +1,34 @@
|
||||
const path = require("path");
|
||||
|
||||
const modulesPath = path.resolve(__dirname, "../modules")
|
||||
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.scss$/,
|
||||
loaders: [
|
||||
"style-loader",
|
||||
"css-loader",
|
||||
{
|
||||
loader: "postcss-loader",
|
||||
options: {
|
||||
config: {
|
||||
path: require.resolve("./postcss.config.js"),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: "sass-loader",
|
||||
options: {
|
||||
includePaths: [
|
||||
modulesPath,
|
||||
],
|
||||
}
|
||||
},
|
||||
],
|
||||
include: modulesPath,
|
||||
}
|
||||
]
|
||||
},
|
||||
}
|
||||
14
package.json
14
package.json
@ -1,6 +1,7 @@
|
||||
{
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "start-storybook -p 8000 -c .storybook",
|
||||
"bootstrap": "lerna bootstrap --hoist",
|
||||
"clean": "lerna clean",
|
||||
"diff": "lerna diff",
|
||||
@ -13,13 +14,26 @@
|
||||
"test": "lerna run test"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-options": "^3.2.6",
|
||||
"@storybook/react": "^3.2.4",
|
||||
"ava": "^0.21.0",
|
||||
"babel-preset-env": "^1.6.0",
|
||||
"babel-preset-react": "^6.24.1",
|
||||
"commit-status": "^4.1.0",
|
||||
"css-loader": "^0.28.4",
|
||||
"glob": "^7.1.2",
|
||||
"lerna": "^2.0.0",
|
||||
"node-sass": "^4.5.3",
|
||||
"npm-run-all": "^4.0.2",
|
||||
"octicons": "^6.0.1",
|
||||
"postcss-loader": "^2.0.6",
|
||||
"primer-module-build": "^1.0.2",
|
||||
"react": "^15.6.1",
|
||||
"react-dom": "^15.6.1",
|
||||
"react-svg-inline": "^2.0.0",
|
||||
"sass-loader": "^6.0.6",
|
||||
"semver": "^5.3.0",
|
||||
"style-loader": "^0.18.2",
|
||||
"stylelint": "^7.13.0",
|
||||
"stylelint-config-primer": "^2.0.0"
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user