@postnord/web-components
Version:
PostNord Web Components
146 lines (145 loc) • 4.57 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { createDocumentation, createComponent } from "../../../globals/documentation/story";
import docs from "./pn-counter-docs.json";
import { getFigmaUrl } from "../../../globals/figmaLinks";
const { argTypes, textContent } = createDocumentation(docs);
/**
* The `pn-counter` can be useful for range increments. The component listens for clicks and keyboard events and provides both input and button elements for users to change the value.
* Input is `type=number` with added keyboard events to listen for Home / End commands that set value to `min` or `max`, if these props are set. Tab and navigation order matches the visual order.
*
* The component contains an aria-live region with a non-visual element providing the updated value for screen readers if buttons are used to change the amount.
*/
const meta = {
title: 'Components/Input/Counter',
parameters: {
actions: {
handles: ['counterInput'],
},
design: {
type: 'figma',
url: getFigmaUrl(import.meta.url),
},
},
args: {
label: 'Quantity',
value: 0,
helpertext: '',
counterid: '',
labelDecrease: '',
labelIncrease: '',
minMessage: '',
maxMessage: '',
name: '',
min: null,
max: null,
step: null,
list: '',
required: false,
readonly: false,
disabled: false,
},
argTypes,
};
meta.argTypes.min.type = 'number';
meta.argTypes.max.type = 'number';
meta.argTypes.step.type = 'number';
export default meta;
export const PnCounter = {
name: 'pn-counter',
parameters: {
docs: {
description: {
story: textContent,
},
},
},
render: args => createComponent('pn-counter', args),
};
/** Display a helper text. */
export const PnCounterHelpertext = {
name: 'pn-counter (helper text)',
render: PnCounter.render,
args: {
helpertext: 'Each item contains 8 stamps.',
},
};
/**
* Limit the counter input with `min` and `max` props.
*
* Setting the `max` prop will make the input wider to account for the number size. Default is 3.5em.
**/
export const PnCounterMinMax = {
name: 'pn-counter (min/max)',
render: PnCounter.render,
args: {
label: 'Amount',
value: 1,
min: 0,
max: 20,
},
};
/**
* Combine min/max with the `step` prop. This example uses `step="10"`.
* So you can increase/decrease with a set value when clicking the buttons or using the keyboard on the counter.
**/
export const PnCounterStep = {
name: 'pn-counter (step)',
render: PnCounter.render,
args: {
label: 'Increase the number',
min: 0,
max: 100,
step: 10,
},
};
/** Set the language prop on the counter. This will overwrite the pn-topbar language. */
export const PnCounterLanguage = {
name: 'pn-counter (language)',
render: PnCounter.render,
args: {
language: 'sv',
},
};
/**
* Set you own translations on the decrease/increase buttons and the min/max value reached message.
* - label-decrease
* - label-increase
* - min-message
* - max-message
**/
export const PnCounteri18n = {
name: 'pn-counter (i18n)',
render: PnCounter.render,
args: {
label: 'Another language label',
min: 0,
max: 10,
labelDecrease: 'Go down',
labelIncrease: 'Go up',
minMessage: 'You reached the end my friend.',
maxMessage: 'You have arrived at the top!',
},
};
/** Using `readonly` or `disabled` will remove the buttons. Use readonly if you want keep users from changing the value but want the users to see, read or navigate to the value. HTML disabled hides the element completely for keyboard & assistive technology. */
export const PnCounterDisabled = {
name: 'pn-counter (readonly)',
render: args => {
const div = document.createElement('div');
div.style.minWidth = '12em';
const counter = createComponent('pn-counter', args);
const button = createComponent('pn-button', { label: 'Toggle readonly', small: true });
button.style.display = 'block';
button.style.marginTop = '2em';
button.addEventListener('click', () => counter.toggleAttribute('readonly'));
div.appendChild(counter);
div.appendChild(button);
return div;
},
args: {
readonly: true,
},
};
//# sourceMappingURL=pn-counter.stories.js.map