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

KAD Reusable Component Library

import { jsx as _jsx } from "react/jsx-runtime";
import DropdownCheckboxGroup from './DropdownCheckboxGroup';
export default {
    title: 'Components/DropdownCheckboxGroup',
    component: DropdownCheckboxGroup,
    argTypes: {
        'data-testid': {
            control: 'text',
            description: 'ID for testing purposes',
            defaultValue: 'DropdownCheckboxGroup-test-id',
        },
        passProps: {
            control: 'object',
            description: 'Object containing extra props to pass',
            defaultValue: {},
        },
    },
};
const Template = (args) => _jsx(DropdownCheckboxGroup, { ...args });
export const Default = Template.bind({});
Default.args = {
    'data-testid': 'DropdownCheckboxGroup-test-id',
    options: [
        { LabelContent: 'Option 1', value: 'option1' },
        { LabelContent: 'Option 2', value: 'option2' },
        { LabelContent: 'Option 3', value: 'option3' },
    ],
    handleUpdate: (selectedValues) => {
        console.log('Selected values:', selectedValues);
    },
    buttonText: 'Select Options',
    isLayedOut: false,
    className: '',
    buttonWidth: 'max-content',
    isButtonFullWidth: false,
    selectedDefaultValues: [],
};
export const WithPassProps = Template.bind({});
WithPassProps.args = {
    ...Default.args,
    passProps: {
        customProp1: 'value1',
        customProp2: 'value2',
    },
};
export const LayedOut = Template.bind({});
LayedOut.args = {
    ...Default.args,
    isLayedOut: true,
    className: 'custom-class',
};
export const WithSelectedDefaultValues = Template.bind({});
WithSelectedDefaultValues.args = {
    ...Default.args,
    selectedDefaultValues: ['option1', 'option3'],
};
export const LongOptionList = Template.bind({});
LongOptionList.args = {
    ...Default.args,
    options: [
        { LabelContent: 'Option 1', value: 'option1' },
        { LabelContent: 'Option 2', value: 'option2' },
        { LabelContent: 'Option 3', value: 'option3' },
        { LabelContent: 'Option 4', value: 'option4' },
        { LabelContent: 'Option 5', value: 'option5' },
        { LabelContent: 'Option 6', value: 'option6' },
        { LabelContent: 'Option 7', value: 'option7' },
        { LabelContent: 'Option 8', value: 'option8' },
    ],
};
export const FullWidthButton = Template.bind({});
FullWidthButton.args = {
    ...Default.args,
    isButtonFullWidth: true,
};
export const CustomButtonWidth = Template.bind({});
CustomButtonWidth.args = {
    ...Default.args,
    buttonWidth: '200px',
};
export const DisabledOptions = Template.bind({});
DisabledOptions.args = {
    ...Default.args,
    options: [
        { LabelContent: 'Option 1', value: 'option1' },
        { LabelContent: 'Option 2', value: 'option2', disabled: true },
        { LabelContent: 'Option 3', value: 'option3' },
        { LabelContent: 'Option 4', value: 'option4', disabled: true },
    ],
};
//# sourceMappingURL=DropdownCheckboxGroup.stories.js.map