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

Nav's Pattern Library

import React from 'react'
import withPropsCombinations from 'react-storybook-addon-props-combinations'
import styled from 'styled-components'
import Radio from './radio.js'
import readme from './radio.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/Radio',
  component: Radio,
  parameters: {
    info: { text: readme },
  },
}

const Template = (args) => <Radio {...args} />

export const Basic = Template.bind({})

Basic.args = {
  label: 'Pick me',
  checked: false,
  disabled: false,
  isInvalid: false,
  hasBorder: false,
  checkedBackgroundColor: 'pink',
}

export const Variations = withPropsCombinations(Radio, {
  label: [
    'Pick me',
    'Pick me Pick me Pick me Pick me Pick me Pick me Pick me Pick me Pick me Pick me Pick me Pick me Pick me Pick me Pick me Pick me Pick me Pick me Pick me Pick me Pick me Pick me Pick me Pick me Pick me',
  ],
  checked: [false, true],
  disabled: [false, true],
  hasBorder: [false, true],
  asideContent: [undefined, <AsideContent key="1" />],
})

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