gov-gui
Version:
Gov UI Component Library Typscript Build
177 lines (176 loc) • 7.22 kB
JavaScript
import { html } from "lit-html";
import "../../global/animate.min.css";
/**
* Radio buttons allow users to select a single option from a set of predefined choices.
* They are typically used in forms where only one selection is allowed within a group.
*/
export default {
title: 'Components/Radio Button',
tags: ['autodocs'],
parameters: {
actions: {
handles: ['selectedChange'], // Track the selectedChange events on the radio buttons
},
},
argTypes: {
heading: {
control: 'text',
description: 'The heading displayed above the radio button group.',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'Choose an option' },
category: 'Attributes',
},
},
subtitle: {
control: 'text',
description: 'The subtitle displayed below the heading and above the options.',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'Please select one option from below.' },
category: 'Attributes',
},
},
options: {
control: 'object',
description: 'The options for the radio buttons, either as an array of strings or a JSON string.',
table: {
type: { summary: 'string[] | string' },
defaultValue: { summary: '["Option 1", "Option 2", "Option 3"]' },
category: 'Attributes',
},
},
required: {
control: 'boolean',
description: 'Dictates if the property is required.',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: false },
category: 'Attributes',
},
},
requiredErrorMessage: {
control: 'text',
description: 'Text that will be displayed if is required.',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'This field is required' },
category: 'Attributes',
},
},
animation: {
control: 'select',
options: ["",
"bounce", "flash", "pulse", "rubberBand", "shakeX", "shakeY", "headShake", "swing", "tada", "wobble", "jello", "heartBeat",
"backInDown", "backInLeft", "backInRight", "backInUp",
"backOutDown", "backOutLeft", "backOutRight", "backOutUp",
"bounceIn", "bounceInDown", "bounceInLeft", "bounceInRight", "bounceInUp",
"bounceOut", "bounceOutDown", "bounceOutLeft", "bounceOutRight", "bounceOutUp",
"fadeIn", "fadeInDown", "fadeInDownBig", "fadeInLeft", "fadeInLeftBig", "fadeInRight", "fadeInRightBig", "fadeInUp", "fadeInUpBig", "fadeInTopLeft", "fadeInTopRight", "fadeInBottomLeft", "fadeInBottomRight",
"fadeOut", "fadeOutDown", "fadeOutDownBig", "fadeOutLeft", "fadeOutLeftBig", "fadeOutRight", "fadeOutRightBig", "fadeOutUp", "fadeOutUpBig", "fadeOutTopLeft", "fadeOutTopRight", "fadeOutBottomRight", "fadeOutBottomLeft",
"flip", "flipInX", "flipInY", "flipOutX", "flipOutY",
"lightSpeedInRight", "lightSpeedInLeft", "lightSpeedOutRight", "lightSpeedOutLeft",
"rotateIn", "rotateInDownLeft", "rotateInDownRight", "rotateInUpLeft", "rotateInUpRight",
"rotateOut", "rotateOutDownLeft", "rotateOutDownRight", "rotateOutUpLeft", "rotateOutUpRight",
"hinge", "jackInTheBox", "rollIn", "rollOut",
"zoomIn", "zoomInDown", "zoomInLeft", "zoomInRight", "zoomInUp",
"zoomOut", "zoomOutDown", "zoomOutLeft", "zoomOutRight", "zoomOutUp",
"slideInDown", "slideInLeft", "slideInRight", "slideInUp",
"slideOutDown", "slideOutLeft", "slideOutRight", "slideOutUp"
],
description: 'Selects the animation effect to apply to the component.',
table: {
type: { summary: 'string' },
defaultValue: { summary: '' },
category: 'Animations',
},
},
animationDelay: {
control: 'select',
options: ["2s", "3s", "4s", "5s"],
description: 'Sets the delay before the animation begins (in seconds).',
table: {
type: { summary: 'string' },
defaultValue: { summary: '2s' },
category: 'Animations',
},
},
animationSpeed: {
control: 'select',
options: ["slow", "slower", "fast", "faster"],
description: 'Controls how quickly the animation plays.',
table: {
type: { summary: 'string' },
defaultValue: { summary: '' },
category: 'Animations',
},
},
selectedChange: {
action: 'selectedChange',
description: 'Event emitted when radio button is clicked.',
table: {
type: { summary: 'void' },
defaultValue: { summary: () => { } },
category: 'Events',
},
},
value: {
control: 'value',
description: 'Property designed to extract the uploadedfile name e.g: comp.value',
table: {
type: { summary: 'string' },
defaultValue: { summary: '' },
category: 'Interaction',
},
},
validate: {
control: 'validate',
description: 'Method to validate the component\'s value, e.g: comp.validate()',
table: {
type: { summary: 'string' },
defaultValue: { summary: '' },
category: 'Interaction',
},
},
},
};
const Template = (args) => html `
<gov-radiobutton
heading="${args.heading}"
subtitle="${args.subtitle}"
.options="${args.options}"
="${args.selectedChange}"
?required="${args.required}"
animation-delay="${args.animationDelay}"
animation="${args.animation}"
animation-speed="${args.animationSpeed}"
>
</gov-radiobutton>
`;
export const RadioButtons = Template.bind({});
RadioButtons.args = {
heading: 'Choose your favorite option',
subtitle: 'Please select one option from below.',
options: ['Option 1', 'Option 2', 'Option 3'],
required: false,
animation: '',
animationDelay: '',
animationSpeed: '',
};
RadioButtons.parameters = {
docs: {
source: {
code: `<gov-radiobutton
heading="${RadioButtons.args.heading}"
subtitle="${RadioButtons.args.subtitle}"
rowActions="${JSON.stringify(RadioButtons.args.options)}"
?required="${RadioButtons.args.required}"
animation-delay="${RadioButtons.args.animationDelay}"
animation="${RadioButtons.args.animation}"
animation-speed="${RadioButtons.args.animationSpeed}"
>
</gov-radiobutton>`,
},
},
};
//# sourceMappingURL=gov-radiobutton.stories.js.map