lucid-ui/dist/esm/components/RadioGroup/RadioGroup.stories.js

A UI component library from Xandr.

import React, { useState } from 'react';
import RadioGroup from './RadioGroup';
import SingleSelect from '../SingleSelect/SingleSelect';
import RadioButtonLabeled from '../RadioButtonLabeled/RadioButtonLabeled';
import RadioButton from '../RadioButton/RadioButton';
export default {
    title: 'Controls/RadioGroup',
    component: RadioGroup,
    parameters: {
        docs: {
            description: {
                component: RadioGroup.peek.description,
            },
        },
    },
    args: RadioGroup.defaultProps,
    argTypes: {
        children: { control: false },
    },
};
const style = {
    marginRight: '13px',
};
const radioButtonDefaultProps = RadioButton.defaultProps;
const singleSelectDefaultProps = SingleSelect.defaultProps;
export const Stateful = (args) => {
    return (React.createElement(RadioGroup, { ...args, isDisabled: false },
        React.createElement(RadioGroup.RadioButton, { ...radioButtonDefaultProps, style: style },
            React.createElement(RadioGroup.Label, null, "Alvin")),
        React.createElement(RadioGroup.RadioButton, { ...radioButtonDefaultProps, style: style },
            React.createElement(RadioGroup.Label, null, "Simon")),
        React.createElement(RadioGroup.RadioButton, { ...radioButtonDefaultProps, style: style },
            React.createElement(RadioGroup.Label, null, "Theodore"))));
};
export const OnSelect = (args) => {
    const [selectedIndex, setSelectedIndex] = useState(0);
    const handleSelect = (idx) => {
        setSelectedIndex(idx);
    };
    return (React.createElement("div", null,
        React.createElement(RadioGroup, { ...args, isDisabled: false, onSelect: handleSelect, selectedIndex: selectedIndex },
            React.createElement(RadioGroup.RadioButton, { ...radioButtonDefaultProps, style: style },
                React.createElement(RadioGroup.Label, null, "Alvin")),
            React.createElement(RadioGroup.RadioButton, { ...radioButtonDefaultProps, style: style },
                React.createElement(RadioGroup.Label, null, "Simon")),
            React.createElement(RadioGroup.RadioButton, { ...radioButtonDefaultProps, style: style },
                React.createElement(RadioGroup.Label, null, "Theodore"))),
        React.createElement("pre", null,
            "Selected Index: ",
            selectedIndex)));
};
export const OnSelectOnChild = (args) => {
    const [selectedIndex, setSelectedIndex] = useState(0);
    const handleSelect = (index) => {
        setSelectedIndex(index);
    };
    const children = ['Alvin', 'Simon', 'Theodore'];
    return (React.createElement(RadioGroup, { ...args, isDisabled: false, selectedIndex: selectedIndex }, children.map((child, idx) => {
        return (React.createElement(RadioGroup.RadioButton, { ...radioButtonDefaultProps, key: idx, style: style, onSelect: () => handleSelect(idx) },
            React.createElement(RadioGroup.Label, null, child)));
    })));
};
export const NestedSelect = (args) => {
    const subSelection = {
        display: 'block',
        marginTop: '13px',
    };
    const [height, setHeight] = useState('');
    const handleSelectedTallSimon = () => {
        setHeight('Tall Simon');
    };
    const handleSelectedShortSimon = () => {
        setHeight('Short Simon');
    };
    return (React.createElement(RadioGroup, { ...args },
        React.createElement(RadioGroup.RadioButton, { ...radioButtonDefaultProps, style: style },
            React.createElement(RadioGroup.Label, null, "Alvin")),
        React.createElement(RadioGroup.RadioButton, { ...radioButtonDefaultProps, style: style },
            React.createElement(RadioGroup.Label, null,
                "Simon",
                React.createElement(RadioButtonLabeled, { ...radioButtonDefaultProps, isSelected: height === 'Tall Simon', onSelect: handleSelectedTallSimon },
                    React.createElement(RadioButtonLabeled.Label, null, "Tall Simon")),
                React.createElement(RadioButtonLabeled, { ...radioButtonDefaultProps, isSelected: height === 'Short Simon', onSelect: handleSelectedShortSimon },
                    React.createElement(RadioButtonLabeled.Label, null, "Short Simon")))),
        React.createElement(RadioGroup.RadioButton, { ...radioButtonDefaultProps, style: style },
            React.createElement(RadioGroup.Label, null,
                "Theodore",
                React.createElement(SingleSelect, { ...singleSelectDefaultProps, style: subSelection },
                    React.createElement(SingleSelect.Option, null, "Tall Theo"),
                    React.createElement(SingleSelect.Option, null, "Short Theo"),
                    React.createElement(SingleSelect.Option, null, "Average height Theo"))))));
};
export const SelectedIndexAsProp = (args) => {
    return (React.createElement("section", null,
        React.createElement(RadioGroup, { ...args, name: 'name', selectedIndex: 3, style: {
                display: 'inline-flex',
                flexDirection: 'column',
            } },
            React.createElement(RadioGroup.RadioButton, { ...radioButtonDefaultProps, style: style },
                React.createElement(RadioGroup.Label, null, "Captain America")),
            React.createElement(RadioGroup.RadioButton, { ...radioButtonDefaultProps, style: style },
                React.createElement(RadioGroup.Label, null, "Iron Man")),
            React.createElement(RadioGroup.RadioButton, { ...radioButtonDefaultProps, style: style },
                React.createElement(RadioGroup.Label, null, "Thor")),
            React.createElement(RadioGroup.RadioButton, { ...radioButtonDefaultProps, style: style },
                React.createElement(RadioGroup.Label, null, "Hulk")),
            React.createElement(RadioGroup.RadioButton, { ...radioButtonDefaultProps, style: style },
                React.createElement(RadioGroup.Label, null, "Black Widow")),
            React.createElement(RadioGroup.RadioButton, { ...radioButtonDefaultProps, style: style },
                React.createElement(RadioGroup.Label, null, "Hawkeye")))));
};
export const SelectedIndexFromChild = (args) => {
    return (React.createElement(RadioGroup, { ...args, name: 'name', selectedIndex: 2, style: {
            display: 'inline-flex',
            flexDirection: 'column',
        } },
        React.createElement(RadioGroup.RadioButton, { ...radioButtonDefaultProps, isSelected: true, style: style },
            React.createElement(RadioGroup.Label, null, "Leonardo")),
        React.createElement(RadioGroup.RadioButton, { ...radioButtonDefaultProps, isSelected: true, style: style },
            React.createElement(RadioGroup.Label, null, "Raphael")),
        React.createElement(RadioGroup.RadioButton, { ...radioButtonDefaultProps, isSelected: true, style: style },
            React.createElement(RadioGroup.Label, null, "Donatello")),
        React.createElement(RadioGroup.RadioButton, { ...radioButtonDefaultProps, style: style },
            React.createElement(RadioGroup.Label, null, "Michelangelo")),
        React.createElement(RadioGroup.RadioButton, { ...radioButtonDefaultProps, style: style },
            React.createElement(RadioGroup.Label, null, "Venus"))));
};
export const DefaultProps = (args) => {
    return (React.createElement(RadioGroup, { ...args },
        React.createElement(RadioGroup.RadioButton, { ...radioButtonDefaultProps, style: style },
            React.createElement(RadioGroup.Label, null, "Superman")),
        React.createElement(RadioGroup.RadioButton, { ...radioButtonDefaultProps, style: style },
            React.createElement(RadioGroup.Label, null, "Batman")),
        React.createElement(RadioGroup.RadioButton, { ...radioButtonDefaultProps, style: style },
            React.createElement(RadioGroup.Label, null, "Wonder Woman")),
        React.createElement(RadioGroup.RadioButton, { ...radioButtonDefaultProps, style: style },
            React.createElement(RadioGroup.Label, null, "Aquaman")),
        React.createElement(RadioGroup.RadioButton, { ...radioButtonDefaultProps, style: style },
            React.createElement(RadioGroup.Label, null, "Robin"))));
};
//# sourceMappingURL=RadioGroup.stories.js.map