@wonderflow/react-components
Version:
UI components from Wonderflow's Wanda design system
12 lines (11 loc) • 2.17 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Grid } from './grid';
const story = {
title: 'Layouts/Grid',
component: Grid,
args: {},
argTypes: {},
};
export default story;
const Template = args => (_jsxs(Grid, { ...args, children: [_jsx(Grid.Item, { style: { background: 'var(--dimmed-2)', padding: 24 }, children: "1" }), _jsx(Grid.Item, { style: { background: 'var(--dimmed-2)', padding: 24 }, children: "2" }), _jsx(Grid.Item, { style: { background: 'var(--dimmed-2)', padding: 24 }, children: "3" }), _jsx(Grid.Item, { style: { background: 'var(--dimmed-2)', padding: 24 }, children: "4" }), _jsx(Grid.Item, { style: { background: 'var(--dimmed-2)', padding: 24 }, children: "5" }), _jsx(Grid.Item, { style: { background: 'var(--dimmed-2)', padding: 24 }, children: "6" }), _jsx(Grid.Item, { style: { background: 'var(--dimmed-2)', padding: 24 }, children: "7" }), _jsx(Grid.Item, { style: { background: 'var(--dimmed-2)', padding: 24 }, children: "8" }), _jsx(Grid.Item, { style: { background: 'var(--dimmed-2)', padding: 24 }, children: "9" }), _jsx(Grid.Item, { column: "span 2", style: { background: 'var(--dimmed-2)', padding: 24 }, children: "10" }), _jsx(Grid.Item, { style: { background: 'var(--dimmed-2)', padding: 24 }, children: "11" }), _jsx(Grid.Item, { style: { background: 'var(--dimmed-2)', padding: 24 }, children: "12" }), _jsx(Grid.Item, { style: { background: 'var(--dimmed-2)', padding: 24 }, children: "13" }), _jsx(Grid.Item, { style: { background: 'var(--dimmed-2)', padding: 24 }, children: "14" }), _jsx(Grid.Item, { style: { background: 'var(--dimmed-2)', padding: 24 }, children: "15" }), _jsx(Grid.Item, { style: { background: 'var(--dimmed-2)', padding: 24 }, children: "16" }), _jsx(Grid.Item, { style: { background: 'var(--dimmed-2)', padding: 24 }, children: "17" }), _jsx(Grid.Item, { style: { background: 'var(--dimmed-2)', padding: 24 }, children: "18" }), _jsx(Grid.Item, { style: { background: 'var(--dimmed-2)', padding: 24 }, children: "19" }), _jsx(Grid.Item, { style: { background: 'var(--dimmed-2)', padding: 24 }, children: "20" })] }));
export const Default = Template.bind({});