import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';

import Dropdown from '.';

# Dropdown

A toggleable menu that allows the user to choose one value from a predefined list

<Canvas>
  <Story id="components-ui-dropdown--default-story" />
</Canvas>

## Props

<ArgsTable of={Dropdown} />

## Usage

### Options Without Names

<Canvas>
  <Story id="components-ui-dropdown--options-without-names" />
</Canvas>

### Options With Long Names

<Canvas>
  <Story id="components-ui-dropdown--options-with-long-names" />
</Canvas>

### Options With Long Names And Short Width

<Canvas>
  <Story id="components-ui-dropdown--options-with-long-names-and-short-width" />
</Canvas>
