@simplybusiness/mobius 3.10.0 → 3.11.0

package/src/components/Chopin/Question/Question.test.tsx

@@ -1,242 +0,0 @@
-import { render, screen, fireEvent } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { Question } from ".";
-import { TextField } from "../../TextField";
-
-const WRAPPER_CLASS_NAME = "chopin/Question";
-const OPEN_CLASS_NAME = "--is-open";
-const CLOSED_CLASS_NAME = "--is-closed";
-
-describe("Question", () => {
-  it("should render without error", () => {
-    const component = render(
-      <Question label="Question">
-        <TextField />
-      </Question>,
-    );
-    expect(component).toBeTruthy();
-  });
-
-  it("should include accessible description", () => {
-    render(
-      <Question label="Question" description="Sample description">
-        <TextField />
-      </Question>,
-    );
-    expect(screen.getByLabelText("Question")).toHaveAccessibleDescription(
-      "Sample description",
-    );
-  });
-
-  it("should include `id` that matches `for` attribute in `<label>`", () => {
-    render(
-      <Question label="Question" description="Sample description">
-        <TextField />
-      </Question>,
-    );
-
-    const label = screen.getByLabelText("Question");
-    const input = screen.getByRole("textbox");
-
-    expect(label.id).toEqual(input.id);
-  });
-
-  it("should include accessible description with error", () => {
-    render(
-      <Question
-        label="Question"
-        description="Sample description"
-        errorMessage="Sample error"
-      >
-        <TextField />
-      </Question>,
-    );
-    expect(screen.getByLabelText("Question")).toHaveAccessibleDescription(
-      "Sample error Sample description",
-    );
-  });
-
-  describe("given no input component is provided", () => {
-    it("renders label text as span element", () => {
-      render(
-        <Question
-          label="Question label"
-          description="Sample description"
-          errorMessage="Sample error"
-        />,
-      );
-      expect(screen.getByText("Question label").tagName).toBe("SPAN");
-    });
-  });
-
-  describe("uses correct Question class name", () => {
-    it("uses chopin class", () => {
-      const { container } = render(
-        <Question label="Question">
-          <TextField />
-        </Question>,
-      );
-      expect(container.firstChild).toHaveClass(WRAPPER_CLASS_NAME);
-    });
-
-    it("includes valid class name", () => {
-      render(
-        <Question label="Question" validationState="valid">
-          <TextField />
-        </Question>,
-      );
-      expect(screen.getByLabelText("Question")).toHaveClass("--is-valid");
-    });
-
-    it("includes invalid class name", () => {
-      render(
-        <Question
-          label="Question"
-          validationState="invalid"
-          errorMessage="There is a problem"
-        >
-          <TextField />
-        </Question>,
-      );
-      expect(screen.getByLabelText("Question")).toHaveClass("--is-invalid");
-    });
-
-    it("includes custom class name", () => {
-      const { container } = render(
-        <Question
-          label="Question"
-          validationState="invalid"
-          errorMessage="There is a problem"
-          className="custom-class"
-        >
-          <TextField />
-        </Question>,
-      );
-
-      expect(container.firstChild).toHaveClass("custom-class");
-    });
-
-    it("includes open help class name when toggled", () => {
-      const { container } = render(
-        <Question label="Question" help="Help text">
-          <TextField />
-        </Question>,
-      );
-
-      const helpToggle = screen.getByRole("button");
-
-      fireEvent.click(helpToggle);
-
-      expect(container.firstChild).toHaveClass("--has-help-open");
-    });
-  });
-
-  describe("Help", () => {
-    it("should be mouse accessible", async () => {
-      const onChange = jest.fn();
-
-      render(
-        <Question
-          label="Question"
-          help="This is a help message"
-          onChange={onChange}
-        >
-          <TextField />
-        </Question>,
-      );
-      await userEvent.click(screen.getByRole("button", { name: "Open Help" }));
-      expect(onChange).toHaveBeenCalled();
-      expect(screen.queryByRole("tooltip")).toBeInTheDocument();
-      await userEvent.click(screen.getByRole("button", { name: "Close Help" }));
-      expect(onChange).toHaveBeenCalled();
-      expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
-    });
-
-    it("should be keyboard accessible", async () => {
-      const onChange = jest.fn();
-
-      render(
-        <Question
-          label="Question"
-          help="This is a help message"
-          onChange={onChange}
-        >
-          <TextField />
-        </Question>,
-      );
-      await userEvent.tab();
-      await userEvent.keyboard("{enter}");
-      expect(onChange).toHaveBeenCalled();
-      expect(screen.queryByRole("tooltip")).toBeInTheDocument();
-      await userEvent.keyboard("{enter}");
-      expect(onChange).toHaveBeenCalled();
-      expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
-    });
-
-    it("should close on escape key", async () => {
-      const onChange = jest.fn();
-
-      render(
-        <Question
-          label="Question"
-          help="This is a help message"
-          onChange={onChange}
-        >
-          <TextField />
-        </Question>,
-      );
-      await userEvent.tab();
-      await userEvent.keyboard("{enter}");
-      expect(onChange).toHaveBeenCalled();
-      expect(screen.queryByRole("tooltip")).toBeInTheDocument();
-      await userEvent.keyboard("{escape}");
-      expect(onChange).toHaveBeenCalled();
-      expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
-    });
-
-    describe("given closeHelpOnOutsideClick is set to true", () => {
-      it("should close on outside click", async () => {
-        const onChange = jest.fn();
-
-        const { container } = render(
-          <Question
-            label="Question"
-            help="This is a help message"
-            closeHelpOnOutsideClick
-            onChange={onChange}
-          >
-            <TextField />
-          </Question>,
-        );
-
-        const toggle = screen.getByRole("button");
-
-        await userEvent.click(toggle);
-        expect(onChange).toHaveBeenCalled();
-        expect(toggle.parentElement).toHaveClass(OPEN_CLASS_NAME);
-
-        await userEvent.click(container);
-        expect(onChange).toHaveBeenCalled();
-        expect(toggle.parentElement).toHaveClass(CLOSED_CLASS_NAME);
-      });
-    });
-
-    describe("given closeHelpOnOutsideClick is not set", () => {
-      it("should close on outside click", async () => {
-        const { container } = render(
-          <Question label="Question" help="This is a help message">
-            <TextField />
-          </Question>,
-        );
-
-        const toggle = screen.getByRole("button");
-
-        await userEvent.click(toggle);
-        expect(toggle.parentElement).toHaveClass(OPEN_CLASS_NAME);
-
-        await userEvent.click(container);
-        expect(toggle.parentElement).toHaveClass(OPEN_CLASS_NAME);
-      });
-    });
-  });
-});

