@navinc/base-react-components/src/checkbox.story.js

Nav's Pattern Library

import React from 'react'
import withPropsCombinations from 'react-storybook-addon-props-combinations'
import styled from 'styled-components'
import Checkbox from './checkbox.js'
import readme from './checkbox.readme.md'

const AsideContent = styled.div`
  border-radius: 50%;
  background-color: black;
  height: 15px;
  width: 15px;
  min-height: 15px;
  min-width: 15px;
`

export default {
  title: 'Form Elements/Checkbox',
  component: Checkbox,
  parameters: {
    info: { text: readme },
  },
}

export const Basic = (args) => <Checkbox {...args} />

Basic.argTypes = {
  size: {
    type: 'select',
    options: ['sm', 'md'],
  },
}
Basic.args = {
  checkedBackgroundColor: 'pink',
  label: 'pick me',
  checked: false,
  disabled: false,
  errors: [],
  hasBorder: false,
  hasSpaceForErrors: false,
  size: 'md',
}

export const Variations = withPropsCombinations(Checkbox, {
  label: ['Pick me', 'Pick me Pick me Pick me Pick me Pick me Pick me Pick me Pick me Pick me Pick me', undefined],
  checked: [false, true],
  disabled: [false, true],
  errors: [[], ['An error']],
  hasBorder: [false, true],
  hasSpaceForErrors: [false, true],
  size: ['md', 'sm'],
  asideContent: [undefined, <AsideContent key="1" />],
})

Variations.parameters = {
  info: { disable: true },
}