import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import CheckboxGroup from '../CheckboxGroup';
import { productFiltersMock } from '../../../../mocks/product/productFilters';
import * as CheckboxGroupStories from './CheckboxGroup.stories';

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

<Meta of={CheckboxGroupStories} />

# CheckboxGroup

<br />

## `CheckboxGroups` group a set of checkboxes in a list.

<br />

### Shallow

<Canvas>
  <Story of={CheckboxGroupStories.Shallow} />
</Canvas>

### Deep

<Canvas>
  <Story of={CheckboxGroupStories.Deep} />
</Canvas>

### With title

<Canvas>
  <Story of={CheckboxGroupStories.WithTitle} />
</Canvas>

### With hint

<Canvas>
  <Story of={CheckboxGroupStories.WithHint} />
</Canvas>

### Small

<Canvas>
  <Story of={CheckboxGroupStories.Small} />
</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} />
