@simplybusiness/mobius 3.10.0 → 3.11.0

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

@@ -1,94 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { QuestionGroup } from ".";
-
-const CONTAINER_CLASS_NAME = "chopin/QuestionGroup";
-const HEADER_CLASS_NAME = "chopin/QuestionGroupHeader";
-const LABEL_CLASS_NAME = "chopin/QuestionGroupLabel";
-const LIST_CLASS_NAME = "chopin/QuestionGroupList";
-const LIST_ITEM_CLASS_NAME = "chopin/QuestionGroupItem";
-const QUESTION_CLASS_NAME = "chopin/QuestionGroupQuestion";
-
-describe("QuestionGroup", () => {
-  it("should render without errors", () => {
-    render(
-      <QuestionGroup>
-        <p>Sample question</p>
-      </QuestionGroup>,
-    );
-
-    expect(screen.getByText("Sample question")).toBeInTheDocument();
-  });
-
-  describe("given elementType", () => {
-    it("is not applied as element attribute", () => {
-      const { container } = render(
-        <QuestionGroup elementType="ul">
-          <p>Sample question</p>
-        </QuestionGroup>,
-      );
-      expect(container.firstChild).not.toHaveAttribute("elementtype", "ul");
-    });
-  });
-
-  it("uses the right class names", () => {
-    const { container } = render(
-      <QuestionGroup label="Sample label">
-        <p>Sample question</p>
-      </QuestionGroup>,
-    );
-
-    const header = screen.getByRole("banner");
-    const label = screen.getByText("Sample label");
-    const list = screen.getByRole("list");
-    const listItem = screen.getByRole("listitem");
-    const question = screen.getByText("Sample question");
-
-    expect(container.firstChild).toHaveClass(CONTAINER_CLASS_NAME);
-    expect(header).toHaveClass(HEADER_CLASS_NAME);
-    expect(label).toHaveClass(LABEL_CLASS_NAME);
-    expect(list).toHaveClass(LIST_CLASS_NAME);
-    expect(listItem).toHaveClass(LIST_ITEM_CLASS_NAME);
-    expect(question).toHaveClass(QUESTION_CLASS_NAME);
-  });
-
-  describe("Help", () => {
-    it("should be mouse accessible", async () => {
-      render(
-        <QuestionGroup label="Question" help="This is a help message">
-          <p>Sample question</p>
-        </QuestionGroup>,
-      );
-      await userEvent.click(screen.getByRole("button", { name: "Open Help" }));
-      expect(screen.queryByRole("tooltip")).toBeInTheDocument();
-      await userEvent.click(screen.getByRole("button", { name: "Close Help" }));
-      expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
-    });
-
-    it("should be keyboard accessible", async () => {
-      render(
-        <QuestionGroup label="Question" help="This is a help message">
-          <p>Sample question</p>
-        </QuestionGroup>,
-      );
-      await userEvent.tab();
-      await userEvent.keyboard("{enter}");
-      expect(screen.queryByRole("tooltip")).toBeInTheDocument();
-      await userEvent.keyboard("{enter}");
-      expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
-    });
-
-    it("should close on escape key", async () => {
-      render(
-        <QuestionGroup label="Question" help="This is a help message">
-          <p>Sample question</p>
-        </QuestionGroup>,
-      );
-      await userEvent.tab();
-      await userEvent.keyboard("{enter}");
-      expect(screen.queryByRole("tooltip")).toBeInTheDocument();
-      await userEvent.keyboard("{escape}");
-      expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
-    });
-  });
-});

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

