@wonderflow/react-components
Version:
UI components from Wonderflow's Wanda design system
25 lines (24 loc) • 3.99 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Masonry } from './masonry';
const story = {
title: 'Layouts/Masonry',
component: Masonry,
args: {
gutter: 24,
},
argTypes: {},
};
export default story;
const Template = args => (_jsxs(Masonry, { ...args, children: [_jsx("div", { style: { background: 'var(--dimmed-2)', padding: 24 }, children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati aut deleniti, odit beatae voluptates unde blanditiis placeat facilis" }), _jsx("div", { style: { background: 'var(--dimmed-2)', padding: 24 }, children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati aut deleniti, odit beatae voluptates unde bland" }), _jsx("div", { style: { background: 'var(--dimmed-2)', padding: 24 }, children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati aut deleniti, odit beatae voluptates unde blanditiis placeat facilis mollitia officiis temporibus dignissimos assumenda delectus optio maiores perspiciatis sed fugit aperiam?" }), _jsx("div", { style: { background: 'var(--dimmed-2)', padding: 24 }, children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati aut deleniti, odit beatae voluptates unde blanditiis placeat facilis mollitia officiis temporibus dignissimos " }), _jsx("div", { style: { background: 'var(--dimmed-2)', padding: 24 }, children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati aut deleniti, odit beatae vo" }), _jsx("div", { style: { background: 'var(--dimmed-2)', padding: 24 }, children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati aut deleniti, odit beatae voluptates unde blanditiis placeat facilis mollitia officiis temporibus dignissimos assumenda delectus optio " }), _jsx("div", { style: { background: 'var(--dimmed-2)', padding: 24 }, children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati aut deleniti, odit beatae voluptates unde blanditiis placeat facilis mollitia officiis " }), _jsx("div", { style: { background: 'var(--dimmed-2)', padding: 24 }, children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati aut deleniti, odit beatae voluptates unde blanditiis placeat facilis mollitia officiis temporibus dignissimos assumenda delectus optio maiores perspiciatis sed fugit aperiam? Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati aut deleniti, odit beatae voluptates unde blanditiis placeat facilis mollitia officiis temporibus dignissimos assumenda delectus optio maiores perspiciatis sed fugit aperiam?" }), _jsx("div", { style: { background: 'var(--dimmed-2)', padding: 24 }, children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati aut deleniti, odit beatae voluptates unde blanditiis placeat facilis mollitia officiis temporibus dignissimos assumenda delectus optio maiores perspiciatis" }), _jsx("div", { style: { background: 'var(--dimmed-2)', padding: 24 }, children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati aut deleniti, odit beatae voluptates unde blanditiis placeat facilis mollitia officiis temporibus dignissimos assumenda delectus optio maiores perspiciatis sed fugit aperiam?Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati aut deleniti, odit beatae voluptates unde blanditiis placeat facilis mollitia officiis temporibus dignissimos assumenda delectus optio maiores perspiciatis sed fugit aperiam?Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati aut deleniti, odit beatae voluptates unde blanditiis placeat facilis mollitia officiis temporibus dignissimos assumenda delectus optio maiores perspiciatis sed fugit aperiam?" })] }));
export const Default = Template.bind({});
export const WithBreakPoints = Template.bind({});
WithBreakPoints.args = {
columns: {
default: 6,
extraLarge: 5,
large: 4,
medium: 3,
small: 2,
extraSmall: 1,
},
};