import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'
import { boolean } from '@storybook/addon-knobs'
import { ChoiceGroup } from '../index'
import RadioCard from './'

import MessagesFirstVisit from '@helpscout/hsds-illos/messages-first-visit'
import MessagesManual from '@helpscout/hsds-illos/messages-manual'
import MessagesSequence from '@helpscout/hsds-illos/messages-sequence'

<Meta
  title="Components/Forms/RadioCard"
  component={RadioCard}
  parameters={{
    design: {
      type: 'figma',
      url:
        'https://www.figma.com/file/Wp9mDxTvWicSTWtezj2ImkMP/HSDS-Product?node-id=2582%3A9509',
    },
  }}
/>

# RadioCard

This component provides richer context to the of the default HTML `<input>` of type `radio`.

<Canvas>
  <Story name="default">
    <RadioCard
      icon="fab-chat"
      content="some content"
      heading="Chat"
      value="chat"
      maxWidth="214px"
    />
  </Story>
</Canvas>

#### Reference

- **Designer**: Buzz
- **Engineering**: PL
- **Usage**: Beacon embed

<br />
<br />

### Props

<ArgsTable of={RadioCard} />

### Stories

#### Inside a group

<Canvas>
  <Story name="Inside a group">
    <ChoiceGroup
      align="horizontal"
      isResponsive
      multiSelect={false}
      onChange={() => {
        console.log('onCHANGE on group')
      }}
    >
      <RadioCard
        icon="fab-chat"
        value="chat"
        onChange={() => {
          console.log('onCHANGE on card')
        }}
      />
      <RadioCard icon="fab-antenna" value="antenna" />
      <RadioCard icon="fab-buoy" value="buoy" />
      <RadioCard icon="fab-search" value="search" />
      <RadioCard icon="fab-question" value="question" />
    </ChoiceGroup>
  </Story>
</Canvas>

#### With headings

<Canvas>
  <Story name="with headings">
    <ChoiceGroup
      align="horizontal"
      choiceMaxWidth="214px"
      isResponsive
      multiSelect={boolean('multiSelect', false)}
    >
      <RadioCard
        icon="fab-chat"
        content="some content"
        heading="Chat"
        value="chat"
      />
      <RadioCard
        icon="fab-antenna"
        content="some content"
        heading="Antenna"
        value="antenna"
      />
      <RadioCard
        icon="fab-buoy"
        content="some content"
        heading="Buoy"
        value="buoy"
      />
    </ChoiceGroup>
  </Story>
</Canvas>

#### With illos

<Canvas>
  <Story name="with illos">
    <ChoiceGroup
      align="horizontal"
      choiceMaxWidth="160px"
      choiceHeight="160px"
      isResponsive
      multiSelect={false}
    >
      <RadioCard
        icon={<MessagesFirstVisit />}
        content="First visit"
        value="first"
        iconSize="72"
      />
      <RadioCard
        icon={<MessagesSequence />}
        content="Sequence"
        value="sequence"
        iconSize="72"
      />
      <RadioCard
        icon={<MessagesManual />}
        content="Manual"
        value="manual"
        iconSize="72"
      />
    </ChoiceGroup>
  </Story>
</Canvas>
