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

KAD Reusable Component Library

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
// CLI Version 1.1.0
// Component Version 1.1.0
import React from 'react';
import Breadcrumbs from './Breadcrumbs';
// Wrapper component to inject mocked usePathname
const BreadcrumbsWrapper = ({ path, ...props }) => {
    return _jsx(Breadcrumbs, { ...props });
};
export default {
    title: 'Components/Navigation/Breadcrumbs',
    component: BreadcrumbsWrapper,
    argTypes: {
        path: { control: 'text', description: 'Current path (for story purposes)' },
        homeRoute: { control: 'text', description: 'Custom home route' },
        noShowRoutes: {
            control: 'array',
            description: 'Routes to exclude from breadcrumbs',
        },
        className: { control: 'text', description: 'Additional CSS class names' },
        'data-testid': { control: 'text', description: 'ID for testing purposes' },
    },
    decorators: [
        (Story) => (_jsx("div", { style: { padding: '20px', maxWidth: '800px', margin: '0 auto' }, children: _jsx(Story, {}) })),
    ],
};
export const Default = {
    args: {
        'data-testid': 'breadcrumbs-test-id',
        path: '/products/electronics/smartphones',
    },
};
export const WithCustomHomeRoute = {
    args: {
        ...Default.args,
        homeRoute: '/dashboard',
        path: '/users/profile',
    },
};
export const WithNoShowRoutes = {
    args: {
        ...Default.args,
        noShowRoutes: ['admin'],
        path: '/admin/users/settings',
    },
};
export const LongPath = {
    args: {
        ...Default.args,
        path: '/category1/subcategory2/product3/details/specifications',
    },
};
export const RootPath = {
    args: {
        ...Default.args,
        path: '/',
    },
};
export const WithCustomStyling = {
    args: {
        ...Default.args,
        className: 'custom-breadcrumbs',
        path: '/products/category/item',
    },
    decorators: [
        (Story) => (_jsxs(_Fragment, { children: [_jsx("style", { children: `
            .custom-breadcrumbs {
              background-color: #f0f0f0;
              padding: 10px;
              border-radius: 5px;
            }
            .custom-breadcrumbs .breadcrumbs__item {
              font-weight: bold;
            }
            .custom-breadcrumbs .breadcrumbs__link {
              color: #007bff;
            }
          ` }), _jsx(Story, {})] })),
    ],
};
export const InteractiveBreadcrumbs = {
    args: {
        ...Default.args,
    },
    render: (args) => {
        const [path, setPath] = React.useState('/products/electronics/smartphones');
        return (_jsxs("div", { children: [_jsx("div", { style: { marginBottom: '20px' }, children: _jsxs("label", { children: ["Current Path:", _jsx("input", { type: 'text', value: path, onChange: (e) => setPath(e.target.value), style: { width: '100%', padding: '5px', marginTop: '5px' } })] }) }), _jsx(BreadcrumbsWrapper, { ...args, path: path })] }));
    },
};
//# sourceMappingURL=Breadcrumbs.stories.js.map