add stylesheet; add story for Button component
This commit is contained in:
parent
71e7537330
commit
4eeb7947bd
4788
storybook/application.css
Normal file
4788
storybook/application.css
Normal file
File diff suppressed because it is too large
Load diff
|
@ -2,13 +2,17 @@ import { configure } from '@kadira/storybook';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { storiesOf, action } from '@kadira/storybook';
|
import { storiesOf, action } from '@kadira/storybook';
|
||||||
|
|
||||||
|
import './storybook.css'
|
||||||
|
// for now just simply $ rake asset:precompile && mv public/assets/application-ebf... storybook/application.css
|
||||||
|
import './application.css'
|
||||||
|
|
||||||
window.storiesOf = storiesOf;
|
window.storiesOf = storiesOf;
|
||||||
window.action = action;
|
window.action = action;
|
||||||
window.React = React;
|
window.React = React;
|
||||||
|
|
||||||
function loadStories () {
|
function loadStories () {
|
||||||
require('./stories/loading_indicator.story.jsx');
|
require('./stories/loading_indicator.story.jsx');
|
||||||
// You can require as many stories as you need.
|
require('./stories/button.story.jsx');
|
||||||
}
|
}
|
||||||
|
|
||||||
configure(loadStories, module);
|
configure(loadStories, module);
|
||||||
|
|
15
storybook/stories/button.story.jsx
Normal file
15
storybook/stories/button.story.jsx
Normal file
|
@ -0,0 +1,15 @@
|
||||||
|
import Button from '../../app/assets/javascripts/components/components/button.jsx'
|
||||||
|
|
||||||
|
storiesOf('Button', module)
|
||||||
|
.add('default state', () => (
|
||||||
|
<Button text="submit" onClick={action('clicked')} />
|
||||||
|
))
|
||||||
|
.add('secondary', () => (
|
||||||
|
<Button secondary text="submit" onClick={action('clicked')} />
|
||||||
|
))
|
||||||
|
.add('disabled', () => (
|
||||||
|
<Button disabled text="submit" onClick={action('clicked')} />
|
||||||
|
))
|
||||||
|
.add('block', () => (
|
||||||
|
<Button block text="submit" onClick={action('clicked')} />
|
||||||
|
));
|
3
storybook/storybook.css
Normal file
3
storybook/storybook.css
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
#root {
|
||||||
|
padding: 4rem;
|
||||||
|
}
|
Reference in a new issue