@swrve/core/src/button/button.stories.js

Core set of Swrve UI Components

import React from 'react'
import Button from './Button'

import { Icon } from '@swrve/icons'
import { storiesOf } from '@storybook/react'
import { withKnobs, boolean, text } from '@storybook/addon-knobs'
import { withInfo } from '@storybook/addon-info'

const styles = {
  margin: '20px 50px 40px'
}

const WrapperDecorator = storyFn => <div style={styles}>{storyFn()}</div>
const stories = storiesOf('Core|Button', module)
  .addDecorator(WrapperDecorator)
  .addDecorator(withKnobs)
  .addDecorator(withInfo)

stories.add(
  'A configurable button.',
  () => (
    <Button onClick={() => null} theme="primary">
      Button
    </Button>
  ),
  {
    info: `
    A standard button component which can have its appearance configured through
    the use of "theme" and "selected" props.

    It can accept all common props associated with a button element, in addition
    to a custom className prop.
  `
  }
)

stories.add(
  'The button accepts a theme prop to determine which kind of button is rendered.',
  () => (
    <div>
      <div className="mb-4">
        <Button onClick={() => null} theme="primary">
          primary
        </Button>
      </div>
      <div className="mb-4">
        <Button onClick={() => null} theme="primary-light">
          primary-light
        </Button>
      </div>
      <div className="mb-4">
        <Button onClick={() => null} theme="primary-outline">
          primary-outline
        </Button>
      </div>
      <div className="mb-4">
        <Button onClick={() => null} theme="secondary">
          secondary
        </Button>
      </div>
      <div className="mb-4">
        <Button onClick={() => null} theme="secondary-light">
          secondary-light
        </Button>
      </div>
      <div className="mb-4">
        <Button onClick={() => null} theme="secondary-outline">
          secondary-outline
        </Button>
      </div>
      <div className="mb-4">
        <Button onClick={() => null} theme="neutral">
          neutral
        </Button>
      </div>
      <div className="mb-4">
        <Button onClick={() => null} theme="neutral-outline">
          neutral-outline
        </Button>
      </div>
      <div className="mb-4">
        <Button onClick={() => null} theme="neutral-secondary">
          neutral-secondary
        </Button>
      </div>
      <div className="mb-4">
        <Button onClick={() => null} theme="selected-neutral-secondary">
          selected-neutral-secondary
        </Button>
      </div>
      <div className="mb-4">
        <Button onClick={() => null} theme="destructive">
          destructive
        </Button>
      </div>
      <div className="mb-4">
        <Button onClick={() => null} theme="dashed" className="w-32 h-10">
          <Icon name="plus" size="xsmall" />
        </Button>
      </div>
    </div>
  ),
  {
    info: `
    The "theme" prop determines the button's appearance. It accepts one of the
    following string values:
    ___
    - "primary"
    - "primary-light"
    - "primary-outline"
    - "secondary"
    - "secondary-light"
    - "secondary-outline"
    - "neutral"
    - "neutral-outline"
    - "destructive"
    `
  }
)

stories.add(
  'The button can be "selected".',
  () => (
    <Button onClick={() => null} theme="neutral-outline" selected={boolean('selected', false)}>
      I am a button.
    </Button>
  ),
  {
    info: `
    The button accepts a "selected" prop, with a value of true or false.
    ___
    If the value is true, the button is styled according to the rules defined
    within the CSS class ".selected-$THEME-btn". Currently, only the "neutral-outline"
    theme has an associated "selected" CSS class.
  `
  }
)

stories.add('The button is capable of receiving a wide range of props.', () => (
  <Button
    onClick={() => null}
    theme="primary"
    type={text('type', 'button')}
    disabled={boolean('disabled', false)}
    loading={boolean('loading', false)}
  >
    Button
  </Button>
))

stories.add('You can change the default fontSizeClass', () => (
  <Button
    onClick={() => null}
    fontSizeClass="text-xs"
    theme="primary"
    type={text('type', 'button')}
    disabled={boolean('disabled', false)}
  >
    Button
  </Button>
))