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

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import * as icons from "pn-design-assets/pn-assets/icons";
import { createDocumentation, createComponent } from "../../../globals/documentation/story";
import docs from "./pn-icon-docs.json";
const { argTypes, textContent } = createDocumentation(docs);
import "./pn-icon-grid.scss";
import { getFigmaUrl } from "../../../globals/figmaLinks";
/**
 * Use SVG from `pn-design-assets` NPM package or your own.
 *
 * All icons default size is 24x24px (1.5em).
 *
 * ```js
 * // Import all flags at once
 * import * as icons from 'pn-design-assets/pn-assets/icons';
 * import * as iconsCamel from 'pn-design-assets/pn-assets/iconsCamel';
 *
 * // Import individual icons
 * import { arrow_left } from 'pn-design-assets/pn-assets/icons';
 * import { arrowLeft } from 'pn-design-assets/pn-assets/iconsCamel';
 *
 * // or
 *
 * import {
 *  arrow_left,
 *  arrowLeft
 * } from 'pn-design-assets/pn-assets/icons/arrow_left';
 * ```
 **/
const meta = {
    title: 'Components/Design Tokens/Icon',
    parameters: {
        docs: {
            description: {
                story: textContent,
            },
        },
        design: {
            type: 'figma',
            url: getFigmaUrl(import.meta.url),
        },
    },
    args: {
        icon: '',
        color: 'gray900',
        small: false,
    },
    argTypes,
};
export default meta;
export const PnIcon = {
    name: 'pn-icon',
    render: args => createComponent('pn-icon', args),
    args: {
        icon: 'arrow_left',
    },
};
/** The `pn-icon` has a built in `light` property to deal with dark bakgrounds. */
export const PnIconDark = {
    name: 'pn-icon (dark)',
    render: args => createComponent('pn-icon', args),
    args: {
        icon: 'truck',
        color: 'white',
    },
    parameters: {
        backgrounds: { default: 'darkest' },
    },
};
/** View all of our icons in a grid. */
export const PnIconGrid = {
    name: 'pn-icon (grid)',
    parameters: {
        layout: 'padded',
    },
    render: (args, context) => {
        const container = document.createElement('div');
        const searchField = createComponent('pn-input', { label: 'Find icons', type: 'search' });
        searchField.style.width = '100%';
        searchField.style.marginBottom = '2em';
        const grid = document.createElement('ul');
        grid.setAttribute('class', 'pn-sb-grid');
        Object.keys(icons).forEach(icon => {
            const li = document.createElement('li');
            li.setAttribute('data-icon', icon.replace('pn_', '').toLowerCase());
            args.icon = icon;
            const pnIcon = PnIcon.render(args, context);
            const text = document.createElement('p');
            text.innerText = icon;
            li.appendChild(pnIcon);
            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.icon.match(value) ? item.removeAttribute('hidden') : item.setAttribute('hidden', 'true'));
        });
        return container;
    },
    argTypes: {
        icon: {
            table: {
                disable: true,
            },
        },
    },
};
//# sourceMappingURL=pn-icon.stories.js.map