@postnord/web-components
Version:
PostNord Web Components
56 lines (55 loc) • 1.72 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { createDocumentation, createComponent } from "../../../globals/documentation/story";
import docs from "./pn-progress-indicator-docs.json";
import { getFigmaUrl } from "../../../globals/figmaLinks";
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',
parameters: {
layout: 'padded',
docs: {
description: {
story: textContent,
},
},
actions: {
handles: ['setactivestep'],
},
design: {
type: 'figma',
url: getFigmaUrl(import.meta.url),
},
},
args: {
activeStep: 2,
},
argTypes,
};
export default meta;
const steps = ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5'];
export const PnProgressIndicator = {
name: 'pn-progress-indicator',
render: args => {
const div = document.createElement('div');
div.style.padding = '0 0 5em 0';
const progressIndicator = createComponent('pn-progress-indicator', args);
steps.forEach(step => {
progressIndicator.appendChild(createComponent('pn-progress-indicator-step', { name: step }));
});
div.appendChild(progressIndicator);
return div;
},
};
/** Last step */
export const PnProgressIndicatorLast = {
name: 'pn-progress-indicator (last)',
render: PnProgressIndicator.render,
args: {
activeStep: 5,
},
};
//# sourceMappingURL=pn-progress-indicator.stories.js.map