@cimpress/react-components
Version:
React components to support the MCP styleguide
85 lines • 5.12 kB
JavaScript
import * as React from 'react';
import { unstable_GridLayout as GridLayout } from '../GridLayout';
import { Card } from '../Card';
/**
* Create layouts based on CSS Grid.
*
* This is an unstable component, expect breaking changes or complete removal in minor versions.
*
* **Usage**
*
* ```jsx
* import { unstable_GridLayout as GridLayout } from '../GridLayout';
*
* // ...
*
* <GridLayout>
* <GridLayout.Item mdSpan={6} lgSpan={4}>...</GridLayout.Item>
* </GridLayout>
* ```
*/
const meta = {
title: 'Unstable/GridLayout',
component: GridLayout,
subcomponents: {
'GridLayout.Item': GridLayout.Item,
},
};
export default meta;
export const Default = {
render(props) {
return (React.createElement(GridLayout, Object.assign({}, props),
React.createElement(GridLayout.Item, { style: { background: 'pink' }, smSpan: 12, mdSpan: 4, lgSpan: 4 },
React.createElement("p", { style: { padding: 8 } }, "Foo")),
React.createElement(GridLayout.Item, { style: { background: 'aliceblue' }, smSpan: 12, mdSpan: 4, lgSpan: 4 },
React.createElement("p", { style: { padding: 8 } }, "Bar")),
React.createElement(GridLayout.Item, { style: { background: 'lavenderblush' }, smSpan: 12, mdSpan: 4, lgSpan: 4 },
React.createElement("p", { style: { padding: 8 } }, "Baz"))));
},
};
/** Two column layout which wraps at `sm` viewport. */
export const TwoColumns = {
render(props) {
return (React.createElement(GridLayout, Object.assign({}, props),
React.createElement(GridLayout.Item, { smSpan: 12, mdSpan: 6 },
React.createElement(Card, { header: "Foo" },
React.createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis porro debitis possimus voluptate doloribus odit neque quae quam? Fugit, cumque."))),
React.createElement(GridLayout.Item, { smSpan: 12, mdSpan: 6 },
React.createElement(Card, { header: "Bar" },
React.createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis porro debitis possimus voluptate doloribus odit neque quae quam? Fugit, cumque."))),
React.createElement(GridLayout.Item, { smSpan: 12, mdSpan: 6 },
React.createElement(Card, { header: "Baz" },
React.createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis porro debitis possimus voluptate doloribus odit neque quae quam? Fugit, cumque."))),
React.createElement(GridLayout.Item, { smSpan: 12, mdSpan: 6 },
React.createElement(Card, { header: "Baz" },
React.createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis porro debitis possimus voluptate doloribus odit neque quae quam? Fugit, cumque.")))));
},
};
/** Three column layout which wraps to two columns at `md` viewport, and one column at `sm` viewport. */
export const ThreeColumns = {
render(props) {
return (React.createElement(GridLayout, Object.assign({}, props),
React.createElement(GridLayout.Item, { smSpan: 12, mdSpan: 6, lgSpan: 4 },
React.createElement(Card, { header: "Foo" },
React.createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis porro debitis possimus voluptate doloribus odit neque quae quam? Fugit, cumque."))),
React.createElement(GridLayout.Item, { smSpan: 12, mdSpan: 6, lgSpan: 4 },
React.createElement(Card, { header: "Bar" },
React.createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis porro debitis possimus voluptate doloribus odit neque quae quam? Fugit, cumque."))),
React.createElement(GridLayout.Item, { smSpan: 12, mdSpan: 6, lgSpan: 4 },
React.createElement(Card, { header: "Baz" },
React.createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis porro debitis possimus voluptate doloribus odit neque quae quam? Fugit, cumque.")))));
},
};
/** Adjust starting column with `start` prop to create an offset between columns. */
export const StartColumn = {
render(props) {
return (React.createElement(GridLayout, Object.assign({}, props),
React.createElement(GridLayout.Item, { style: { background: 'pink' }, mdSpan: 4 },
React.createElement("p", { style: { padding: 8 } }, "mdSpan=4")),
React.createElement(GridLayout.Item, { style: { background: 'aliceblue' }, mdSpan: 4, mdStart: 6 },
React.createElement("p", { style: { padding: 8 } }, "mdSpan=4, mdStart=6")),
React.createElement(GridLayout.Item, { style: { background: 'lavenderblush' }, mdSpan: 2, mdStart: 11 },
React.createElement("p", { style: { padding: 8 } }, "mdSpan=2, mdStart=11"))));
},
};
//# sourceMappingURL=GridLayout.stories.js.map