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

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import { createDocumentation, createComponent } from "../../../globals/documentation/story";
import docs from "./pn-select-docs.json";
const { argTypes, textContent } = createDocumentation(docs);
import { se_flag, dk_flag, fi_flag, no_flag } from "pn-design-assets/pn-assets/flags";
import { getFigmaUrl } from "../../../globals/figmaLinks";
import { PnInput } from "../pn-input/pn-input.stories";
/**
 * The `pn-select` allows you to display a list of options with the native `select` element.
 * Use nested `option` elements to create the list.
 *
 * Anything that you can do with the native HTML select element you can do with the `pn-select`, with exepction of the `multiple` prop.
 * Use the pn-multiselect component instead.
 * This component is merily a wrapper for that element.
 *
 * Use any of the following elements to create the list of options.
 * - `option`
 * - `optgroup`
 * - `hr`
 *
 * <pn-toast heading="Migrate from the old pn-select" text="This component recently changed and previous implementation will not work.">
 *  <pn-button small href="./?path=/docs/components-input-select-migration-guide--docs"><span>Migrate the pn-select</span></pn-button>
 * </pn-toast>
 */
const meta = {
    title: 'Components/Input/Select',
    tags: ['input', 'select'],
    parameters: {
        docs: {
            description: {
                story: textContent,
            },
        },
        actions: {
            handles: ['change'],
        },
        design: {
            type: 'figma',
            url: getFigmaUrl(import.meta.url),
        },
    },
    args: {
        label: 'Select a country',
        helpertext: '',
        selectId: '',
        icon: '',
        name: '',
        form: '',
        required: false,
        disabled: false,
        invalid: false,
        error: '',
    },
    argTypes,
};
export default meta;
const data = [
    { name: 'Sweden', value: 'se', code: '+46', icon: se_flag },
    { name: 'Denmark', value: 'dk', code: '+45', icon: dk_flag },
    { name: 'Finland', value: 'fi', code: '+358', icon: fi_flag },
    { name: 'Norway', value: 'no', code: '+47', icon: no_flag },
];
export const PnSelect = {
    name: 'pn-select',
    render: args => {
        const select = createComponent('pn-select', args);
        data.forEach(({ name, value }) => {
            const optionEl = document.createElement('option');
            optionEl.textContent = name;
            optionEl.value = value;
            optionEl.selected = name === 'Sweden';
            select.appendChild(optionEl);
        });
        return select;
    },
};
/** You can provide a `helpertext` for the select. */
export const PnSelectHelpertext = {
    name: 'pn-select (helpertext)',
    render: PnSelect.render,
    args: {
        helpertext: 'Select the country you want to filter.',
    },
};
/**
 * You can use any SVG content as an icon in the `pn-select`.
 *
 * In this example, we change the icon based on the value from the selection.
 */
export const PnSelectIcon = {
    name: 'pn-select (icon)',
    render: (args, context) => {
        const select = PnSelect.render(args, context);
        select.style.width = '11em';
        const input = PnInput.render(
        /** @ts-ignore */
        { label: 'Phone number', type: 'tel', textPrefix: data[0].code }, context);
        input.style.width = '12em';
        select.addEventListener('change', ({ target }) => {
            const value = target.value;
            const { icon, code } = data.find(opt => opt.value === value);
            select.setAttribute('icon', icon);
            input.setAttribute('text-prefix', code);
        });
        const div = document.createElement('div');
        div.setAttribute('class', 'sb-button-row');
        div.appendChild(select);
        div.appendChild(input);
        return div;
    },
    args: {
        icon: 'se_flag',
    },
};
/**
 * You can set a preselected option by setting the `selected` attribute on any `option` element you like.
 *
 * If you want to create a "Select an option" element, here is an example:
 * `<option value="" selected disabled>Select an option</option>`
 */
export const PnSelectOption = {
    name: 'pn-select (empty option)',
    render: (args, context) => {
        const select = PnSelect.render(args, context);
        const option = document.createElement('option');
        option.disabled = true;
        option.selected = true;
        option.textContent = 'Select an option';
        select.insertBefore(option, select.firstChild);
        return select;
    },
};
/**
 * In this example, we use the `option`, `optgroup` and `hr` element to create a list of cities per country.
 *
 * Read more about [optgroups here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup).
 */
export const PnSelectGroups = {
    name: 'pn-select (optgroups)',
    render: args => {
        const select = createComponent('pn-select', args);
        const options = `
    <option value="">Choose an option</option>
    <hr />
    <optgroup label="Sweden">
      <option value="stockholm">Stockholm</option>
      <option value="gothemburg">Göteborg</option>
      <option value="malmö">Malmö</option>
    </optgroup>
    <hr />
    <optgroup label="Finland">
      <option value="helsinki">Helsinki</option>
      <option value="espoo">Espoo</option>
      <option value="tampere">Tampere</option>
    </optgroup>`;
        select.innerHTML += options;
        return select;
    },
    args: {
        label: 'Select a city',
    },
};
//# sourceMappingURL=pn-select.stories.js.map