@swrve/core/src/option-group/option-group.stories.js

Core set of Swrve UI Components

import React from 'react'
import { storiesOf } from '@storybook/react'
import OptionGroup from './option-group'
import { Button } from '../index'
import IconButton from '../icon-button/icon-button'

import { withInfo } from '@storybook/addon-info'
import { withKnobs, boolean } from '@storybook/addon-knobs'

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

const WrapperDecorator = storyFn => <div style={styles}>{storyFn()}</div>

const stories = storiesOf('Core|OptionGroup', module)
  .addDecorator(WrapperDecorator)
  .addDecorator(withKnobs)
  .addDecorator(withInfo)

stories.add(
  'A component for grouping option buttons.',
  () => {
    return (
      <OptionGroup>
        <IconButton size="large" iconName="reports" label="I am a label" onClick={() => {}} />
        <IconButton
          size="large"
          iconName="iam"
          label="I am a label"
          selected={boolean('selected', true)}
          onClick={() => {}}
        />
        <IconButton size="large" iconName="push" label="I am a label" onClick={() => {}} />
      </OptionGroup>
    )
  },
  {
    info: `This component takes its children and arranges them in a rounded-rectangular
    shape.

    It's intended for use with button components (like <Button /> and <IconButton />).

    ___
    Internally, it maps its children and clones each child, in order to inject a
    className prop with a dynamic value, for the appropriate application of
    border and border-radius styles.

    ___
    The example below features a group of large <IconButton /> components.`
  }
)

stories.add(
  'Example of use with small icon buttons.',
  () => {
    const labelIsVisibleProp = boolean('labelIsVisible', true)

    return (
      <OptionGroup>
        <IconButton
          labelIsVisible={labelIsVisibleProp}
          size="small"
          iconName="iam"
          label="I am a label"
          selected={boolean('selected', false)}
          onClick={() => {}}
        />
        <IconButton
          onClick={() => {}}
          labelIsVisible={labelIsVisibleProp}
          size="small"
          iconName="push"
          label="I am a label"
        />
      </OptionGroup>
    )
  },
  {
    info: `
    The component will group a set of small <IconButton /> components appropriately,
    both when the button label is and is not visible.
  `
  }
)

stories.add(
  'Example of use with regular buttons.',
  () => {
    return (
      <OptionGroup>
        <Button theme="neutral-outline" onClick={() => null}>
          Button
        </Button>
        <Button theme="neutral-outline" onClick={() => null}>
          Button
        </Button>
        <Button theme="neutral-outline" onClick={() => null}>
          Button
        </Button>
        <Button theme="neutral-outline" onClick={() => null} selected={boolean('selected', true)}>
          Button
        </Button>
      </OptionGroup>
    )
  },
  {
    info: `
    The component will group a set of <Button /> components.
  `
  }
)

stories.add(
  'Example of use with buttons with options set to full width',
  () => {
    return (
      <div className="w-64">
        <OptionGroup className="flex">
          <Button className="flex-grow" theme="neutral-outline" onClick={() => null}>
            Button
          </Button>
          <Button className="flex-grow" theme="neutral-outline" onClick={() => null}>
            Button
          </Button>
        </OptionGroup>
      </div>
    )
  },
  {
    info: `
    The component will group a set of <Button /> components.
  `
  }
)