lucid-ui/dist/cjs/components/Tabs/Tabs.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.Floating = exports.WithCount = exports.ProgressionVariableWidth = exports.Progression = exports.VariableWidth = exports.FullWidth = exports.TabAsProp = exports.ComplexTitleAsChild = exports.TitleAsChild = exports.TitleAsProp = void 0;
var react_1 = __importDefault(require("react"));
var Tabs_1 = __importDefault(require("./Tabs"));
var RadioGroup_1 = __importDefault(require("../RadioGroup/RadioGroup"));
var Button_1 = __importDefault(require("../Button/Button"));
var SearchField_1 = __importDefault(require("../SearchField/SearchField"));
exports.default = {
    title: 'Navigation/Tabs',
    component: Tabs_1.default,
    parameters: {
        docs: {
            description: {
                component: Tabs_1.default.peek.description,
            },
        },
    },
};
/* Title As Prop */
var TitleAsProp = function (args) {
    return (react_1.default.createElement("div", null,
        react_1.default.createElement(Tabs_1.default, __assign({}, args),
            react_1.default.createElement(Tabs_1.default.Tab, { Title: 'One', className: 'one' }, "One content"),
            react_1.default.createElement(Tabs_1.default.Tab, { Title: 'Two', isDisabled: true }, "Two content"),
            react_1.default.createElement(Tabs_1.default.Tab, { Title: 'Three' }, "Three content"),
            react_1.default.createElement(Tabs_1.default.Tab, { Title: 'Four' }, "Four content"))));
};
exports.TitleAsProp = TitleAsProp;
/* Title As Child */
var TitleAsChild = function (args) {
    return (react_1.default.createElement("div", null,
        react_1.default.createElement(Tabs_1.default, __assign({}, args),
            react_1.default.createElement(Tabs_1.default.Tab, null,
                react_1.default.createElement(Tabs_1.default.Title, null, "One"),
                "One content"),
            react_1.default.createElement(Tabs_1.default.Tab, { isDisabled: true },
                react_1.default.createElement(Tabs_1.default.Title, null, "Two"),
                "Two content"),
            react_1.default.createElement(Tabs_1.default.Tab, null,
                react_1.default.createElement(Tabs_1.default.Title, null, "Three"),
                "Three content"),
            react_1.default.createElement(Tabs_1.default.Tab, null,
                react_1.default.createElement(Tabs_1.default.Title, null, "Four"),
                "Four content"))));
};
exports.TitleAsChild = TitleAsChild;
/* Complex Title As Child */
var ComplexTitleAsChild = function (args) {
    var titleThree = (react_1.default.createElement(RadioGroup_1.default, __assign({}, RadioGroup_1.default.defaultProps, { selectedIndex: 1 }),
        react_1.default.createElement(RadioGroup_1.default.RadioButton, __assign({}, RadioGroup_1.default.RadioButton.defaultProps),
            react_1.default.createElement(RadioGroup_1.default.Label, null, "Captain America")),
        react_1.default.createElement(RadioGroup_1.default.RadioButton, __assign({}, RadioGroup_1.default.RadioButton.defaultProps),
            react_1.default.createElement(RadioGroup_1.default.Label, null, "Iron Man")),
        react_1.default.createElement(RadioGroup_1.default.RadioButton, __assign({}, RadioGroup_1.default.RadioButton.defaultProps),
            react_1.default.createElement(RadioGroup_1.default.Label, null, "Thor"))));
    var tabStyle = {
        height: '100px',
        width: '200px',
    };
    return (react_1.default.createElement("div", null,
        react_1.default.createElement(Tabs_1.default, __assign({}, args, { hasMultilineTitle: true }),
            react_1.default.createElement(Tabs_1.default.Tab, { style: tabStyle },
                react_1.default.createElement(Tabs_1.default.Title, null,
                    "One",
                    react_1.default.createElement("br", null),
                    react_1.default.createElement(Button_1.default, __assign({}, Button_1.default.defaultProps), "Button")),
                "One content"),
            react_1.default.createElement(Tabs_1.default.Tab, { style: tabStyle },
                react_1.default.createElement(Tabs_1.default.Title, null,
                    "Two",
                    react_1.default.createElement("br", null),
                    "Line Two",
                    react_1.default.createElement(SearchField_1.default, null)),
                "Two content"),
            react_1.default.createElement(Tabs_1.default.Tab, { style: tabStyle },
                react_1.default.createElement(Tabs_1.default.Title, null, titleThree),
                "Three content"),
            react_1.default.createElement(Tabs_1.default.Tab, { isDisabled: true, style: tabStyle },
                react_1.default.createElement(Tabs_1.default.Title, null, "Four"),
                "Four content"))));
};
exports.ComplexTitleAsChild = ComplexTitleAsChild;
/* Tab As Prop */
var TabAsProp = function (args) {
    return (react_1.default.createElement("div", null,
        react_1.default.createElement(Tabs_1.default, __assign({}, args, { Tab: [
                { Title: 'Bert', children: 'Bert' },
                { Title: 'Ernie', children: 'Ernie' },
            ] }))));
};
exports.TabAsProp = TabAsProp;
/* Full Width */
var FullWidth = function (args) {
    return (react_1.default.createElement("div", null,
        react_1.default.createElement(Tabs_1.default, __assign({}, args, { hasFullWidthTabs: true }),
            react_1.default.createElement(Tabs_1.default.Tab, null,
                react_1.default.createElement(Tabs_1.default.Title, null, "One"),
                "One content"),
            react_1.default.createElement(Tabs_1.default.Tab, null,
                react_1.default.createElement(Tabs_1.default.Title, null, "Two"),
                "Two content"),
            react_1.default.createElement(Tabs_1.default.Tab, null,
                react_1.default.createElement(Tabs_1.default.Title, null, "Three"),
                "Three content"))));
};
exports.FullWidth = FullWidth;
/* Variable Width */
var VariableWidth = function (args) {
    var tabStyle = { width: '100px' };
    return (react_1.default.createElement("div", null,
        react_1.default.createElement(Tabs_1.default, __assign({}, args, { hasFullWidthTabs: false }),
            react_1.default.createElement(Tabs_1.default.Tab, { style: tabStyle },
                react_1.default.createElement(Tabs_1.default.Title, null, "One"),
                "One content"),
            react_1.default.createElement(Tabs_1.default.Tab, { style: tabStyle },
                react_1.default.createElement(Tabs_1.default.Title, null, "Two"),
                "Two content"),
            react_1.default.createElement(Tabs_1.default.Tab, { style: tabStyle },
                react_1.default.createElement(Tabs_1.default.Title, null, "Three"),
                "Three content"))));
};
exports.VariableWidth = VariableWidth;
/* Progression */
var Progression = function (args) {
    return (react_1.default.createElement("div", null,
        react_1.default.createElement(Tabs_1.default, __assign({}, args, { isOpen: false, isProgressive: true }),
            react_1.default.createElement(Tabs_1.default.Tab, { Title: 'One' }, "One content"),
            react_1.default.createElement(Tabs_1.default.Tab, { Title: 'Two' }, "Two content"),
            react_1.default.createElement(Tabs_1.default.Tab, { Title: 'Three' }, "Three content"),
            react_1.default.createElement(Tabs_1.default.Tab, { Title: 'Disabled', isDisabled: true }, "Disabled Content"),
            react_1.default.createElement(Tabs_1.default.Tab, { Title: 'Five', isDisabled: true }, "Four content"))));
};
exports.Progression = Progression;
/* Progression Variable Width */
var ProgressionVariableWidth = function (args) {
    var tabStyle = { width: '100px' };
    return (react_1.default.createElement("div", null,
        react_1.default.createElement(Tabs_1.default, __assign({}, args, { hasFullWidthTabs: false, isOpen: false, isProgressive: true }),
            react_1.default.createElement(Tabs_1.default.Tab, { style: tabStyle, Title: 'One' }, "One content"),
            react_1.default.createElement(Tabs_1.default.Tab, { style: tabStyle, Title: 'Two' }, "Two content"),
            react_1.default.createElement(Tabs_1.default.Tab, { style: tabStyle, Title: 'Three' }, "Three content"),
            react_1.default.createElement(Tabs_1.default.Tab, { style: tabStyle, Title: 'Disabled', isDisabled: true }, "Disabled Content"),
            react_1.default.createElement(Tabs_1.default.Tab, { style: tabStyle, Title: 'Five', isDisabled: true }, "Four content"))));
};
exports.ProgressionVariableWidth = ProgressionVariableWidth;
/* With Count */
var WithCount = function (args) {
    return (react_1.default.createElement("div", null,
        react_1.default.createElement("h4", null, "Static Width"),
        react_1.default.createElement(Tabs_1.default, __assign({}, args, { hasFullWidthTabs: false }),
            react_1.default.createElement(Tabs_1.default.Tab, { count: 12 },
                react_1.default.createElement(Tabs_1.default.Title, null, "One"),
                "One content"),
            react_1.default.createElement(Tabs_1.default.Tab, { count: 15 },
                react_1.default.createElement(Tabs_1.default.Title, null, "Two"),
                "Two content"),
            react_1.default.createElement(Tabs_1.default.Tab, { count: 7 },
                react_1.default.createElement(Tabs_1.default.Title, null, "Three"),
                "Three content"),
            react_1.default.createElement(Tabs_1.default.Tab, { count: 3, isDisabled: true },
                react_1.default.createElement(Tabs_1.default.Title, null, "Four"),
                "Four content"),
            react_1.default.createElement(Tabs_1.default.Tab, { count: 0, isDisabled: true },
                react_1.default.createElement(Tabs_1.default.Title, null, "Five"),
                "Five content")),
        react_1.default.createElement("h4", null, "Variable Width"),
        react_1.default.createElement(Tabs_1.default, __assign({}, args, { hasFullWidthTabs: false }),
            react_1.default.createElement(Tabs_1.default.Tab, { count: 1231321, isVariableCountWidth: true },
                react_1.default.createElement(Tabs_1.default.Title, null, "One"),
                "One content"),
            react_1.default.createElement(Tabs_1.default.Tab, { count: 6546541612, isVariableCountWidth: true },
                react_1.default.createElement(Tabs_1.default.Title, null, "Two"),
                "Two content"),
            react_1.default.createElement(Tabs_1.default.Tab, { count: 7, isVariableCountWidth: true },
                react_1.default.createElement(Tabs_1.default.Title, null, "Three"),
                "Three content"),
            react_1.default.createElement(Tabs_1.default.Tab, { count: 123, isDisabled: true, isVariableCountWidth: true },
                react_1.default.createElement(Tabs_1.default.Title, null, "Four"),
                "Four content"))));
};
exports.WithCount = WithCount;
/* 10 Floating */
var Floating = function (args) {
    return (react_1.default.createElement("div", null,
        react_1.default.createElement(Tabs_1.default, __assign({}, args, { hasFullWidthTabs: false, isFloating: true }),
            react_1.default.createElement(Tabs_1.default.Tab, { count: 12 },
                react_1.default.createElement(Tabs_1.default.Title, null, "One"),
                "One content"),
            react_1.default.createElement(Tabs_1.default.Tab, { count: 15 },
                react_1.default.createElement(Tabs_1.default.Title, null, "Two"),
                "Two content"),
            react_1.default.createElement(Tabs_1.default.Tab, { count: 7 },
                react_1.default.createElement(Tabs_1.default.Title, null, "Three"),
                "Three content"),
            react_1.default.createElement(Tabs_1.default.Tab, { count: 3, isDisabled: true },
                react_1.default.createElement(Tabs_1.default.Title, null, "Three"),
                "Three content"))));
};
exports.Floating = Floating;
//# sourceMappingURL=Tabs.stories.js.map