import { createDocumentation, createComponent } from "../../../globals/documentation/story";
import docs from "./pn-marketweb-carousel-docs.json";
import * as colors from "pn-design-assets/pn-assets/colors";
const { argTypes, textContent } = createDocumentation(docs);
const styleSample = `
  pn-marketweb-carousel  {width: 400px }
  .slider-wrapper { max-height: 400px; max-width: 400px }
  .slides-container { height: calc(100vh - 2rem) }
  .slide {padding: 2rem; }

  .slide:nth-child(1) {
    background-color: ${colors.blue400};
  }

  .slide:nth-child(2) {
    background-color: ${colors.green500};
  }

  .slide:nth-child(3) {
    background-color: ${colors.coral400};
    margin: 0;
  }

  .slide:nth-child(4) {
    background-color: ${colors.orange400};
  }`;
const meta = {
    title: 'Components/Widgets/Market Web Carousel',
    parameters: {
        actions: {},
        docs: {
            description: {
                story: textContent,
            },
        },
    },
    args: {
        nextButtonLabel: 'Next',
        previousButtonLabel: 'Previous',
        ariaNavigationLabel: 'Carousel Navigation',
        source: `{ "slides": [
          "<h2>Sample Heading</h2><p>Lorem ipsum dolor sit amet</p><p>Lorem ipsum dolor sit amet</p><p>Lorem ipsum dolor sit amet</p>",
          "<h2>Custom Heading</h2><p>Lorem ipsum dolor sit amet</p>",
          "<h3>Custom Heading</h3><p>Lorem ipsum dolor sit amet</p>"
        ]}`,
    },
    argTypes,
};
export default meta;
export const MarketWebCarousel = {
    name: 'Carousel with full width slides',
    render: args => {
        const component = createComponent('pn-marketweb-carousel', args);
        const customStyle = document.createElement('style');
        customStyle.innerHTML = styleSample;
        component.prepend(customStyle);
        return component;
    },
    args: {},
};
export const MarketWebCarouselExample = {
    name: 'Carousel with 1 slide',
    render: MarketWebCarousel.render,
    args: {
        source: `{ "slides": [
          "<h2>Sample Heading</h2><p>Sample Body</p>"
        ]}`,
    },
};
export const MarketWebCarouselExample2 = {
    name: 'Carousel with multiple slides, 1.5 slides visible',
    render: MarketWebCarousel.render,
    args: {
        source: `{ "slides": [
          "<h2>Sample Heading</h2><p>Lorem ipsum</p>",
          "<h2>Sample Heading</h2><p>Dolor sit amet</p>",
          "<h2>Sample Heading</h2><p>Dolor sit amet</p>"
        ]}`,
        slidesToShow: 1.5, // could be 1.25, 1.35, 1.45 or similar
    },
};
//# sourceMappingURL=pn-marketweb-carousel.stories.js.map
