import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'
import Switch from './'

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

# Switch

A Switch component is an alternative to a `Checkbox` that provides a switch-toggle UI.

<Canvas>
  <Story name="default">
    <div style={{ display: 'flex', width: '100%' }}>
      <div style={{ flexBasis: '100px', flexGrow: '0', flexShrink: '0' }}>
        <h2>sm</h2>
        <div
          style={{
            fontFamily: 'monospace',
            fontSize: '11px',
            margin: '10px 0 5px',
          }}
        >
          default:
        </div>
        <Switch size="sm" />
        <br />
        <div
          style={{
            fontFamily: 'monospace',
            fontSize: '11px',
            margin: '10px 0 5px',
          }}
        >
          checked:
        </div>
        <Switch checked size="sm" />
        <br />
        <div
          style={{
            fontFamily: 'monospace',
            fontSize: '11px',
            margin: '10px 0 5px',
          }}
        >
          disabled:
        </div>
        <Switch disabled size="sm" />
        <br />
        <div
          style={{
            fontFamily: 'monospace',
            fontSize: '11px',
            margin: '10px 0 5px',
          }}
        >
          isLoading:
        </div>
        <Switch isLoading size="sm" />
        <br />
        <div
          style={{
            fontFamily: 'monospace',
            fontSize: '11px',
            margin: '10px 0 5px',
          }}
        >
          error:
        </div>
        <Switch state="error" size="sm" />
        <br />
      </div>
      <div style={{ flexBasis: '100px', flexGrow: '0', flexShrink: '0' }}>
        <h2>md</h2>
        <div
          style={{
            fontFamily: 'monospace',
            fontSize: '11px',
            margin: '10px 0 5px',
          }}
        >
          default:
        </div>
        <Switch />
        <br />
        <div
          style={{
            fontFamily: 'monospace',
            fontSize: '11px',
            margin: '10px 0 5px',
          }}
        >
          checked:
        </div>
        <Switch checked />
        <br />
        <div
          style={{
            fontFamily: 'monospace',
            fontSize: '11px',
            margin: '10px 0 5px',
          }}
        >
          disabled:
        </div>
        <Switch disabled />
        <br />
        <div
          style={{
            fontFamily: 'monospace',
            fontSize: '11px',
            margin: '10px 0 5px',
          }}
        >
          isLoading:
        </div>
        <Switch isLoading />
        <br />
        <div
          style={{
            fontFamily: 'monospace',
            fontSize: '11px',
            margin: '10px 0 5px',
          }}
        >
          error:
        </div>
        <Switch state="error" />
        <br />
      </div>
      <div style={{ flexBasis: '100px', flexGrow: '0', flexShrink: '0' }}>
        <h2>lg</h2>
        <div
          style={{
            fontFamily: 'monospace',
            fontSize: '11px',
            margin: '10px 0 5px',
          }}
        >
          default:
        </div>
        <Switch size="lg" />
        <br />
        <div
          style={{
            fontFamily: 'monospace',
            fontSize: '11px',
            margin: '10px 0 5px',
          }}
        >
          checked:
        </div>
        <Switch checked size="lg" />
        <br />
        <div
          style={{
            fontFamily: 'monospace',
            fontSize: '11px',
            margin: '10px 0 5px',
          }}
        >
          disabled:
        </div>
        <Switch disabled size="lg" />
        <br />
        <div
          style={{
            fontFamily: 'monospace',
            fontSize: '11px',
            margin: '10px 0 5px',
          }}
        >
          isLoading:
        </div>
        <Switch isLoading size="lg" />
        <br />
        <div
          style={{
            fontFamily: 'monospace',
            fontSize: '11px',
            margin: '10px 0 5px',
          }}
        >
          error:
        </div>
        <Switch state="error" size="lg" />
        <br />
      </div>
    </div>
  </Story>
</Canvas>

#### Reference

- **Designer**: Buzz
- **Engineering**: Juan Pablo
- **Usage**: Messages, Beacon embed, Mailbox Settings

<br />
<br />

### Props

<ArgsTable of={Switch} />
