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

KAD Reusable Component Library

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Accordion from './Accordion';
import { Button } from '../Button';
import Icon from '../Icons/Icon/Icon';
import { User01 } from '../Icons/paths';
export default {
    title: 'Components/Accordion',
    component: Accordion,
    argTypes: {
        parentContent: { control: 'text' },
        subTitle: { control: 'text' },
        initialOpenState: { control: 'boolean' },
        onOpenStateChange: { action: 'onOpenStateChange' },
        onDelete: { action: 'onDelete' },
        collapsible: { control: 'boolean' },
        style: { control: 'object' },
        triggerStyle: { control: 'object' },
        contentOuterClassName: { control: 'text' },
        open: { control: 'boolean' },
    },
};
export const Default = {
    args: {
        parentContent: 'Accordion Title',
        children: 'Accordion Content',
        initialOpenState: false,
        collapsible: true,
    },
};
export const WithSubtitle = {
    args: {
        ...Default.args,
        subTitle: 'This is a subtitle',
    },
};
export const InitiallyOpen = {
    args: {
        ...Default.args,
        initialOpenState: true,
    },
};
export const NonCollapsible = {
    args: {
        ...Default.args,
        collapsible: false,
    },
};
export const WithDeleteButton = {
    args: {
        ...Default.args,
        onDelete: () => console.log('Delete clicked'),
    },
};
export const ControlledMode = {
    args: {
        ...Default.args,
        open: true,
        onOpenStateChange: (isOpen) => console.log(`Accordion is now ${isOpen ? 'open' : 'closed'}`),
    },
};
export const CustomStyling = {
    args: {
        ...Default.args,
        style: { border: '2px solid blue', borderRadius: '8px' },
        triggerStyle: { backgroundColor: '#f0f0f0', padding: '10px' },
        contentOuterClassName: 'custom-content-class',
    },
};
export const ComplexContent = {
    args: {
        parentContent: (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [_jsx(Icon, { Path: User01, color: '#333' }), _jsx("span", { children: "User Profile" })] })),
        children: (_jsxs("div", { children: [_jsx("h3", { children: "John Doe" }), _jsx("p", { children: "Email: john.doe@example.com" }), _jsx("p", { children: "Role: Administrator" }), _jsx(Button, { onClick: () => console.log('Edit profile clicked'), children: "Edit Profile" })] })),
        initialOpenState: true,
    },
};
export const MultipleAccordions = {
    render: () => (_jsxs("div", { children: [_jsx(Accordion, { parentContent: 'Section 1', initialOpenState: true, children: _jsx("p", { children: "Content for Section 1" }) }), _jsx(Accordion, { parentContent: 'Section 2', children: _jsx("p", { children: "Content for Section 2" }) }), _jsx(Accordion, { parentContent: 'Section 3', children: _jsx("p", { children: "Content for Section 3" }) })] })),
};
//# sourceMappingURL=Accordion.stories.js.map