Browse Source

add stylesheet; add story for Button component

closed-social-glitch-2
Kai Schaper 7 years ago
parent
commit
4eeb7947bd
4 changed files with 4811 additions and 1 deletions
  1. +4788
    -0
      storybook/application.css
  2. +5
    -1
      storybook/config.js
  3. +15
    -0
      storybook/stories/button.story.jsx
  4. +3
    -0
      storybook/storybook.css

+ 4788
- 0
storybook/application.css
File diff suppressed because it is too large
View File


+ 5
- 1
storybook/config.js View File

@ -2,13 +2,17 @@ import { configure } from '@kadira/storybook';
import React from 'react';
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.action = action;
window.React = React;
function loadStories () {
require('./stories/loading_indicator.story.jsx');
// You can require as many stories as you need.
require('./stories/button.story.jsx');
}
configure(loadStories, module);

+ 15
- 0
storybook/stories/button.story.jsx View 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
- 0
storybook/storybook.css View File

@ -0,0 +1,3 @@
#root {
padding: 4rem;
}

Loading…
Cancel
Save