import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import StickyBannerContainer from '../StickyBannerContainer';
import SelectionPreview from '../../selection-preview/SelectionPreview';
import { ProductEditionListComponent as ProductEditionList } from '../../product-edition/list/ProductEditionList';
import { editionsMockData as mockData } from '../../../../mocks/product/productEditions';
import { selectedAddonsMock } from '../../../../mocks/product/configuratorSelectedAddons';
import { productCardMock } from '../../../../mocks/product/productCard';
import * as StickyBannerContainerStories from './StickyBannerContainer.stories';

export const editionsData = {
    editions: mockData.items,
    i18n: mockData.i18n,
    callToActions: {
        items: [{
            label: 'Buy Now'
        }]
    }
};

<Meta of={StickyBannerContainerStories} />

# Sticky Banner

<br />

## `StickyBannerContainers` are used to build layouts with a sticky banner that shows

## in the top for desktop and in the bottom for mobile.

<br />

### Default

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

### Mobile

<Canvas>
  <Story of={StickyBannerContainerStories.Mobile} />
</Canvas>

### Simulating Configurator Layout

<Canvas>
  <Story of={StickyBannerContainerStories.Configurator} />
</Canvas>

## Usage Example

```jsx
import StickyBannerContainer
from '@appdirect/sfb-theme-components/src/atoms/sticky-banner-container/StickyBannerContainer';

<StickyBannerContainer
    stickyBannerContent={
        <div>
            This is the sticky banner content.
        </div>
    }
    content={
        <div>This is the content of the rest of the layout.</div>
    }
/>

```

## Props

<ArgsTable of={StickyBannerContainer} />