@@ -1,112 +0,0 @@
-"use client";
-
-import {
-  Ref,
-  forwardRef,
-  RefAttributes,
-  ReactNode,
-  Children,
-  isValidElement,
-  cloneElement,
-  useState,
-  useCallback,
-} from "react";
-import { DOMProps } from "@react-types/shared";
-import { useId } from "@react-aria/utils";
-import clsx from "clsx";
-import { useBreakpoint } from "../../../hooks";
-import { QuestionHelp } from "../QuestionHelp/QuestionHelp";
-import { Label } from "../../Label";
-import { ForwardedRefComponent } from "../../../types/components";
-
-export type QuestionGroupElementType = HTMLDivElement;
-
-export interface QuestionGroupProps
-  extends DOMProps,
-    RefAttributes<QuestionGroupElementType> {
-  children?: ReactNode;
-  /** Custom class name for setting specific CSS */
-  className?: string;
-  elementType?: string | React.ElementType;
-  label?: string;
-  help?: ReactNode;
-  onChange?: (state: boolean) => void;
-}
-
-export type QuestionGroupRef = Ref<QuestionGroupElementType>;
-
-const QuestionGroup: ForwardedRefComponent<
-  QuestionGroupProps,
-  QuestionGroupElementType
-> = forwardRef((props: QuestionGroupProps, ref: QuestionGroupRef) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const {
-    elementType: Element = "div",
-    label,
-    children,
-    help,
-    onChange,
-    ...otherProps
-  } = props;
-  const labelId = useId();
-  const { up } = useBreakpoint();
-  const isDesktop = up("md");
-
-  const handleChange = useCallback(
-    (state: boolean) => {
-      setIsOpen(state);
-
-      if (onChange) {
-        onChange(state);
-      }
-    },
-    [onChange],
-  );
-
-  const classes = clsx(
-    "chopin/QuestionGroup",
-    isDesktop ? "--is-desktop" : "",
-    otherProps.className,
-  );
-
-  return (
-    <Element ref={ref} {...otherProps} className={classes}>
-      <header className="chopin/QuestionGroupHeader">
-        <Label
-          htmlFor="question-group"
-          id={labelId}
-          className="chopin/QuestionGroupLabel"
-        >
-          {label}
-        </Label>
-        {help && (
-          <QuestionHelp
-            onChange={handleChange}
-            isDesktop={isDesktop}
-            isOpen={isOpen}
-          >
-            {help}
-          </QuestionHelp>
-        )}
-      </header>
-      <ul className="chopin/QuestionGroupList">
-        {Children.map(children, child => {
-          if (isValidElement(child)) {
-            return (
-              <li className="chopin/QuestionGroupItem">
-                {cloneElement(child, {
-                  className: "chopin/QuestionGroupQuestion",
-                } as any)}
-              </li>
-            );
-          }
-
-          return child;
-        })}
-      </ul>
-    </Element>
-  );
-});
-
-QuestionGroup.displayName = "QuestionGroup";
-export { QuestionGroup };

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

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

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

@@ -1,61 +0,0 @@
-import { render, screen, fireEvent } from "@testing-library/react";
-import { QuestionHelp } from ".";
-
-describe("QuestionHelp", () => {
-  it("should render without errors", () => {
-    const content = "Sample text";
-
-    render(<QuestionHelp>{content}</QuestionHelp>);
-
-    expect(screen.getByText(content)).toBeInTheDocument();
-  });
-
-  it("should render with open", () => {
-    render(<QuestionHelp isOpen>Sample text</QuestionHelp>);
-
-    const openedLabel = "Close Help";
-
-    expect(screen.getByText(openedLabel)).toBeInTheDocument();
-  });
-
-  it("should render with close label", () => {
-    render(<QuestionHelp>Sample text</QuestionHelp>);
-
-    const closedLabel = "Open Help";
-
-    expect(screen.getByText(closedLabel)).toBeInTheDocument();
-  });
-
-  describe("when toggled", () => {
-    it("should call onChange", () => {
-      const onChange = jest.fn();
-
-      render(<QuestionHelp onChange={onChange}>Sample text</QuestionHelp>);
-
-      const toggle = screen.getByRole("button");
-
-      fireEvent.click(toggle);
-
-      expect(onChange).toHaveBeenCalled();
-    });
-  });
-
-  describe("on escape key press", () => {
-    it("should call onChange", () => {
-      const onChange = jest.fn();
-
-      render(
-        <QuestionHelp isOpen onChange={onChange}>
-          Sample text
-        </QuestionHelp>,
-      );
-
-      fireEvent.keyDown(document.activeElement!, {
-        key: "Escape",
-        code: "Escape",
-      });
-
-      expect(onChange).toHaveBeenCalled();
-    });
-  });
-});

package/src/components/Chopin/QuestionHelp/QuestionHelp.tsx

@@ -1,77 +0,0 @@
-"use client";
-
-import { useFocusRing } from "@react-aria/focus";
-import clsx from "clsx";
-import { ReactNode, useRef } from "react";
-import { useOnClickOutside } from "../../../hooks/useOnClickOutside";
-import { useWindowEvent } from "../../../hooks/useWindowEvent";
-
-export interface QuestionHelpProps {
-  closedLabel?: string;
-  openedLabel?: string;
-  children: ReactNode;
-  onChange?: (state: boolean) => void;
-  isDesktop?: boolean;
-  closeHelpOnOutsideClick?: boolean;
-  isOpen?: boolean;
-}
-
-export function QuestionHelp({
-  openedLabel = "Close Help",
-  closedLabel = "Open Help",
-  children,
-  onChange = () => {},
-  isDesktop,
-  closeHelpOnOutsideClick = false,
-  isOpen = false,
-}: QuestionHelpProps) {
-  const ref = useRef<HTMLDivElement>(null);
-  const { focusProps, isFocusVisible } = useFocusRing({});
-
-  useWindowEvent("keydown", e => {
-    if (isOpen && e.key === "Escape") {
-      onChange(false);
-    }
-  });
-
-  useOnClickOutside(ref, () => {
-    if (closeHelpOnOutsideClick) {
-      onChange(false);
-    }
-  });
-
-  const className = clsx(
-    "chopin/QuestionHelp",
-    {
-      "--is-open": isOpen,
-      "--is-closed": !isOpen,
-    },
-    isDesktop ? "--is-desktop" : "",
-  );
-
-  const triggerClassName = clsx("chopin/QuestionHelpTrigger", {
-    "--is-focused": isFocusVisible,
-  });
-
-  return (
-    <div className={className} ref={ref}>
-      <button
-        type="button"
-        onClick={() => onChange(!isOpen)}
-        className={triggerClassName}
-        {...focusProps}
-      >
-        <span>{isOpen ? openedLabel : closedLabel}</span>
-      </button>
-      <div
-        className="chopin/QuestionHelpContent"
-        aria-atomic="true"
-        aria-live="polite"
-        role="tooltip"
-        aria-hidden={!isOpen}
-      >
-        {children}
-      </div>
-    </div>
-  );
-}

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

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