package/src/components/Chopin/Question/Question.tsx

@@ -1,119 +0,0 @@
-"use client";
-
-import {
-  Children,
-  cloneElement,
-  isValidElement,
-  ReactNode,
-  useState,
-  ReactElement,
-  useCallback,
-} from "react";
-import clsx from "clsx";
-import { useId } from "@react-aria/utils";
-import { useBreakpoint } from "../../../hooks";
-import { Label } from "../../Label";
-import { Text } from "../../Text";
-import { QuestionHelp } from "../QuestionHelp/QuestionHelp";
-
-export interface QuestionProps {
-  label?: ReactElement | string;
-  description?: string | ReactNode;
-  errorMessage?: ReactNode;
-  children?: ReactNode;
-  validationState?: "valid" | "invalid" | "";
-  help?: ReactNode;
-  className?: string;
-  closeHelpOnOutsideClick?: boolean;
-  onChange?: (state: boolean) => void;
-}
-
-export function Question({
-  label,
-  description,
-  children,
-  errorMessage,
-  validationState,
-  help,
-  className,
-  closeHelpOnOutsideClick,
-  onChange,
-}: QuestionProps) {
-  const [isOpen, setIsOpen] = useState(false);
-  const labelId = useId();
-  const descriptionId = useId();
-  const forAttr = useId();
-  const { up } = useBreakpoint();
-  const isDesktop = up("md");
-
-  const classes = clsx(
-    "chopin",
-    "chopin/Question",
-    {
-      "--has-help-open": isOpen,
-    },
-    isDesktop ? "--is-desktop" : "",
-    className,
-  );
-
-  const handleChange = useCallback(
-    (state: boolean) => {
-      setIsOpen(state);
-
-      if (onChange) {
-        onChange(state);
-      }
-    },
-    [onChange],
-  );
-
-  // Allow for rich html descriptions
-  const DescriptionComponent = isValidElement(description) ? "div" : Text;
-
-  const labelClasses = clsx("chopin/QuestionLabel", {
-    "--is-valid": validationState === "valid",
-    "--is-invalid": validationState === "invalid",
-  });
-
-  return (
-    <div className={classes}>
-      <Label
-        elementType={children ? "label" : "span"}
-        htmlFor={forAttr}
-        id={labelId}
-        className={labelClasses}
-      >
-        {label}
-      </Label>
-      {help && (
-        <QuestionHelp
-          onChange={handleChange}
-          isDesktop={isDesktop}
-          closeHelpOnOutsideClick={closeHelpOnOutsideClick}
-          isOpen={isOpen}
-        >
-          {help}
-        </QuestionHelp>
-      )}
-      {description && (
-        <DescriptionComponent
-          id={descriptionId}
-          className="chopin/QuestionDescription"
-        >
-          {description}
-        </DescriptionComponent>
-      )}
-      {Children.map(children, child =>
-        isValidElement(child)
-          ? cloneElement(child, {
-              errorMessage,
-              validationState,
-              id: forAttr,
-              "aria-labelledby": labelId,
-              "aria-describedby": description ? descriptionId : undefined,
-            } as any)
-          : child,
-      )}
-    </div>
-  );
-}

