@simplybusiness/mobius 4.2.8 → 4.3.1

package/dist/cjs/components/Progress/Progress.stories.js

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomValueFormat = exports.NoVisibleLabel = exports.Secondary = exports.Primary = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Progress_1 = require("./Progress");
+const utils_1 = require("../../utils");
+const meta = {
+    title: "Components/Progress",
+    component: Progress_1.Progress,
+    argTypes: Object.assign({ value: {
+            control: {
+                control: { type: "range" },
+                min: 0,
+                max: 10,
+                step: 1,
+            },
+        }, minValue: {
+            control: {
+                control: { type: "range" },
+                min: 0,
+                max: 10,
+                step: 1,
+            },
+        }, maxValue: {
+            control: {
+                control: { type: "range" },
+                min: 0,
+                max: 10,
+                step: 1,
+            },
+        }, label: {
+            control: {
+                control: { type: "text" },
+            },
+        }, variant: {
+            control: { type: "radio" },
+            options: ["primary", "secondary"],
+        } }, (0, utils_1.excludeControls)("valueFormatter")),
+    decorators: [
+        Story => ((0, jsx_runtime_1.jsx)(utils_1.StoryContainer, { children: (0, jsx_runtime_1.jsx)(Story, {}) })),
+    ],
+};
+const customValueFormatter = (value, minValue, maxValue) => `Step ${value} of ${maxValue}`;
+exports.Primary = {
+    render: (args) => (0, jsx_runtime_1.jsx)(Progress_1.Progress, Object.assign({}, args)),
+    args: {
+        value: 2,
+        minValue: 0,
+        maxValue: 10,
+        label: "Progress",
+        variant: "primary",
+        showValueLabel: true,
+    },
+};
+exports.Secondary = {
+    render: (args) => (0, jsx_runtime_1.jsx)(Progress_1.Progress, Object.assign({}, args)),
+    args: {
+        value: 2,
+        minValue: 0,
+        maxValue: 10,
+        label: "Secondary",
+        variant: "secondary",
+        showValueLabel: true,
+    },
+};
+exports.NoVisibleLabel = {
+    render: (args) => (0, jsx_runtime_1.jsx)(Progress_1.Progress, Object.assign({}, args)),
+    args: {
+        value: 1,
+        minValue: 0,
+        maxValue: 4,
+        label: "",
+        variant: "primary",
+        "aria-label": "Progress",
+        showValueLabel: true,
+    },
+    parameters: {
+        controls: {
+            exclude: ["aria-label"],
+        },
+    },
+};
+exports.CustomValueFormat = {
+    render: (args) => (0, jsx_runtime_1.jsx)(Progress_1.Progress, Object.assign({}, args)),
+    args: {
+        value: 1,
+        minValue: 0,
+        maxValue: 4,
+        label: "Progress",
+        variant: "primary",
+        showValueLabel: true,
+        valueFormatter: customValueFormatter,
+    },
+};
+exports.default = meta;
+//# sourceMappingURL=Progress.stories.js.map

