@postnord/web-components
Version:
PostNord Web Components
148 lines (147 loc) • 5.02 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { createDocumentation, createComponent } from "../../../globals/documentation/story";
import docs from "./pn-radio-button-docs.json";
import { getFigmaUrl } from "../../../globals/figmaLinks";
const { argTypes, textContent } = createDocumentation(docs);
/**
* The radio button should be used when users can select one option from a list of choices, for example in a form.
*
* Get more familiar with the native HTML radio button when using the `pn-radio-button` and
* read more about how [radio buttons work on MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio).
*
* In the examples below, we use the [pn-fieldset](./?path=/docs/components-input-fieldset--docs) to give context to the radio buttons.
*/
const meta = {
title: 'Components/Input/Radio Button',
parameters: {
docs: {
description: {
story: textContent,
},
},
actions: {
handles: ['change', 'input'],
},
design: {
type: 'figma',
url: getFigmaUrl(import.meta.url),
},
},
args: {
label: 'Active',
value: '1',
name: 'storybook-name-1',
checked: false,
helpertext: '',
radioid: '',
disabled: false,
required: false,
invalid: false,
tile: false,
icon: '',
},
argTypes,
};
meta.argTypes.icon.if = { arg: 'tile', eq: true };
export default meta;
export const PnRadioButton = {
name: 'pn-radio-button',
render: (args, context) => {
const container = createComponent('pn-fieldset', { legend: 'Status of the notification' });
const radioButton1 = createComponent('pn-radio-button', args);
const radioButton2 = createComponent('pn-radio-button', {
...args,
name: args.name,
label: 'Scheduled',
helpertext: args.helpertext ? 'Schedule the notification.' : '',
radioid: context.id + '2',
icon: args.icon ? 'calendar' : '',
});
const radioButton3 = createComponent('pn-radio-button', {
...args,
name: args.name,
label: 'Inactive',
helpertext: args.helpertext ? 'Set the notification as inactive.' : '',
radioid: context.id + '3',
icon: args.icon ? 'bell_off' : '',
});
container.appendChild(radioButton1);
container.appendChild(radioButton2);
container.appendChild(radioButton3);
return container;
},
};
/**
* While we strongly recommend you use our built in features (that comes with accesible markup),
* you may sometimes need to only use the radio button itself.
*
* Just make sure you provide a label element that points to the radio buttons ID.
**/
export const PnRadioButtonNoLabel = {
name: 'pn-radio-button (no label)',
render: args => {
const radio = createComponent('pn-radio-button', args);
return radio;
},
args: {
label: '',
name: 'storybook-name-2',
},
};
/** A radio button with additional information in a helper text. The helper text element is associated with the radio input with aria-describedby so screenreaders don´t miss out on information. */
export const PnRadioButtonHelpertext = {
name: 'pn-radio-button (helpertext)',
render: PnRadioButton.render,
args: {
name: 'storybook-name-3',
helpertext: 'Show the notification until I turn it off.',
},
};
/**
* You can set the radio as `invalid` and apply the error styling.
* The radio button does not have the option to present its own error message, however, you can assign it on a wrapping pn-fieldset!
*/
export const PnRadioButtonError = {
name: 'pn-radio-button (invalid)',
render: PnRadioButton.render,
args: {
name: 'storybook-name-4',
invalid: true,
},
};
/** You can disable the radio button with the `disabled` prop. */
export const PnRadioButtonDisabled = {
name: 'pn-radio-button (disabled)',
render: PnRadioButton.render,
args: {
name: 'storybook-name-5',
disabled: true,
},
};
/**
* With the `tile` prop, you can turn the radio button into a radio tile.
* Making it a little larger and allows you to select an `icon` for it if you wish.
**/
export const PnRadioButtonTile = {
name: 'pn-radio-button (tile)',
render: PnRadioButton.render,
args: {
name: 'storybook-name-6',
tile: true,
},
};
/** You can combine the `tile` with all other available props. For example, the `helpertext` and `icon`. */
export const PnRadioButtonTileProps = {
name: 'pn-radio-button (tile + any prop)',
render: PnRadioButton.render,
args: {
name: 'storybook-name-7',
tile: true,
helpertext: PnRadioButtonHelpertext.args.helpertext,
icon: 'bell_alarm',
},
};
//# sourceMappingURL=pn-radio-button.stories.js.map