@postnord/web-components
Version:
PostNord Web Components
84 lines (83 loc) • 2.24 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
const segments = [
{
label: 'Active',
value: 'one',
},
{
label: 'Scheduled',
value: 'two',
},
{
label: 'Inactive',
value: 'three',
},
];
import { createDocumentation, createComponent } from "../../../globals/documentation/story";
import docs from "./pn-segmented-control-docs.json";
import { getFigmaUrl } from "../../../globals/figmaLinks";
const { argTypes, textContent } = createDocumentation(docs);
/**
* The `pn-segmented-control` and `pn-segment` is built with native `input[type=radio]` elements.
* This means you can use the `change` event in the `pn-segmented-control`, there are no custom events here.
*
* View the
* <pn-text-link href="./?path=/docs/components-input-segmented-control-segment--docs">
* pn-segment documentation</pn-text-link>.
*/
const meta = {
title: 'Components/Input/Segmented Control',
parameters: {
design: {
type: 'figma',
url: getFigmaUrl(import.meta.url),
},
actions: {
handles: ['change'],
},
},
args: {
value: 'one',
name: 'example-name',
},
argTypes,
};
export default meta;
export const PnSegmentedControl = {
name: 'pn-segmented-control',
parameters: {
docs: {
description: {
story: textContent,
},
},
},
render: args => {
const control = createComponent('pn-segmented-control', args);
segments.forEach(segment => {
const el = createComponent('pn-segment', { ...segment, name: args.name });
control.appendChild(el);
});
return control;
},
};
/** Start the selection on specific value. */
export const PnSegmentedControlValue = {
name: 'pn-segmented-control (value)',
render: PnSegmentedControl.render,
args: {
value: 'three',
},
};
/** Initialise the segment control with no value. */
export const PnSegmentedControlNoValue = {
name: 'pn-segmented-control (no value)',
render: PnSegmentedControl.render,
args: {
value: '',
},
};
//# sourceMappingURL=pn-segmented-control.stories.js.map