package/dist/cjs/components/Progress/Progress.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.stories.js","sourceRoot":"","sources":["../../../../src/components/Progress/Progress.stories.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/Progress/Progress.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/components/Progress/Progress.test.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const _1 = require(".");
+describe("Progress", () => {
+    describe("classnames", () => {
+        let result;
+        beforeEach(() => {
+            result = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Progress, { label: "Progress", className: "test", minValue: 0, maxValue: 10 }));
+        });
+        const classNames = ["mobius", "mobius/Progress", "test"];
+        it.each(classNames)("should have classname %s", className => {
+            expect(result.container.firstChild).toHaveClass(className);
+        });
+    });
+    describe("aria values", () => {
+        const value = 5;
+        const minValue = 0;
+        const maxValue = 10;
+        it("should use value and % as default for aria-valuetext", () => {
+            const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Progress, { label: "Progress", minValue: minValue, maxValue: maxValue, value: value }));
+            const progressBar = container.firstChild;
+            expect(progressBar).toHaveAttribute("aria-valuetext", `${(value / maxValue) * 100}%`);
+            expect(progressBar).toHaveAttribute("aria-valuemax", `${maxValue}`);
+            expect(progressBar).toHaveAttribute("aria-valuemin", `${minValue}`);
+            expect(progressBar).toHaveAttribute("aria-valuenow", `${value}`);
+        });
+        it("should use id if set for wrapper div", () => {
+            const result = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Progress, { id: "testId", label: "Progress", minValue: minValue, maxValue: maxValue, value: value }));
+            expect(result.container.firstChild).toHaveAttribute("id", "testId");
+        });
+        it("sets aria-labelledby to match label on wrapper div", () => {
+            var _a, _b;
+            const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Progress, { id: "testId", label: "Test", minValue: minValue, maxValue: maxValue, value: value }));
+            const labelId = (_a = container
+                .getElementsByClassName("mobius mobius/ProgressLabel")[0]) === null || _a === void 0 ? void 0 : _a.getAttribute("id");
+            const labelledById = (_b = container
+                .getElementsByClassName("mobius mobius/Progress")[0]) === null || _b === void 0 ? void 0 : _b.getAttribute("aria-labelledby");
+            expect(labelledById).toEqual(labelId);
+        });
+    });
+    const valueFormatter = (value, minValue, maxValue) => `${value},${minValue},${maxValue}`;
+    describe("custom formatter", () => {
+        const value = 5;
+        const minValue = 0;
+        const maxValue = 10;
+        let result;
+        beforeEach(() => {
+            result = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Progress, { label: "Progress", minValue: minValue, maxValue: maxValue, value: value, valueFormatter: valueFormatter }));
+        });
+        it("should use custom formatter for aria-valuetext", () => {
+            expect(result.container.firstChild).toHaveAttribute("aria-valuetext", `${value},${minValue},${maxValue}`);
+        });
+        it("should use custom formatter for value text", () => {
+            expect(result.getByTestId("value-label")).toHaveTextContent(`${value},${minValue},${maxValue}`);
+        });
+    });
+});
+//# sourceMappingURL=Progress.test.js.map

package/dist/cjs/components/Progress/Progress.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.test.js","sourceRoot":"","sources":["../../../../src/components/Progress/Progress.test.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/Progress/index.d.ts

@@ -0,0 +1 @@
+export * from "./Progress";

package/dist/cjs/components/Radio/Radio.d.ts

@@ -0,0 +1,53 @@
+import { ReactNode, Ref, RefAttributes } from "react";
+import { ForwardedRefComponent } from "../../types/components";
+import { DOMProps } from "../../types/dom";
+import { HTMLElementEvent } from "../../types/events";
+export type RadioElementType = HTMLInputElement;
+export type AriaRadioProps = {
+    /**
+     * Defines a string value that labels the current element.
+     */
+    "aria-label"?: string;
+    /**
+     * Identifies the element (or elements) that labels the current element.
+     */
+    "aria-labelledby"?: string;
+    /**
+     * Identifies the element (or elements) that describes the object.
+     */
+    "aria-describedby"?: string;
+    /**
+     * Identifies the element (or elements) that provide a detailed, extended description for the object.
+     */
+    "aria-details"?: string;
+};
+export interface RadioProps extends DOMProps, AriaRadioProps, RefAttributes<RadioElementType> {
+    children?: ReactNode;
+    className?: string;
+    label?: ReactNode;
+    errorMessage?: string;
+    value: string;
+    isDisabled?: boolean;
+    onChange?: (event: HTMLElementEvent<RadioElementType>) => void;
+    defaultChecked?: boolean;
+    /**
+     * **Internal:** Do not use
+     */
+    groupDisabled?: boolean;
+    /**
+     * **Internal:** Do not use
+     */
+    name?: string;
+    /**
+     * **Internal:** Do not use
+     */
+    selected?: string;
+    /**
+     * **Internal:** Do not use
+     */
+    setSelected?: React.Dispatch<React.SetStateAction<string>>;
+    isRequired?: boolean;
+}
+export type RadioRef = Ref<RadioElementType>;
+declare const Radio: ForwardedRefComponent<RadioProps, RadioElementType>;
+export { Radio };

package/dist/cjs/components/Radio/Radio.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { RadioGroup } from "./RadioGroup";
+type StoryType = StoryObj<typeof RadioGroup>;
+declare const meta: Meta<typeof RadioGroup>;
+export declare const Normal: StoryType;
+export declare const Disabled: StoryType;
+export declare const DisabledIndividualRadios: StoryType;
+export declare const Valid: StoryType;
+export declare const Invalid: StoryType;
+export declare const ComplexLabel: StoryType;
+export declare const HorizontalLayout: StoryType;
+export default meta;

package/dist/cjs/components/Radio/Radio.stories.js

