@kadconsulting/dry/dist/next/esm/src/components/@primitives/Link/Link.stories.js

KAD Reusable Component Library

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import Link from './Link';
const meta = {
    title: 'Components/@primitives/Link',
    component: Link,
    tags: ['autodocs'],
    argTypes: {
        href: {
            control: 'text',
            description: 'The URL that the hyperlink points to',
        },
        value: {
            control: 'text',
            description: 'The text content of the link',
        },
        className: {
            control: 'text',
            description: 'Additional CSS class names',
        },
        children: {
            control: 'text',
            description: 'Child elements to be rendered inside the link',
        },
        // You can add more argTypes here based on your LinkProps
    },
};
export default meta;
export const Default = {
    args: {
        href: 'https://example.com',
        value: 'Click me',
    },
};
export const WithChildren = {
    args: {
        href: 'https://example.com',
        children: _jsx("span", { children: "Child Link Content" }),
    },
};
export const WithCustomClassName = {
    args: {
        href: 'https://example.com',
        value: 'Styled Link',
        className: 'custom-link-class',
    },
};
export const ExternalLink = {
    args: {
        href: 'https://external-site.com',
        value: 'External Link',
        target: '_blank',
        rel: 'noopener noreferrer',
    },
};
export const WithValueAndChildren = {
    args: {
        href: 'https://example.com',
        value: 'Main Text',
        children: (_jsx("span", { style: { marginLeft: '5px', color: 'gray' }, children: "(additional info)" })),
    },
};
export const DisabledLink = {
    args: {
        href: 'https://example.com',
        value: 'Disabled Link',
        onClick: (e) => e.preventDefault(),
        style: { opacity: 0.5, pointerEvents: 'none' },
    },
};
// This story demonstrates how the Link might look in a NextJS environment
export const NextJSLink = {
    args: {
        href: '/some-internal-route',
        value: 'NextJS Link',
    },
    parameters: {
        docs: {
            description: {
                story: 'This represents how the Link would render in a NextJS environment. Note that in Storybook, it will still render as a regular link.',
            },
        },
    },
};
export const LinkWithIcon = {
    args: {
        href: 'https://example.com',
        children: (_jsxs(_Fragment, { children: [_jsx("i", { className: 'fas fa-external-link-alt', style: { marginRight: '5px' } }), "Link with Icon"] })),
    },
};
export const MultipleLinks = {
    render: (args) => (_jsxs("div", { style: { display: 'flex', justifyContent: 'space-around' }, children: [_jsx(Link, { ...args, href: 'https://example1.com', value: 'Link 1' }), _jsx(Link, { ...args, href: 'https://example2.com', value: 'Link 2' }), _jsx(Link, { ...args, href: 'https://example3.com', value: 'Link 3' })] })),
};
//# sourceMappingURL=Link.stories.js.map