@postnord/web-components/collection/components/input/pn-segmented-control/segment/pn-segment.stories.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
const segments = [
    {
        label: 'Business',
        value: 'two',
        icon: 'company',
        disabled: false,
    },
    {
        label: 'International',
        value: 'three',
        icon: 'globe',
        disabled: false,
    },
    {
        label: 'Internal',
        value: 'four',
        icon: 'secure_transfer',
        disabled: false,
    },
];
import { createDocumentation, createComponent } from "../../../../globals/documentation/story";
import docs from "./pn-segment-docs.json";
const { argTypes, textContent } = createDocumentation(docs);
/**
 * The `pn-segment` is meant to be used inside a `pn-segmented-control`.
 *
 * Remember to supply the same `name` for all nested segment components, but with unique `value` props.
 *
 * View the
 * <pn-text-link href="./?path=/docs/components-input-segmented-control--docs">
 * pn-segmented-control documentation</pn-text-link>.
 **/
const meta = {
    title: 'Components/Input/Segmented Control/Segment',
    parameters: {
        actions: {
            handles: ['change'],
        },
    },
    args: {
        label: 'Private',
        value: 'one',
        name: 'pn-example-1',
        segmentid: '',
        icon: '',
        disabled: false,
    },
    argTypes,
};
export default meta;
export const PnSegment = {
    name: 'pn-segment',
    parameters: {
        docs: {
            description: {
                story: textContent,
            },
        },
    },
    render: args => {
        const control = createComponent('pn-segmented-control', {
            name: args.name,
            value: args.disabled ? segments[0].value : args.value,
        });
        [args, ...segments].forEach(segment => {
            const props = { ...args, ...segment };
            const el = createComponent('pn-segment', props);
            if (!args.icon)
                el.removeAttribute('icon');
            control.appendChild(el);
        });
        return control;
    },
};
/** Use an icon on the segment item. */
export const PnSegmentIcon = {
    name: 'pn-segment (icon)',
    render: PnSegment.render,
    args: {
        name: 'pn-example-2',
        icon: 'user',
    },
};
/** Disable a segment. */
export const PnSegmentDisabled = {
    name: 'pn-segment (disabled)',
    render: PnSegment.render,
    args: {
        name: 'pn-example-3',
        disabled: true,
    },
};
//# sourceMappingURL=pn-segment.stories.js.map