import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import SelectedAddon from '../SelectedAddon';
import { selectedAddonsMock } from '../../../../mocks/product/configuratorSelectedAddons';
import { CollapsibleJsonSnippet } from '../../../tools/docTools';

export const addonData = selectedAddonsMock.configurator.selectedAddons[0];

<Meta title="Atoms/Selected Addon" component={SelectedAddon} />

# SelectedAddon
<br />

## `SelectedAddons` are useful to display addons in contexts like product previews.
<br />

### Default
<Canvas>
    <Story name="Default">
        <SelectedAddon data={addonData} />
    </Story>
</Canvas>


## Usage Example
<CollapsibleJsonSnippet
    summary="addonData"
    code={addonData}
/>


```jsx
import SelectedAddon from '@appdirect/sfb-theme-components/src/atoms/selected-addon/SelectedAddon';

<SelectedAddon data={addonData} />
```
## Props

<ArgsTable of={SelectedAddon} />
