@postnord/web-components
Version:
PostNord Web Components
111 lines (110 loc) • 3.55 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { createDocumentation, createComponent } from "../../../globals/documentation/story";
import docs from "./pn-progress-bar-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 Bar',
parameters: {
layout: 'padded',
docs: {
description: {
story: textContent,
},
},
design: {
type: 'figma',
url: getFigmaUrl(import.meta.url),
},
},
args: {
label: 'Progress Label',
progress: 50,
progressText: '',
successText: '',
error: '',
progressId: '',
},
argTypes,
};
export default meta;
export const PnProgressBar = {
name: 'pn-progress-bar',
render: args => {
const div = document.createElement('div');
let timeout;
const bar = createComponent('pn-progress-bar', args);
const button = createComponent('pn-button', { label: 'Start upload', small: true });
button.addEventListener('click', () => {
clearTimeout(timeout);
timeout = setInterval(() => {
if (bar.progress === 100)
return clearTimeout(timeout);
bar.progress = bar.progress + 1;
}, 100);
});
const resetButton = createComponent('pn-button', { label: 'Reset upload', small: true });
resetButton.addEventListener('click', () => {
clearTimeout(timeout);
bar.progress = 0;
});
const pauseButton = createComponent('pn-button', { label: 'Pause upload', small: true });
pauseButton.addEventListener('click', () => {
clearTimeout(timeout);
});
div.appendChild(bar);
const buttons = document.createElement('div');
buttons.className = 'sb-button-row';
buttons.appendChild(button);
buttons.appendChild(pauseButton);
buttons.appendChild(resetButton);
div.appendChild(buttons);
return div;
},
};
/** Progress bar will be green once it hits 100. */
export const PnProgressBarSuccess = {
name: 'pn-progress-bar (success)',
render: PnProgressBar.render,
args: {
progress: 100,
},
};
/** The default text is "100%" when you reached 100% progress, you can use your own text by using the `successText` prop. */
export const PnProgressBarSuccessText = {
name: 'pn-progress-bar (success text)',
render: PnProgressBar.render,
args: {
progress: 100,
successText: 'File uploaded!',
},
};
/**
* Trigger the error state by using the error message string in the `error` prop.
*
* The error state is abolve all else, even if you reach 100% progress.
**/
export const PnProgressBarError = {
name: 'pn-progress-bar (error)',
render: PnProgressBar.render,
args: {
progress: 27,
error: 'This is not valid.',
},
};
/**
* Set a custom progress text with the `progressText` prop.
**/
export const PnProgressBarCustomProgress = {
name: 'pn-progress-bar (custom progress text)',
render: PnProgressBar.render,
args: {
progress: 27,
progressText: 'Twentyseven percent',
},
};
//# sourceMappingURL=pn-progress-bar.stories.js.map