import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
import { AnimatedFilterBar } from './animated-filter-bar.component';

<Meta title="One-off/AnimatedFilterBar" component={AnimatedFilterBar} />

# AnimatedFilterBar

This is the time range switching component for account history graphs.

- `options` – array of objects whose keys include `label` and `value`
- `value` – the current selected value
- `onChange` - callback function which will be called with a button's value when that button is clicked

```jsx
<AnimatedFilterBar
  options={[
    { value: 'm1', label: '1 month' },
    { value: 'm6', label: '6 months' },
    {
      value: 'y1',
      label: <FormattedMessage id="path:to:localized:string" />,
    },
  ]}
  value={value}
  onChange={setValue}
/>
```

## Normal

<Canvas withToolbar>
  <Story id="one-off-animatedfilterbar--normal" />
</Canvas>

## Default Selected Value

<Canvas withToolbar>
  <Story id="one-off-animatedfilterbar--default-selected-value" />
</Canvas>

## Custom Styling

<Canvas withToolbar>
  <Story id="one-off-animatedfilterbar--custom-styling" />
</Canvas>

## Localized Labels

<Canvas withToolbar>
  <Story id="one-off-animatedfilterbar--localized-labels" />
</Canvas>
