import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import CheckboxGroup from '../CheckboxGroup';
import { productFiltersMock } from '../../../../mocks/product/productFilters';

export const shallowItems = productFiltersMock.items.find(item => item.shallow).items;
export const deepItems = productFiltersMock.items.find(item => !item.shallow).items;

<Meta title="Atoms/CheckboxGroup" component={CheckboxGroup} />

# CheckboxGroup
<br />

## `CheckboxGroups` group a set of checkboxes in a list.
<br />

### Shallow
<Canvas>
    <Story name="Shalow">
        <CheckboxGroup items={shallowItems} />
    </Story>
</Canvas>

### Deep
<Canvas>
    <Story name="Deep">
        <CheckboxGroup
            items={deepItems}
            isDisplayChildren
        />
    </Story>
</Canvas>

### With title
<Canvas>
    <Story name="With Title">
        <CheckboxGroup
            items={deepItems}
            title="Title"
        />
    </Story>
</Canvas>

### With hint
<Canvas>
    <Story name="With Hint">
        <CheckboxGroup
            items={deepItems}
            hint="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        />
    </Story>
</Canvas>

### Small
<Canvas>
    <Story name="Small">
        <CheckboxGroup
            items={deepItems}
            checkboxSize="small"
        />
    </Story>
</Canvas>


## Usage Example

```jsx
import CheckboxGroup from '@appdirect/sfb-theme-components/src/atoms/checkbox-group/CheckboxGroup';

<CheckboxGroup
    items={[
        {
            queryKey: 'filter',
            id: 'FEATURED',
            text: 'Featured Apps',
            url: '/en-US/listing?filter=FEATURED',
            selected: false
        }, {
            queryKey: 'filter',
            id: 'FREE',
            text: 'Free',
            url: '/en-US/listing?filter=FREE',
            selected: false
        }, {
            queryKey: 'filter',
            id: 'DISCOUNT',
            text: 'Discount Available',
            url: '/en-US/listing?filter=DISCOUNT',
            selected: false
        }, {
            queryKey: 'filter',
            id: 'FREE_TRIAL',
            text: 'Free Trial Available',
            url: '/en-US/listing?filter=FREE_TRIAL',
            selected: false
        }
    ]}
    checkboxSize="small"
/>
```
## Props

<ArgsTable of={CheckboxGroup} />
