@wonderflow/react-components
Version:
UI components from Wonderflow's Wanda design system
41 lines (40 loc) • 1.48 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Stack } from './stack';
const story = {
title: 'Layouts/Stack',
component: Stack,
argTypes: {
inline: {
options: [true, false],
control: { type: 'inline-radio' },
},
wrap: {
options: [true, false],
control: { type: 'inline-radio' },
},
fill: {
options: [true, false],
control: { type: 'inline-radio' },
},
direction: {
options: ['row', 'column'],
control: { type: 'inline-radio' },
},
},
args: {
direction: 'row',
vPadding: 16,
hPadding: 24,
columnGap: 16,
rowGap: 80,
wrap: true,
as: 'div',
},
};
export default story;
const Template = args => (_jsxs(Stack, { ...args, children: [_jsx("div", { className: "DivEx", children: "01" }), _jsx("div", { className: "DivEx", children: "02" }), _jsx("div", { className: "DivEx", children: "03" }), _jsx("div", { className: "DivEx", children: "04" }), _jsx("div", { className: "DivEx", children: "05" }), _jsx("div", { className: "DivEx", children: "06" }), _jsx("div", { className: "DivEx", children: "07" }), _jsx("div", { className: "DivEx", children: "08" }), _jsx("div", { className: "DivEx", children: "09" })] }));
export const Default = Template.bind({});
Default.args = {
hAlign: 'start',
vAlign: 'start',
};