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

Core set of Swrve UI Components

import React from 'react'

import { action } from '@storybook/addon-actions'
import CheckboxListItem from './checkbox-list-item'

const checkboxStoryArgs = {
  checkbox1: false,
  checkbox2: true,
  checkbox3: true,
  checkbox4: false
}
const checkboxStoryArgTypes = {
  checkbox1: {
    name: 'Checkbox 1',
    control: 'boolean'
  },
  checkbox2: {
    name: 'Checkbox 2',
    control: 'boolean'
  },
  checkbox3: {
    name: 'Checkbox 3',
    control: 'boolean'
  },
  checkbox4: {
    name: 'Checkbox 4',
    control: 'boolean'
  }
}

export const DefaultCheckbox = args => {
  return (
    <div className="w-64">
      <CheckboxListItem
        checked={args.checkbox1}
        onChange={action('checkbox')}
        label="I am default unchecked"
        {...args}
      />
      <CheckboxListItem
        checked={args.checkbox2}
        onChange={action('checkbox')}
        label="I am default checked"
        {...args}
      />
      <CheckboxListItem
        checked={args.checkbox3}
        onChange={action('checkbox')}
        disabled
        label="I am Disabled and checked"
        {...args}
      />
      <CheckboxListItem
        checked={args.checkbox4}
        onChange={action('checkbox')}
        disabled
        label="I am Disabled"
        {...args}
      />
    </div>
  )
}

DefaultCheckbox.storyName = 'Default Checkbox'
DefaultCheckbox.args = checkboxStoryArgs
DefaultCheckbox.argTypes = checkboxStoryArgTypes

export const DifferentThemeCheckbox = args => {
  return (
    <div className="w-64">
      <CheckboxListItem theme="primary" checked={args.checkbox1} label="I am default unchecked" />
      <CheckboxListItem theme="primary" checked={args.checkbox2} label="I am default checked" />
      <CheckboxListItem
        theme="primary"
        checked={args.checkbox3}
        disabled
        label="I am Disabled and checked"
        {...args}
      />
      <CheckboxListItem theme="primary" checked={args.checkbox4} disabled label="I am Disabled" />
    </div>
  )
}

DifferentThemeCheckbox.storyName = 'Different theme Checkbox'
DifferentThemeCheckbox.args = checkboxStoryArgs
DifferentThemeCheckbox.argTypes = checkboxStoryArgTypes

export const ADifferentPosition = args => {
  return (
    <div className="w-64">
      <CheckboxListItem
        theme="primary"
        checked={args.checkbox1}
        labelPosition="left"
        label="I am default unchecked"
      />
      <CheckboxListItem
        theme="primary"
        checked={args.checkbox2}
        labelPosition="left"
        label="I am default checked"
      />
      <CheckboxListItem
        theme="primary"
        checked={args.checkbox3}
        disabled
        labelPosition="left"
        label="I am Disabled and checked"
      />
      <CheckboxListItem
        theme="primary"
        checked={args.checkbox4}
        disabled
        labelPosition="left"
        label="I am Disabled"
      />
    </div>
  )
}

ADifferentPosition.storyName = 'A different position'
ADifferentPosition.args = checkboxStoryArgs
ADifferentPosition.argTypes = checkboxStoryArgTypes

export const WithChildrenComponent = args => {
  return (
    <div className="w-64">
      <CheckboxListItem
        theme="primary"
        checked={args.checkbox1}
        labelPosition="left"
        label="I am default unchecked"
      >
        <div className="w-full bg-amber-100">I am some extra content to display</div>
      </CheckboxListItem>
    </div>
  )
}

WithChildrenComponent.storyName = 'With children component'
WithChildrenComponent.args = { checkbox1: true }
WithChildrenComponent.argTypes = {
  checkbox1: {
    control: 'boolean'
  }
}

export default {
  title: 'Core/Checkbox',
  component: CheckboxListItem
}