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

Design System do EventX

import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { Container } from './Container';
import { Card } from './Card';
const meta = {
    title: 'Components/Container',
    component: Container,
    parameters: {
        layout: 'padded',
    },
    argTypes: {
        maxWidth: {
            control: { type: 'select' },
            options: ['sm', 'md', 'lg', 'xl', 'full'],
        },
        padding: {
            control: { type: 'select' },
            options: ['none', 'sm', 'md', 'lg', 'xl'],
        },
        center: {
            control: { type: 'boolean' },
        },
        fluid: {
            control: { type: 'boolean' },
        },
    },
};
export default meta;
const ContainerExample = ({ maxWidth = 'lg', padding = 'md', ...props }) => (_jsx(Container, { maxWidth: maxWidth, padding: padding, ...props, children: _jsxs(Card, { children: [_jsxs("h3", { children: ["Container ", maxWidth] }), _jsxs("p", { children: ["Este \u00E9 um exemplo de conte\u00FAdo dentro de um container com maxWidth: ", maxWidth, " e padding: ", padding, "."] }), _jsx("p", { children: "O container ajuda a centralizar o conte\u00FAdo e definir larguras m\u00E1ximas responsivas." })] }) }));
export const Default = {
    render: (args) => _jsx(ContainerExample, { ...args }),
};
export const Small = {
    render: (args) => _jsx(ContainerExample, { maxWidth: "sm", ...args }),
};
export const Medium = {
    render: (args) => _jsx(ContainerExample, { maxWidth: "md", ...args }),
};
export const Large = {
    render: (args) => _jsx(ContainerExample, { maxWidth: "lg", ...args }),
};
export const ExtraLarge = {
    render: (args) => _jsx(ContainerExample, { maxWidth: "xl", ...args }),
};
export const Full = {
    render: (args) => _jsx(ContainerExample, { maxWidth: "full", ...args }),
};
export const NoPadding = {
    render: (args) => _jsx(ContainerExample, { padding: "none", ...args }),
};
export const LargePadding = {
    render: (args) => _jsx(ContainerExample, { padding: "lg", ...args }),
};
export const Fluid = {
    render: (args) => (_jsx(Container, { fluid: true, padding: "md", ...args, children: _jsxs(Card, { children: [_jsx("h3", { children: "Container Fluid" }), _jsx("p", { children: "Este container ocupa toda a largura dispon\u00EDvel sem margens autom\u00E1ticas." })] }) })),
};
export const NotCentered = {
    render: (args) => (_jsx(Container, { center: false, maxWidth: "md", padding: "md", ...args, children: _jsxs(Card, { children: [_jsx("h3", { children: "Container N\u00E3o Centralizado" }), _jsx("p", { children: "Este container n\u00E3o est\u00E1 centralizado (margin: 0)." })] }) })),
};
export const AllSizes = {
    render: (args) => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '24px' }, children: [_jsx(Container, { maxWidth: "sm", padding: "md", ...args, children: _jsxs(Card, { children: [_jsx("h3", { children: "Container Small (640px)" }), _jsx("p", { children: "Largura m\u00E1xima de 640px" })] }) }), _jsx(Container, { maxWidth: "md", padding: "md", ...args, children: _jsxs(Card, { children: [_jsx("h3", { children: "Container Medium (768px)" }), _jsx("p", { children: "Largura m\u00E1xima de 768px" })] }) }), _jsx(Container, { maxWidth: "lg", padding: "md", ...args, children: _jsxs(Card, { children: [_jsx("h3", { children: "Container Large (1024px)" }), _jsx("p", { children: "Largura m\u00E1xima de 1024px" })] }) }), _jsx(Container, { maxWidth: "xl", padding: "md", ...args, children: _jsxs(Card, { children: [_jsx("h3", { children: "Container Extra Large (1280px)" }), _jsx("p", { children: "Largura m\u00E1xima de 1280px" })] }) })] })),
};