@postnord/web-components/collection/components/layout/pn-header/pn-header.stories.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
const buttons = [{ name: 'Action 1', icon: 'lightbulb', appearance: 'dark' }];
import { createDocumentation, createComponent } from "../../../globals/documentation/story";
import docs from "./pn-header-docs.json";
const { argTypes, textContent } = createDocumentation(docs);
/**
 * The `pn-header` component is almost entirely made of slots in terms of its varieties. You can read more about those down below.
 *
 * You should only use one `pn-header` per page and only at the top of the page.
 *
 * The main slot is reserved for your description, the recommended use is to wrap your text in a `p` element.
 */
const meta = {
    title: 'Components/Layout/Header',
    parameters: {
        layout: 'none',
        design: {
            type: 'figma',
            url: getFigmaUrl(import.meta.url),
        },
    },
    args: {
        heading: 'Example heading',
        maxWidth: '',
        goBackHref: '',
        goBackText: '',
        language: '',
    },
    argTypes,
};
meta.argTypes.goBackText.if = { arg: 'goBackHref', neq: '' };
meta.argTypes.language.if = { arg: 'goBackHref', neq: '' };
export default meta;
import { createPnTablist } from "../../navigation/pn-tablist/renderTablist";
import { getFigmaUrl } from "../../../globals/figmaLinks";
const buttonRow = () => {
    const row = document.createElement('div');
    row.setAttribute('slot', 'buttons');
    buttons.forEach(({ name, icon, appearance }) => {
        const button = createComponent('pn-button', { label: name, leftIcon: true, appearance, icon });
        button.setAttribute('left-icon', 'true');
        button.setAttribute('appearance', appearance);
        button.setAttribute('icon', icon);
        row.appendChild(button);
    });
    return row;
};
export const PnHeader = {
    name: 'pn-header',
    parameters: {
        docs: {
            description: {
                story: textContent,
            },
        },
    },
    render: args => {
        const header = createComponent('pn-header', args);
        header.innerHTML += '<p>Impedit, consequatur est delectus et totam sit nesciunt reiciendis.</p>';
        return header;
    },
};
/**
 * `slot="menu"`, this slot is reserved for `pn-tablist` and will simply place the tablist below the content in your header.
 *
 * This slot allows you to use the `href` prop on `pn-tab` components, turning them into links instead of buttons.
 */
export const PnHeaderNav = {
    name: 'pn-header (menu)',
    render: (args, context) => {
        const header = PnHeader.render(args, context);
        const tablist = createPnTablist({ label: 'Menu', value: 'dashboard' }, { isTablist: true, isMenu: true });
        header.appendChild(tablist);
        return header;
    },
    args: {
        heading: 'This is an example with a pn-tablist',
    },
};
/**
 * `slot="buttons"`, this slot is reserved for the use cases in which you need a button container below your header content,
 * just pass `pn-button` elements to your wrapper element.
 */
export const PnHeaderButtons = {
    name: 'pn-header (buttons)',
    render: (args, context) => {
        const header = PnHeader.render(args, context);
        header.appendChild(buttonRow());
        return header;
    },
    args: {
        heading: 'This is an example with a pn-button',
    },
};
/** Use the `go-back-href` prop to display a default go back link with translated text and icon. This example uses `language="sv"` */
export const PnHeaderBack = {
    name: 'pn-header (go back button)',
    render: PnHeader.render,
    args: {
        heading: 'This examples uses the goBackHref prop',
        goBackHref: 'https://portal.postnord.com/se/en/',
        language: 'sv',
    },
};
/**
 * If the previous example is not enough or is limiting your options, the `slot="breadcrumb"` is here for you.
 *
 * This slot can be used to display a single `pn-text-link` or a more complex breadcrumbs structure.
 */
export const PnHeaderBreadcrumb = {
    name: 'pn-header (breadcrumb)',
    render: (args, context) => {
        const header = PnHeader.render(args, context);
        const backButton = createComponent('pn-text-link', {
            href: 'https://portal.postnord.com/se/en/',
            icon: 'pn_return',
            leftIcon: true,
        });
        backButton.innerText = 'Custom go back icon/message';
        backButton.setAttribute('slot', 'breadcrumb');
        header.prepend(backButton);
        return header;
    },
    args: {
        heading: 'This example uses the slot="breadcrumb"',
    },
};
/** A fully featured example. */
export const PnHeaderFullyFeatured = {
    name: 'pn-header (all slots)',
    render: (args, context) => {
        const header = PnHeader.render(args, context);
        header.appendChild(buttonRow());
        const tablist = createPnTablist({ label: 'Menu', value: 'dashboard' }, { isTablist: true, isMenu: true });
        header.appendChild(tablist);
        return header;
    },
    args: {
        heading: 'This example uses all of the slots',
        goBackHref: 'https://portal.postnord.com/se/en/',
    },
};
//# sourceMappingURL=pn-header.stories.js.map