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

<Meta title="Components/Navigation/Filter Bar ⚠️" component={FilterBar} />

# FilterBar

> ⚠️ This component is deprecated and will be removed in a future release. For tabs relating to graph time ranges, use `TimeRangeSelector`. For tabs, use `TabSet`. For secondary navigation links, use `SecondaryNavigation`.

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>
  <Story id="components-navigation-filter-bar-⚠️--default" />
</Canvas>

# With Localized Labels

<Canvas>
  <Story id="components-navigation-filter-bar-⚠️--localized-labels" />
</Canvas>

# With Selected Value

<Canvas>
  <Story id="components-navigation-filter-bar-⚠️--selected-value" />
</Canvas>

## Supported Property Mixins:

Spacing:

<Canvas>
  <Story id="components-navigation-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"
/>
