moving stories to directory folders

This commit is contained in:
Alex Windett 2017-01-11 14:22:28 +00:00
parent 466fe72459
commit 8f2e140cbe
16 changed files with 360 additions and 261 deletions

View File

@ -0,0 +1,18 @@
const React = require('react');
const {
storiesOf
} = require('@kadira/storybook');
const Checkbox = require('./');
storiesOf('Checkbox', module)
.add('Default', () => (
<Checkbox />
))
.add('Checked', () => (
<Checkbox checked onChange={function noop() {}} />
))
.add('Disabled', () => (
<Checkbox disabled />
));

View File

@ -0,0 +1,20 @@
const React = require('react');
const {
storiesOf
} = require('@kadira/storybook');
const Base = require('../base');
const Close = require('./');
storiesOf('Close', module)
.add('Default', () => (
<Base
style={{
position: 'relative',
width: 60
}}
>
<Close onClick={function noop() {}} />
</Base>
));

View File

@ -0,0 +1,35 @@
const React = require('react');
const {
storiesOf
} = require('@kadira/storybook');
const Base= require('../base');
const Input = require('./');
storiesOf('Input', module)
.add('Default', () => (
<Base>
<Input placeholder="I am the placeholder" />
</Base>
))
.add('type=email', () => (
<Base>
<Input
label='Email Address'
placeholder='Enter email'
type='email'
>
<small>We&apos;ll never share your email with anyone else.</small>
</Input>
</Base>
))
.add('Error', () => (
<Base>
<Input
error="Somethings missing"
placeholder="There was an error"
value="alexw/makeusproud.com"
/>
</Base>
));

View File

@ -0,0 +1,17 @@
const React = require('react');
const {
storiesOf
} = require('@kadira/storybook');
const Base= require('../base');
const Modal = require('./');
storiesOf('Modal', module)
.add('Default', () => (
<Base>
<Modal>
<h2>This is the Modal</h2>
</Modal>
</Base>
));

View File

@ -0,0 +1,34 @@
const React = require('react');
const {
storiesOf
} = require('@kadira/storybook');
const Base= require('../base');
const Notificaton = require('./');
storiesOf('Notificaton', module)
.add('Default', () => (
<Base>
<Notificaton>
<span>This is the default content</span>
</Notificaton>
</Base>
))
.add('Success', () => (
<Base>
<Notificaton
close={function noop() {}}
type="success"
>
<span>This is a success notification that is closable</span>
</Notificaton>
</Base>
))
.add('Alert', () => (
<Base>
<Notificaton type="alert">
<span>This is the alert content</span>
</Notificaton>
</Base>
));

View File

@ -0,0 +1,20 @@
const React = require('react');
const {
storiesOf
} = require('@kadira/storybook');
const Pagination = require('./');
storiesOf('Pagination', module)
.add('Default', () => (
<Pagination>
<a>
<span>&laquo;</span>
<span>Previous</span>
</a>
<a>1</a>
<a active>2</a>
<a>3</a>
</Pagination>
));

View File

@ -0,0 +1,27 @@
const React = require('react');
const {
storiesOf
} = require('@kadira/storybook');
const Base= require('../base');
const RadioGroup = require('./');
const Radio = require('./item');
storiesOf('Radio Group', module)
.add('Default', () => (
<Base>
<RadioGroup>
<Radio name='hello' value='default'>
Video killed the radio star
</Radio>
<Radio name='hello' value='fancy'>
Video killed the radio star
</Radio>
<Radio name='hello' value='none'>
Video killed the radio star
</Radio>
</RadioGroup>
</Base>
));

View File

@ -0,0 +1,20 @@
const React = require('react');
const {
storiesOf
} = require('@kadira/storybook');
const Radio = require('./');
storiesOf('Radio', module)
.add('Default', () => (
<Radio>
Video killed the radio star
</Radio>
))
.add('Checked', () => (
<Radio checked onChange={function noop() {}} />
))
.add('Disabled', () => (
<Radio disabled />
));

View File

@ -0,0 +1,12 @@
const React = require('react');
const {
storiesOf
} = require('@kadira/storybook');
const RangeSlider = require('./');
storiesOf('Range Slider', module)
.add('Default', () => (
<RangeSlider />
));

View File

