eventx-design-system/dist/components/Tabs/Tabs.stories.js

Design System do EventX

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Tabs } from './Tabs';
const meta = {
    title: 'Components/Tabs',
    component: Tabs,
    parameters: {
        layout: 'padded',
    },
    tags: ['autodocs'],
    argTypes: {
        variant: {
            control: { type: 'select' },
            options: ['default', 'mobile'],
        },
    },
};
export default meta;
const sampleTabs = [
    {
        id: 'tab1',
        label: 'Overview',
        content: (_jsxs("div", { children: [_jsx("h3", { children: "Overview Content" }), _jsx("p", { children: "This is the overview tab content. Here you can see general information about the item." })] })),
    },
    {
        id: 'tab2',
        label: 'Details',
        content: (_jsxs("div", { children: [_jsx("h3", { children: "Details Content" }), _jsx("p", { children: "This is the details tab content. Here you can see detailed information about the item." }), _jsxs("ul", { children: [_jsx("li", { children: "Detail item 1" }), _jsx("li", { children: "Detail item 2" }), _jsx("li", { children: "Detail item 3" })] })] })),
    },
    {
        id: 'tab3',
        label: 'Settings',
        content: (_jsxs("div", { children: [_jsx("h3", { children: "Settings Content" }), _jsx("p", { children: "This is the settings tab content. Here you can configure various options." }), _jsxs("div", { style: { display: 'flex', gap: '1rem', marginTop: '1rem' }, children: [_jsx("button", { style: { padding: '0.5rem 1rem', border: '1px solid #ccc', borderRadius: '4px' }, children: "Save Settings" }), _jsx("button", { style: { padding: '0.5rem 1rem', border: '1px solid #ccc', borderRadius: '4px' }, children: "Reset" })] })] })),
    },
];
const tabsWithDisabled = [
    {
        id: 'tab1',
        label: 'Active Tab',
        content: _jsx("div", { children: "This tab is active and enabled." }),
    },
    {
        id: 'tab2',
        label: 'Disabled Tab',
        content: _jsx("div", { children: "This tab is disabled." }),
        disabled: true,
    },
    {
        id: 'tab3',
        label: 'Another Tab',
        content: _jsx("div", { children: "This is another active tab." }),
    },
];
export const Default = {
    args: {
        tabs: sampleTabs,
        variant: 'default',
    },
};
export const Mobile = {
    args: {
        tabs: sampleTabs,
        variant: 'mobile',
    },
};
export const WithDefaultActiveTab = {
    args: {
        tabs: sampleTabs,
        defaultActiveTab: 'tab2',
        variant: 'default',
    },
};
export const WithDisabledTabs = {
    args: {
        tabs: tabsWithDisabled,
        variant: 'default',
    },
};
export const WithOnChange = {
    args: {
        tabs: sampleTabs,
        variant: 'default',
        onChange: (tabId) => console.log('Tab changed to:', tabId),
    },
};
export const LongTabLabels = {
    args: {
        tabs: [
            {
                id: 'tab1',
                label: 'Very Long Tab Label That Might Overflow',
                content: _jsx("div", { children: "Content for the first tab with a very long label." }),
            },
            {
                id: 'tab2',
                label: 'Another Long Tab Label',
                content: _jsx("div", { children: "Content for the second tab with another long label." }),
            },
            {
                id: 'tab3',
                label: 'Short',
                content: _jsx("div", { children: "Content for the third tab with a short label." }),
            },
        ],
        variant: 'default',
    },
};