lucid-ui/dist/cjs/components/Selection/Selection.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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Interactive = exports.Nested = exports.Kinds = void 0;
var lodash_1 = require("lodash");
var react_1 = __importStar(require("react"));
var Selection_1 = __importDefault(require("./Selection"));
var Resizer_1 = __importDefault(require("../Resizer/Resizer"));
exports.default = {
    title: 'Communication/Selection',
    component: Selection_1.default,
    parameters: {
        docs: {
            description: {
                component: Selection_1.default.peek.description,
            },
        },
    },
};
/* Kinds */
var Kinds = function (args) {
    return (react_1.default.createElement(Resizer_1.default, null, function (width) {
        var responsiveMode = width >= 400 ? 'large' : 'small';
        return (react_1.default.createElement("div", null,
            react_1.default.createElement("div", { style: { margin: '10px' } },
                react_1.default.createElement(Selection_1.default, __assign({}, args, { isRemovable: false, responsiveMode: responsiveMode, kind: 'container', Label: 'Container Light Not Removable' }))),
            react_1.default.createElement("div", { style: { margin: '10px' } },
                react_1.default.createElement(Selection_1.default, __assign({}, args, { responsiveMode: responsiveMode, kind: 'container', Label: 'Container Light' }))),
            react_1.default.createElement("div", { style: { margin: '10px' } },
                react_1.default.createElement(Selection_1.default, __assign({}, args, { isFilled: true, isRemovable: false, responsiveMode: responsiveMode, kind: 'container', Label: 'Container Filled Not Removable' }))),
            react_1.default.createElement("div", { style: { margin: '10px' } },
                react_1.default.createElement(Selection_1.default, __assign({}, args, { isFilled: true, responsiveMode: responsiveMode, kind: 'container', Label: 'Container Filled' }))),
            react_1.default.createElement("div", { style: { margin: '10px' } },
                react_1.default.createElement(Selection_1.default, __assign({}, args, { responsiveMode: responsiveMode, Label: 'Default' }))),
            react_1.default.createElement("div", { style: { margin: '10px' } },
                react_1.default.createElement(Selection_1.default, __assign({}, args, { responsiveMode: responsiveMode, kind: 'success', Label: 'Success' }))),
            react_1.default.createElement("div", { style: { margin: '10px' } },
                react_1.default.createElement(Selection_1.default, __assign({}, args, { responsiveMode: responsiveMode, kind: 'danger', Label: 'Danger' }))),
            react_1.default.createElement("div", { style: { margin: '10px' } },
                react_1.default.createElement(Selection_1.default, __assign({}, args, { responsiveMode: responsiveMode, kind: 'info', Label: 'Info' }))),
            react_1.default.createElement("div", { style: { margin: '10px' } },
                react_1.default.createElement(Selection_1.default, __assign({}, args, { responsiveMode: responsiveMode, kind: 'warning', Label: 'Warning' })))));
    }));
};
exports.Kinds = Kinds;
/* Nested */
var Nested = function (args) {
    return (react_1.default.createElement(Resizer_1.default, null, function (width) {
        var responsiveMode = width >= 400 ? 'large' : 'small';
        return (react_1.default.createElement("div", null,
            react_1.default.createElement(Selection_1.default, __assign({}, args, { isTop: true, responsiveMode: responsiveMode, Label: 'Arts and Entertainment' }),
                react_1.default.createElement(Selection_1.default, __assign({}, args, { responsiveMode: responsiveMode, Label: 'Item 1' })),
                react_1.default.createElement(Selection_1.default, __assign({}, args, { responsiveMode: responsiveMode, Label: 'Item 2' })),
                react_1.default.createElement(Selection_1.default, __assign({}, args, { responsiveMode: responsiveMode, Label: 'Item 3' }),
                    react_1.default.createElement(Selection_1.default, __assign({}, args, { responsiveMode: responsiveMode, Label: 'Item 1' })),
                    react_1.default.createElement(Selection_1.default, __assign({}, args, { responsiveMode: responsiveMode, Label: 'Item 2' })),
                    react_1.default.createElement(Selection_1.default, __assign({}, args, { responsiveMode: responsiveMode, Label: 'Item 3' }))),
                react_1.default.createElement(Selection_1.default, __assign({}, args, { responsiveMode: responsiveMode, Label: 'Item 4' }),
                    react_1.default.createElement(Selection_1.default, __assign({}, args, { responsiveMode: responsiveMode, Label: 'Item 1' })),
                    react_1.default.createElement(Selection_1.default, __assign({}, args, { responsiveMode: responsiveMode, Label: 'Item 2' })),
                    react_1.default.createElement(Selection_1.default, __assign({}, args, { responsiveMode: responsiveMode, Label: 'Item 3' })),
                    react_1.default.createElement(Selection_1.default, __assign({}, args, { responsiveMode: responsiveMode, Label: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' })))),
            react_1.default.createElement(Selection_1.default, __assign({}, args, { isTop: true, responsiveMode: responsiveMode, kind: 'info', Label: 'Arts and Entertainment' }),
                react_1.default.createElement(Selection_1.default, __assign({}, args, { responsiveMode: responsiveMode, kind: 'info', Label: 'Item 1' })),
                react_1.default.createElement(Selection_1.default, __assign({}, args, { responsiveMode: responsiveMode, kind: 'info', Label: 'Item 2' })),
                react_1.default.createElement(Selection_1.default, __assign({}, args, { responsiveMode: responsiveMode, kind: 'info', Label: 'Item 3' }),
                    react_1.default.createElement(Selection_1.default, __assign({}, args, { responsiveMode: responsiveMode, kind: 'info', Label: 'Item 1' })),
                    react_1.default.createElement(Selection_1.default, __assign({}, args, { responsiveMode: responsiveMode, kind: 'info', Label: 'Item 2' })),
                    react_1.default.createElement(Selection_1.default, __assign({}, args, { responsiveMode: responsiveMode, kind: 'info', Label: 'Item 3' }))),
                react_1.default.createElement(Selection_1.default, __assign({}, args, { responsiveMode: responsiveMode, kind: 'warning', Label: 'Item 4' }),
                    react_1.default.createElement(Selection_1.default, __assign({}, args, { responsiveMode: responsiveMode, kind: 'warning', Label: 'Item 1' })),
                    react_1.default.createElement(Selection_1.default, __assign({}, args, { responsiveMode: responsiveMode, kind: 'warning', Label: 'Item 2' })),
                    react_1.default.createElement(Selection_1.default, __assign({}, args, { responsiveMode: responsiveMode, kind: 'warning', Label: 'Item 3' })),
                    react_1.default.createElement(Selection_1.default, __assign({}, args, { responsiveMode: responsiveMode, kind: 'warning', Label: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' })))),
            react_1.default.createElement(Selection_1.default, __assign({}, args, { isTop: true, responsiveMode: responsiveMode, kind: 'success', hasBackground: true, isBold: true, Label: 'Leisure' }),
                react_1.default.createElement(Selection_1.default, __assign({}, args, { responsiveMode: responsiveMode, kind: 'danger', Label: 'Item 1' })),
                react_1.default.createElement(Selection_1.default, __assign({}, args, { responsiveMode: responsiveMode, kind: 'danger', Label: 'Item 2' })),
                react_1.default.createElement(Selection_1.default, __assign({}, args, { responsiveMode: responsiveMode, kind: 'danger', Label: 'Item 3' }))),
            react_1.default.createElement(Selection_1.default, __assign({}, args, { isTop: true, responsiveMode: responsiveMode, kind: 'danger', hasBackground: true, isBold: true, Label: 'Arts and Entertainment' }),
                react_1.default.createElement(Selection_1.default, __assign({}, args, { responsiveMode: responsiveMode, kind: 'success', Label: 'Item 1' })),
                react_1.default.createElement(Selection_1.default, __assign({}, args, { responsiveMode: responsiveMode, kind: 'success', Label: 'Item 2' })),
                react_1.default.createElement(Selection_1.default, __assign({}, args, { responsiveMode: responsiveMode, kind: 'success', Label: 'Item 3' })))));
    }));
};
exports.Nested = Nested;
/* Interactive */
var Interactive = function (args) {
    var groups = [
        ['Last Man on Earth', ['Phil']],
        ['Last Woman on Earth', ['Carol']],
        [
            'Star Wars',
            [
                'Ask Aak',
                'Admiral Gial Ackbar',
                'Acros-Krik',
                'Ak-Rev',
                'Stass Allie',
                'Almec',
                'Mas Amedda',
            ],
        ],
        [
            'Lord of the Rings',
            ['Adrahil', 'Adrahil II', 'Araglas', 'Aragorn I', 'Aragorn II Elessar'],
        ],
        [
            'Star Trek',
            [
                'Jonathan Archer',
                'Ayala',
                'Azan',
                'Bareil Antos',
                'Julian Bashir',
                'Season 6 (TNG)',
                'Lieutenant, JG (S1-3)',
            ],
        ],
    ];
    var _a = (0, react_1.useState)({}), removedItems = _a[0], setRemovedItems = _a[1];
    var handleRemove = function (_a) {
        var props = _a.props;
        var callbackId = props.callbackId;
        setRemovedItems(__assign({}, (0, lodash_1.set)(removedItems, callbackId, true)));
    };
    return (react_1.default.createElement(Resizer_1.default, null, function (width) {
        var responsiveMode = width >= 400 ? 'large' : 'small';
        return (react_1.default.createElement("div", null, (0, lodash_1.map)(groups, function (_a, groupIndex) {
            var group = _a[0], names = _a[1];
            var groupCallbackId = "".concat(groupIndex);
            if ((0, lodash_1.get)(removedItems, groupCallbackId) === true) {
                return null;
            }
            return (react_1.default.createElement(Selection_1.default, __assign({}, args, { key: groupCallbackId, responsiveMode: responsiveMode, isRemovable: true, isBold: true, hasBackground: true, kind: 'container', onRemove: handleRemove, callbackId: groupCallbackId, Label: group }), (0, lodash_1.map)(names, function (name, nameIndex) {
                var nameCallbackId = "".concat(groupIndex, ".").concat(nameIndex);
                if ((0, lodash_1.get)(removedItems, nameCallbackId) === true) {
                    return null;
                }
                return (react_1.default.createElement(Selection_1.default, __assign({}, args, { key: nameCallbackId, responsiveMode: responsiveMode, isRemovable: true, onRemove: handleRemove, callbackId: nameCallbackId, Label: name })));
            })));
        })));
    }));
};
exports.Interactive = Interactive;
//# sourceMappingURL=Selection.stories.js.map