import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import ButtonsList from '../ButtonsList';
import { callToActionsMock, callToActionsCaptionMock,
    productBannerSkipConfiguratorCallToActionsMock } from '../../../../mocks/product/callToActions';
import * as ButtonsListStories from './ButtonsList.stories';

<Meta of={ButtonsListStories} />

# ButtonsList

<br />

## `ButtonsLists` are a group of a set of buttons in a list.

<br />

### Default

<Canvas>
  <Story of={ButtonsListStories.Default} />
</Canvas>

### With caption

<Canvas>
  <Story of={ButtonsListStories.WithCaption} />
</Canvas>

### Buy and Add to Cart

<Canvas>
  <Story of={ButtonsListStories.BuyAndAddToCart} />
</Canvas>

### Buy and Added to Cart

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