@@ -0,0 +1,122 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HorizontalLayout = exports.ComplexLabel = exports.Invalid = exports.Valid = exports.DisabledIndividualRadios = exports.Disabled = exports.Normal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Radio_1 = require("./Radio");
+const RadioGroup_1 = require("./RadioGroup");
+const Flex_1 = require("../Flex");
+const Divider_1 = require("../Divider");
+const utils_1 = require("../../utils");
+const meta = {
+    title: "Forms/Radio",
+    component: RadioGroup_1.RadioGroup,
+    argTypes: Object.assign({ validationState: {
+            options: ["valid", "invalid", "neither"],
+            control: { type: "radio" },
+            mapping: {
+                valid: "valid",
+                invalid: "invalid",
+                neither: "",
+            },
+        }, orientation: {
+            control: { type: "radio" },
+            options: ["horizontal", "vertical"],
+        }, label: {
+            control: { type: "text" },
+        } }, (0, utils_1.excludeControls)("name", "groupDisabled", "selected", "setSelected", "defaultValue", "value")),
+    decorators: [
+        Story => ((0, jsx_runtime_1.jsx)(utils_1.StoryContainer, { children: (0, jsx_runtime_1.jsx)(Story, {}) })),
+    ],
+};
+exports.Normal = {
+    render: (args) => ((0, jsx_runtime_1.jsxs)(RadioGroup_1.RadioGroup, Object.assign({}, args, { children: [(0, jsx_runtime_1.jsx)(Radio_1.Radio, { value: "red", label: "Red" }), (0, jsx_runtime_1.jsx)(Radio_1.Radio, { value: "blue", label: "Blue" })] }))),
+    args: {
+        label: "Color",
+        isDisabled: false,
+        isRequired: false,
+        errorMessage: "",
+        orientation: "vertical",
+        defaultValue: "blue",
+    },
+};
+exports.Disabled = {
+    render: (args) => ((0, jsx_runtime_1.jsxs)(RadioGroup_1.RadioGroup, Object.assign({}, args, { children: [(0, jsx_runtime_1.jsx)(Radio_1.Radio, { value: "red", label: "Red", isDisabled: true }), (0, jsx_runtime_1.jsx)(Radio_1.Radio, { value: "blue", label: "Blue" })] }))),
+    args: {
+        label: "Color",
+        isDisabled: true,
+        isRequired: false,
+        errorMessage: "",
+        orientation: "vertical",
+    },
+};
+exports.DisabledIndividualRadios = {
+    render: (args) => ((0, jsx_runtime_1.jsxs)(RadioGroup_1.RadioGroup, Object.assign({}, args, { children: [(0, jsx_runtime_1.jsx)(Radio_1.Radio, { value: "red", label: "Red", isDisabled: true }), (0, jsx_runtime_1.jsx)(Radio_1.Radio, { value: "blue", label: "Blue" })] }))),
+    args: {
+        label: "Color",
+        isDisabled: false,
+        isRequired: false,
+        errorMessage: "",
+        orientation: "vertical",
+    },
+};
+exports.Valid = {
+    render: (args) => ((0, jsx_runtime_1.jsxs)(RadioGroup_1.RadioGroup, Object.assign({}, args, { children: [(0, jsx_runtime_1.jsx)(Radio_1.Radio, { value: "red", label: "Red" }), (0, jsx_runtime_1.jsx)(Radio_1.Radio, { value: "blue", label: "Blue" })] }))),
+    args: {
+        label: "Color",
+        isDisabled: false,
+        isRequired: false,
+        errorMessage: "",
+        validationState: "valid",
+        orientation: "vertical",
+    },
+};
+exports.Invalid = {
+    render: (args) => ((0, jsx_runtime_1.jsxs)(RadioGroup_1.RadioGroup, Object.assign({}, args, { children: [(0, jsx_runtime_1.jsx)(Radio_1.Radio, { value: "red", label: "Red" }), (0, jsx_runtime_1.jsx)(Radio_1.Radio, { value: "blue", label: "Blue" })] }))),
+    args: {
+        label: "Color",
+        isDisabled: false,
+        isRequired: false,
+        errorMessage: "Please select a color",
+        validationState: "invalid",
+        orientation: "vertical",
+    },
+};
+exports.ComplexLabel = {
+    render: (args) => ((0, jsx_runtime_1.jsxs)(RadioGroup_1.RadioGroup, Object.assign({}, args, { children: [(0, jsx_runtime_1.jsx)(Radio_1.Radio, { value: "annual", label: "Pay annually", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { style: {
+                        width: "100%",
+                        flexDirection: "row",
+                        justifyContent: "space-between",
+                    }, children: [(0, jsx_runtime_1.jsx)("div", { children: "To pay today" }), (0, jsx_runtime_1.jsx)("div", { children: "$1265.00" })] }) }), (0, jsx_runtime_1.jsxs)(Radio_1.Radio, { value: "monthly", label: "Pay monthly", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { style: {
+                            width: "100%",
+                            flexDirection: "row",
+                            justifyContent: "space-between",
+                            marginBottom: "var(--size-xs)",
+                        }, children: [(0, jsx_runtime_1.jsx)("div", { children: "To pay today" }), (0, jsx_runtime_1.jsx)("div", { children: "$316.25" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { style: {
+                            width: "100%",
+                            flexDirection: "row",
+                            justifyContent: "space-between",
+                        }, children: [(0, jsx_runtime_1.jsx)("div", { children: "10 monthly payments of" }), (0, jsx_runtime_1.jsx)("div", { children: "$94.88" })] }), (0, jsx_runtime_1.jsx)(Divider_1.Divider, {}), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { style: {
+                            width: "100%",
+                            flexDirection: "row",
+                            justifyContent: "space-between",
+                        }, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("strong", { children: "Total" }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("strong", { children: "$1265.00" }) })] })] })] }))),
+    args: {
+        label: "Payment Options",
+        isDisabled: false,
+        isRequired: false,
+        errorMessage: "",
+        orientation: "vertical",
+    },
+};
+exports.HorizontalLayout = {
+    render: (args) => ((0, jsx_runtime_1.jsxs)(RadioGroup_1.RadioGroup, Object.assign({}, args, { children: [(0, jsx_runtime_1.jsx)(Radio_1.Radio, { value: "red", label: "Red" }), (0, jsx_runtime_1.jsx)(Radio_1.Radio, { value: "blue", label: "Blue" })] }))),
+    args: {
+        label: "Color",
+        isDisabled: false,
+        isRequired: false,
+        errorMessage: "",
+        orientation: "horizontal",
+    },
+};
+exports.default = meta;
+//# sourceMappingURL=Radio.stories.js.map

