import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'
import { boolean, number } from '@storybook/addon-knobs'
import FilteredList from './'

<Meta
  title="Components/Text/FilteredList"
  component={FilteredList}
  parameters={{
    design: {
      type: 'figma',
      url:
        'https://www.figma.com/file/Wp9mDxTvWicSTWtezj2ImkMP/HSDS-Product?node-id=2582%3A11189',
    },
  }}
/>

# FilteredList

A FilteredList component will display a list of items based on a limit number. If the number of items goes over the limit, a badge will be displayed after the list.
Hovering on the badge will show all remainder items in a tooltip

<Canvas>
  <Story name="default">
    <FilteredList
      items={[
        'kindalongemail@test.com',
        'abc@abc.com',
        'test@cde.com',
        'anothertest@cde.com',
        'lasttest@cde.com',
      ]}
      limit={number('limit', 2)}
      inline={boolean('inline', false)}
    />
  </Story>
</Canvas>

#### Reference

- **Designer**: Buzz
- **Engineering**: PL
- **Usage**: HsApp (Customer List)

<br />
<br />

### Props

<ArgsTable of={FilteredList} />
