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

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import { createDocumentation, createComponent } from "../../../globals/documentation/story";
import docs from "./pn-toggle-switch-docs.json";
import { getFigmaUrl } from "../../../globals/figmaLinks";
const { argTypes, textContent } = createDocumentation(docs);
/**
 * The `pn-toggle-switch` is a checkbox with the visual style of a switch. It comes packaged with label, helpertext, various states and size options.
 */
const meta = {
    title: 'Components/Input/Toggle Switch',
    parameters: {
        actions: {
            handles: ['change'],
        },
        design: {
            type: 'figma',
            url: getFigmaUrl(import.meta.url),
        },
    },
    args: {
        label: '',
        helpertext: '',
        checked: false,
        toggleid: '',
        name: '',
        value: '',
        small: false,
        large: false,
        disabled: false,
        loading: false,
    },
    argTypes,
};
meta.argTypes.small.if = { arg: 'large', eq: false };
meta.argTypes.large.if = { arg: 'small', eq: false };
export default meta;
export const PnToggleSwitch = {
    name: 'pn-toggle-switch',
    parameters: {
        docs: {
            description: {
                story: textContent,
            },
        },
    },
    render: args => createComponent('pn-toggle-switch', args),
};
/**
 * Supply a label for the toggle. We strongly recommend you use it.
 *
 * If you can't use it, make sure you create a `label` element that point to the toggle with the `for` prop.
 *
 ```
 <label for="my-id">...</label>
 <pn-toggle-switch toggleid="my-id"></pn-toggle-switch>
 ```
 **/
export const PnToggleLabel = {
    name: 'pn-toggle-switch (label)',
    render: PnToggleSwitch.render,
    args: {
        label: 'Get notifications',
    },
};
/** Supply a helpertext for the toggle. */
export const PnToggleHelper = {
    name: 'pn-toggle-switch (helpertext)',
    render: PnToggleSwitch.render,
    args: {
        label: 'Get notifications',
        helpertext: 'Allow us to send emails about our services.',
    },
};
/** Preselect the toggle. */
export const PnToggleChecked = {
    name: 'pn-toggle-switch (checked)',
    render: PnToggleSwitch.render,
    args: {
        checked: true,
    },
};
/** Use the `small` variant of the toggle switch. */
export const PnToggleSmall = {
    name: 'pn-toggle-switch (small)',
    render: PnToggleSwitch.render,
    args: {
        small: true,
    },
};
/** Use the `large` variant of the toggle switch. */
export const PnToggleLarge = {
    name: 'pn-toggle-switch (large)',
    render: PnToggleSwitch.render,
    args: {
        large: true,
    },
};
/**
 * Use the loading state.
 * Its a good idea to combine this with the `disabled` prop in order to prevent a new state change while the previous one is loading.
 */
export const PnToggleSwitchLoading = {
    name: 'pn-toggle-switch (loading)',
    render: (args, context) => {
        const div = document.createElement('div');
        div.setAttribute('class', 'sb-button-row');
        div.style.flexDirection = 'column';
        const toggle = PnToggleSwitch.render(args, context);
        const checkbox = createComponent('pn-checkbox', { label: 'Loading state', checked: args.loading });
        function toggleLoading() {
            toggle.toggleAttribute('loading');
        }
        checkbox.addEventListener('change', () => toggleLoading());
        div.appendChild(toggle);
        div.appendChild(checkbox);
        return div;
    },
    args: {
        loading: true,
    },
};
/** Disable the toggle. */
export const PnToggleSwitchDisabled = {
    name: 'pn-toggle-switch (disabled)',
    render: PnToggleSwitch.render,
    args: {
        disabled: true,
    },
};
/**
 * A user settings example with the `pn-fielset` component.
 *
 * When you toggle any input, it will toggle the `loading` and `disabled` prop.
 * After 1 second, the props will be toggled again.
 * This is to simulate that you save the setting via an API that you need to wait for.
 **/
export const PnToggleSwitchFieldset = {
    name: 'pn-toggle-switch (fieldset)',
    render: (args, context) => {
        const fieldset = createComponent('pn-fieldset', {
            legend: 'User settings',
            helpertext: 'Change your preferences.',
        });
        fieldset.addEventListener('change', ({ target }) => {
            const input = target.closest('pn-toggle-switch');
            input.setAttribute('disabled', 'true');
            input.setAttribute('loading', 'true');
            setTimeout(() => {
                input.removeAttribute('disabled');
                input.removeAttribute('loading');
            }, 1000);
        });
        const toggle = PnToggleSwitch.render(args, context);
        const toggleOne = createComponent('pn-toggle-switch', {
            ...args,
            label: 'Push notifications',
            helpertext: 'Get notified by push notifications.',
            checked: true,
        });
        const toggleTwo = createComponent('pn-toggle-switch', {
            ...args,
            label: 'Allow analytics event',
            helpertext: 'Help us improve our service.',
        });
        fieldset.appendChild(toggle);
        fieldset.appendChild(toggleOne);
        fieldset.appendChild(toggleTwo);
        return fieldset;
    },
    args: {
        label: 'Email notifications',
        helpertext: 'Get notified by email when something happens.',
    },
};
//# sourceMappingURL=pn-toggle-switch.stories.js.map