import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { SearchInput } from './search-input.component';
import {
  FlowPropsTable,
  ExternalReferenceLink,
} from '../../../../utils/storybook/docs-support';

<Meta title="SearchInput" component={SearchInput} />

# Search Input

A search input that displays its results in a drop-down list.

## Stories

### Default

<Canvas>
  <Story height="400px" id="components-inputs-searchinput--default" />
</Canvas>

### Not Found Entry

<Canvas>
  <Story height="400px" id="components-inputs-searchinput--not-found-button" />
</Canvas>

### Custom Item Renderer and Separators

<Canvas>
  <Story
    height="400px"
    id="components-inputs-searchinput--custom-item-renderer-and-separators"
  />
</Canvas>

## Label Styles

Floating labels are the preferred design going forward. However for legacy purposes we also support an "external" label style:

<Canvas>
  <Story id="components-inputs-searchinput--external-label" />
</Canvas>

<Canvas>
  <Story id="components-inputs-searchinput--external-large-label" />
</Canvas>

## Supported Property Mixins

Spacing:

<Canvas>
  <Story height="2400px" id="components-inputs-searchinput--mixins-spacing" />
</Canvas>

Stackee:

<Canvas>
  <Story height="400px" id="components-inputs-searchinput--mixins-stackee" />
</Canvas>

## Props

<FlowPropsTable ofComponent={SearchInput} />

## External Reference

<ExternalReferenceLink
  src="https://www.figma.com/file/r5zKXblbSt0b869OEcOWXu/Patchwork-Web?node-id=637%3A66"
  type="figma"
/>
<ExternalReferenceLink
  src="https://github.com/wealthsimple/patchwork/tree/master/core/forms/search-input"
  type="github"
/>