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

<Meta
  title="Components/Search"
  component={Search}
  decorators={[(storyFn) => <div className="input-story">{storyFn()}</div>]}
  argTypes={{
    type: {
      name: 'type',
      control: {
        type: null,
      },
    },
  }}
/>

# Search API

The API documentation of the Search React component. Learn more about the props and the CSS customization points.

## Import

```javascript
import { Search } from '@useblu/ocean-react';
```

## Usage

<Canvas withSource="open" withToolbar>
  <Story name="usage">
    <Search id="input-usage" placeholder="Placeholder..." />
  </Story>
</Canvas>

## Props

<ArgsTable of="." />

The ref is forwarded to the root element.

Any other props supplied will be provided to the root element (native element).

## CSS

| Global class          | Description                                              |
| --------------------- | -------------------------------------------------------- |
| .ods-search           | Styles applied to the Search element.                    |
| .ods-search--disabled | Styles applied to the Search element when it's disabled. |

If that's not sufficient, you can check the [implementation of the component](https://github.com/ocean-ds/ocean-web/blob/master/packages/ocean-react/src/Search/Search.tsx) for more detail.

## Inheritance

The props of the [FormControl](?path=/docs/components-formcontrol--page) component are also available.

## Playground

<Canvas>
  <Story
    name="playground"
    args={{
      placeholder: 'Placeholder...',
      blocked: false,
      disabled: false,
    }}
    argTypes={{
      placeholder: {
        control: 'text',
      },
      defaultValue: {
        control: 'text',
      },
      disabled: {
        control: 'boolean',
      },
      helperText: {
        control: 'text',
      },
    }}
  >
    {(props) => <Search id="Search-playground" {...props} />}
  </Story>
</Canvas>