package/src/components/Chopin/README.md

@@ -1,3 +0,0 @@
-# Temporary location
-
-These components will be moved once we have a Chopin Storybook.

package/src/components/Chopin/Section/Section.mdx

@@ -1,57 +0,0 @@
-import { Meta, ArgTypes, Canvas, Story } from "@storybook/blocks";
-import { Text } from "../../Text";
-import { Section, SectionProps } from "./Section";
-import { excludeControls } from "../../../utils/excludeControls";
-import * as SectionStories from "./Section.stories";
-
-<Meta of={SectionStories} />
-
-# Section
-
-The `Section` component is used for grouping a set of related elements together. An example may be a `Section` for contact details as part of a long form.
-
-## Install
-
-```bash
-yarn add @simplybusiness/mobius
-```
-
-## Usage
-
-```js
-import { Chopin } from "@simplybusiness/mobius";
-```
-
-## Normal
-
-<Story of={SectionStories.Normal} />
-
-{/* prettier-ignore */}
-```jsx
-import { Chopin, Text } from "@simplybusiness/mobius";
-
-<Chopin.Section title="Section title">
-  <Text>
-    Vestibulum luctus diam a accumsan consequat. Fusce odio orci, iaculis sed nibh id, pellentesque consequat mauris. Quisque eget erat eu quam varius ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam dignissim sapien massa, vitae fringilla ligula volutpat at. Nulla facilisi. Quisque ultricies iaculis est, in tempor ligula fermentum sed. Nullam dapibus et ligula eget hendrerit. Integer porttitor vestibulum augue id ornare. Cras pretium sapien interdum ornare aliquet.
-  </Text>
-</Chopin.Section>
-```
-
-## Props
-
-<ArgTypes of={Section} />
-
-## Component HTML Structure and Class names
-
-The following HTML is rendered for a Section:
-
-```html
-<div class="mobius mobius/Section">
-  <h2 class="mobius/SectionTitle">{title}</h2>
-  {children}
-</div>
-```
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Chopin/Section) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

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

@@ -1,30 +0,0 @@
-import type { Meta } from "@storybook/react";
-import { Text } from "../../Text";
-import { Section, SectionProps } from "./Section";
-import { excludeControls } from "../../../utils/excludeControls";
-
-export default {
-  title: "Chopin/Section",
-  component: Section,
-  argTypes: excludeControls("className", "elementType"),
-};
-
-export const Normal: Meta<typeof Section> = {
-  render: (args: SectionProps) => (
-    <Section {...args}>
-      <Text>
-        Vestibulum luctus diam a accumsan consequat. Fusce odio orci, iaculis
-        sed nibh id, pellentesque consequat mauris. Quisque eget erat eu quam
-        varius ullamcorper. Class aptent taciti sociosqu ad litora torquent per
-        conubia nostra, per inceptos himenaeos. Nam dignissim sapien massa,
-        vitae fringilla ligula volutpat at. Nulla facilisi. Quisque ultricies
-        iaculis est, in tempor ligula fermentum sed. Nullam dapibus et ligula
-        eget hendrerit. Integer porttitor vestibulum augue id ornare. Cras
-        pretium sapien interdum ornare aliquet.
-      </Text>
-    </Section>
-  ),
-  args: {
-    title: "Section title",
-  },
-};

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

