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

export const baseSettings = {
    inputName: 'search',
    searchPlaceholder: 'Search this site',
    searchBackgroundColor: '#ffffff',
    searchCornerRadius: 10,
    onSearch: (formData) => alert(`search for ${formData.search}`)
}

<Meta title="Atoms (Preview)/SearchBar V2" component={SearchBarV2} />

# SearchBarV2
<br />

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

### Default
<Canvas>
    <Story name="Default">
        <SearchBarV2 {...baseSettings}  />
    </Story>
</Canvas>

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

<SearchBar settings={{
    inputName: 'search',
    searchPlaceholder: 'Search this site',
    searchBackgroundColor: '#ffffff',
    searchCornerRadius: 10,
    onSearch: (formData) => alert(`search for ${formData.search}`)
}} />
```
## Props

<ArgsTable of={SearchBarV2} />
