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

<Meta title="Atoms/Input Search" component={InputSearch} />

# Input Search
<br />

## `Input Searchs` are used as input for searching.
<br />

### Default
<Canvas>
    <Story name="Default">
        <InputSearch />
    </Story>
</Canvas>

### With search button
<Canvas>
    <Story name="With search button">
        <InputSearch submitLabel="Search" />
    </Story>
</Canvas>

### Custom search icon
<Canvas>
    <Story name="Custom search icon">
        <InputSearch submitLabel="Search" submitIconUrl="https://via.placeholder.com/30" />
    </Story>
</Canvas>

### Only search icon
<Canvas>
    <Story name="Only search icon">
        <InputSearch submitLabel="Search" submitIconOnly />
    </Story>
</Canvas>

### Only search Text
<Canvas>
    <Story name="Only search Text">
        <InputSearch submitLabel="Search" submitTextOnly />
    </Story>
</Canvas>

### Hidden Label
<Canvas>
    <Story name="Hidden Label">
        <InputSearch hiddenLabel />
    </Story>
</Canvas>

### Without borders
<Canvas>
    <Story name="Without borders">
        <InputSearch hiddenLabel withBorder={false} />
    </Story>
</Canvas>

### Custom Styles
<Canvas>
    <Story name="Custom Styles">
        <InputSearch
            submitLabel="Search"
            borderColor="#ff0000"
            submitBgColor="#008000"
            backgroundColor="#d3d3d3"
            borderRadius="10"
            height="50"
        />
    </Story>
</Canvas>

## Usage Example
```jsx
import InputSearch from '@appdirect/sfb-theme-components/src/atoms/input-search/InputSearch';

<InputSearch />
```

## Props
<ArgsTable of={InputSearch} />
