import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import SearchBar from '../SearchBar';
import { getKnobs } from '../../../tools/knobsHelper';

<Meta title="Atoms/SearchBar" component={SearchBar} />

# SearchBar
<br />

## `SearchBars` package together an input and button to create custom search bars.
<br />

### Default
<Canvas>
    <Story name="Default">
        <SearchBar settings={getKnobs(SearchBar.schema().form)} />
    </Story>
</Canvas>

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

<SearchBar settings={{
    buttonColor: 'pink',
    backgroundColor: 'violet',
    borderColor: 'fuchsia',
    placeHolder: 'Search',
    cornerRadius: 3,
    borderVisible: true
}} />
```
## Props

<ArgsTable of={SearchBar} />