package/src/components/Chopin/Question/index.tsx

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

package/src/components/Chopin/QuestionGroup/QuestionGroup.mdx

@@ -1,149 +0,0 @@
-import { useContext, useEffect } from "react";
-import { Meta, ArgTypes, Canvas, Story } from "@storybook/blocks";
-import { ThemeProvider, ThemeContext } from "../../../contexts";
-import { QuestionGroup, QuestionGroupProps } from "./QuestionGroup";
-import { Question } from "../Question";
-import { Section } from "../Section";
-import { RadioButton, RadioGroup } from "../../Radio";
-import { excludeControls } from "../../../utils/excludeControls";
-import * as QuestionGroupStories from "./QuestionGroup.stories";
-
-export const breakpoints = [
-  { size: "xs", value: 320 },
-  { size: "sm", value: 480 },
-  { size: "md", value: 670 },
-  { size: "lg", value: 960 },
-  { size: "xl", value: 1200 },
-  { size: "xxl", value: 1320 },
-];
-
-<Meta of={QuestionGroupStories} />
-
-# QuestionGroup
-
-The `QuestionGroup` component is used for grouping a set of related `Question` components together
-
-## Install
-
-```bash
-yarn add @simplybusiness/mobius
-```
-
-## Usage
-
-```js
-import { Chopin } from "@simplybusiness/mobius";
-```
-
-## Normal
-
-<Story of={QuestionGroupStories.Normal} />
-
-{/* prettier-ignore */}
-```jsx
-import { Chopin, RadioGroup, RadioButton } from "@simplybusiness/mobius";
-
-<Chopin.QuestionGroup>
-  <Chopin.Question
-    label={
-      <>
-        <strong>Question label text in</strong> HTML
-      </>
-    }
-  >
-    <RadioGroup orientation="horizontal">
-      <RadioButton value="yes" label="Yes" />
-      <RadioButton value="no" label="No" />
-    </RadioGroup>
-  </Chopin.Question>
-  <Chopin.Question>...</Chopin.Question>
-</Chopin.QuestionGroup>
-```
-
-## Props
-
-<ArgTypes of={QuestionGroup} />
-
-## Component HTML Structure and Class names
-
-The following HTML is rendered for a QuestionGroup:
-
-```html
-<div class="chopin/QuestionGroup --is-desktop">
-  <header class="chopin/QuestionGroupHeader">
-    <label
-      for="question-group"
-      id="react-aria123"
-      class="mobius mobius/Label chopin/QuestionGroupLabel"
-      >Group label text</label
-    >
-    <div class="chopin/QuestionHelp --is-closed --is-desktop">
-      <button type="button" class="chopin/QuestionHelpTrigger">
-        <span>Open Help</span>
-      </button>
-      <div
-        class="chopin/QuestionHelpContent"
-        aria-atomic="true"
-        aria-live="polite"
-        role="tooltip"
-        aria-hidden="true"
-      >
-        <p>Group help text</p>
-      </div>
-    </div>
-  </header>
-  <ul class="chopin/QuestionGroupList">
-    <li class="chopin/QuestionGroupItem">
-      <div class="chopin/Question --is-desktop chopin/QuestionGroupQuestion">
-        <label
-          for="question"
-          id="react-aria456"
-          class="mobius mobius/Label chopin/QuestionLabel"
-          ><strong>Question label text in</strong> HTML</label
-        >
-        <div
-          aria-labelledby="react-aria456"
-          role="radiogroup"
-          aria-orientation="horizontal"
-          id="react-aria789"
-          class="mobius mobius/Flex mobius mobius/RadioGroup --is-horizontal"
-        >
-          <div class="mobius mobius/Flex mobius/RadioWrapper">
-            <label class="mobius mobius/RadioButtonLabel"
-              ><input
-                orientation="horizontal"
-                aria-label="Yes"
-                tabindex="0"
-                type="radio"
-                name="react-aria101112"
-                class="mobius/RadioInput"
-                value="yes"
-              />
-              <div class="mobius/RadioButtonContent">Yes</div></label
-            ><label class="mobius mobius/RadioButtonLabel"
-              ><input
-                orientation="horizontal"
-                aria-label="No"
-                tabindex="0"
-                type="radio"
-                name="react-aria101112"
-                class="mobius/RadioInput"
-                value="no"
-              />
-              <div class="mobius/RadioButtonContent">No</div></label
-            >
-          </div>
-        </div>
-      </div>
-    </li>
-  </ul>
-</div>
-```
-
-Class names are augmented with the following flags if true:
-
-- \--is-desktop
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Chopin/QuestionGroup) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Chopin/QuestionGroup/QuestionGroup.stories.tsx

