import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';

# Select

<Meta title='Select' component='fw-select' />

## Props

<Props of='fw-select' />

## Usage

### Default

<Preview>
  <Story name='Default'>
    {() => `
    <fw-select>
    </fw-select>
    `}
  </Story>
</Preview>

### With options

<Preview>
  <Story name='WithSelectOptions'>
    {() => `
    <fw-select label="Select the house" required="true" value="1">
        <fw-select-option value="1">Starks</fw-select-option>
        <fw-select-option value="2">Lannisters</fw-select-option>
    </fw-select>
    `}
  </Story>
</Preview>

### Disabled

<Preview>
  <Story name='Disabled'>
    {() => `
    <fw-select label="Select the house" required="true" value="1" disabled>
        <fw-select-option value="1">Starks</fw-select-option>
        <fw-select-option value="2">Lannisters</fw-select-option>
    </fw-select>
    `}
  </Story>
</Preview>

### Readonly

<Preview>
  <Story name='Readonly'>
    {() => `
    <fw-select label="Select the house" required="true" value="1" readonly>
        <fw-select-option value="1">Starks</fw-select-option>
        <fw-select-option value="2">Lannisters</fw-select-option>
    </fw-select>
    `}
  </Story>
</Preview>

### Multi-Select Mode

<Preview>
  <Story name='MultiSelect'>
    {() => `
    <fw-select multiple max="2" label="Select the GOT house" hint-text="Choose the house where you belong" required="true">
        <fw-select-option value="1">Starks</fw-select-option>
        <fw-select-option value="2">Lannisters</fw-select-option>
        <fw-select-option value="3" selected>Sand</fw-select-option>
        <fw-select-option value="4">Greyjoys</fw-select-option>
        <fw-select-option value="5">Tyrell</fw-select-option>
    </fw-select>
    `}
  </Story>
</Preview>

### With options and selected key

<Preview>
  <Story name='WithOptionsAndSelectedKey'>
    {() => `<fw-select label="Select the GOT house" hint-text="Choose the house where you belong" required="true">
                <fw-select-option value="1">Starks</fw-select-option>
                <fw-select-option value="2" disabled>Lannisters</fw-select-option>
                <fw-select-option value="3">Sand</fw-select-option>
                <fw-select-option value="4">Greyjoys</fw-select-option>
                <fw-select-option value="5">Tyrell</fw-select-option>
            </fw-select>
            <fw-select label="Select the GOT house" selected-value="2" required="true">
                <fw-select-option value="1">Starks</fw-select-option>
                <fw-select-option value="2">Lannisters</fw-select-option>
                <fw-select-option value="3">Sand</fw-select-option>
                <fw-select-option value="4">Greyjoys</fw-select-option>
                <fw-select-option value="5">Tyrell</fw-select-option>
            </fw-select>
            <fw-select label="Select time" force-select="false" required="true">
                <fw-select-option value="02:00">02:00</fw-select-option>
                <fw-select-option value="12:15">12:15</fw-select-option>
                <fw-select-option value="12:30" disabled>12:30</fw-select-option>
                <fw-select-option value="12:45">12:45</fw-select-option>
                <fw-select-option value="22:55">22:55</fw-select-option>
            </fw-select>`}
  </Story>
</Preview>