@@ -1,44 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { Section } from ".";
-
-describe("Section", () => {
-  it("should render without errors", () => {
-    const title = "Sample title";
-    const content = "Sample text";
-
-    const { container } = render(<Section title={title}>{content}</Section>);
-
-    expect(screen.getByText(title)).toBeInTheDocument();
-    expect(container.getElementsByTagName("h2").length).toBe(1);
-    expect(screen.getByText(content)).toBeInTheDocument();
-  });
-
-  describe("given elementType", () => {
-    it("is not applied as element attribute", () => {
-      const { container } = render(
-        <Section elementType="ul">Sample text</Section>,
-      );
-      expect(container.firstChild).not.toHaveAttribute("elementtype", "ul");
-    });
-  });
-
-  describe("when title is not provided", () => {
-    it("should only render child elements", () => {
-      const content = "Sample text";
-
-      const { container } = render(<Section>{content}</Section>);
-
-      expect(container.getElementsByTagName("h2").length).toBe(0);
-      expect(screen.getByText(content)).toBeInTheDocument();
-    });
-  });
-
-  describe("when no content is provided", () => {
-    it("should only render the container", () => {
-      const { container } = render(<Section />);
-
-      expect(container.getElementsByTagName("h2").length).toBe(0);
-      expect(container.firstChild).toBeEmptyDOMElement();
-    });
-  });
-});

package/src/components/Chopin/Section/Section.tsx

@@ -1,40 +0,0 @@
-import { Ref, forwardRef, RefAttributes, ReactNode } from "react";
-import { DOMProps } from "@react-types/shared";
-import clsx from "clsx";
-import { ForwardedRefComponent } from "../../../types/components";
-
-export type SectionElementType = HTMLDivElement;
-
-export interface SectionProps
-  extends DOMProps,
-    RefAttributes<SectionElementType> {
-  children?: ReactNode;
-  /** Custom class name for setting specific CSS */
-  className?: string;
-  elementType?: string | React.ElementType;
-  title?: string;
-}
-
-export type SectionRef = Ref<SectionElementType>;
-
-const Section: ForwardedRefComponent<SectionProps, SectionElementType> =
-  forwardRef((props: SectionProps, ref: SectionRef) => {
-    const {
-      elementType: Element = "div",
-      title,
-      children,
-      ...otherProps
-    } = props;
-
-    const classes = clsx("chopin", "chopin/Section", otherProps.className);
-
-    return (
-      <Element ref={ref} {...otherProps} className={classes}>
-        {title && <h2 className="chopin/SectionTitle">{title}</h2>}
-        {children}
-      </Element>
-    );
-  });
-
-Section.displayName = "Section";
-export { Section };

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

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

package/src/components/Chopin/Steps/StepItem.tsx

@@ -1,89 +0,0 @@
-import {
-  Ref,
-  forwardRef,
-  RefAttributes,
-  ReactNode,
-  ComponentProps,
-} from "react";
-import { DOMProps } from "@react-types/shared";
-import clsx from "clsx";
-import { tick } from "@simplybusiness/icons";
-import { Link } from "react-router-dom";
-import { ForwardedRefComponent } from "../../../types/components";
-import { Icon } from "../../Icon";
-
-export type StepItemElementType = HTMLLIElement;
-
-export interface StepItemProps
-  extends DOMProps,
-    RefAttributes<StepItemElementType> {
-  children?: ReactNode;
-  /** Custom class name for setting specific CSS */
-  className?: string;
-  elementType?: React.ElementType;
-  linkElementType?: React.ElementType;
-  name: string;
-  index?: number;
-  active?: boolean;
-  url?: string;
-  completed?: boolean;
-  to?: ComponentProps<typeof Link>["to"];
-}
-
-export type StepItemRef = Ref<StepItemElementType>;
-
-const StepItem: ForwardedRefComponent<StepItemProps, StepItemElementType> =
-  forwardRef((props: StepItemProps, ref: StepItemRef) => {
-    const {
-      elementType: Element = "li",
-      linkElementType: LinkElement = "a",
-      completed,
-      url,
-      to,
-      name,
-      active,
-      index,
-      ...otherProps
-    } = props;
-
-    const classes = clsx(
-      "chopin",
-      "chopin/StepItem",
-      {
-        "--is-active": active,
-        "--is-completed": completed,
-        "--is-unstarted": !completed && !active,
-      },
-      otherProps.className,
-    );
-    const nameClasses = clsx("chopin", "chopin/StepName");
-    const linkClasses = clsx("chopin", "chopin/StepLink");
-    const iconClasses = clsx("chopin", "chopin/StepIcon");
-    const ariaLabel = `Step ${index}${name ? `, ${name}` : ""}${
-      completed ? ", Complete" : ""
-    }`;
-
-    return (
-      <Element
-        ref={ref}
-        aria-label={ariaLabel}
-        aria-current={active ? "step" : undefined}
-        {...otherProps}
-        className={classes}
-      >
-        {completed ? (
-          <LinkElement className={linkClasses} href={url} to={to}>
-            <span className={iconClasses}>
-              <Icon icon={tick} />
-            </span>
-            <span className={nameClasses}>{name}</span>
-          </LinkElement>
-        ) : (
-          <span className={nameClasses}>{name}</span>
-        )}
-      </Element>
-    );
-  });
-
-StepItem.displayName = "StepItem";
-export { StepItem };