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

# Timepicker
<Meta
  title='Timepicker'
  component='fw-timepicker'
   />

## Props

<Props of="fw-timepicker"/>

## Usage

### Default
<Preview>
<Story name='Default with value'>{() => '<fw-timepicker value="23:00"></fw-timepicker>'}</Story>
</Preview>

### Interval specified
<Preview>
<Story name='Interval specified'>{() => '<fw-timepicker value="12:45" interval=45></fw-timepicker>'}</Story>
</Preview>

### Format specified
<Preview>
<Story name='Format specified'>{() => '<fw-timepicker format="HH:mm"></fw-timepicker>'}</Story>
</Preview>

### Time Range and relatively small interval
<Preview>
<Story name='Time Range and relatively small interval'>{() => '<fw-timepicker min-time="04:30 AM" max-time="08:26 AM" interval=3></fw-timepicker>'}</Story>
</Preview>

### Disabled Timepicker
<Preview>
<Story name='Disabled Timepicker'>{() => '<fw-timepicker value="00:30" disabled></fw-timepicker>'}</Story>
</Preview>