@kadconsulting/dry
Version:
KAD Reusable Component Library
135 lines • 4.29 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import CheckboxGroup from './CheckBoxGroup';
export default {
title: 'Components/FormInputs/CheckboxGroup',
component: CheckboxGroup,
argTypes: {
name: {
control: 'text',
defaultValue: 'exampleGroup',
},
},
};
const Template = (args) => (_jsx(CheckboxGroup, { ...args }));
// Define the default options to be used across stories
const defaultOptions = [
{
id: 'option1',
LabelContent: _jsx("span", { children: "Option 1" }),
'data-testid': 'option1',
indeterminate: false,
disabled: false,
onChange: () => console.log('Option 1 changed'),
color: 'light-contrast',
},
{
id: 'option2',
LabelContent: _jsx("span", { children: "Option 2" }),
'data-testid': 'option2',
indeterminate: false,
disabled: false,
onChange: () => console.log('Option 2 changed'),
color: 'light-contrast',
},
{
id: 'option3',
LabelContent: _jsx("span", { children: "Option 3" }),
'data-testid': 'option3',
indeterminate: false,
disabled: true,
onChange: () => console.log('Option 3 changed'),
color: 'dark-contrast',
subText: 'Subtext for Option 3',
},
];
export const Default = Template.bind({});
Default.args = {
name: 'exampleGroup',
options: defaultOptions,
};
export const SelectedValue = Template.bind({});
SelectedValue.args = {
...Default.args,
// TODO-p3: remove this when we have a better way to handle this
// @ts-ignore
selectedValue: 'option2',
};
export const WithSubText = Template.bind({});
WithSubText.args = {
...Default.args,
options: defaultOptions.map((option) => ({
...option,
subText: option.id === 'option3' ? 'Subtext for Option 3' : undefined,
})),
};
export const DisabledGroup = Template.bind({});
DisabledGroup.args = {
...Default.args,
options: defaultOptions.map((option) => ({ ...option, disabled: true })),
};
export const IndeterminateState = Template.bind({});
IndeterminateState.args = {
...Default.args,
options: defaultOptions.map((option) => ({
...option,
})),
};
export const WithExtraText = Template.bind({});
WithExtraText.args = {
...Default.args,
options: defaultOptions.map((option) => ({
...option,
extraText: option.id === 'option1' ? 'Extra information for Option 1' : undefined,
extraTextPosition: option.id === 'option1' ? 'right' : 'left',
})),
};
// Story to demonstrate a CheckboxGroup where all options have extra text
export const AllWithExtraText = Template.bind({});
AllWithExtraText.args = {
...Default.args,
options: defaultOptions.map((option, index) => ({
...option,
extraText: `Extra information for Option ${index + 1}`,
extraTextPosition: index % 2 === 0 ? 'right' : 'left',
})),
};
// Story to demonstrate a CheckboxGroup with mixed disabled state
export const MixedDisabledState = Template.bind({});
MixedDisabledState.args = {
...Default.args,
options: defaultOptions.map((option) => ({
...option,
disabled: option.id === 'option2',
})),
};
// Story to demonstrate a CheckboxGroup with custom onChange handlers
export const WithCustomOnChange = Template.bind({});
WithCustomOnChange.args = {
...Default.args,
options: defaultOptions.map((option) => ({
...option,
onChange: (event) => {
console.log(`Custom onChange for ${option.id}:`, event.target.checked);
},
})),
};
// story to demonstrate a CheckboxGroup with a "Select All" option
export const WithSelectAllOption = Template.bind({});
WithSelectAllOption.args = {
...Default.args,
options: [
{
id: 'selectAll',
LabelContent: _jsx("span", { children: "Select All" }),
'data-testid': 'selectAll',
indeterminate: false,
disabled: false,
onChange: (event) => {
console.log('Select All:', event.target.checked);
},
color: 'light-contrast',
},
...defaultOptions,
],
};
//# sourceMappingURL=CheckBoxGroup.stories.js.map