@ -0,0 +1,28 @@
const React = require('react');
const {
storiesOf
} = require('@kadira/storybook');
const {
selectData
} = require('../../shared/fake-data');
const SelectCustom = require('./');
storiesOf('Select Custom', module)
.add('Default', () => (
<SelectCustom
label="This is the label"
onChange={function noop() {}}
options={selectData}
/>
))
.add('Multiple', () => (
<SelectCustom
label="This is the label"
multi
onChange={function noop() {}}
options={selectData}
/>
));

View File

@ -0,0 +1,26 @@
const React = require('react');
const {
storiesOf
} = require('@kadira/storybook');
const Select = require('./');
storiesOf('Select', module)
.add('Default', () => (
<Select label='example select'>
<option>Apple</option>
<option>Banana</option>
<option>Pear</option>
<option>Orange</option>
</Select>
))
.add('multiple', () => (
<Select label='example multiple select' multiple>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</Select>
));

View File

@ -0,0 +1,20 @@
const React = require('react');
const {
storiesOf
} = require('@kadira/storybook');
const Tabs = require('./');
const Tab = require('./tab');
storiesOf('Tabs', module)
.add('Default', () => (
<Tabs name='my-tab-group'>
<Tab title='Containers'>
<h1>Containers</h1>
</Tab>
<Tab title='Users'>
<h1>User</h1>
</Tab>
</Tabs>
));

View File

@ -0,0 +1,30 @@
const React = require('react');
const {
storiesOf
} = require('@kadira/storybook');
const Toggle = require('./');
storiesOf('Toggle', module)
.add('default', () => (
<Toggle checked />
))
.add('checked', () => (
<Toggle
defaultChecked
options={[
{
label: 'Topology',
checked: true
},
{
label: 'List',
checked: false
}
]}
/>
))
.add('no props', () => (
<Toggle />
));

View File

@ -0,0 +1,29 @@
const React = require('react');
const {
storiesOf
} = require('@kadira/storybook');
const Tooltip = require('./');
storiesOf('Tooltip', module)
.add('default', () => (
<Tooltip>
<li>One</li>
<li>Two</li>
<li>Three</li>
</Tooltip>
))
.add('custom position', () => {
const arrowPosition = {
left: '90%',
bottom: '100%'
};
return (
<Tooltip arrowPosition={arrowPosition}>
<li>One</li>
<li>Two</li>
<li>Three</li>
</Tooltip>
);
});

View File

@ -0,0 +1,24 @@
const React = require('react');
const {
storiesOf
} = require('@kadira/storybook');
const Widget = require('./');
storiesOf('Widget', module)
.add('single', () => (
<Widget
checked
name='flag'
selectable='single'
value='flag_1'
>
<img
alt='england flag'
// eslint-disable-next-line max-len
src='https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Union_flag_1606_(Kings_Colors).svg/2000px-Union_flag_1606_(Kings_Colors).svg.png'
/>
<p>Some text</p>
</Widget>
));

View File

