@postnord/web-components
Version:
PostNord Web Components
56 lines (55 loc) • 1.79 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { createDocumentation, createComponent } from "../../../../globals/documentation/story";
import docs from "./pn-progress-indicator-step-docs.json";
const { argTypes, textContent } = createDocumentation(docs);
/** The pn-progress-bar is used to indicate the loading status of, for example, an upload progress or loading of a resource. */
const meta = {
title: 'Components/Feedback/Progress Indicator/Step',
parameters: {
layout: 'padded',
docs: {
description: {
story: textContent,
},
},
actions: {
handles: ['setactivestep'],
},
},
args: {
name: 'Step 3',
checked: false,
},
argTypes,
};
export default meta;
const steps = ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5'];
export const PnProgressIndicatorStep = {
name: 'pn-progress-indicator-step',
render: args => {
const div = document.createElement('div');
div.style.padding = '0 0 5em 0';
const progressIndicator = createComponent('pn-progress-indicator', { activeStep: 2 });
steps.forEach((step, index) => {
progressIndicator.appendChild(createComponent('pn-progress-indicator-step', {
...args,
name: index === 2 ? args.name : step,
checked: index === 2 ? args.checked : null,
}));
});
div.appendChild(progressIndicator);
return div;
},
};
/** Checked */
export const PnProgressIndicatorStepChecked = {
name: 'pn-progress-indicator-step (checked)',
render: PnProgressIndicatorStep.render,
args: {
checked: true,
},
};
//# sourceMappingURL=pn-progress-indicator-step.stories.js.map