lucid-ui/dist/cjs/components/RadioGroup/RadioGroup.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.DefaultProps = exports.SelectedIndexFromChild = exports.SelectedIndexAsProp = exports.NestedSelect = exports.OnSelectOnChild = exports.OnSelect = exports.Stateful = void 0;
var react_1 = __importStar(require("react"));
var RadioGroup_1 = __importDefault(require("./RadioGroup"));
var SingleSelect_1 = __importDefault(require("../SingleSelect/SingleSelect"));
var RadioButtonLabeled_1 = __importDefault(require("../RadioButtonLabeled/RadioButtonLabeled"));
var RadioButton_1 = __importDefault(require("../RadioButton/RadioButton"));
exports.default = {
    title: 'Controls/RadioGroup',
    component: RadioGroup_1.default,
    parameters: {
        docs: {
            description: {
                component: RadioGroup_1.default.peek.description,
            },
        },
    },
    args: RadioGroup_1.default.defaultProps,
    argTypes: {
        children: { control: false },
    },
};
var style = {
    marginRight: '13px',
};
var radioButtonDefaultProps = RadioButton_1.default.defaultProps;
var singleSelectDefaultProps = SingleSelect_1.default.defaultProps;
var Stateful = function (args) {
    return (react_1.default.createElement(RadioGroup_1.default, __assign({}, args, { isDisabled: false }),
        react_1.default.createElement(RadioGroup_1.default.RadioButton, __assign({}, radioButtonDefaultProps, { style: style }),
            react_1.default.createElement(RadioGroup_1.default.Label, null, "Alvin")),
        react_1.default.createElement(RadioGroup_1.default.RadioButton, __assign({}, radioButtonDefaultProps, { style: style }),
            react_1.default.createElement(RadioGroup_1.default.Label, null, "Simon")),
        react_1.default.createElement(RadioGroup_1.default.RadioButton, __assign({}, radioButtonDefaultProps, { style: style }),
            react_1.default.createElement(RadioGroup_1.default.Label, null, "Theodore"))));
};
exports.Stateful = Stateful;
var OnSelect = function (args) {
    var _a = (0, react_1.useState)(0), selectedIndex = _a[0], setSelectedIndex = _a[1];
    var handleSelect = function (idx) {
        setSelectedIndex(idx);
    };
    return (react_1.default.createElement("div", null,
        react_1.default.createElement(RadioGroup_1.default, __assign({}, args, { isDisabled: false, onSelect: handleSelect, selectedIndex: selectedIndex }),
            react_1.default.createElement(RadioGroup_1.default.RadioButton, __assign({}, radioButtonDefaultProps, { style: style }),
                react_1.default.createElement(RadioGroup_1.default.Label, null, "Alvin")),
            react_1.default.createElement(RadioGroup_1.default.RadioButton, __assign({}, radioButtonDefaultProps, { style: style }),
                react_1.default.createElement(RadioGroup_1.default.Label, null, "Simon")),
            react_1.default.createElement(RadioGroup_1.default.RadioButton, __assign({}, radioButtonDefaultProps, { style: style }),
                react_1.default.createElement(RadioGroup_1.default.Label, null, "Theodore"))),
        react_1.default.createElement("pre", null,
            "Selected Index: ",
            selectedIndex)));
};
exports.OnSelect = OnSelect;
var OnSelectOnChild = function (args) {
    var _a = (0, react_1.useState)(0), selectedIndex = _a[0], setSelectedIndex = _a[1];
    var handleSelect = function (index) {
        setSelectedIndex(index);
    };
    var children = ['Alvin', 'Simon', 'Theodore'];
    return (react_1.default.createElement(RadioGroup_1.default, __assign({}, args, { isDisabled: false, selectedIndex: selectedIndex }), children.map(function (child, idx) {
        return (react_1.default.createElement(RadioGroup_1.default.RadioButton, __assign({}, radioButtonDefaultProps, { key: idx, style: style, onSelect: function () { return handleSelect(idx); } }),
            react_1.default.createElement(RadioGroup_1.default.Label, null, child)));
    })));
};
exports.OnSelectOnChild = OnSelectOnChild;
var NestedSelect = function (args) {
    var subSelection = {
        display: 'block',
        marginTop: '13px',
    };
    var _a = (0, react_1.useState)(''), height = _a[0], setHeight = _a[1];
    var handleSelectedTallSimon = function () {
        setHeight('Tall Simon');
    };
    var handleSelectedShortSimon = function () {
        setHeight('Short Simon');
    };
    return (react_1.default.createElement(RadioGroup_1.default, __assign({}, args),
        react_1.default.createElement(RadioGroup_1.default.RadioButton, __assign({}, radioButtonDefaultProps, { style: style }),
            react_1.default.createElement(RadioGroup_1.default.Label, null, "Alvin")),
        react_1.default.createElement(RadioGroup_1.default.RadioButton, __assign({}, radioButtonDefaultProps, { style: style }),
            react_1.default.createElement(RadioGroup_1.default.Label, null,
                "Simon",
                react_1.default.createElement(RadioButtonLabeled_1.default, __assign({}, radioButtonDefaultProps, { isSelected: height === 'Tall Simon', onSelect: handleSelectedTallSimon }),
                    react_1.default.createElement(RadioButtonLabeled_1.default.Label, null, "Tall Simon")),
                react_1.default.createElement(RadioButtonLabeled_1.default, __assign({}, radioButtonDefaultProps, { isSelected: height === 'Short Simon', onSelect: handleSelectedShortSimon }),
                    react_1.default.createElement(RadioButtonLabeled_1.default.Label, null, "Short Simon")))),
        react_1.default.createElement(RadioGroup_1.default.RadioButton, __assign({}, radioButtonDefaultProps, { style: style }),
            react_1.default.createElement(RadioGroup_1.default.Label, null,
                "Theodore",
                react_1.default.createElement(SingleSelect_1.default, __assign({}, singleSelectDefaultProps, { style: subSelection }),
                    react_1.default.createElement(SingleSelect_1.default.Option, null, "Tall Theo"),
                    react_1.default.createElement(SingleSelect_1.default.Option, null, "Short Theo"),
                    react_1.default.createElement(SingleSelect_1.default.Option, null, "Average height Theo"))))));
};
exports.NestedSelect = NestedSelect;
var SelectedIndexAsProp = function (args) {
    return (react_1.default.createElement("section", null,
        react_1.default.createElement(RadioGroup_1.default, __assign({}, args, { name: 'name', selectedIndex: 3, style: {
                display: 'inline-flex',
                flexDirection: 'column',
            } }),
            react_1.default.createElement(RadioGroup_1.default.RadioButton, __assign({}, radioButtonDefaultProps, { style: style }),
                react_1.default.createElement(RadioGroup_1.default.Label, null, "Captain America")),
            react_1.default.createElement(RadioGroup_1.default.RadioButton, __assign({}, radioButtonDefaultProps, { style: style }),
                react_1.default.createElement(RadioGroup_1.default.Label, null, "Iron Man")),
            react_1.default.createElement(RadioGroup_1.default.RadioButton, __assign({}, radioButtonDefaultProps, { style: style }),
                react_1.default.createElement(RadioGroup_1.default.Label, null, "Thor")),
            react_1.default.createElement(RadioGroup_1.default.RadioButton, __assign({}, radioButtonDefaultProps, { style: style }),
                react_1.default.createElement(RadioGroup_1.default.Label, null, "Hulk")),
            react_1.default.createElement(RadioGroup_1.default.RadioButton, __assign({}, radioButtonDefaultProps, { style: style }),
                react_1.default.createElement(RadioGroup_1.default.Label, null, "Black Widow")),
            react_1.default.createElement(RadioGroup_1.default.RadioButton, __assign({}, radioButtonDefaultProps, { style: style }),
                react_1.default.createElement(RadioGroup_1.default.Label, null, "Hawkeye")))));
};
exports.SelectedIndexAsProp = SelectedIndexAsProp;
var SelectedIndexFromChild = function (args) {
    return (react_1.default.createElement(RadioGroup_1.default, __assign({}, args, { name: 'name', selectedIndex: 2, style: {
            display: 'inline-flex',
            flexDirection: 'column',
        } }),
        react_1.default.createElement(RadioGroup_1.default.RadioButton, __assign({}, radioButtonDefaultProps, { isSelected: true, style: style }),
            react_1.default.createElement(RadioGroup_1.default.Label, null, "Leonardo")),
        react_1.default.createElement(RadioGroup_1.default.RadioButton, __assign({}, radioButtonDefaultProps, { isSelected: true, style: style }),
            react_1.default.createElement(RadioGroup_1.default.Label, null, "Raphael")),
        react_1.default.createElement(RadioGroup_1.default.RadioButton, __assign({}, radioButtonDefaultProps, { isSelected: true, style: style }),
            react_1.default.createElement(RadioGroup_1.default.Label, null, "Donatello")),
        react_1.default.createElement(RadioGroup_1.default.RadioButton, __assign({}, radioButtonDefaultProps, { style: style }),
            react_1.default.createElement(RadioGroup_1.default.Label, null, "Michelangelo")),
        react_1.default.createElement(RadioGroup_1.default.RadioButton, __assign({}, radioButtonDefaultProps, { style: style }),
            react_1.default.createElement(RadioGroup_1.default.Label, null, "Venus"))));
};
exports.SelectedIndexFromChild = SelectedIndexFromChild;
var DefaultProps = function (args) {
    return (react_1.default.createElement(RadioGroup_1.default, __assign({}, args),
        react_1.default.createElement(RadioGroup_1.default.RadioButton, __assign({}, radioButtonDefaultProps, { style: style }),
            react_1.default.createElement(RadioGroup_1.default.Label, null, "Superman")),
        react_1.default.createElement(RadioGroup_1.default.RadioButton, __assign({}, radioButtonDefaultProps, { style: style }),
            react_1.default.createElement(RadioGroup_1.default.Label, null, "Batman")),
        react_1.default.createElement(RadioGroup_1.default.RadioButton, __assign({}, radioButtonDefaultProps, { style: style }),
            react_1.default.createElement(RadioGroup_1.default.Label, null, "Wonder Woman")),
        react_1.default.createElement(RadioGroup_1.default.RadioButton, __assign({}, radioButtonDefaultProps, { style: style }),
            react_1.default.createElement(RadioGroup_1.default.Label, null, "Aquaman")),
        react_1.default.createElement(RadioGroup_1.default.RadioButton, __assign({}, radioButtonDefaultProps, { style: style }),
            react_1.default.createElement(RadioGroup_1.default.Label, null, "Robin"))));
};
exports.DefaultProps = DefaultProps;
//# sourceMappingURL=RadioGroup.stories.js.map