@simplybusiness/mobius 3.0.0

package/src/components/Radio/Radio.tsx

@@ -0,0 +1,116 @@
+import { forwardRef, ReactNode, useContext, Ref, RefAttributes } from "react";
+import { useRadio } from "@react-aria/radio";
+import { AriaRadioProps } from "@react-types/radio";
+import { useFocusRing } from "@react-aria/focus";
+import { useHover, HoverProps } from "@react-aria/interactions";
+import { DOMProps } from "@react-types/shared";
+import clsx from "clsx";
+import { RadioContext } from "./RadioContext";
+import { ForwardedRefComponent } from "../../types/components";
+import { ErrorMessage } from "../ErrorMessage";
+import { Label } from "../Label";
+
+export type RadioElementType = HTMLInputElement;
+
+export interface RadioProps
+  extends DOMProps,
+    AriaRadioProps,
+    HoverProps,
+    RefAttributes<RadioElementType> {
+  children?: ReactNode;
+  className?: string;
+  label?: ReactNode;
+  errorMessage?: string;
+}
+
+export type RadioRef = Ref<RadioElementType>;
+
+const Radio: ForwardedRefComponent<RadioProps, RadioElementType> = forwardRef(
+  (props: RadioProps, ref: RadioRef) => {
+    const radioContext = useContext(RadioContext);
+
+    if (radioContext === null) {
+      throw Error("Context has not been Provided!");
+    }
+
+    const { state, isDisabled: groupDisabled, validationState } = radioContext;
+
+    const {
+      children,
+      value,
+      label,
+      className,
+      isDisabled,
+      errorMessage,
+      ...otherProps
+    } = props;
+
+    const realDisabled = groupDisabled || isDisabled;
+
+    const { inputProps } = useRadio(
+      { ...props, children: children || label, isDisabled: realDisabled },
+      state,
+      ref as any,
+    );
+    const { isFocusVisible, focusProps } = useFocusRing({
+      within: true,
+    });
+    const { isHovered, hoverProps } = useHover({
+      ...otherProps,
+      isDisabled: realDisabled,
+    });
+    const isSelected = state.selectedValue === inputProps.value;
+    const isMultiline = label && children;
+
+    // Rewrite the class name as our clsx string
+    // It MUST appear after sx prop
+    const radioClasses = {
+      "--is-disabled": realDisabled,
+      "--is-hovered": isHovered,
+      "--is-focused": isFocusVisible,
+      "--is-selected": isSelected,
+      "--is-valid": validationState === "valid",
+      "--is-invalid": validationState === "invalid",
+      "--is-multiline": !!children,
+    };
+    const containerClasses = clsx(
+      "mobius",
+      "mobius/RadioLabel",
+      radioClasses,
+      className,
+    );
+    const iconClasses = clsx("mobius/RadioBullet", radioClasses);
+
+    return (
+      <>
+        <Label
+          css={{ display: "flex", alignItems: "center" }}
+          {...hoverProps}
+          className={containerClasses}
+        >
+          <span className={iconClasses} />
+          <input
+            value={value}
+            {...otherProps}
+            {...inputProps}
+            {...focusProps}
+            ref={ref}
+            className="mobius/RadioInput"
+          />
+          {isMultiline ? (
+            <div className="mobius/RadioContentMultiline">
+              <div className="mobius/RadioContentFirstLine">{label}</div>
+              <div className="mobius/RadioExtraContent">{children}</div>
+            </div>
+          ) : (
+            <div className="mobius/RadioContent">{label || children}</div>
+          )}
+        </Label>
+        {errorMessage && <ErrorMessage errorMessage={errorMessage} />}
+      </>
+    );
+  },
+);
+
+Radio.displayName = "Radio";
+export { Radio };

package/src/components/Radio/RadioButton.story.mdx

