@kadconsulting/dry/dist/src/components/CheckBoxGroup/CheckBoxGroup.stories.js

KAD Reusable Component Library

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