✨(react) add Radio component

Implement Radio input based on designed sketches.

packages/react/src/components/Forms/Radio/index.scss

@@ -0,0 +1,39 @@
+.c__radio {
+  input {
+    appearance: none;
+    margin: 0;
+    width: var(--c--components--forms-checkbox--size);
+    height: var(--c--components--forms-checkbox--size);
+    border: 1.5px solid var(--c--components--forms-radio--border-color);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:focus {
+      outline: none;
+    }
+
+    &::before {
+      content: "";
+      width: 1rem;
+      height: 1rem;
+      border-radius: 50%;
+      transform: scale(0);
+      transition: all var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
+      box-shadow: inset 1em 1em var(--c--components--forms-radio--accent-color);
+    }
+
+    &:checked::before {
+      transform: scale(1);
+    }
+  }
+
+  &.c__checkbox--disabled {
+    input {
+      &::before {
+        box-shadow: inset 1em 1em var(--c--theme--colors--greyscale-400);
+      }
+    }
+  }
+}

packages/react/src/components/Forms/Radio/index.spec.tsx

@@ -0,0 +1,114 @@
+import userEvent from "@testing-library/user-event";
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { Radio, RadioGroup } from "components/Forms/Radio/index";
+
+describe("<Radio/>", () => {
+  it("should render", async () => {
+    render(<Radio label="Yes" />);
+    expect(screen.getByLabelText("Yes")).toBeInTheDocument();
+  });
+  it("should render checked", async () => {
+    render(<Radio label="Yes" defaultChecked={true} />);
+    const input: HTMLInputElement = screen.getByRole("radio", {
+      name: "Yes",
+    });
+    expect(input.checked).toEqual(true);
+  });
+  it("should render disabled", async () => {
+    render(<Radio label="Yes" disabled={true} />);
+    expect(screen.getByRole("radio", { name: "Yes" })).toBeDisabled();
+    // Click and expect the radio does not get checked
+    const user = userEvent.setup();
+    const input: HTMLInputElement = screen.getByRole("radio", {
+      name: "Yes",
+    });
+    expect(input.checked).toEqual(false);
+    await user.click(input);
+    expect(input.checked).toEqual(false);
+  });
+  it("should render with text", async () => {
+    render(<Radio label="Yes" text="Text" />);
+    expect(screen.getByText("Text")).toBeInTheDocument();
+  });
+  it("should render with state=success", async () => {
+    render(<Radio label="Yes" state="success" text="Success text" />);
+    expect(screen.getByText("Success text")).toBeInTheDocument();
+    expect(
+      document.querySelector(".c__field.c__field--success")
+    ).toBeInTheDocument();
+  });
+  it("should render with state=error", async () => {
+    render(<Radio label="Yes" state="error" text="Error text" />);
+    expect(screen.getByText("Error text")).toBeInTheDocument();
+    expect(
+      document.querySelector(".c__field.c__field--error")
+    ).toBeInTheDocument();
+  });
+  it("should render with group", async () => {
+    render(
+      <RadioGroup>
+        <Radio label="Yes" />
+        <Radio label="No" />
+      </RadioGroup>
+    );
+    screen.getByRole("radio", {
+      name: "Yes",
+    });
+    screen.getByRole("radio", {
+      name: "No",
+    });
+  });
+  it("should render with group and checking one radio should unchecked all others", async () => {
+    render(
+      <RadioGroup>
+        <Radio name="agree" label="Yes" />
+        <Radio name="agree" label="No" />
+      </RadioGroup>
+    );
+    const user = userEvent.setup();
+    const yesInput: HTMLInputElement = screen.getByLabelText("Yes");
+    const noInput: HTMLInputElement = screen.getByLabelText("No");
+    expect(yesInput.checked).toEqual(false);
+    expect(noInput.checked).toEqual(false);
+    await user.click(yesInput);
+    expect(yesInput.checked).toEqual(true);
+    expect(noInput.checked).toEqual(false);
+    await user.click(noInput);
+    expect(yesInput.checked).toEqual(false);
+    expect(noInput.checked).toEqual(true);
+  });
+  it("should render with group text", async () => {
+    render(
+      <RadioGroup text="Text">
+        <Radio label="Yes" />
+        <Radio label="No" />
+      </RadioGroup>
+    );
+    expect(screen.getByText("Text")).toBeInTheDocument();
+  });
+  it("should render with group state=success", async () => {
+    render(
+      <RadioGroup state="success" text="Success text">
+        <Radio label="Yes" />
+        <Radio label="No" />
+      </RadioGroup>
+    );
+    expect(screen.getByText("Success text")).toBeInTheDocument();
+    expect(
+      document.querySelector(".c__radio__group.c__field.c__field--success")
+    ).toBeInTheDocument();
+  });
+  it("should render with group state=error", async () => {
+    render(
+      <RadioGroup state="error" text="Error text">
+        <Radio label="Yes" />
+        <Radio label="No" />
+      </RadioGroup>
+    );
+    expect(screen.getByText("Error text")).toBeInTheDocument();
+    expect(
+      document.querySelector(".c__radio__group.c__field.c__field--error")
+    ).toBeInTheDocument();
+  });
+});

