@postnord/web-components/collection/components/input/pn-choice-chip/pn-choice-chip.stories.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import { createDocumentation, createComponent } from "../../../globals/documentation/story";
import docs from "./pn-choice-chip-docs.json";
import { getFigmaUrl } from "../../../globals/figmaLinks";
const { argTypes, textContent } = createDocumentation(docs);
/**
 * The choice chip behaves as a checkbox by default. You can toggle them on/off just like any checkbox.
 *
 * You have the option to use the `radio` prop which will make it behave as a radio input.
 * Remember to use the `name` prop to make it work as expected.
 **/
const meta = {
    title: 'Components/Input/Choice chip',
    parameters: {
        docs: {
            description: {
                story: textContent,
            },
        },
        actions: {
            handles: ['change'],
        },
    },
    args: {
        label: 'Label',
        value: 'example-value',
        name: 'example-name',
        checked: false,
        choiceid: '',
        icon: '',
        radio: false,
        required: false,
        disabled: false,
        small: false,
        large: false,
    },
    argTypes,
};
meta.argTypes.small.if = { arg: 'large', eq: false };
meta.argTypes.large.if = { arg: 'small', eq: false };
export default meta;
export const PnChoiceChip = {
    name: 'pn-choice-chip',
    render: args => {
        const container = document.createElement('div');
        container.className = 'sb-button-row';
        const chip1 = createComponent('pn-choice-chip', args);
        const chip2 = createComponent('pn-choice-chip', { ...args, label: 'Chip two', icon: !!args.icon ? 'truck' : '' });
        const chip3 = createComponent('pn-choice-chip', {
            ...args,
            label: 'Chip three',
            icon: !!args.icon ? 'box_info' : '',
        });
        container.appendChild(chip1);
        container.appendChild(chip2);
        container.appendChild(chip3);
        return container;
    },
    parameters: {
        design: {
            type: 'figma',
            url: getFigmaUrl(import.meta.url),
        },
    }
};
/** Choice chip with an icon */
export const PnChoiceChipIcon = {
    name: 'pn-choice-chip (icon)',
    render: PnChoiceChip.render,
    args: {
        icon: 'list',
    },
};
/** Prechecked choice chip */
export const PnChoiceChipChecked = {
    name: 'pn-choice-chip (checked)',
    render: PnChoiceChip.render,
    args: {
        checked: true,
    },
};
/** Small choice chip */
export const PnChoiceChipSmall = {
    name: 'pn-choice-chip (small)',
    render: PnChoiceChip.render,
    args: {
        small: true,
    },
};
/** Large choice chip */
export const PnChoiceChipLarge = {
    name: 'pn-choice-chip (large)',
    render: PnChoiceChip.render,
    args: {
        large: true,
    },
};
/** Choice chip with radio button logic */
export const PnChoiceChipRadio = {
    name: 'pn-choice-chip (radio)',
    render: PnChoiceChip.render,
    args: {
        radio: true,
    },
};
//# sourceMappingURL=pn-choice-chip.stories.js.map