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

Core set of Swrve UI Components

import React from 'react'
import { storiesOf } from '@storybook/react'
import { withInfo } from '@storybook/addon-info'
import { boolean, withKnobs } from '@storybook/addon-knobs'
import { action } from '@storybook/addon-actions'
import CheckboxListItem from './checkbox-list-item'

const stories = storiesOf('Core|Checkbox', module).addDecorator(withInfo())

stories
  .addDecorator(withKnobs)
  .add('Default Checkbox', () => {
    return (
      <div className="w-64">
        <CheckboxListItem
          checked={boolean('Checkbox 1', false)}
          onChange={action('checkbox')}
          label="I am default unchecked"
        />
        <CheckboxListItem
          checked={boolean('Checkbox 2', true)}
          onChange={action('checkbox')}
          label="I am default checked"
        />
        <CheckboxListItem
          checked={boolean('Checkbox 3', true)}
          onChange={action('checkbox')}
          disabled
          label="I am Disabled and checked"
        />
        <CheckboxListItem
          checked={boolean('Checkbox 4', false)}
          onChange={action('checkbox')}
          disabled
          label="I am Disabled"
        />
      </div>
    )
  })
  .add('Different theme Checkbox', () => {
    return (
      <div className="w-64">
        <CheckboxListItem
          theme="primary"
          checked={boolean('Checkbox 1', false)}
          label="I am default unchecked"
        />
        <CheckboxListItem
          theme="primary"
          checked={boolean('Checkbox 2', true)}
          label="I am default checked"
        />
        <CheckboxListItem
          theme="primary"
          checked={boolean('Checkbox 3', true)}
          disabled
          label="I am Disabled and checked"
        />
        <CheckboxListItem
          theme="primary"
          checked={boolean('Checkbox 4', false)}
          disabled
          label="I am Disabled"
        />
      </div>
    )
  })

  .add('A different position', () => {
    return (
      <div className="w-64">
        <CheckboxListItem
          theme="primary"
          checked={boolean('Checkbox 1', false)}
          labelPosition="left"
          label="I am default unchecked"
        />
        <CheckboxListItem
          theme="primary"
          checked={boolean('Checkbox 2', true)}
          labelPosition="left"
          label="I am default checked"
        />
        <CheckboxListItem
          theme="primary"
          checked={boolean('Checkbox 3', true)}
          disabled
          labelPosition="left"
          label="I am Disabled and checked"
        />
        <CheckboxListItem
          theme="primary"
          checked={boolean('Checkbox 4', false)}
          disabled
          labelPosition="left"
          label="I am Disabled"
        />
      </div>
    )
  })

  .add('With children component', () => {
    return (
      <div className="w-64">
        <CheckboxListItem
          theme="primary"
          checked={boolean('Checkbox 1', false)}
          labelPosition="left"
          label="I am default unchecked"
        >
          <div className="w-full bg-amber-100">I am some extra content to display</div>
        </CheckboxListItem>
      </div>
    )
  })