@postnord/web-components/collection/components/design-tokens/pn-illustration/pn-illustration.stories.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import * as illustrations from "pn-design-assets/pn-assets/illustrations";
import { createDocumentation, createComponent } from "../../../globals/documentation/story";
import docs from "./pn-illustration-docs.json";
const { argTypes, textContent } = createDocumentation(docs);
import "../pn-icon/pn-icon-grid.scss";
import { getFigmaUrl } from "../../../globals/figmaLinks";
/**
 * Use SVG from `pn-design-assets` NPM package or your own.
 *
 * You do not need to set a width/height. The component can use the viewBox to determine the sizes.
 * However, you can set them yourself with the `width` and `height` prop.
 *
 * ```js
 * // Import all flags at once
 * import * as illustrations from 'pn-design-assets/pn-assets/illustrations';
 * import * as illustrationsCamel from 'pn-design-assets/pn-assets/illustrationsCamel';
 *
 * // Import individual illustrations
 * import { airplane_city } from 'pn-design-assets/pn-assets/illustrations';
 * import { airplaneCity } from 'pn-design-assets/pn-assets/illustrationsCamel';
 *
 * // or
 *
 * import {
 *  airplane_city,
 *  airplaneCity
 * } from 'pn-design-assets/pn-assets/illustrations/airplane_city';
 * ```
 **/
const meta = {
    title: 'Components/Design Tokens/Illustration',
    parameters: {
        docs: {
            description: {
                story: textContent,
            },
        },
        design: {
            type: 'figma',
            url: getFigmaUrl(import.meta.url),
        },
    },
    args: {
        illustration: 'globe_hand',
        width: '',
        height: '',
        fill: false,
    },
    argTypes,
};
meta.argTypes.width.if = { arg: 'fill', truthy: false };
meta.argTypes.height.if = { arg: 'fill', truthy: false };
export default meta;
export const PnIllustration = {
    name: 'pn-illustration',
    render: args => createComponent('pn-illustration', args),
};
/** The `fill` attribute will set the width/height 100% and use `display: block` instead of `inline-block`. */
export const PnIllustrationFill = {
    name: 'pn-illustration (fill)',
    render: PnIllustration.render,
    args: {
        illustration: 'group_of_people',
        fill: true,
    },
};
/** Here are all of our illustrations from `pn-design-assets` on a grid! */
export const PnIllustrationGrid = {
    name: 'pn-illustration (grid)',
    parameters: {
        layout: 'padded',
    },
    render: args => {
        const container = document.createElement('div');
        const searchField = createComponent('pn-input', { label: 'Find illustrations', type: 'search' });
        searchField.style.width = '100%';
        searchField.style.marginBottom = '2em';
        const grid = document.createElement('ul');
        grid.setAttribute('class', 'pn-sb-grid');
        Object.keys(illustrations).forEach(illustration => {
            const li = document.createElement('li');
            li.setAttribute('data-illustration', illustration.toLowerCase());
            const pnIllustration = createComponent('pn-illustration', { ...args, illustration });
            const text = document.createElement('p');
            text.innerText = illustration;
            li.appendChild(pnIllustration);
            li.appendChild(text);
            grid.appendChild(li);
        });
        container.appendChild(searchField);
        container.appendChild(grid);
        const items = Array.from(grid.children);
        searchField.addEventListener('input', ({ target }) => {
            const value = target.value?.toLowerCase();
            items.forEach(item => item.dataset.illustration.match(value) ? item.removeAttribute('hidden') : item.setAttribute('hidden', 'true'));
        });
        return container;
    },
    argTypes: {
        illustration: {
            table: {
                disable: true,
            },
        },
    },
};
//# sourceMappingURL=pn-illustration.stories.js.map