import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { FilterBar } from './filter-bar.component';
import { FlowPropsTable, ExternalReferenceLink } from '../../../utils';

<Meta title="Filter Bar" component={FilterBar} />

# FilterBar

A filter bar is a set of selectable tabs.

- `options` – array of objects whose keys include `label` and `value`
- `onChange` – change handler callback, whose only argument will be the `value` of the selected option
- `selectedValue` – optional pre-selected value

```jsx
<FilterBar
  onChange={(value) => {
    doSomething(value);
  }}
  options={[
    { value: 'm1', label: '1 month' },
    { value: 'm6', label: '6 months' },
    { value: 'm6', label: <FormattedMessage id="path:to:localized:string" /> },
  ]}
/>
```

# Default

<Canvas withToolbar>
  <Story id="filter-bar--default" />
</Canvas>

# With Localized Labels

<Canvas withToolbar>
  <Story id="filter-bar--localized-labels" />
</Canvas>

# With Selected Value

<Canvas withToolbar>
  <Story id="filter-bar--selected-value" />
</Canvas>

## Supported Layout Props:

Spacing:

<Canvas>
  <Story id="filter-bar--mixins-spacing" />
</Canvas>

## Props

<FlowPropsTable ofComponent={FilterBar} />

## External Reference

<ExternalReferenceLink
  src="https://github.com/wealthsimple/patchwork/tree/master/core/data/filter-bar"
  type="github"
/>
