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

export const bundleLogoDataMock = productBundleMock.bundle.items[0].card;

<Meta title="Atoms/Bundle Logo" component={BundleLogo} />

# BundleLogo
<br />

## `BundleLogos` are used to display a product bundle logo with a title.
<br />

### Default
<Canvas>
    <Story name="Default">
        <BundleLogo data={bundleLogoDataMock} />
    </Story>
</Canvas>

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

```jsx
import BundleLogo from '@appdirect/sfb-theme-components/src/atoms/bundle-logo/BundleLogo';

<BundleLogo data={dataObj} />
```
## Props
<ArgsTable of={BundleLogo} />
