import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'
import { MemoryRouter as Router } from 'react-router-dom'
import { select } from '@storybook/addon-knobs'
import TabBar from './'

<Meta
  title="Components/Wayfinding/TabBar"
  component={TabBar}
  parameters={{
    design: {
      type: 'figma',
      url:
        'https://www.figma.com/file/Wp9mDxTvWicSTWtezj2ImkMP/HSDS-Product?node-id=2582%3A12106',
    },
  }}
  decorators={[
    storyFn => {
      return <Router>{storyFn()}</Router>
    },
  ]}
/>

# TabBar

This component is provides a Tab-like component with support for [react-router](https://github.com/ReactTraining/react-router). The [TabBar.Item](./Item.md) component is a simple link to the `Nav.Item` component.

TabBar is a wrapper containing a `Toolbar`

<Canvas>
  <Story name="default">
    <TabBar
      align={select(
        'Align',
        {
          left: 'left',
          center: 'center',
          right: 'right',
        },
        'left'
      )}
    >
      <TabBar.Item key="home" to="/">
        Home
      </TabBar.Item>
      <TabBar.Item key="one" to="/one">
        One
      </TabBar.Item>
      <TabBar.Item key="two" to="/two">
        Two
      </TabBar.Item>
      <TabBar.Item key="three" to="/three" error="Something went wrong">
        Three
      </TabBar.Item>
      <TabBar.Item key="four" to="/four" disabled>
        Four
      </TabBar.Item>
    </TabBar>
  </Story>
</Canvas>

#### Reference

- **Designer**: Buzz
- **Engineering**: PL
- **Usage**: Beacon embed, CustomerProfile

<br />
<br />

### Props

<ArgsTable of={TabBar} />
