Skip to content

Commit

Permalink
feat(checkbox-toggle): add stories
Browse files Browse the repository at this point in the history
  • Loading branch information
casserni committed Nov 13, 2018
1 parent f29dda1 commit a072744
Show file tree
Hide file tree
Showing 4 changed files with 1,739 additions and 214 deletions.
8 changes: 4 additions & 4 deletions stories/Checkbox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@ import { boolean } from '@storybook/addon-knobs/react';
import { storiesOf } from '@storybook/react';
import * as React from 'react';

import { Checkbox } from '../Checkbox';
import { boxKnobs } from './Box';
import { Checkbox } from '../src/Checkbox';

export const checkboxKnobs = (tabName = 'Checkbox') => {
return {
checked: boolean('checked', false, tabName),
disabled: boolean('disabled', false, tabName),
};
};

storiesOf('components/Checkbox', module)
storiesOf('Checkbox', module)
.addDecorator(withKnobs)
.add('with defaults', () => <Checkbox {...checkboxKnobs()} {...boxKnobs()} onChange={action('onChange')} />);
.add('with defaults', () => <Checkbox {...checkboxKnobs()} onChange={action('onChange')} />);
24 changes: 4 additions & 20 deletions stories/Toggle.tsx
Original file line number Diff line number Diff line change
@@ -1,34 +1,18 @@
import { StateDecorator, Store } from '@sambego/storybook-state';
import { action } from '@storybook/addon-actions';
import { withKnobs } from '@storybook/addon-knobs';
import { boolean } from '@storybook/addon-knobs/react';
import { storiesOf } from '@storybook/react';
import * as React from 'react';

import { Toggle } from '../Toggle';
import { boxKnobs } from './Box';

const store = new Store({
checked: false,
});
import { Toggle } from '../src/Toggle';

export const toggleKnobs = (tabName = 'Toggle') => {
return {
checked: boolean('checked', false, tabName),
disabled: boolean('disabled', false, tabName),
};
};

storiesOf('components/Toggle', module)
storiesOf('Toggle', module)
.addDecorator(withKnobs)
.addDecorator(StateDecorator(store))
.add('with defaults', () => (
<Toggle
{...toggleKnobs()}
{...boxKnobs()}
checked={store.get('checked')}
onChange={e => {
action('onChange')(e);
store.set({ checked: e.target.checked });
}}
/>
));
.add('with defaults', () => <Toggle {...toggleKnobs()} onChange={action('onChange')} />);
2 changes: 2 additions & 0 deletions stories/index.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import './Box';
import './Button';
import './Checkbox';
import './Flex';
import './Heading';
import './Icon';
Expand All @@ -9,3 +10,4 @@ import './KitchenSink';
import './List';
import './Text';
import './Textarea';
import './Toggle';
Loading

0 comments on commit a072744

Please sign in to comment.