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

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

# Search Input Field

A simple search input field - provides no results display logic. Use this if you plan to build custom results handling. If you want something more fully-featured, use SearchInput instead.

## Stories

### Default

<Canvas withToolbar>
  <Story id="forms-searchinputfield--default" />
</Canvas>

### Bold

<Canvas withToolbar>
  <Story id="forms-searchinputfield--bold" />
</Canvas>

### Large

<Canvas withToolbar>
  <Story id="forms-searchinputfield--large" />
</Canvas>

### Value

<Canvas withToolbar>
  <Story id="forms-searchinputfield--value" />
</Canvas>

### Hidden Label

<Canvas withToolbar>
  <Story id="forms-searchinputfield--hidden-label" />
</Canvas>

### Focus on Mount

<Canvas withToolbar>
  <Story id="forms-searchinputfield--focus-on-mount" />
</Canvas>

### Default

<Canvas withToolbar>
  <Story id="forms-searchinputfield--default" />
</Canvas>

## Supported Layout Props

Margin-only spacing:

<Canvas withToolbar>
  <Story id="forms-searchinputfield--mixins-margin-only-spacing" />
</Canvas>

Stackee:

<Canvas withToolbar>
  <Story id="forms-searchinputfield--mixins-stackee" />
</Canvas>

## Props

<FlowPropsTable ofComponent={SearchInputField} />

## 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-field"
  type="github"
/>
