@postnord/web-components/collection/components/content/pn-accordion/pn-accordion.stories.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import { createDocumentation } from "../../../globals/documentation/story";
import docs from "./pn-accordion-docs.json";
const { argTypes, textContent } = createDocumentation(docs);
import { PnAccordionRow } from "./row/pn-accordion-row.stories";
import { getFigmaUrl } from "../../../globals/figmaLinks";
/**
 * The `pn-accordion` component is a container for `pn-accordion-row` elements.
 * This component adds some space between each row and provides the `single` prop feature.
 * Which will only allow a single row to be open at once.
 *
 * Read more about the [pn-accordion-row](?path=/docs/components-content-accordion-row--docs)
 */
const meta = {
    title: 'Components/Content/Accordion',
    component: 'pn-accordion',
    parameters: {
        layout: 'padded',
        design: {
            type: 'figma',
            url: getFigmaUrl(import.meta.url),
        },
        actions: {
            handles: ['togglerow'],
        },
    },
    args: {
        single: false,
    },
    argTypes,
};
export default meta;
export const PnAccordion = {
    name: 'pn-accordion',
    parameters: {
        docs: {
            description: {
                story: textContent,
            },
        },
    },
    render: (args, context) => {
        /** @ts-expect-error We are using the pn-accordion-row Story render which is a different context. */
        const accordion = PnAccordionRow.render(args, context);
        if (args.single)
            accordion.setAttribute('single', args.single.toString());
        return accordion;
    },
};
/** Sometimes you only want a single row open at once. With the `single` prop, you can force other accordion rows to close when one is being opened. */
export const PnAccordionSingle = {
    name: 'pn-accordion (single)',
    render: PnAccordion.render,
    args: {
        single: true,
    },
};
//# sourceMappingURL=pn-accordion.stories.js.map