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

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import { createDocumentation, createComponent } from "../../../globals/documentation/story";
import docs from "./pn-fieldset-docs.json";
const { argTypes, textContent } = createDocumentation(docs);
import { PnCheckbox } from "../pn-checkbox/pn-checkbox.stories";
/**
 * The fieldset should be used to wrap a grouping of radio buttons, checkboxes or other inputs and their labels inside a HTML form.
 * The legend element inside fieldset provides a string you can use for the question that should be answered by user, or if you need a heading to describe the group.
 *
 * Fieldset comes with error state props to make it invalid and add error message.
 *
 * Get more familiar with the native HTML fieldset when using `pn-fieldset` and [how fieldsets work on MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset)
 */
const meta = {
    title: 'Components/Input/Fieldset',
    parameters: {
        docs: {
            description: {
                story: textContent,
            },
        },
        actions: {
            handles: ['input', 'change'],
        },
    },
    args: {
        legend: 'Where can we deliver your parcel?',
        helpertext: '',
        fieldsetId: '',
        form: '',
        name: '',
        disabled: false,
        invalid: false,
        error: '',
    },
    argTypes,
};
export default meta;
export const PnFieldset = {
    name: 'pn-fieldset',
    render: (args, context) => {
        const pnFieldset = createComponent('pn-fieldset', args);
        /** @ts-ignore */
        const checkboxes = PnCheckbox.render({ label: 'At home' }, context);
        Array.from(checkboxes.children).forEach(el => pnFieldset.appendChild(el));
        return pnFieldset;
    },
};
/** You can use a `helpertext` for the fieldset. */
export const PnFieldsetHelpertext = {
    name: 'pn-fieldset (helpertext)',
    render: PnFieldset.render,
    args: {
        helpertext: 'Select one or more options please.',
    },
};
/**
 * With the `error` prop, you provide the invalid style and an error message.
 * You can trigger the invalid style without a message with the `invalid` prop if the nested inputs provide an error message on their own.
 **/
export const PnFieldsetError = {
    name: 'pn-fieldset (error)',
    render: PnFieldset.render,
    args: {
        error: 'Please select at least one place we can deliver to.',
    },
};
/**
 * Disable the fieldset and all nested inputs with the `disabled` prop.
 **/
export const PnFieldsetDisabled = {
    name: 'pn-fieldset (disabled)',
    render: PnFieldset.render,
    args: {
        disabled: true,
    },
};
//# sourceMappingURL=pn-fieldset.stories.js.map