@cimpress/react-components
Version:
React components to support the MCP styleguide
65 lines • 3.1 kB
JavaScript
import * as React from 'react';
import useId from '@accessible/use-id';
import { Radio, RadioGroup } from '../radio';
const meta = {
title: 'Components/Radio',
component: Radio,
// @ts-expect-error
subcomponents: { RadioGroup },
};
export default meta;
export const Default = {
storyName: 'Radio Group',
render() {
const name = useId();
const [value, setValue] = React.useState('example1');
return (React.createElement(RadioGroup, { onChange: (e, value) => setValue(value), valueSelected: value, name: name },
React.createElement(Radio, { label: "Example 1", value: "example1" }),
React.createElement("h5", null, "interspersed non-radio component"),
React.createElement(Radio, { label: React.createElement("i", null, "Example 2"), value: "example2" }),
React.createElement(Radio, { label: "Example 3", value: "example3", disabled: true })));
},
args: {},
};
export const InlineRadioGroup = {
render() {
const name = useId();
const [value, setValue] = React.useState('example1');
return (React.createElement(RadioGroup, { onChange: (e, value) => setValue(value), valueSelected: value, name: name, inline: true },
React.createElement(Radio, { label: "Example 1", value: "example1" }),
React.createElement(Radio, { label: React.createElement("i", null, "Example 2"), value: "example2" }),
React.createElement(Radio, { label: "Example 3", value: "example3", disabled: true })));
},
args: {},
};
export const FormIntegration = {
render() {
const name = useId(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(RadioGroup, { name: name, defaultSelected: "orange" },
React.createElement(Radio, { label: "Banana", value: "banana" }),
React.createElement(Radio, { label: "Apple", value: "apple" }),
React.createElement(Radio, { label: "Orange", value: "orange" }))),
React.createElement("pre", null, JSON.stringify(formObj, null, 2))));
},
args: {},
};
export const UncontrolledRadio = {
render() {
return (React.createElement("div", null,
React.createElement(Radio, { label: "Example 1", value: "example1", name: "radioTest", id: "radioTest1" }),
React.createElement(Radio, { label: "Example 2", value: "example2", name: "radioTest", id: "radioTest2" })));
},
args: {},
};
//# sourceMappingURL=Radio.stories.js.map