import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import ButtonsList from '../ButtonsList';
import { callToActionsMock, callToActionsCaptionMock,
    productBannerSkipConfiguratorCallToActionsMock } from '../../../../mocks/product/callToActions';

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

# ButtonsList
<br />

## `ButtonsLists` are a group of a set of buttons in a list.
<br />

### Default
<Canvas>
    <Story name="Default">
        <ButtonsList data={callToActionsMock} />
    </Story>
</Canvas>

### With caption
<Canvas>
    <Story name="With Caption">
        <ButtonsList data={callToActionsCaptionMock} />
    </Story>
</Canvas>

### Buy and Add to Cart
<Canvas>
    <Story name="Buy and Add to Cart">
        <ButtonsList data={{ callToActions: productBannerSkipConfiguratorCallToActionsMock }} />
    </Story>
</Canvas>

### Buy and Added to Cart
<Canvas>
    <Story name="Buy and Added to Cart">
        <ButtonsList data={
            {
                callToActions: productBannerSkipConfiguratorCallToActionsMock,
                isAddedToCart: true,
                i18n: {
                    cart: {
                        addedToCart: 'Added to Cart'
                    }
                }
            }
        }
        />
    </Story>
</Canvas>

## Usage Example
```jsx
import ButtonsList from '@appdirect/sfb-theme-components/src/atoms/buttons-list/ButtonsList';

<ButtonsList data={{
    callToActions: {
        items: [
            {
                label: 'First Button',
                tooltip: 'Tooltip',
                isPrimary: true,
                enabled: true,
                url: 'google.ca',
                actionType: 'BUY'
            },
            {
                label: 'Second Button',
                tooltip: '',
                isPrimary: false,
                enabled: false,
                url: '',
                actionType: ''
            }
        ]
    }
    }}
/>

```
## Props

<ArgsTable of={ButtonsList} />