package/dist/cjs/components/Radio/Radio.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.stories.js","sourceRoot":"","sources":["../../../../src/components/Radio/Radio.stories.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/Radio/Radio.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/components/Radio/Radio.test.js

@@ -0,0 +1,259 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
+const _1 = require(".");
+describe("Radio", () => {
+    it("should render without error", () => {
+        const component = (0, react_1.render)((0, jsx_runtime_1.jsxs)(_1.RadioGroup, { label: "Color", children: [(0, jsx_runtime_1.jsx)(_1.Radio, { value: "red", children: "Red" }), (0, jsx_runtime_1.jsx)(_1.Radio, { value: "blue", children: "Blue" })] }));
+        expect(component).toBeTruthy();
+    });
+    describe("default value in `<RadioGroup>`", () => {
+        describe("set to an existing option", () => {
+            it("should render only one `<Radio>` as checked", () => {
+                const uncheckedText = "red";
+                const checkedText = "blue";
+                (0, react_1.render)((0, jsx_runtime_1.jsxs)(_1.RadioGroup, { label: "Color", defaultValue: checkedText, children: [(0, jsx_runtime_1.jsx)(_1.Radio, { value: uncheckedText, children: "Red" }), (0, jsx_runtime_1.jsx)(_1.Radio, { value: checkedText, children: "Blue" })] }));
+                const uncheckedRadio = react_1.screen.getByDisplayValue(uncheckedText);
+                const checkedRadio = react_1.screen.getByDisplayValue(checkedText);
+                expect(uncheckedRadio).not.toBeChecked();
+                expect(checkedRadio).toBeChecked();
+            });
+        });
+        describe("set to a non-existing option", () => {
+            it("should render only one `<Radio>` as checked", () => {
+                const nonExistingText = "orange";
+                (0, react_1.render)((0, jsx_runtime_1.jsxs)(_1.RadioGroup, { label: "Color", defaultValue: nonExistingText, children: [(0, jsx_runtime_1.jsx)(_1.Radio, { value: "red", children: "Red" }), (0, jsx_runtime_1.jsx)(_1.Radio, { value: "blue", children: "Blue" })] }));
+                const inputs = react_1.screen.getAllByRole("radio");
+                inputs.forEach(input => expect(input).not.toBeChecked());
+            });
+        });
+        describe("set to an empty string", () => {
+            it("should render only one `<Radio>` as checked", () => {
+                const emptyString = "";
+                (0, react_1.render)((0, jsx_runtime_1.jsxs)(_1.RadioGroup, { label: "Color", defaultValue: emptyString, children: [(0, jsx_runtime_1.jsx)(_1.Radio, { value: "red", children: "Red" }), (0, jsx_runtime_1.jsx)(_1.Radio, { value: "blue", children: "Blue" })] }));
+                const inputs = react_1.screen.getAllByRole("radio");
+                inputs.forEach(input => expect(input).not.toBeChecked());
+            });
+        });
+    });
+    describe("default checked in `<Radio>`", () => {
+        it("should render unchecked by default", () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Radio, { value: "red", children: "Red" }));
+            const input = react_1.screen.getByRole("radio");
+            expect(input).not.toBeChecked();
+        });
+        describe("given defaultChecked prop is set", () => {
+            it("should render checked", () => {
+                (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Radio, { value: "red", defaultChecked: true, children: "Red" }));
+                const input = react_1.screen.getByRole("radio");
+                expect(input).toBeChecked();
+            });
+        });
+        describe("given defaultChecked prop is set to false", () => {
+            it("should render checked", () => {
+                (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Radio, { value: "red", defaultChecked: false, children: "Red" }));
+                const input = react_1.screen.getByRole("radio");
+                expect(input).not.toBeChecked();
+            });
+        });
+    });
+    it("should set aria-describedby for all radios when errorMessage is set", () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsxs)(_1.RadioGroup, { label: "Radio Group", errorMessage: "Error message", children: [(0, jsx_runtime_1.jsx)(_1.Radio, { label: "Radio 1", value: "value1" }), (0, jsx_runtime_1.jsx)(_1.Radio, { label: "Radio 2", value: "value2" }), (0, jsx_runtime_1.jsx)(_1.Radio, { label: "Radio 3", value: "value3" })] }));
+        const radios = react_1.screen.getAllByRole("radio");
+        radios.forEach(radio => {
+            expect(radio).toHaveAccessibleDescription("Error message");
+        });
+    });
+    it("should render with role attribute", () => {
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsxs)(_1.RadioGroup, { label: "Color", children: [(0, jsx_runtime_1.jsx)(_1.Radio, { value: "red", children: "Red" }), (0, jsx_runtime_1.jsx)(_1.Radio, { value: "blue", children: "Blue" })] }));
+        expect(container.firstChild).toHaveAttribute("role", "radiogroup");
+    });
+    it("should call onChange with the selected value when clicked", async () => {
+        const callback = jest.fn();
+        const handleChange = (e) => {
+            callback(e.target.value);
+        };
+        const redOptionText = "Red";
+        const blueOptionText = "Blue";
+        const { getByLabelText } = (0, react_1.render)((0, jsx_runtime_1.jsxs)(_1.RadioGroup, { label: "Color", onChange: handleChange, children: [(0, jsx_runtime_1.jsx)(_1.Radio, { value: "red", children: redOptionText }), (0, jsx_runtime_1.jsx)(_1.Radio, { value: "blue", children: blueOptionText })] }));
+        const redOption = react_1.screen.getByLabelText(redOptionText);
+        const blueOption = react_1.screen.getByLabelText(blueOptionText);
+        await user_event_1.default.click(getByLabelText(redOptionText));
+        expect(callback).toHaveBeenCalledWith("red");
+        expect(redOption).toBeChecked();
+        await user_event_1.default.click(getByLabelText(blueOptionText));
+        expect(callback).toHaveBeenCalledWith("blue");
+        expect(blueOption).toBeChecked();
+    });
+    it("should be selectable via keyboard", async () => {
+        const callback = jest.fn();
+        const redOptionText = "Red";
+        const blueOptionText = "Blue";
+        const redOptionValue = redOptionText.toLowerCase();
+        const blueOptionValue = blueOptionText.toLowerCase();
+        (0, react_1.render)((0, jsx_runtime_1.jsxs)(_1.RadioGroup, { label: "Color", onChange: callback, children: [(0, jsx_runtime_1.jsx)(_1.Radio, { value: redOptionValue, children: "Red" }), (0, jsx_runtime_1.jsx)(_1.Radio, { value: blueOptionValue, children: "Blue" })] }));
+        const redOption = react_1.screen.getByLabelText(redOptionText);
+        const blueOption = react_1.screen.getByLabelText(blueOptionText);
+        await user_event_1.default.tab();
+        await user_event_1.default.keyboard("[Space]");
+        expect(callback).toHaveBeenCalled();
+        expect(redOption).toBeChecked();
+        expect(blueOption).not.toBeChecked();
+        await user_event_1.default.keyboard("[ArrowDown]");
+        expect(callback).toHaveBeenCalled();
+        expect(blueOption).toBeChecked();
+        expect(redOption).not.toBeChecked();
+    });
+    describe("when child component is null", () => {
+        it("renders without errors", () => {
+            expect(() => (0, react_1.render)((0, jsx_runtime_1.jsxs)(_1.RadioGroup, { label: "Color", children: [(0, jsx_runtime_1.jsx)(_1.Radio, { value: "red", children: "Red" }), null] }))).not.toThrow();
+        });
+    });
+    describe("isRequired", () => {
+        it("should set aria-required to true", () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsxs)(_1.RadioGroup, { label: "Color", isRequired: true, children: [(0, jsx_runtime_1.jsx)(_1.Radio, { value: "red", children: "Red" }), null] }));
+            const container = react_1.screen.getByLabelText("Color");
+            const input = react_1.screen.getByRole("radio");
+            expect(container).toHaveAttribute("aria-required", "true");
+            expect(input).toHaveAttribute("required");
+        });
+        it("should have className of --is-required when true", () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsxs)(_1.RadioGroup, { label: "Color", isRequired: true, children: [(0, jsx_runtime_1.jsx)(_1.Radio, { value: "red", children: "Red" }), null] }));
+            expect(react_1.screen.getByLabelText("Color")).toHaveClass("--is-required");
+        });
+        it("should have className of --is-optional when false", () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsxs)(_1.RadioGroup, { label: "Color", isRequired: false, children: [(0, jsx_runtime_1.jsx)(_1.Radio, { value: "red", children: "Red" }), null] }));
+            expect(react_1.screen.getByLabelText("Color")).toHaveClass("--is-optional");
+        });
+        it("should have neither --is-required nor --is-optional when unset", () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsxs)(_1.RadioGroup, { label: "Color", children: [(0, jsx_runtime_1.jsx)(_1.Radio, { value: "red", children: "Red" }), null] }));
+            expect(react_1.screen.getByLabelText("Color")).not.toHaveClass("--is-required");
+            expect(react_1.screen.getByLabelText("Color")).not.toHaveClass("--is-optional");
+        });
+    });
+    describe("uses correct class names for atoms", () => {
+        it("uses Mobius class", () => {
+            const { container } = (0, react_1.render)((0, jsx_runtime_1.jsxs)(_1.RadioGroup, { label: "Color", children: [(0, jsx_runtime_1.jsx)(_1.Radio, { value: "red", children: "Red" }), (0, jsx_runtime_1.jsx)(_1.Radio, { value: "blue", children: "Blue" })] }));
+            expect(container.firstChild).toHaveClass("mobius/RadioGroup");
+        });
+        it("uses base Mobius class", () => {
+            const labelText = "Color";
+            const { container } = (0, react_1.render)((0, jsx_runtime_1.jsxs)(_1.RadioGroup, { label: labelText, children: [(0, jsx_runtime_1.jsx)(_1.Radio, { value: "red", children: "Red" }), (0, jsx_runtime_1.jsx)(_1.Radio, { value: "blue", children: "Blue" })] }));
+            const containerElement = container.firstChild;
+            const label = react_1.screen.getByText(labelText);
+            const inputs = react_1.screen.queryAllByRole("radio");
+            expect(containerElement).toHaveClass("mobius/RadioGroup");
+            expect(label).toHaveClass("mobius/Label");
+            expect(label.nextElementSibling).toHaveClass("mobius/RadioWrapper");
+            inputs.forEach(input => expect(input).toHaveClass("mobius/RadioInput"));
+        });
+        it("includes custom class names", () => {
+            const customContainerClass = "custom-container-class";
+            const customRedClass = "custom-red-class";
+            const customBlueClass = "custom-blue-class";
+            const redText = "Red";
+            const blueText = "Blue";
+            const { container } = (0, react_1.render)((0, jsx_runtime_1.jsxs)(_1.RadioGroup, { label: "Color", className: customContainerClass, children: [(0, jsx_runtime_1.jsx)(_1.Radio, { value: "red", className: customRedClass, children: redText }), (0, jsx_runtime_1.jsx)(_1.Radio, { value: "blue", className: customBlueClass, children: blueText })] }));
+            const redOption = react_1.screen.getByLabelText(redText);
+            const blueOption = react_1.screen.getByLabelText(blueText);
+            expect(container.firstChild).toHaveClass(customContainerClass);
+            expect(redOption.parentElement).toHaveClass(customRedClass);
+            expect(blueOption.parentElement).toHaveClass(customBlueClass);
+        });
+        it("sets classes for interaction states", async () => {
+            const callback = jest.fn();
+            (0, react_1.render)((0, jsx_runtime_1.jsxs)(_1.RadioGroup, { label: "Color", onChange: callback, children: [(0, jsx_runtime_1.jsx)(_1.Radio, { value: "red", children: "Red" }), (0, jsx_runtime_1.jsx)(_1.Radio, { value: "blue", children: "Blue" })] }));
+            const redOption = react_1.screen.getByLabelText("Red");
+            const blueOption = react_1.screen.getByLabelText("Blue");
+            await user_event_1.default.tab();
+            await user_event_1.default.keyboard("[Space]");
+            expect(redOption).toHaveClass("--is-selected");
+            await user_event_1.default.keyboard("[ArrowDown]");
+            expect(redOption).not.toHaveClass("--is-selected");
+            expect(blueOption).toHaveClass("--is-selected");
+        });
+        it("sets classes for disabled state", () => {
+            const { container } = (0, react_1.render)((0, jsx_runtime_1.jsxs)(_1.RadioGroup, { label: "Color", isDisabled: true, children: [(0, jsx_runtime_1.jsx)(_1.Radio, { value: "red", children: "Red" }), (0, jsx_runtime_1.jsx)(_1.Radio, { value: "blue", children: "Blue" })] }));
+            const redOption = react_1.screen.getByLabelText("Red");
+            const blueOption = react_1.screen.getByLabelText("Blue");
+            expect(container.firstChild).toHaveClass("--is-disabled");
+            expect(redOption).toHaveClass("--is-disabled");
+            expect(blueOption).toHaveClass("--is-disabled");
+        });
+        it("sets classes for valid state", () => {
+            const { container } = (0, react_1.render)((0, jsx_runtime_1.jsxs)(_1.RadioGroup, { label: "Color", validationState: "valid", children: [(0, jsx_runtime_1.jsx)(_1.Radio, { value: "red", children: "Red" }), (0, jsx_runtime_1.jsx)(_1.Radio, { value: "blue", children: "Blue" })] }));
+            expect(container.firstChild).toHaveClass("--is-valid");
+        });
+        it("sets classes for invalid state", () => {
+            const { container } = (0, react_1.render)((0, jsx_runtime_1.jsxs)(_1.RadioGroup, { label: "Color", validationState: "invalid", children: [(0, jsx_runtime_1.jsx)(_1.Radio, { value: "red", children: "Red" }), (0, jsx_runtime_1.jsx)(_1.Radio, { value: "blue", children: "Blue" })] }));
+            expect(container.firstChild).toHaveClass("--is-invalid");
+        });
+    });
+    describe("when disabled state is set on RadioGroup", () => {
+        it("renders aria-disabled attribute on container; disabled attributes on inputs", () => {
+            const { container } = (0, react_1.render)((0, jsx_runtime_1.jsxs)(_1.RadioGroup, { label: "Color", isDisabled: true, children: [(0, jsx_runtime_1.jsx)(_1.Radio, { value: "red", children: "Red" }), (0, jsx_runtime_1.jsx)(_1.Radio, { value: "blue", children: "Blue" })] }));
+            const inputs = react_1.screen.queryAllByRole("radio");
+            expect(container.firstChild).toHaveAttribute("aria-disabled", "true");
+            inputs.forEach(input => expect(input).toHaveAttribute("disabled"));
+        });
+    });
+    describe("aria-errormessage", () => {
+        describe("when radio is accompanied by an error message", () => {
+            it("renders aria-erromessage with an id that matches error message id", () => {
+                const { container, getByTestId } = (0, react_1.render)((0, jsx_runtime_1.jsxs)(_1.RadioGroup, { label: "Color", errorMessage: "This is an error", children: [(0, jsx_runtime_1.jsx)(_1.Radio, { value: "red", children: "Red" }), (0, jsx_runtime_1.jsx)(_1.Radio, { value: "blue", children: "Blue" })] }));
+                const errorMessageId = getByTestId("ErrorMessage");
+                expect(container.firstChild).toHaveAttribute("aria-errormessage", errorMessageId.id);
+            });
+        });
+        describe("when radio is not accompanied by an error message", () => {
+            it("does not render aria-erromessage", () => {
+                const { container } = (0, react_1.render)((0, jsx_runtime_1.jsxs)(_1.RadioGroup, { label: "Color", children: [(0, jsx_runtime_1.jsx)(_1.Radio, { value: "red", children: "Red" }), (0, jsx_runtime_1.jsx)(_1.Radio, { value: "blue", children: "Blue" })] }));
+                expect(container.firstChild).not.toHaveAttribute("aria-errormessage");
+            });
+        });
+    });
+    describe("given an invalid state", () => {
+        it("renders aria-invalid attribute on container", () => {
+            const { container } = (0, react_1.render)((0, jsx_runtime_1.jsxs)(_1.RadioGroup, { label: "Color", validationState: "invalid", children: [(0, jsx_runtime_1.jsx)(_1.Radio, { value: "red", children: "Red" }), (0, jsx_runtime_1.jsx)(_1.Radio, { value: "blue", children: "Blue" })] }));
+            expect(container.firstChild).toHaveAttribute("aria-invalid", "true");
+        });
+    });
+    describe("given an aria-label", () => {
+        it("renders the label on the container", () => {
+            const ariaLabel = "My label";
+            const { container } = (0, react_1.render)((0, jsx_runtime_1.jsxs)(_1.RadioGroup, { label: "Color", "aria-label": ariaLabel, children: [(0, jsx_runtime_1.jsx)(_1.Radio, { value: "red", children: "Red" }), (0, jsx_runtime_1.jsx)(_1.Radio, { value: "blue", children: "Blue" })] }));
+            expect(container.firstChild).toHaveAttribute("aria-label", ariaLabel);
+        });
+    });
+    describe("given an aria-labelledby", () => {
+        it("renders the id on the container", () => {
+            const ariaLabelledby = "id123";
+            const { container } = (0, react_1.render)((0, jsx_runtime_1.jsxs)(_1.RadioGroup, { label: "Color", "aria-labelledby": ariaLabelledby, children: [(0, jsx_runtime_1.jsx)(_1.Radio, { value: "red", children: "Red" }), (0, jsx_runtime_1.jsx)(_1.Radio, { value: "blue", children: "Blue" })] }));
+            expect(container.firstChild).toHaveAttribute("aria-labelledby", ariaLabelledby);
+        });
+    });
+    describe("given an orientation value", () => {
+        it("renders horizontal orientation value on the container", () => {
+            const ariaOrientation = "horizontal";
+            const { container } = (0, react_1.render)((0, jsx_runtime_1.jsxs)(_1.RadioGroup, { label: "Color", orientation: ariaOrientation, "aria-orientation": ariaOrientation, children: [(0, jsx_runtime_1.jsx)(_1.Radio, { value: "red", children: "Red" }), (0, jsx_runtime_1.jsx)(_1.Radio, { value: "blue", children: "Blue" })] }));
+            expect(container.firstChild).toHaveAttribute("aria-orientation", ariaOrientation);
+        });
+        it("renders vertical orientation value on the container", () => {
+            const ariaOrientation = "vertical";
+            const { container } = (0, react_1.render)((0, jsx_runtime_1.jsxs)(_1.RadioGroup, { label: "Color", orientation: ariaOrientation, "aria-orientation": ariaOrientation, children: [(0, jsx_runtime_1.jsx)(_1.Radio, { value: "red", children: "Red" }), (0, jsx_runtime_1.jsx)(_1.Radio, { value: "blue", children: "Blue" })] }));
+            expect(container.firstChild).toHaveAttribute("aria-orientation", ariaOrientation);
+        });
+    });
+    describe("given the component is read only", () => {
+        it("renders aria-readonly attribute on the container", () => {
+            const { container } = (0, react_1.render)((0, jsx_runtime_1.jsxs)(_1.RadioGroup, { label: "Color", isReadOnly: true, children: [(0, jsx_runtime_1.jsx)(_1.Radio, { value: "red", children: "Red" }), (0, jsx_runtime_1.jsx)(_1.Radio, { value: "blue", children: "Blue" })] }));
+            expect(container.firstChild).toHaveAttribute("aria-readonly", "true");
+        });
+    });
+});
+//# sourceMappingURL=Radio.test.js.map