lucid-ui/dist/cjs/components/Grid/Grid.stories.js

A UI component library from Xandr.

"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.VerticalMultilineGrid = exports.OffsetCells = exports.HorizontalMultilineGrid = exports.GutterlessGrid = exports.GridColumns = void 0;
var react_1 = __importDefault(require("react"));
var Grid_1 = __importDefault(require("./Grid"));
exports.default = {
    title: 'Layout/Grid',
    component: Grid_1.default,
    parameters: {
        docs: {
            description: {
                component: Grid_1.default.peek.description,
            },
        },
    },
};
/* Grid Columns */
var GridColumns = function (args) {
    var 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' },
    };
    var fillCells = function (count) {
        var cells = [];
        for (var i = 0; i < count; i++) {
            cells.push(react_1.default.createElement(Grid_1.default.Cell, { key: i },
                react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.auto), gridStyle.sharedStyles) }, "auto")));
        }
        return cells;
    };
    return (react_1.default.createElement("div", null,
        react_1.default.createElement(Grid_1.default, null,
            react_1.default.createElement(Grid_1.default.Cell, { isFull: true },
                react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.full), gridStyle.sharedStyles) }, "full"))),
        react_1.default.createElement(Grid_1.default, null,
            react_1.default.createElement(Grid_1.default.Cell, { is2: true },
                react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.flexdefault), gridStyle.sharedStyles) }, "2")),
            fillCells(12 - 2)),
        react_1.default.createElement(Grid_1.default, null,
            react_1.default.createElement(Grid_1.default.Cell, { is3: true },
                react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.flexdefault), gridStyle.sharedStyles) }, "3")),
            fillCells(12 - 3)),
        react_1.default.createElement(Grid_1.default, null,
            react_1.default.createElement(Grid_1.default.Cell, { is4: true },
                react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.flexdefault), gridStyle.sharedStyles) }, "4")),
            fillCells(12 - 4)),
        react_1.default.createElement(Grid_1.default, null,
            react_1.default.createElement(Grid_1.default.Cell, { is5: true },
                react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.flexdefault), gridStyle.sharedStyles) }, "5")),
            fillCells(12 - 5)),
        react_1.default.createElement(Grid_1.default, null,
            react_1.default.createElement(Grid_1.default.Cell, { is6: true },
                react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.flexdefault), gridStyle.sharedStyles) }, "6")),
            fillCells(12 - 6)),
        react_1.default.createElement(Grid_1.default, null,
            react_1.default.createElement(Grid_1.default.Cell, { is7: true },
                react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.flexdefault), gridStyle.sharedStyles) }, "7")),
            fillCells(12 - 7)),
        react_1.default.createElement(Grid_1.default, null,
            react_1.default.createElement(Grid_1.default.Cell, { is8: true },
                react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.flexdefault), gridStyle.sharedStyles) }, "8")),
            fillCells(12 - 8)),
        react_1.default.createElement(Grid_1.default, null,
            react_1.default.createElement(Grid_1.default.Cell, { is9: true },
                react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.flexdefault), gridStyle.sharedStyles) }, "9")),
            fillCells(12 - 9)),
        react_1.default.createElement(Grid_1.default, null,
            react_1.default.createElement(Grid_1.default.Cell, { is10: true },
                react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.flexdefault), gridStyle.sharedStyles) }, "10")),
            fillCells(12 - 10)),
        react_1.default.createElement(Grid_1.default, null,
            react_1.default.createElement(Grid_1.default.Cell, { is11: true },
                react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.flexdefault), gridStyle.sharedStyles) }, "11")),
            fillCells(12 - 11))));
};
exports.GridColumns = GridColumns;
/* Gutterless Grid */
var GutterlessGrid = function (args) {
    var 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' },
    };
    var fillCells = function (count) {
        var cells = [];
        for (var i = 0; i < count; i++) {
            cells.push(react_1.default.createElement(Grid_1.default.Cell, { key: i },
                react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.auto), gridStyle.sharedStyles) }, "auto")));
        }
        return cells;
    };
    return (react_1.default.createElement(Grid_1.default, { isGutterless: true, isMultiline: true },
        react_1.default.createElement(Grid_1.default.Cell, { isHalf: true },
            react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.half), gridStyle.sharedStyles) }, "gutterless half")),
        react_1.default.createElement(Grid_1.default.Cell, { style: __assign(__assign({}, gridStyle.quarter), gridStyle.sharedStyles), isQuarter: true }, "gutterless quarter"),
        fillCells(1),
        react_1.default.createElement(Grid_1.default.Cell, { isQuarter: true },
            react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.quarter), gridStyle.sharedStyles) }, "gutterless quarter")),
        react_1.default.createElement(Grid_1.default.Cell, { isQuarter: true },
            react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.quarter), gridStyle.sharedStyles) }, "gutterless quarter")),
        react_1.default.createElement(Grid_1.default.Cell, { isHalf: true },
            react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.half), gridStyle.sharedStyles) }, "gutterless half"))));
};
exports.GutterlessGrid = GutterlessGrid;
/* Horizontal Multiline Grid */
var HorizontalMultilineGrid = function (args) {
    var 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_1.default.createElement(Grid_1.default, { isHorizontal: true, isMultiline: true },
        react_1.default.createElement(Grid_1.default.Cell, { isHalf: true },
            react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.half), gridStyle.sharedStyles) }, "half")),
        react_1.default.createElement(Grid_1.default.Cell, { isHalf: true },
            react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.half), gridStyle.sharedStyles) }, "half")),
        react_1.default.createElement(Grid_1.default.Cell, { isHalf: true },
            react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.half), gridStyle.sharedStyles) }, "half")),
        react_1.default.createElement(Grid_1.default.Cell, { isFull: true },
            react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.full), gridStyle.sharedStyles) }, "full")),
        react_1.default.createElement(Grid_1.default.Cell, { isThird: true },
            react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.third), gridStyle.sharedStyles) }, "third")),
        react_1.default.createElement(Grid_1.default.Cell, { isThird: true },
            react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.third), gridStyle.sharedStyles) }, "third")),
        react_1.default.createElement(Grid_1.default.Cell, { isThird: true },
            react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.third), gridStyle.sharedStyles) }, "third")),
        react_1.default.createElement(Grid_1.default.Cell, { isThird: true },
            react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.third), gridStyle.sharedStyles) }, "third")),
        react_1.default.createElement(Grid_1.default.Cell, { isQuarter: true },
            react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.quarter), gridStyle.sharedStyles) }, "quarter")),
        react_1.default.createElement(Grid_1.default.Cell, { isQuarter: true },
            react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.quarter), gridStyle.sharedStyles) }, "quarter")),
        react_1.default.createElement(Grid_1.default.Cell, { isQuarter: true },
            react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.quarter), gridStyle.sharedStyles) }, "quarter"))));
};
exports.HorizontalMultilineGrid = HorizontalMultilineGrid;
/* Offset Cells */
var OffsetCells = function (args) {
    var 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_1.default.createElement("div", null,
        react_1.default.createElement(Grid_1.default, null,
            react_1.default.createElement(Grid_1.default.Cell, { isHalf: true, isOffsetHalf: true },
                react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.half), gridStyle.sharedStyles) }, "half with offset half"))),
        react_1.default.createElement(Grid_1.default, null,
            react_1.default.createElement(Grid_1.default.Cell, { isQuarter: true, isOffsetQuarter: true },
                react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.quarter), gridStyle.sharedStyles) }, "quarter with offset quarter"))),
        react_1.default.createElement(Grid_1.default, null,
            react_1.default.createElement(Grid_1.default.Cell, { isThird: true, isOffsetThird: true },
                react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.third), gridStyle.sharedStyles) }, "third with offset third")))));
};
exports.OffsetCells = OffsetCells;
/* Vertical Multiline Grid */
var VerticalMultilineGrid = function (args) {
    var 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_1.default.createElement(Grid_1.default, { style: __assign({}, gridStyle.vertical), isVertical: true, isMultiline: true },
        react_1.default.createElement(Grid_1.default.Cell, { isHalf: true },
            react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.half), gridStyle.verticalSharedStyles) }, "half")),
        react_1.default.createElement(Grid_1.default.Cell, { isHalf: true },
            react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.half), gridStyle.verticalSharedStyles) }, "half")),
        react_1.default.createElement(Grid_1.default.Cell, { isHalf: true },
            react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.half), gridStyle.verticalSharedStyles) }, "half")),
        react_1.default.createElement(Grid_1.default.Cell, { isFull: true },
            react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.full), gridStyle.verticalSharedStyles) }, "full")),
        react_1.default.createElement(Grid_1.default.Cell, { isThird: true },
            react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.third), gridStyle.verticalSharedStyles) }, "third")),
        react_1.default.createElement(Grid_1.default.Cell, { isThird: true },
            react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.third), gridStyle.verticalSharedStyles) }, "third")),
        react_1.default.createElement(Grid_1.default.Cell, { isThird: true },
            react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.third), gridStyle.verticalSharedStyles) }, "third")),
        react_1.default.createElement(Grid_1.default.Cell, { isThird: true },
            react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.third), gridStyle.verticalSharedStyles) }, "third")),
        react_1.default.createElement(Grid_1.default.Cell, { isQuarter: true },
            react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.quarter), gridStyle.verticalSharedStyles) }, "quarter")),
        react_1.default.createElement(Grid_1.default.Cell, { isQuarter: true },
            react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.quarter), gridStyle.verticalSharedStyles) }, "quarter")),
        react_1.default.createElement(Grid_1.default.Cell, { isQuarter: true },
            react_1.default.createElement("p", { style: __assign(__assign({}, gridStyle.quarter), gridStyle.verticalSharedStyles) }, "quarter"))));
};
exports.VerticalMultilineGrid = VerticalMultilineGrid;
//# sourceMappingURL=Grid.stories.js.map