@@ -1,187 +0,0 @@
-import type { Meta } from "@storybook/react";
-import { useContext, useEffect } from "react";
-import {
-  ThemeProvider,
-  ThemeContext,
-  BreakpointsType,
-} from "../../../contexts";
-import { QuestionGroup, QuestionGroupProps } from "./QuestionGroup";
-import { Question } from "../Question";
-import { Section } from "../Section";
-import { RadioButton, RadioGroup } from "../../Radio";
-import { excludeControls } from "../../../utils/excludeControls";
-
-const breakpoints = [
-  { size: "xs", value: 320 },
-  { size: "sm", value: 480 },
-  { size: "md", value: 670 },
-  { size: "lg", value: 960 },
-  { size: "xl", value: 1200 },
-  { size: "xxl", value: 1320 },
-] as BreakpointsType;
-
-export default {
-  title: "Chopin/QuestionGroup",
-  component: QuestionGroup,
-  argTypes: excludeControls("className", "elementType", "help", "onChange"),
-  decorators: [
-    Story => (
-      <ThemeProvider>
-        <Story />
-      </ThemeProvider>
-    ),
-  ],
-} satisfies Meta<typeof QuestionGroup>;
-
-export const Normal: Meta<typeof QuestionGroup> = {
-  render: (args: QuestionGroupProps) => {
-    // eslint-disable-next-line
-    const { setBreakpoints } = useContext(ThemeContext);
-
-    // eslint-disable-next-line
-    useEffect(() => {
-      setBreakpoints(breakpoints);
-    }, [setBreakpoints]);
-
-    return (
-      <Section title="About your Not For Profit organisation">
-        <QuestionGroup {...args}>
-          <Question
-            label={
-              <>
-                <strong>...do work</strong>in or on an offshore installation or
-                support vessel?
-              </>
-            }
-          >
-            <RadioGroup orientation="horizontal">
-              <RadioButton value="yes" label="Yes" />
-              <RadioButton value="no" label="No" />
-            </RadioGroup>
-          </Question>
-          <Question
-            label={
-              <>
-                <strong>...do work</strong>that involves travelling to or from
-                an offshore installation or support vessel?
-              </>
-            }
-          >
-            <RadioGroup orientation="horizontal">
-              <RadioButton value="yes" label="Yes" />
-              <RadioButton value="no" label="No" />
-            </RadioGroup>
-          </Question>
-          <Question
-            label={
-              <>
-                <strong>...do work</strong>in or on aircraft, hovercrafts,
-                airports, airfields, railways, watercraft (except where
-                they&lsquo;re hand propelled), docks, harbours, piers, wharves,
-                breakwaters or sea walls?
-              </>
-            }
-          >
-            <RadioGroup orientation="horizontal">
-              <RadioButton value="yes" label="Yes" />
-              <RadioButton value="no" label="No" />
-            </RadioGroup>
-          </Question>
-          <Question
-            label={
-              <>
-                <strong>...do work</strong>in or on towers, steeples (except for
-                bell ringing or guided tours), chimney shafts, blast furnaces,
-                dams, canals, viaducts, bridges or tunnels?
-              </>
-            }
-          >
-            <RadioGroup orientation="horizontal">
-              <RadioButton value="yes" label="Yes" />
-              <RadioButton value="no" label="No" />
-            </RadioGroup>
-          </Question>
-          <Question
-            label={
-              <>
-                <strong>...do work</strong>in or on collieries, mines, quarries,
-                chemical works, gas works, oil refineries, bulk storage
-                facilities for gas or oil, power stations, wind farms or nuclear
-                installations or plants?
-              </>
-            }
-          >
-            <RadioGroup orientation="horizontal">
-              <RadioButton value="yes" label="Yes" />
-              <RadioButton value="no" label="No" />
-            </RadioGroup>
-          </Question>
-          <Question
-            label={
-              <>
-                <strong>...do any</strong>activity away from your premises that
-                involves the use of heat?
-              </>
-            }
-            help={
-              <p>
-                This could include activities such as burning debris or garden
-                waste.
-              </p>
-            }
-          >
-            <RadioGroup orientation="horizontal">
-              <RadioButton value="yes" label="Yes" />
-              <RadioButton value="no" label="No" />
-            </RadioGroup>
-          </Question>
-          <Question
-            label={
-              <>
-                <strong>...handle</strong>asbestos, silica or other materials
-                containing either of those?
-              </>
-            }
-          >
-            <RadioGroup orientation="horizontal">
-              <RadioButton value="yes" label="Yes" />
-              <RadioButton value="no" label="No" />
-            </RadioGroup>
-          </Question>
-        </QuestionGroup>
-      </Section>
-    );
-  },
-  args: {
-    label: "Does your organisation...",
-    help: (
-      <>
-        <p>
-          It&lsquo;s important to answer the following questions as accurately
-          as possible to make sure you get the right level of cover for your
-          organisation.
-        </p>
-        <p>
-          <u>For the purposes of the following questions:</u>
-        </p>
-        <ul>
-          <li>
-            &lsquo;your organisation&lsquo; includes any subsidiary companies
-            included under this insurance
-          </li>
-          <li>
-            a &lsquo;senior manager&lsquo; is any person with responsibility for
-            arranging insurance or who plays a significant role in making
-            decisions about how activities are managed or organised
-            <p />
-          </li>
-        </ul>
-        <p>
-          You should answer these questions based on the knowledge of a senior
-          manager. Please either agree or disagree with the following
-          statements:
-        </p>
-      </>
-    ),
-  },
-};