packages/react/src/components/Forms/Radio/index.stories.mdx

@@ -0,0 +1,109 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { Radio } from "./index";
+
+<Meta title="Components/Forms/Radio/Doc" component={Radio}/>
+
+# Radio
+
+Cunningham provides a versatile Radio component that can be used in a variety of ways. The radio component is a form element that allows the user to select one option from a set of options.
+
+<Canvas>
+  <Story id="components-forms-radio--group"/>
+</Canvas>
+
+## Label
+
+The `label` props is optional, but you can use it to provide a description of the radio.
+
+**Without label**
+
+<Canvas withSource="open">
+  <Story id="components-forms-radio--default"/>
+</Canvas>
+
+**With label**
+
+<Canvas withSource="open">
+  <Story id="components-forms-radio--with-label"/>
+</Canvas>
+
+## Value
+
+You can set the value of the radio with the `checked` attribute.
+
+<Canvas withSource="open">
+  <Story id="components-forms-radio--default"/>
+  <Story id="components-forms-radio--checked"/>
+</Canvas>
+
+## Texts
+
+As the component uses [Field](?path=/story/components-forms-field-doc--page), you can use the `text` props to provide a description of the radio.
+
+<Canvas withSource="open">
+  <Story id="components-forms-radio--with-text"/>
+</Canvas>
+
+## Disabled
+
+As a regular radio, you can disable it by using the `disabled` props.
+
+<Canvas withSource="open">
+  <Story id="components-forms-radio--disabled"/>
+</Canvas>
+
+## States
+
+You can use the following props to change the state of the Input component by using the `state` props.
+
+<Canvas withSource="open">
+  <Story id="components-forms-radio--with-text"/>
+</Canvas>
+
+<Canvas withSource="open">
+  <Story id="components-forms-radio--success"/>
+</Canvas>
+
+<Canvas withSource="open">
+  <Story id="components-forms-radio--error"/>
+</Canvas>
+
+## Group
+
+Here is how you can leverage the `RadioGroup` component to create a group of radio buttons.
+
+<Canvas withSource="open">
+  <Story id="components-forms-radio--group"/>
+</Canvas>
+
+You can also define `state`, `text` props on the group component
+
+<Canvas withSource="open">
+  <Story id="components-forms-radio--group-error"/>
+  <Story id="components-forms-radio--group-success"/>
+</Canvas>
+
+## Design tokens
+
+Here are available custom design tokens.
+
+| Token        	| Description                 	|
+|---------------	|-----------------------------	|
+| border-color   	| Border color of the radio    	|
+| accent-color     	| Color of the checkmark  	|
+
+The design tokens `font-size`, `font-weight`, `color`, `width`, `height` are shared with [Checkbox](?path=/story/components-forms-checkbox-doc--page)
+
+See also [Field](?path=/story/components-forms-field-doc--page)
+
+##
+
+<img src="components/Forms/Radio/resources/dd_1.svg"/>
+
+##
+
+<img src="components/Forms/Radio/resources/dd_2.svg"/>
+
+##
+
+<img src="components/Forms/Radio/resources/dd_3.svg"/>

packages/react/src/components/Forms/Radio/index.stories.tsx

