@cimpress/react-components/dist/src/stories/Radio.stories.js

React components to support the MCP styleguide

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (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.UncontrolledRadio = exports.FormIntegration = exports.InlineRadioGroup = exports.Default = void 0;
const React = __importStar(require("react"));
const use_id_1 = __importDefault(require("@accessible/use-id"));
const radio_1 = require("../radio");
const meta = {
    title: 'Components/Radio',
    component: radio_1.Radio,
    // @ts-expect-error
    subcomponents: { RadioGroup: radio_1.RadioGroup },
};
exports.default = meta;
exports.Default = {
    storyName: 'Radio Group',
    render() {
        const name = (0, use_id_1.default)();
        const [value, setValue] = React.useState('example1');
        return (React.createElement(radio_1.RadioGroup, { onChange: (e, value) => setValue(value), valueSelected: value, name: name },
            React.createElement(radio_1.Radio, { label: "Example 1", value: "example1" }),
            React.createElement("h5", null, "interspersed non-radio component"),
            React.createElement(radio_1.Radio, { label: React.createElement("i", null, "Example 2"), value: "example2" }),
            React.createElement(radio_1.Radio, { label: "Example 3", value: "example3", disabled: true })));
    },
    args: {},
};
exports.InlineRadioGroup = {
    render() {
        const name = (0, use_id_1.default)();
        const [value, setValue] = React.useState('example1');
        return (React.createElement(radio_1.RadioGroup, { onChange: (e, value) => setValue(value), valueSelected: value, name: name, inline: true },
            React.createElement(radio_1.Radio, { label: "Example 1", value: "example1" }),
            React.createElement(radio_1.Radio, { label: React.createElement("i", null, "Example 2"), value: "example2" }),
            React.createElement(radio_1.Radio, { label: "Example 3", value: "example3", disabled: true })));
    },
    args: {},
};
exports.FormIntegration = {
    render() {
        const name = (0, use_id_1.default)(undefined, 'fruit');
        const [formObj, setFormObj] = React.useState();
        const isRefSet = React.useRef(false);
        return (React.createElement("div", null,
            React.createElement("form", { onChange: e => {
                    setFormObj(Object.fromEntries(new FormData(e.currentTarget)));
                }, ref: el => {
                    if (!el || isRefSet.current)
                        return;
                    isRefSet.current = true;
                    setFormObj(Object.fromEntries(new FormData(el)));
                }, style: { marginBottom: 16 } },
                React.createElement(radio_1.RadioGroup, { name: name, defaultSelected: "orange" },
                    React.createElement(radio_1.Radio, { label: "Banana", value: "banana" }),
                    React.createElement(radio_1.Radio, { label: "Apple", value: "apple" }),
                    React.createElement(radio_1.Radio, { label: "Orange", value: "orange" }))),
            React.createElement("pre", null, JSON.stringify(formObj, null, 2))));
    },
    args: {},
};
exports.UncontrolledRadio = {
    render() {
        return (React.createElement("div", null,
            React.createElement(radio_1.Radio, { label: "Example 1", value: "example1", name: "radioTest", id: "radioTest1" }),
            React.createElement(radio_1.Radio, { label: "Example 2", value: "example2", name: "radioTest", id: "radioTest2" })));
    },
    args: {},
};
//# sourceMappingURL=Radio.stories.js.map