@wonderflow/react-components
Version:
UI components from Wonderflow's Wanda design system
46 lines (45 loc) • 2.61 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Stack, Text } from '../..';
import { Container } from './container';
const story = {
title: 'Layouts/Container',
component: Container,
argTypes: {
padding: {
options: [true, false],
control: { type: 'inline-radio' },
},
className: {
table: {
disable: true,
},
},
dimension: {
options: ['extra-small', 'small', 'medium', 'large', 'extra-large', 'fixed', 'full'],
control: { type: 'select' },
},
},
args: {
dimension: 'full',
padding: true,
},
};
export default story;
const Template = args => _jsx(Container, { ...args });
const TemplateComparison = () => (_jsxs(Stack, { rowGap: 24, children: [_jsxs(Stack, { rowGap: 8, hAlign: "center", children: [_jsx(Text, { variant: "body-3", children: "Container Extra Small" }), _jsx(Container, { dimension: "extra-small", className: "ContainerEx" })] }), _jsxs(Stack, { rowGap: 8, hAlign: "center", children: [_jsx(Text, { variant: "body-3", children: "Container Small" }), _jsx(Container, { dimension: "small", className: "ContainerEx" })] }), _jsxs(Stack, { rowGap: 8, hAlign: "center", children: [_jsx(Text, { variant: "body-3", children: "Container Medium" }), _jsx(Container, { dimension: "medium", className: "ContainerEx" })] }), _jsxs(Stack, { rowGap: 8, hAlign: "center", children: [_jsx(Text, { variant: "body-3", children: "Container Large" }), _jsx(Container, { dimension: "large", className: "ContainerEx" })] }), _jsxs(Stack, { rowGap: 8, hAlign: "center", children: [_jsx(Text, { variant: "body-3", children: "Container Extra Large" }), _jsx(Container, { dimension: "extra-large", className: "ContainerEx" })] }), _jsxs(Stack, { rowGap: 8, hAlign: "center", children: [_jsx(Text, { variant: "body-3", children: "Container Fixed" }), _jsx(Container, { dimension: "fixed", className: "ContainerEx" })] }), _jsxs(Stack, { rowGap: 8, hAlign: "center", children: [_jsx(Text, { variant: "body-3", children: "Container Full" }), _jsx(Container, { dimension: "full", className: "ContainerEx" })] })] }));
export const WithPadding = Template.bind({});
WithPadding.args = {
dimension: 'full',
padding: true,
className: 'ContainerEx',
};
export const NoPadding = Template.bind({});
NoPadding.args = {
padding: false,
className: 'ContainerEx',
};
export const AsSection = Template.bind({});
AsSection.args = {
className: 'ContainerEx',
};
export const Comparison = TemplateComparison.bind({});