@postnord/web-components/collection/components/feedback/pn-progress-stepper/pn-progress-stepper.stories.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import { fi } from "../../../globals/helpers";
import { createDocumentation, createComponent } from "../../../globals/documentation/story";
import docs from "./pn-progress-stepper-docs.json";
import { getFigmaUrl } from "../../../globals/figmaLinks";
const { argTypes, textContent } = createDocumentation(docs);
/**
 * Progress stepper is suitable to use in a multi-step process like a checkout flow or survey.
 * The component is used to encourage the user to continue to the next step of the process and complete the overall task.
 * The stepper label informs about step amount and the bar helps users to estimate the time required to complete the entire process.
 */
const meta = {
    title: 'Components/Feedback/Progress Stepper',
    parameters: {
        layout: 'padded',
        design: {
            type: 'figma',
            url: getFigmaUrl(import.meta.url),
        },
    },
    args: {
        label: '',
        totalSteps: 3,
        currentStep: 1,
        stepName: '',
        progressStepperId: '',
        language: '',
    },
    argTypes,
};
meta.argTypes.label.if = { arg: 'language', eq: '' };
meta.argTypes.language.if = { arg: 'label', eq: '' };
export default meta;
export const ProgressStepper = {
    name: 'pn-progress-stepper',
    parameters: {
        docs: {
            description: {
                story: textContent,
            },
        },
    },
    render: args => createComponent('pn-progress-stepper', args),
};
/**
 * Force pn-progress-stepper to use the Finnish language.
 * Useful if you don't have the `pnTopbar` available and must set the language yourself.
 * This is only for the default label "Step". If you want a different name, use the `label` property.
 */
export const ProgressStepperLang = {
    name: 'pn-progress-stepper (lang)',
    render: ProgressStepper.render,
    args: {
        totalSteps: 7,
        currentStep: 7,
        language: fi,
    },
};
/**
 * The "Step" translation can be changed with the `label` prop.
 *
 * The `language` prop will not work if you use the `label` prop at the same time.
 */
export const ProgressStepperLabel = {
    name: 'pn-progress-stepper (label)',
    render: ProgressStepper.render,
    args: {
        totalSteps: 4,
        currentStep: 1,
        label: 'Part',
    },
};
/**
 * You can give the current step a name that will be displayed after the "x/y" label.
 *
 * Remember to change the `step-name` as the user progress. It only accepts a single string at a time.
 */
export const ProgressStepperName = {
    name: 'pn-progress-stepper (name)',
    render: ProgressStepper.render,
    args: {
        totalSteps: 4,
        currentStep: 1,
        stepName: 'Create business account',
    },
};
//# sourceMappingURL=pn-progress-stepper.stories.js.map