@@ -0,0 +1,266 @@
+import { Fragment, useState } from "react";
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { RadioButton } from "./RadioButton";
+import { RadioGroup } from "./RadioGroup";
+import { Flex } from "../Flex";
+import { Box } from "../Box";
+import { Icon } from "../Icon";
+import { excludeControls } from "../../utils/excludeControls";
+
+<Meta
+  title="Forms/RadioButton"
+  component={RadioButton}
+  argTypes={{
+    orientation: {
+      control: "radio",
+      options: ["horizontal", "vertical"],
+    },
+    ...excludeControls("className", "children"),
+  }}
+/>
+
+# RadioButton
+
+**RadioButton** is used to display a group of buttons, only one of which can be selected. It must be contained within a `<RadioGroup />` component to handle the ARIA attributes correctly.
+
+A RadioButton can wrap an Icon and must have a `label` or `aria-labelledby` prop. A visible label is displayed inside the button.
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { RadioButton, RadioGroup } from "@simplybusiness/mobius";
+```
+
+## Examples
+
+### Normal
+
+<Canvas>
+  <Story
+    name="Normal"
+    args={{
+      label: "Color",
+      orientation: "horizontal",
+      isDisabled: false,
+    }}
+  >
+    {args => (
+      <RadioGroup {...args}>
+        <RadioButton value="red">Red</RadioButton>
+        <RadioButton value="blue">Blue</RadioButton>
+      </RadioGroup>
+    )}
+  </Story>
+</Canvas>
+
+### Label Prop
+
+<Canvas>
+  <Story
+    name="Label Prop"
+    args={{
+      label: "Color",
+      orientation: "horizontal",
+      isDisabled: false,
+    }}
+  >
+    {args => (
+      <RadioGroup {...args}>
+        <RadioButton value="red" label="Red" />
+        <RadioButton value="blue" label="Blue" />
+      </RadioGroup>
+    )}
+  </Story>
+</Canvas>
+
+### Selected
+
+<Canvas>
+  <Story
+    name="Selected"
+    args={{
+      label: "Color",
+      defaultValue: "red",
+      orientation: "horizontal",
+      isDisabled: false,
+    }}
+    argTypes={{
+      value: {
+        control: "radio",
+        options: ["red", "blue"],
+      },
+    }}
+  >
+    {args => (
+      <RadioGroup {...args}>
+        <RadioButton value="red" label="Red" />
+        <RadioButton value="blue" label="Blue" />
+      </RadioGroup>
+    )}
+  </Story>
+</Canvas>
+
+### Disabled
+
+<Canvas>
+  <Story
+    name="Disabled"
+    args={{
+      label: "Color",
+      orientation: "horizontal",
+      isDisabled: true,
+    }}
+  >
+    {args => (
+      <RadioGroup {...args}>
+        <RadioButton value="red" label="Red" />
+        <RadioButton value="blue" label="Blue" />
+      </RadioGroup>
+    )}
+  </Story>
+</Canvas>
+
+### Vertical Orientation
+
+<Canvas>
+  <Story
+    name="Vertical Orientation"
+    args={{ label: "Color", orientation: "vertical", isDisabled: false }}
+  >
+    {args => (
+      <RadioGroup {...args}>
+        <RadioButton value="red" label="Red" />
+        <RadioButton value="blue" label="Blue" />
+      </RadioGroup>
+    )}
+  </Story>
+</Canvas>
+
+### Icon Buttons
+
+<Canvas>
+  <Story
+    name="Icon Buttons"
+    args={{
+      label: "Business Type",
+      orientation: "horizontal",
+      isDisabled: false,
+    }}
+  >
+    {args => (
+      <RadioGroup {...args}>
+        <RadioButton value="sole_trader" label="Sole Trader">
+          <Icon name="user" fontSize={28} />
+        </RadioButton>
+        <RadioButton value="partnership" label="Partnership">
+          <Icon name="star" fontSize={28} />
+        </RadioButton>
+        <RadioButton value="company" label="Ltd Company">
+          <Icon name="menu" fontSize={28} />
+        </RadioButton>
+      </RadioGroup>
+    )}
+  </Story>
+</Canvas>
+
+### Circular Buttons
+
+Circular buttons currently only display label text below the button; allowing it inside risks breaking the layout when text wraps onto multiple lines.
+
+The `circular` prop is applied to the RadioGroup and inheritted by each button to avoid mixed styles.
+
+<Canvas>
+  <Story
+    name="Circular Buttons"
+    args={{
+      label: "Business Type",
+      orientation: "horizontal",
+      circular: true,
+      isDisabled: false,
+    }}
+  >
+    {args => (
+      <RadioGroup {...args}>
+        <RadioButton value="sole_trader" label="Sole Trader">
+          <Icon name="user" fontSize={28} />
+        </RadioButton>
+        <RadioButton value="partnership" label="Partnership">
+          <Icon name="star" fontSize={28} />
+        </RadioButton>
+        <RadioButton value="company" label="Ltd Company">
+          <Icon name="menu" fontSize={28} />
+        </RadioButton>
+      </RadioGroup>
+    )}
+  </Story>
+</Canvas>
+
+## Accessibility
+
+When the `label` prop is not provided, make sure to provide the `aria-label` prop instead. If the radio group is labeled by a separate element, the `aria-labelledby` props must be used with the id of the labeling element.
+
+## Events
+
+The `onChange` prop can be used to listen to changes of the selected radio button. See the prop table for the complete list of events supported.
+
+## Radio Props
+
+<ArgsTable components={{ RadioGroup: RadioGroup, RadioButton: RadioButton }} />
+
+## Component HTML Structure and Class names
+
+The following HTML is rendered for a Radio Group with simple label prop only:
+
+```html
+<div class="mobius/Flex mobius/RadioWrapper">
+  <label class="mobius/RadioButtonLabel">
+    <input class="mobius/RadioInput" type="radio" value="red" />
+    <div class="mobius/RadioButtonContent">Red</div>
+  </label>
+  <label class="mobius/RadioButtonLabel">
+    <input class="mobius/RadioInput" type="radio" value="blue" />
+    <div class="mobius/RadioButtonContent">Blue</div>
+  </label>
+</div>
+```
+
+And this is rendered when there is a child Icon component; icon and label are written into span tags:
+
+```html
+<div class="mobius/Flex mobius/RadioWrapper">
+  <label class="mobius/RadioButtonLabel">
+    <input class="mobius/RadioInput" type="radio" value="red" />
+    <div class="mobius/RadioButtonContent">
+      <span class="mobius/RadioButtonIcon">{Icon}</span>
+      <span class="mobius/RadioButtonText">Red</span>
+    </div>
+  </label>
+  <label class="mobius/RadioButtonLabel">
+    <input class="mobius/RadioInput" type="radio" value="blue" />
+    <div class="mobius/RadioButtonContent">
+      <span class="mobius/RadioButtonIcon">{Icon}</span>
+      <span class="mobius/RadioButtonText">Blue</span>
+    </div>
+  </label>
+</div>
+```
+
+The span allows for an image overlay to replace the standard radio UX in browsers.
+
+Class names are augmented with the following flags if true (affected classes shown above):
+
+- --is-focused
+- --is-disabled
+- --is-hovered
+- --is-selected
+- circular
+
+---
+
+[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Radio) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Radio/RadioButton.test.tsx

@@ -0,0 +1,236 @@
+import { render, fireEvent, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { matchers } from "@emotion/jest";
+import { RadioGroup, RadioButton } from ".";
+import { Icon } from "..";
+
+expect.extend(matchers);
+
+describe("RadioButton", () => {
+  it("should render without error", () => {
+    const component = render(
+      <RadioGroup label="Color">
+        <RadioButton value="red">Red</RadioButton>
+        <RadioButton value="blue">Blue</RadioButton>
+      </RadioGroup>,
+    );
+    expect(component).toBeTruthy();
+  });
+
+  it("should call onChange with the selected value when clicked", async () => {
+    const callback = jest.fn();
+    const { getByLabelText } = render(
+      <RadioGroup label="Color" onChange={callback}>
+        <RadioButton value="red">Red</RadioButton>
+        <RadioButton value="blue">Blue</RadioButton>
+      </RadioGroup>,
+    );
+    await userEvent.click(getByLabelText("Red"));
+    expect(callback).toHaveBeenCalledWith("red");
+
+    await userEvent.click(getByLabelText("Blue"));
+    expect(callback).toHaveBeenCalledWith("blue");
+  });
+
+  it("should be selectable via keyboard", async () => {
+    const callback = jest.fn();
+    render(
+      <RadioGroup label="Color" onChange={callback}>
+        <RadioButton value="red">Red</RadioButton>
+        <RadioButton value="blue">Blue</RadioButton>
+      </RadioGroup>,
+    );
+
+    await userEvent.tab();
+    await userEvent.type(document.activeElement!, "[Space]");
+    expect(callback).toHaveBeenCalledWith("red");
+
+    fireEvent.keyDown(document.activeElement!, {
+      key: "ArrowDown",
+      code: "ArrowDown",
+    });
+    expect(callback).toHaveBeenCalledWith("blue");
+  });
+
+  describe("correctly assigns icon and label props or children", () => {
+    it("renders a simple label prop", () => {
+      render(
+        <RadioGroup label="Color" data-testid="test">
+          <RadioButton value="red" label="Red" />
+          <RadioButton value="blue" label="Blue" />
+        </RadioGroup>,
+      );
+      expect(screen.getByText("Red")).toHaveClass("mobius/RadioButtonContent");
+    });
+
+    it("renders a text child as simple label", () => {
+      render(
+        <RadioGroup label="Color" data-testid="test">
+          <RadioButton value="red">Red</RadioButton>
+          <RadioButton value="blue">Blue</RadioButton>
+        </RadioGroup>,
+      );
+      expect(screen.getByText("Red")).toHaveClass("mobius/RadioButtonContent");
+    });
+
+    it("renders children in <span> tags when there is an icon", () => {
+      render(
+        <RadioGroup label="Color" data-testid="test">
+          <RadioButton value="sole_trader" label="Sole Trader">
+            <Icon name="user" />
+          </RadioButton>
+          <RadioButton value="partnership" label="Partnership">
+            <Icon name="star" />
+          </RadioButton>
+          <RadioButton value="company" label="Ltd Company">
+            <Icon name="menu" />
+          </RadioButton>
+        </RadioGroup>,
+      );
+      expect(screen.getByText("Sole Trader")).toHaveClass(
+        "mobius/RadioButtonText",
+      );
+      expect(
+        screen.getByText("Sole Trader").parentElement?.firstChild,
+      ).toHaveClass("mobius/RadioButtonIcon");
+    });
+  });
+
+  describe("isRequired", () => {
+    it("should set aria-required to true", () => {
+      render(
+        <RadioGroup label="Color" isRequired>
+          <RadioButton value="red">Red</RadioButton>
+          {null}
+        </RadioGroup>,
+      );
+      expect(screen.getByLabelText("Color")).toHaveAttribute(
+        "aria-required",
+        "true",
+      );
+    });
+
+    it("should have className of --is-required when true", () => {
+      render(
+        <RadioGroup label="Color" isRequired>
+          <RadioButton value="red">Red</RadioButton>
+          {null}
+        </RadioGroup>,
+      );
+      expect(screen.getByLabelText("Color")).toHaveClass("--is-required");
+    });
+
+    it("should have className of --is-optional when false", () => {
+      render(
+        <RadioGroup label="Color" isRequired={false}>
+          <RadioButton value="red">Red</RadioButton>
+          {null}
+        </RadioGroup>,
+      );
+      expect(screen.getByLabelText("Color")).toHaveClass("--is-optional");
+    });
+
+    it("should have neither --is-required nor --is-optional when unset", () => {
+      render(
+        <RadioGroup label="Color">
+          <RadioButton value="red">Red</RadioButton>
+          {null}
+        </RadioGroup>,
+      );
+      expect(screen.getByLabelText("Color")).not.toHaveClass("--is-required");
+      expect(screen.getByLabelText("Color")).not.toHaveClass("--is-optional");
+    });
+  });
+
+  describe("uses correct class names for atoms", () => {
+    it("uses base Mobius class", () => {
+      render(
+        <RadioGroup label="Color" data-testid="test">
+          <RadioButton value="red">Red</RadioButton>
+          <RadioButton value="blue">Blue</RadioButton>
+        </RadioGroup>,
+      );
+      expect(screen.getByTestId("test")).toHaveClass("mobius/RadioGroup");
+      expect(screen.getByTestId("test").firstChild).toHaveClass("mobius/Label");
+      const wrapper = screen.getByTestId("test").childNodes[1];
+      expect(wrapper).toHaveClass("mobius/RadioWrapper");
+      expect(wrapper.firstChild).toHaveClass("mobius/RadioButtonLabel");
+      expect(wrapper.firstChild?.firstChild).toHaveClass("mobius/RadioInput");
+    });
+
+    it("includes custom class names", () => {
+      render(
+        <RadioGroup label="Color" className="my-class" data-testid="test">
+          <RadioButton value="red" className="red">
+            Red
+          </RadioButton>
+          <RadioButton value="blue" className="blue">
+            Blue
+          </RadioButton>
+        </RadioGroup>,
+      );
+      expect(screen.getByTestId("test")).toHaveClass("mobius/RadioGroup");
+      expect(screen.getByTestId("test")).toHaveClass("my-class");
+      const wrapper = screen.getByTestId("test").childNodes[1];
+      expect(wrapper).toHaveClass("mobius/RadioWrapper");
+      expect(wrapper.firstChild).toHaveClass("mobius/RadioButtonLabel");
+      expect(wrapper.firstChild).toHaveClass("red");
+      expect(wrapper.childNodes[1]).toHaveClass("blue");
+    });
+
+    it("sets classes for interaction states", async () => {
+      const callback = jest.fn();
+      const { container } = render(
+        <RadioGroup data-testid="test" label="Color" onChange={callback}>
+          <RadioButton value="red">Red</RadioButton>
+          <RadioButton value="blue">Blue</RadioButton>
+        </RadioGroup>,
+      );
+
+      // Hover over radio
+      fireEvent.mouseEnter(container.querySelector("input")!);
+      const radio = screen.getByTestId("test").childNodes[1]?.firstChild;
+      expect(radio).toHaveClass("--is-hovered");
+
+      await userEvent.tab();
+      await userEvent.type(document.activeElement!, "[Space]");
+      expect(radio).toHaveClass("--is-selected");
+
+      fireEvent.keyDown(document.activeElement!, {
+        key: "ArrowDown",
+        code: "ArrowDown",
+      });
+      expect(
+        screen.getByTestId("test").childNodes[1]?.childNodes[1],
+      ).toHaveClass("--is-selected");
+    });
+
+    it("sets classes for disabled state", () => {
+      render(
+        <RadioGroup data-testid="test" label="Color" isDisabled>
+          <RadioButton value="red">Red</RadioButton>
+          <RadioButton value="blue">Blue</RadioButton>
+        </RadioGroup>,
+      );
+      expect(screen.getByTestId("test")).toHaveClass("--is-disabled");
+      expect(screen.getByTestId("test").childNodes[1]?.firstChild).toHaveClass(
+        "--is-disabled",
+      );
+      expect(
+        screen.getByTestId("test").childNodes[1]?.childNodes[1],
+      ).toHaveClass("--is-disabled");
+    });
+
+    it("sets class for circular state", () => {
+      render(
+        <RadioGroup data-testid="test" label="Color" circular>
+          <RadioButton value="red">Red</RadioButton>
+          <RadioButton value="blue">Blue</RadioButton>
+        </RadioGroup>,
+      );
+      expect(screen.getByTestId("test").childNodes[1]?.firstChild).toHaveClass(
+        "circular",
+      );
+    });
+  });
+});