lucid-ui
Version:
A UI component library from Xandr.
242 lines • 12.6 kB
JavaScript
import React from 'react';
import Grid from './Grid';
export default {
title: 'Layout/Grid',
component: Grid,
parameters: {
docs: {
description: {
component: Grid.peek.description,
},
},
},
};
/* Grid Columns */
export const GridColumns = (args) => {
const gridStyle = {
half: { background: '#0089c4' },
quarter: { background: '#f7403a' },
third: { background: '#3fa516', color: '#f3f3f3' },
full: { background: '#333333', color: '#f3f3f3' },
auto: { background: '#999999', color: '#f3f3f3' },
flexdefault: { background: '#feb209' },
sharedStyles: {
margin: 0,
padding: 0,
color: '#f3f3f3',
},
vertical: { height: '100px' },
};
const fillCells = (count) => {
const cells = [];
for (let i = 0; i < count; i++) {
cells.push(React.createElement(Grid.Cell, { key: i },
React.createElement("p", { style: { ...gridStyle.auto, ...gridStyle.sharedStyles } }, "auto")));
}
return cells;
};
return (React.createElement("div", null,
React.createElement(Grid, null,
React.createElement(Grid.Cell, { isFull: true },
React.createElement("p", { style: { ...gridStyle.full, ...gridStyle.sharedStyles } }, "full"))),
React.createElement(Grid, null,
React.createElement(Grid.Cell, { is2: true },
React.createElement("p", { style: { ...gridStyle.flexdefault, ...gridStyle.sharedStyles } }, "2")),
fillCells(12 - 2)),
React.createElement(Grid, null,
React.createElement(Grid.Cell, { is3: true },
React.createElement("p", { style: { ...gridStyle.flexdefault, ...gridStyle.sharedStyles } }, "3")),
fillCells(12 - 3)),
React.createElement(Grid, null,
React.createElement(Grid.Cell, { is4: true },
React.createElement("p", { style: { ...gridStyle.flexdefault, ...gridStyle.sharedStyles } }, "4")),
fillCells(12 - 4)),
React.createElement(Grid, null,
React.createElement(Grid.Cell, { is5: true },
React.createElement("p", { style: { ...gridStyle.flexdefault, ...gridStyle.sharedStyles } }, "5")),
fillCells(12 - 5)),
React.createElement(Grid, null,
React.createElement(Grid.Cell, { is6: true },
React.createElement("p", { style: { ...gridStyle.flexdefault, ...gridStyle.sharedStyles } }, "6")),
fillCells(12 - 6)),
React.createElement(Grid, null,
React.createElement(Grid.Cell, { is7: true },
React.createElement("p", { style: { ...gridStyle.flexdefault, ...gridStyle.sharedStyles } }, "7")),
fillCells(12 - 7)),
React.createElement(Grid, null,
React.createElement(Grid.Cell, { is8: true },
React.createElement("p", { style: { ...gridStyle.flexdefault, ...gridStyle.sharedStyles } }, "8")),
fillCells(12 - 8)),
React.createElement(Grid, null,
React.createElement(Grid.Cell, { is9: true },
React.createElement("p", { style: { ...gridStyle.flexdefault, ...gridStyle.sharedStyles } }, "9")),
fillCells(12 - 9)),
React.createElement(Grid, null,
React.createElement(Grid.Cell, { is10: true },
React.createElement("p", { style: { ...gridStyle.flexdefault, ...gridStyle.sharedStyles } }, "10")),
fillCells(12 - 10)),
React.createElement(Grid, null,
React.createElement(Grid.Cell, { is11: true },
React.createElement("p", { style: { ...gridStyle.flexdefault, ...gridStyle.sharedStyles } }, "11")),
fillCells(12 - 11))));
};
/* Gutterless Grid */
export const GutterlessGrid = (args) => {
const gridStyle = {
half: { background: '#0089c4' },
quarter: { background: '#f7403a' },
third: { background: '#3fa516', color: '#f3f3f3' },
full: { background: '#333333', color: '#f3f3f3' },
auto: { background: '#999999', color: '#f3f3f3' },
flexdefault: { background: '#feb209' },
sharedStyles: {
margin: 0,
padding: 0,
color: '#f3f3f3',
},
vertical: { height: '100px' },
};
const fillCells = (count) => {
const cells = [];
for (let i = 0; i < count; i++) {
cells.push(React.createElement(Grid.Cell, { key: i },
React.createElement("p", { style: { ...gridStyle.auto, ...gridStyle.sharedStyles } }, "auto")));
}
return cells;
};
return (React.createElement(Grid, { isGutterless: true, isMultiline: true },
React.createElement(Grid.Cell, { isHalf: true },
React.createElement("p", { style: { ...gridStyle.half, ...gridStyle.sharedStyles } }, "gutterless half")),
React.createElement(Grid.Cell, { style: { ...gridStyle.quarter, ...gridStyle.sharedStyles }, isQuarter: true }, "gutterless quarter"),
fillCells(1),
React.createElement(Grid.Cell, { isQuarter: true },
React.createElement("p", { style: { ...gridStyle.quarter, ...gridStyle.sharedStyles } }, "gutterless quarter")),
React.createElement(Grid.Cell, { isQuarter: true },
React.createElement("p", { style: { ...gridStyle.quarter, ...gridStyle.sharedStyles } }, "gutterless quarter")),
React.createElement(Grid.Cell, { isHalf: true },
React.createElement("p", { style: { ...gridStyle.half, ...gridStyle.sharedStyles } }, "gutterless half"))));
};
/* Horizontal Multiline Grid */
export const HorizontalMultilineGrid = (args) => {
const gridStyle = {
half: { background: '#0089c4' },
quarter: { background: '#f7403a' },
third: { background: '#3fa516', color: '#f3f3f3' },
full: { background: '#333333', color: '#f3f3f3' },
auto: { background: '#999999', color: '#f3f3f3' },
flexdefault: { background: '#feb209' },
sharedStyles: {
margin: 0,
padding: 0,
color: '#f3f3f3',
},
vertical: { height: '100px' },
};
return (React.createElement(Grid, { isHorizontal: true, isMultiline: true },
React.createElement(Grid.Cell, { isHalf: true },
React.createElement("p", { style: { ...gridStyle.half, ...gridStyle.sharedStyles } }, "half")),
React.createElement(Grid.Cell, { isHalf: true },
React.createElement("p", { style: { ...gridStyle.half, ...gridStyle.sharedStyles } }, "half")),
React.createElement(Grid.Cell, { isHalf: true },
React.createElement("p", { style: { ...gridStyle.half, ...gridStyle.sharedStyles } }, "half")),
React.createElement(Grid.Cell, { isFull: true },
React.createElement("p", { style: { ...gridStyle.full, ...gridStyle.sharedStyles } }, "full")),
React.createElement(Grid.Cell, { isThird: true },
React.createElement("p", { style: { ...gridStyle.third, ...gridStyle.sharedStyles } }, "third")),
React.createElement(Grid.Cell, { isThird: true },
React.createElement("p", { style: { ...gridStyle.third, ...gridStyle.sharedStyles } }, "third")),
React.createElement(Grid.Cell, { isThird: true },
React.createElement("p", { style: { ...gridStyle.third, ...gridStyle.sharedStyles } }, "third")),
React.createElement(Grid.Cell, { isThird: true },
React.createElement("p", { style: { ...gridStyle.third, ...gridStyle.sharedStyles } }, "third")),
React.createElement(Grid.Cell, { isQuarter: true },
React.createElement("p", { style: { ...gridStyle.quarter, ...gridStyle.sharedStyles } }, "quarter")),
React.createElement(Grid.Cell, { isQuarter: true },
React.createElement("p", { style: { ...gridStyle.quarter, ...gridStyle.sharedStyles } }, "quarter")),
React.createElement(Grid.Cell, { isQuarter: true },
React.createElement("p", { style: { ...gridStyle.quarter, ...gridStyle.sharedStyles } }, "quarter"))));
};
/* Offset Cells */
export const OffsetCells = (args) => {
const gridStyle = {
half: { background: '#0089c4' },
quarter: { background: '#f7403a' },
third: { background: '#3fa516', color: '#f3f3f3' },
full: { background: '#333333', color: '#f3f3f3' },
auto: { background: '#999999', color: '#f3f3f3' },
flexdefault: { background: '#feb209' },
sharedStyles: {
margin: 0,
padding: 0,
color: '#f3f3f3',
textAlign: 'center',
},
vertical: { height: '100px' },
};
return (React.createElement("div", null,
React.createElement(Grid, null,
React.createElement(Grid.Cell, { isHalf: true, isOffsetHalf: true },
React.createElement("p", { style: { ...gridStyle.half, ...gridStyle.sharedStyles } }, "half with offset half"))),
React.createElement(Grid, null,
React.createElement(Grid.Cell, { isQuarter: true, isOffsetQuarter: true },
React.createElement("p", { style: { ...gridStyle.quarter, ...gridStyle.sharedStyles } }, "quarter with offset quarter"))),
React.createElement(Grid, null,
React.createElement(Grid.Cell, { isThird: true, isOffsetThird: true },
React.createElement("p", { style: { ...gridStyle.third, ...gridStyle.sharedStyles } }, "third with offset third")))));
};
/* Vertical Multiline Grid */
export const VerticalMultilineGrid = (args) => {
const gridStyle = {
half: { background: '#0089c4' },
quarter: { background: '#f7403a' },
third: { background: '#3fa516', color: '#f3f3f3' },
full: { background: '#333333', color: '#f3f3f3' },
auto: { background: '#999999', color: '#f3f3f3' },
flexdefault: { background: '#feb209' },
sharedStyles: {
margin: 0,
padding: 0,
color: '#f3f3f3',
},
vertical: { height: '200px' },
verticalSharedStyles: {
margin: 0,
padding: 0,
color: '#f3f3f3',
flex: 1,
},
};
return (React.createElement(Grid, { style: { ...gridStyle.vertical }, isVertical: true, isMultiline: true },
React.createElement(Grid.Cell, { isHalf: true },
React.createElement("p", { style: { ...gridStyle.half, ...gridStyle.verticalSharedStyles } }, "half")),
React.createElement(Grid.Cell, { isHalf: true },
React.createElement("p", { style: { ...gridStyle.half, ...gridStyle.verticalSharedStyles } }, "half")),
React.createElement(Grid.Cell, { isHalf: true },
React.createElement("p", { style: { ...gridStyle.half, ...gridStyle.verticalSharedStyles } }, "half")),
React.createElement(Grid.Cell, { isFull: true },
React.createElement("p", { style: { ...gridStyle.full, ...gridStyle.verticalSharedStyles } }, "full")),
React.createElement(Grid.Cell, { isThird: true },
React.createElement("p", { style: { ...gridStyle.third, ...gridStyle.verticalSharedStyles } }, "third")),
React.createElement(Grid.Cell, { isThird: true },
React.createElement("p", { style: { ...gridStyle.third, ...gridStyle.verticalSharedStyles } }, "third")),
React.createElement(Grid.Cell, { isThird: true },
React.createElement("p", { style: { ...gridStyle.third, ...gridStyle.verticalSharedStyles } }, "third")),
React.createElement(Grid.Cell, { isThird: true },
React.createElement("p", { style: { ...gridStyle.third, ...gridStyle.verticalSharedStyles } }, "third")),
React.createElement(Grid.Cell, { isQuarter: true },
React.createElement("p", { style: {
...gridStyle.quarter,
...gridStyle.verticalSharedStyles,
} }, "quarter")),
React.createElement(Grid.Cell, { isQuarter: true },
React.createElement("p", { style: {
...gridStyle.quarter,
...gridStyle.verticalSharedStyles,
} }, "quarter")),
React.createElement(Grid.Cell, { isQuarter: true },
React.createElement("p", { style: {
...gridStyle.quarter,
...gridStyle.verticalSharedStyles,
} }, "quarter"))));
};
//# sourceMappingURL=Grid.stories.js.map