@kadconsulting/dry
Version:
KAD Reusable Component Library
85 lines • 3.54 kB
JavaScript
import { createElement as _createElement } from "react";
import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback } from 'react';
import { inferThemeType, ThemeAwareStory } from '~internal/index';
import darkTheme from '~themes/default/palette/dark';
import lightTheme from '~themes/default/palette/light';
import Checkbox from './Checkbox';
import { ThemeProvider } from '~components/ThemeProvider';
export default {
title: 'Components/FormInputs/Checkbox',
tags: ['autodocs'],
component: Checkbox,
argTypes: {
checked: {
control: 'boolean',
description: 'Checked state of the checkbox',
},
indeterminate: {
control: 'boolean',
description: 'Indeterminate state of the checkbox',
},
disabled: {
control: 'boolean',
description: 'Disables the checkbox',
},
color: {
control: { type: 'select', options: ['light-contrast', 'dark-contrast'] },
description: 'Color scheme of the checkbox',
},
LabelContent: {
control: 'text',
description: 'Content for the checkbox label',
},
subText: {
control: 'text',
description: 'Subtext for the checkbox label',
},
extraText: {
control: 'text',
description: 'Extra text associated with the checkbox',
},
extraTextPosition: {
control: { type: 'select', options: ['left', 'right'] },
description: 'Position of the extra text relative to the checkbox',
},
isCard: {
control: 'boolean',
description: 'Whether the checkbox is styled as a card',
},
},
};
export const Default = {
// TODO-p3: fix any types
render: (args, context) => {
const themeType = inferThemeType(context);
return (_jsx(ThemeProvider, { overrides: { themeType }, themes: { light: lightTheme, dark: darkTheme }, children: _jsx(ThemeAwareStory, { id: context.id, children: _jsx(Checkbox, { ...args }) }) }));
},
args: {
LabelContent: 'I am a checkbox',
color: 'light-contrast',
},
};
const CheckboxStatesDemo = (_, context) => {
const themeType = inferThemeType(context);
const StatesMap = useCallback(() => {
const states = [
{ checked: true, disabled: false, color: 'light-contrast', key: 0 },
{ checked: false, disabled: false, color: 'dark-contrast', key: 1 },
{ checked: false, disabled: true, color: 'light-contrast', key: 2 },
// Add more states as needed with explicit 'color' type
];
return states.map((state) => (_createElement(Checkbox, { ...state, key: state.key, checked: state.checked, disabled: state.disabled, color: state.color, LabelContent: `Checkbox ${state.key + 1}`, subText: `Subtext ${state.key + 1}`, extraText: `Extra text ${state.key + 1}` })));
}, []);
return (_jsx(ThemeProvider, { overrides: { themeType }, themes: { light: lightTheme, dark: darkTheme }, children: _jsx(ThemeAwareStory, { id: context.id, children: _jsx("div", { style: { gap: '16px', display: 'flex', flexDirection: 'column' }, children: StatesMap() }) }) }));
};
export const States = {
// TODO-p3: fix any types
render: (args, context) => CheckboxStatesDemo(args, context),
parameters: {
controls: {
disable: true,
},
},
};
//# sourceMappingURL=Checkbox.stories.js.map