@@ -0,0 +1,154 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import React from "react";
+import { Radio, RadioGroup } from "components/Forms/Radio/index";
+
+export default {
+  title: "Components/Forms/Radio",
+  component: Radio,
+} as ComponentMeta<typeof Radio>;
+
+const Template: ComponentStory<typeof Radio> = (args) => (
+  <Radio {...args} aria-label="Radio" />
+);
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const Checked = Template.bind({});
+Checked.args = {
+  checked: true,
+};
+
+export const WithLabel = Template.bind({});
+WithLabel.args = {
+  label: "Label",
+};
+
+export const WithLabelChecked = Template.bind({});
+WithLabelChecked.args = {
+  label: "Label",
+  checked: true,
+};
+
+export const WithText = Template.bind({});
+WithText.args = {
+  label: "Label",
+  text: "Some optional text",
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  label: "Label",
+  disabled: true,
+};
+
+export const DisabledChecked = Template.bind({});
+DisabledChecked.args = {
+  label: "Label",
+  disabled: true,
+  checked: true,
+  text: "Some optional text",
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  checked: true,
+  label: "Label",
+  text: "This is an optional text",
+  state: "error",
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  checked: true,
+  label: "Label",
+  text: "This is an optional text",
+  state: "success",
+};
+
+export const Group = () => {
+  return (
+    <div>
+      <div className="fs-l fw-bold mb-t">Your office</div>
+      <RadioGroup>
+        <Radio
+          label="New York"
+          name="city"
+          value="new_york"
+          text="5th Avenue Offices"
+        />
+        <Radio
+          label="Singapour"
+          name="city"
+          value="singapour"
+          text="Opened in 2015"
+        />
+        <Radio
+          label="Dublin"
+          name="city"
+          value="dublin"
+          text="Closed since 2019"
+          disabled={true}
+        />
+      </RadioGroup>
+    </div>
+  );
+};
+
+export const GroupError = () => {
+  return (
+    <div>
+      <div className="fs-l fw-bold mb-t">Your office</div>
+      <RadioGroup state="error" text="An important error message">
+        <Radio
+          label="New York"
+          name="city"
+          value="new_york"
+          text="5th Avenue Offices"
+        />
+        <Radio
+          label="Singapour"
+          name="city"
+          value="singapour"
+          text="Opened in 2015"
+        />
+        <Radio
+          label="Dublin"
+          name="city"
+          value="dublin"
+          text="Closed since 2019"
+          disabled={true}
+        />
+      </RadioGroup>
+    </div>
+  );
+};
+
+export const GroupSuccess = () => {
+  return (
+    <div>
+      <div className="fs-l fw-bold mb-t">Your office</div>
+      <RadioGroup state="success" text="Success message !">
+        <Radio
+          label="New York"
+          name="city"
+          value="new_york"
+          text="5th Avenue Offices"
+        />
+        <Radio
+          label="Singapour"
+          name="city"
+          value="singapour"
+          text="Opened in 2015"
+        />
+        <Radio
+          label="Dublin"
+          name="city"
+          value="dublin"
+          text="Closed since 2019"
+          disabled={true}
+        />
+      </RadioGroup>
+    </div>
+  );
+};

packages/react/src/components/Forms/Radio/index.tsx

@@ -0,0 +1,44 @@
+import React, { InputHTMLAttributes, PropsWithChildren } from "react";
+import classNames from "classnames";
+import { Field, FieldProps } from "components/Forms/Field";
+
+type Props = InputHTMLAttributes<HTMLInputElement> &
+  FieldProps & {
+    label?: string;
+  };
+
+export const Radio = ({ label, text, state, ...props }: Props) => {
+  return (
+    <label
+      className={classNames("c__checkbox", "c__radio", {
+        "c__checkbox--disabled": props.disabled,
+      })}
+    >
+      <Field text={text} compact={true} state={state}>
+        <div className="c__checkbox__container">
+          <input type="radio" {...props} />
+          {label && <div className="c__checkbox__label">{label}</div>}
+        </div>
+      </Field>
+    </label>
+  );
+};
+
+export const RadioGroup = ({
+  children,
+  state,
+  text,
+  rightText,
+}: PropsWithChildren & FieldProps) => {
+  return (
+    <Field
+      className="c__radio__group c__checkbox__group"
+      state={state}
+      text={text}
+      rightText={rightText}
+      compact={true}
+    >
+      <div className="c__checkbox__group__list">{children}</div>
+    </Field>
+  );
+};

packages/react/src/components/Forms/Radio/tokens.ts

@@ -0,0 +1,6 @@
+import { DefaultTokens } from "@openfun/cunningham-tokens";
+
+export const tokens = (defaults: DefaultTokens) => ({
+  "border-color": defaults.theme.colors["greyscale-300"],
+  "accent-color": defaults.theme.colors["success-700"],
+});