lucid-ui/dist/cjs/components/Tag/Tag.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.Colors = exports.Interactive = exports.DoubleNested = exports.Nested = exports.Basic = void 0;
var react_1 = __importStar(require("react"));
var lodash_1 = __importDefault(require("lodash"));
var Tag_1 = __importDefault(require("../Tag/Tag"));
exports.default = {
    title: 'Communication/Tag',
    component: Tag_1.default,
    args: Tag_1.default.defaultProps,
    parameters: {
        docs: {
            description: {
                component: Tag_1.default.peek.description,
            },
        },
    },
};
var Basic = function (args) {
    return (react_1.default.createElement("div", null,
        react_1.default.createElement("div", null,
            react_1.default.createElement(Tag_1.default, __assign({}, args), "Amet"),
            react_1.default.createElement(Tag_1.default, __assign({}, args), "nam"),
            react_1.default.createElement(Tag_1.default, __assign({}, args), "quibusdam"),
            react_1.default.createElement(Tag_1.default, __assign({}, args, { isRemovable: true }), "nobis"),
            react_1.default.createElement(Tag_1.default, __assign({}, args, { isRemovable: true }), "autem"),
            react_1.default.createElement(Tag_1.default, __assign({}, args, { isRemovable: true }), "sapiente")),
        react_1.default.createElement("div", null,
            react_1.default.createElement(Tag_1.default, __assign({}, args),
                "Fruits",
                react_1.default.createElement(Tag_1.default, __assign({}, args), "Apples"),
                react_1.default.createElement(Tag_1.default, __assign({}, args), "Oranges"),
                react_1.default.createElement(Tag_1.default, __assign({}, args), "Bananas")),
            react_1.default.createElement(Tag_1.default, __assign({}, args, { isRemovable: true }),
                "Vegetables",
                react_1.default.createElement(Tag_1.default, __assign({}, args, { isRemovable: true }), "Carrots"),
                react_1.default.createElement(Tag_1.default, __assign({}, args, { isRemovable: true }), "Spinach"),
                react_1.default.createElement(Tag_1.default, __assign({}, args, { isRemovable: true }), "Celery")))));
};
exports.Basic = Basic;
var Nested = function (args) {
    var words = [
        'Fashion',
        'The',
        'Vexillologist',
        'Cold Brew',
        'This is a longer sentence that should be handled okay',
    ];
    return (react_1.default.createElement("div", null,
        react_1.default.createElement(Tag_1.default, __assign({}, args),
            "Grouped items",
            lodash_1.default.times(8, function (n) { return (react_1.default.createElement(Tag_1.default, { key: n }, words[n % words.length])); })),
        react_1.default.createElement(Tag_1.default, __assign({}, args, { isRemovable: true }),
            "Grouped items",
            lodash_1.default.times(10, function (n) { return (react_1.default.createElement(Tag_1.default, __assign({}, args, { isRemovable: true, key: n }), words[n % words.length])); }))));
};
exports.Nested = Nested;
exports.Nested.parameters = {
    docs: {
        description: {
            story: "Use a parent `tag` to group child `tags` into categories. This example also shows you how to dynamically generate a list of `tags`.",
        },
    },
};
var DoubleNested = function (args) {
    var words = [
        'Fashion',
        'The',
        'Vexillologist',
        'Cold Brew',
        'This is a longer sentence that should be handled okay but what if it is even longer than you could ever think imaginable',
    ];
    return (react_1.default.createElement("div", null,
        react_1.default.createElement(Tag_1.default, __assign({}, args, { isTop: true }),
            "Global:",
            react_1.default.createElement(Tag_1.default, __assign({}, args),
                "Group 1",
                lodash_1.default.times(4, function (n) { return (react_1.default.createElement(Tag_1.default, __assign({}, args, { key: n }), words[n % words.length])); })),
            react_1.default.createElement(Tag_1.default, __assign({}, args),
                "Group 2",
                lodash_1.default.times(4, function (n) { return (react_1.default.createElement(Tag_1.default, __assign({}, args, { key: n }), words[n % words.length])); }))),
        react_1.default.createElement(Tag_1.default, __assign({}, args, { isTop: true }),
            "In-Progess:",
            react_1.default.createElement(Tag_1.default, __assign({}, args),
                "Group 1",
                lodash_1.default.times(4, function (n) { return (react_1.default.createElement(Tag_1.default, __assign({}, args, { key: n }), words[n % words.length])); })),
            react_1.default.createElement(Tag_1.default, __assign({}, args),
                "Group 2",
                lodash_1.default.times(4, function (n) { return (react_1.default.createElement(Tag_1.default, __assign({}, args, { key: n }), words[n % words.length])); })))));
};
exports.DoubleNested = DoubleNested;
exports.DoubleNested.parameters = {
    docs: {
        description: {
            story: "Double nesting allows you to add a third level of hierarchy to your `tag` categorization.",
        },
    },
};
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',
                'Amee',
                'Padmé Amidala',
                'Cassian Andor',
                'Bail Antilles',
                'Raymus Antilles',
                'Wedge Antilles',
                'Queen Apailana',
                'Commander Appo',
                'Passel Argente',
                'Faro Argyus',
                'Seti Ashgad',
                'AZI-3',
            ],
        ],
        [
            'Lord of the Rings',
            [
                'Adrahil',
                'Adrahil II',
                'Aegnor',
                'Aerandir',
                'Aghan',
                'Aglahad',
                'Ailinel',
                'Alatar',
                'Aldamir',
                'Aldor',
                'Almarian',
                'Almiel',
                'Amandil',
                'Amdír',
                'Amlaith',
                'Amrod',
                'Amroth',
                'Anardil',
                'Anborn',
                'Ancalagon The Black',
                'Andróg',
                'Angbor',
                'Angelimar',
                'Angelimir',
                'Angrod',
                'Anárion',
                'Ar-Adûnakhôr',
                'Ar-Gimilzôr',
                'Ar-Pharazôn',
                'Ar-Sakalthôr',
                'Ar-Zimrathôn',
                'Arador',
                'Araglas',
                'Aragorn I',
                'Aragorn II Elessar',
            ],
        ],
        [
            'Star Trek',
            [
                'Jonathan Archer',
                'Ayala',
                'Azan',
                'Reginald Barclay',
                'Lieutenant, JG (TNG,FCT)',
                'Engineering Officer (TNG,Movies)',
                '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 callbackId = _a.props.callbackId;
        var newRemovedItems = lodash_1.default.set(removedItems, callbackId, true);
        setRemovedItems(__assign({}, newRemovedItems));
    };
    return (react_1.default.createElement("div", null, lodash_1.default.map(groups, function (_a, groupIndex) {
        var group = _a[0], names = _a[1];
        var groupCallbackId = "".concat(groupIndex);
        if (lodash_1.default.get(removedItems, groupCallbackId) === true) {
            return null;
        }
        return (react_1.default.createElement(Tag_1.default, __assign({}, args, { key: groupCallbackId, isRemovable: true, onRemove: handleRemove, callbackId: groupCallbackId }),
            group,
            lodash_1.default.map(names, function (name, nameIndex) {
                var nameCallbackId = "".concat(groupIndex, ".").concat(nameIndex);
                if (lodash_1.default.get(removedItems, nameCallbackId) === true) {
                    return null;
                }
                return (react_1.default.createElement(Tag_1.default, __assign({}, args, { key: nameCallbackId, isRemovable: true, onRemove: handleRemove, callbackId: nameCallbackId }), name));
            })));
    })));
};
exports.Interactive = Interactive;
exports.Interactive.parameters = {
    docs: {
        description: {
            story: "Use interactive `tags` to allow users to remove a selection.",
        },
    },
};
var Colors = function (args) {
    return (react_1.default.createElement("div", null,
        react_1.default.createElement(Tag_1.default, __assign({}, args),
            react_1.default.createElement(Tag_1.default, __assign({}, args, { kind: 'info' }), "notitia"),
            react_1.default.createElement(Tag_1.default, __assign({}, args, { kind: 'danger' }), "periculum"),
            react_1.default.createElement(Tag_1.default, __assign({}, args, { kind: 'default' }), "deficio")),
        react_1.default.createElement(Tag_1.default, __assign({}, args),
            react_1.default.createElement(Tag_1.default, __assign({}, args, { isRemovable: true, kind: 'info' }), "notitia"),
            react_1.default.createElement(Tag_1.default, __assign({}, args, { isRemovable: true, kind: 'danger' }), "periculum"))));
};
exports.Colors = Colors;
exports.Colors.parameters = {
    docs: {
        description: {
            story: "`Tag` is available in two additional colors: `kind='danger'` for settings that can not be saved (for example, custom dates outside of the flight range), and `kind='default'` for disabled items (for example, past flights). The `'default'` color cannot be used for the `isRemovable` `tag`.",
        },
    },
};
//# sourceMappingURL=Tag.stories.js.map