@ -8,10 +8,8 @@ const {
const { const {
Base, Base,
Container, Container,
Checkbox,
Row, Row,
Column, Column,
Close,
AddMetric: { AddMetric: {
AddMetricButton, AddMetricButton,
AddMetricDescription, AddMetricDescription,
@ -19,7 +17,6 @@ const {
AddMetricTile, AddMetricTile,
AddMetricTitle AddMetricTitle
}, },
Input,
List: { List: {
ListItemDescription, ListItemDescription,
ListItemHeader, ListItemHeader,
@ -39,27 +36,8 @@ const {
MiniMetricSubtitle, MiniMetricSubtitle,
MiniMetricView MiniMetricView
}, },
Modal,
Notificaton,
Pagination,
RangeSlider,
Select,
SelectCustom,
Tabs,
Tab,
Toggle,
Tooltip,
Widget,
Radio,
RadioGroup
} = require('../src/'); } = require('../src/');
const fakeData = require('../src/shared/fake-data');
const {
selectData
} = fakeData;
const styles = { const styles = {
base: { base: {
backgroundColor: '#FFEBEE' backgroundColor: '#FFEBEE'
@ -148,245 +126,6 @@ storiesOf('Add Metric', module)
</Base> </Base>
)); ));
storiesOf('Checkbox', module)
.add('Default', () => (
<Checkbox />
))
.add('Checked', () => (
<Checkbox checked onChange={function noop() {}} />
))
.add('Disabled', () => (
<Checkbox disabled />
));
storiesOf('Radio', module)
.add('Default', () => (
<Radio>
Video killed the radio star
</Radio>
))
.add('Checked', () => (
<Radio checked onChange={function noop() {}} />
))
.add('Disabled', () => (
<Radio disabled />
));
storiesOf('Input', module)
.add('Default', () => (
<Base>
<Input placeholder="I am the placeholder" />
</Base>
))
.add('type=email', () => (
<Base>
<Input
label='Email Address'
placeholder='Enter email'
type='email'
>
<small>We&apos;ll never share your email with anyone else.</small>
</Input>
</Base>
))
.add('Error', () => (
<Base>
<Input
error="Somethings missing"
placeholder="There was an error"
value="alexw/makeusproud.com"
/>
</Base>
));
storiesOf('Modal', module)
.add('Default', () => (
<Modal>
<h2>This is the Modal</h2>
</Modal>
));
storiesOf('Notificaton', module)
.add('Default', () => (
<Base>
<Notificaton>
<span>This is the default content</span>
</Notificaton>
</Base>
))
.add('Success', () => (
<Base>
<Notificaton
close={function noop() {}}
type="success"
>
<span>This is a success notification that is closable</span>
</Notificaton>
</Base>
))
.add('Alert', () => (
<Base>
<Notificaton type="alert">
<span>This is the alert content</span>
</Notificaton>
</Base>
));
storiesOf('Pagination', module)
.add('Default', () => (
<Pagination>
<a>
<span>&laquo;</span>
<span>Previous</span>
</a>
<a>1</a>
<a active>2</a>
<a>3</a>
</Pagination>
));
storiesOf('Radio Group', module)
.add('Default', () => (
<RadioGroup>
<Radio name='hello' value='default'>
Video killed the radio star
</Radio>
<Radio name='hello' value='fancy'>
Video killed the radio star
</Radio>
<Radio name='hello' value='none'>
Video killed the radio star
</Radio>
</RadioGroup>
));
storiesOf('RangeSlider', module)
.add('Default', () => (
<RangeSlider />
));
storiesOf('Select', module)
.add('Default', () => (
<Select label='example select'>
<option>Apple</option>
<option>Banana</option>
<option>Pear</option>
<option>Orange</option>
</Select>
))
.add('multiple', () => (
<Select label='example multiple select' multiple>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</Select>
));
storiesOf('Select Custom', module)
.add('Default', () => (
<SelectCustom
label="This is the label"
onChange={function noop() {}}
options={selectData}
/>
))
.add('Multiple', () => (
<SelectCustom
label="This is the label"
multi
onChange={function noop() {}}
options={selectData}
/>
));
storiesOf('Tabs', module)
.add('Default', () => (
<Tabs name='my-tab-group'>
<Tab title='Containers'>
<h1>Containers</h1>
</Tab>
<Tab title='Users'>
<h1>User</h1>
</Tab>
</Tabs>
));
storiesOf('Close', module)
.add('Default', () => (
<Base
style={{
position: 'relative',
width: 60
}}
>
<Close onClick={function noop() {}} />
</Base>
));
storiesOf('Toggle', module)
.add('default', () => (
<Toggle checked />
))
.add('checked', () => (
<Toggle
defaultChecked
options={[
{
label: 'Topology',
checked: true
},
{
label: 'List',
checked: false
}
]}
/>
))
.add('no props', () => (
<Toggle />
));
storiesOf('Tooltip', module)
.add('default', () => (
<Tooltip>
<li>One</li>
<li>Two</li>
<li>Three</li>
</Tooltip>
))
.add('custom position', () => {
const arrowPosition = {
left: '90%',
bottom: '100%'
};
return (
<Tooltip arrowPosition={arrowPosition}>
<li>One</li>
<li>Two</li>
<li>Three</li>
</Tooltip>
);
});
storiesOf('Widget', module)
.add('single', () => (
<Widget
checked
name='flag'
selectable='single'
value='flag_1'
>
<img
alt='england flag'
// eslint-disable-next-line max-len
src='https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Union_flag_1606_(Kings_Colors).svg/2000px-Union_flag_1606_(Kings_Colors).svg.png'
/>
<p>Some text</p>
</Widget>
));
const minMetricData = [{ const minMetricData = [{
firstQuartile: 15, firstQuartile: 15,
thirdQuartile: 15, thirdQuartile: 15,