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

KAD Reusable Component Library

import { jsx as _jsx } from "react/jsx-runtime";
import { ThemeProvider } from '~components/ThemeProvider';
import DropdownItem from './DropdownItem';
import darkTheme from '~themes/default/palette/dark';
import lightTheme from '~themes/default/palette/light';
import { ThemeTypes } from '~components/ThemeProvider/types';
export default {
    title: 'Components/FormInputs/DropdownItem',
    tags: ['autodocs'],
    component: DropdownItem,
    argTypes: {
        'data-testid': {
            control: 'text',
            description: 'Support for @testing-library/react `screen.getByTestId`',
        },
        label: {
            control: 'text',
            description: 'Label for the dropdown item',
        },
        icon: {
            control: 'object',
            description: 'Icon for the dropdown item',
        },
        notificationAmount: {
            control: 'number',
            description: 'Notification amount to display',
        },
        items: {
            control: 'object',
            description: 'Sub items in the dropdown',
        },
        note: {
            control: 'text',
            description: 'Additional note',
        },
    },
};
const DefaultDropdownItems = [
    {
        label: 'Sub Item 1',
        path: '/sub1',
        note: 'Note for Sub Item 1',
        handleClick: () => console.log('add logic'),
    },
    {
        label: 'Sub Item 2',
        path: '/sub2',
        note: 'Note for Sub Item 2',
        handleClick: () => console.log('add logic'),
    },
    {
        label: 'Sub Item 3',
        path: '/sub3',
        note: 'Note for Sub Item 3',
        handleClick: () => console.log('add logic'),
    },
];
export const Default = {
    args: {
        label: 'Sample Dropdown',
        icon: _jsx("span", { children: "\uD83D\uDD3D" }),
        notificationAmount: 3,
        items: DefaultDropdownItems,
        note: 'Sample Note',
    },
    render: (args, context) => {
        const themeType = context.globals.themeType ?? ThemeTypes.LIGHT;
        return (_jsx(ThemeProvider, { overrides: { themeType }, themes: { light: lightTheme, dark: darkTheme }, children: _jsx(DropdownItem, { ...args }) }));
    },
};
export const WithCustomLabel = {
    args: {
        ...Default.args,
        label: 'Custom Label',
    },
};
export const WithDifferentNotificationAmount = {
    args: {
        ...Default.args,
        notificationAmount: 10,
    },
};
export const WithNoSubItems = {
    args: {
        ...Default.args,
        items: [],
    },
};
export const WithLongNote = {
    args: {
        ...Default.args,
        note: 'This is a really long note that might break things. Or maybe not. Who knows?',
    },
};
//# sourceMappingURL=DropdownItem.stories.js.map