@simplybusiness/mobius 3.0.0

package/src/components/Chopin/Testimonial/Testimonial.tsx

@@ -0,0 +1,38 @@
+import { Ref, forwardRef, RefAttributes, ReactNode } from "react";
+import { DOMProps } from "@react-types/shared";
+import clsx from "clsx";
+import { ForwardedRefComponent } from "../../../types/components";
+
+export type TestimonialElementType = HTMLElement;
+
+export interface TestimonialProps
+  extends DOMProps,
+    RefAttributes<TestimonialElementType> {
+  children: ReactNode;
+  /** Custom class name for setting specific CSS */
+  className?: string;
+  author: string;
+}
+
+export type TestimonialRef = Ref<TestimonialElementType>;
+
+const Testimonial: ForwardedRefComponent<
+  TestimonialProps,
+  TestimonialElementType
+> = forwardRef((props: TestimonialProps, ref: TestimonialRef) => {
+  const { author, className, children, ...otherProps } = props;
+
+  const classes = clsx("chopin", "chopin/Testimonial", className);
+
+  return (
+    <figure ref={ref} className={classes} {...otherProps}>
+      <blockquote className="chopin/TestimonialQuote">{children}</blockquote>
+      <figcaption>
+        <cite className="chopin/TestimonialAuthor">{author}</cite>
+      </figcaption>
+    </figure>
+  );
+});
+
+Testimonial.displayName = "Testimonial";
+export { Testimonial };

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

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

package/src/components/Chopin/TradeSelector/ComboBox/ComboBox.test.tsx

@@ -0,0 +1,85 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Section, Item } from "@react-stately/collections";
+import { ComboBox } from ".";
+
+const CONTAINER_CLASS_NAME = "chopin/ComboBoxInputContainer";
+const INPUT_CLASS_NAME = "chopin/ComboBoxInput";
+
+const LISTBOX_CLASS_NAME = "chopin/ListBoxSection";
+const LISTBOX_HEADING_CLASS_NAME = "chopin/ListBoxSectionHeading";
+const LISTBOX_LIST_CLASS_NAME = "chopin/ListBoxSectionList";
+const LISTBOX_OPTION_CLASS_NAME = "chopin/TradeSelectorOption";
+
+describe("ComboBox", () => {
+  it("should render without errors", async () => {
+    const sampleContent = "Sample text";
+
+    render(
+      <ComboBox label="Test">
+        <Item>{sampleContent}</Item>
+      </ComboBox>,
+    );
+
+    await userEvent.tab();
+
+    await userEvent.keyboard("[Alt][ArrowDown]");
+
+    expect(screen.getByText(sampleContent)).toBeInTheDocument();
+  });
+
+  it("should render with class names", () => {
+    render(
+      <ComboBox label="Test">
+        <Item>Sample text</Item>
+      </ComboBox>,
+    );
+
+    const input = screen.getByRole("combobox");
+
+    expect(input.parentElement).toHaveClass(CONTAINER_CLASS_NAME);
+    expect(input).toHaveClass(INPUT_CLASS_NAME);
+  });
+
+  // NOTE: testing ListBox in isolation, requires complicated state mocking.
+  // ComboBox uses ListBox and provides it with a generated state object.
+  describe("nested ListBox", () => {
+    it("should render with class names", async () => {
+      const firstSection = "First section";
+      const firstItem = "First item";
+      const secondSection = "Second section";
+      const secondItem = "Second item";
+      const EXPECTED_NUMBER_OF_SECTIONS = 2;
+      const EXPECTED_NUMBER_OF_GROUPS = 2;
+      const EXPECTED_NUMBER_OF_ITEMS = 2;
+
+      render(
+        <ComboBox label="Test">
+          <Section title={firstSection}>
+            <Item>{firstItem}</Item>
+          </Section>
+          <Section title={secondSection}>
+            <Item>{secondItem}</Item>
+          </Section>
+        </ComboBox>,
+      );
+
+      await userEvent.tab();
+
+      await userEvent.keyboard("[Alt][ArrowDown]");
+
+      const sections = screen.queryAllByRole("presentation");
+      const groups = screen.queryAllByRole("group");
+      const items = screen.queryAllByRole("option");
+      const heading = sections[0].firstChild;
+
+      expect(sections.length).toBe(EXPECTED_NUMBER_OF_SECTIONS);
+      expect(groups.length).toBe(EXPECTED_NUMBER_OF_GROUPS);
+      expect(items.length).toBe(EXPECTED_NUMBER_OF_ITEMS);
+      expect(sections[0]).toHaveClass(LISTBOX_CLASS_NAME);
+      expect(groups[0]).toHaveClass(LISTBOX_LIST_CLASS_NAME);
+      expect(items[0]).toHaveClass(LISTBOX_OPTION_CLASS_NAME);
+      expect(heading).toHaveClass(LISTBOX_HEADING_CLASS_NAME);
+    });
+  });
+});

package/src/components/Chopin/TradeSelector/ComboBox/ComboBox.tsx

@@ -0,0 +1,74 @@
+import { useRef } from "react";
+import type { ComboBoxProps } from "@react-types/combobox";
+import { AriaLabelingProps, DOMProps } from "@react-types/shared";
+import { useComboBoxState } from "@react-stately/combobox";
+import { useComboBox } from "@react-aria/combobox";
+import { useHover } from "@react-aria/interactions";
+import { useFocusRing } from "@react-aria/focus";
+import clsx from "clsx";
+import { ListBox } from "../ListBox";
+import { Popover } from "../Popover";
+
+export interface AllComboBoxProps<T extends object> extends ComboBoxProps<T> {
+  className?: string;
+  fieldProps?: AriaLabelingProps & DOMProps;
+  label?: string;
+}
+
+const ComboBox = <T extends object>(props: AllComboBoxProps<T>) => {
+  const { className, fieldProps, label } = props;
+  const state = useComboBoxState({ ...props });
+  const inputRef = useRef(null);
+  const listBoxRef = useRef(null);
+  const popoverRef = useRef(null);
+
+  const { inputProps, listBoxProps } = useComboBox(
+    {
+      ...props,
+      ...fieldProps,
+      inputRef,
+      listBoxRef,
+      popoverRef,
+    },
+    state,
+  );
+
+  const { close } = state;
+
+  const { isFocusVisible, focusProps } = useFocusRing({
+    within: true,
+  });
+  const { hoverProps, isHovered } = useHover({
+    ...props,
+  });
+
+  const classes = clsx(
+    "chopin",
+    "chopin/ComboBoxInput",
+    {
+      "--is-focused": isFocusVisible,
+      "--is-hovered": isHovered,
+    },
+    className,
+  );
+
+  return (
+    <div className="chopin/ComboBoxInputContainer" {...focusProps}>
+      <input
+        {...hoverProps}
+        {...inputProps}
+        {...fieldProps}
+        ref={inputRef}
+        className={classes}
+        aria-label={label}
+      />
+      {state.isOpen && (
+        <Popover popoverRef={popoverRef} isOpen={state.isOpen} onClose={close}>
+          <ListBox {...listBoxProps} listBoxRef={listBoxRef} state={state} />
+        </Popover>
+      )}
+    </div>
+  );
+};
+
+export { ComboBox };

package/src/components/Chopin/TradeSelector/ComboBox/index.tsx

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

package/src/components/Chopin/TradeSelector/ListBox/ListBox.tsx

@@ -0,0 +1,36 @@
+import { useRef, RefObject } from "react";
+import type { AriaListBoxOptions } from "@react-aria/listbox";
+import type { LoadingState } from "@react-types/shared";
+import type { ListState } from "@react-stately/list";
+import { useListBox } from "@react-aria/listbox";
+import { ListBoxSection } from "./ListBoxSection";
+import { Option } from "./Option";
+
+export interface ListBoxProps extends AriaListBoxOptions<unknown> {
+  listBoxRef?: RefObject<HTMLUListElement>;
+  state: ListState<unknown>;
+  loadingState?: LoadingState;
+  onLoadMore?: () => void;
+}
+
+export type ListBoxElementType = HTMLUListElement;
+
+const ListBox = (props: ListBoxProps) => {
+  const ref = useRef<ListBoxElementType>(null);
+  const { listBoxRef = ref, state } = props;
+  const { listBoxProps } = useListBox(props, state, listBoxRef);
+
+  return (
+    <ul {...listBoxProps} ref={listBoxRef} className="chopin/ListBox">
+      {[...state.collection].map(item =>
+        item.type === "section" ? (
+          <ListBoxSection key={item.key} section={item} state={state} />
+        ) : (
+          <Option key={item.key} item={item} state={state} />
+        ),
+      )}
+    </ul>
+  );
+};
+
+export { ListBox };

package/src/components/Chopin/TradeSelector/ListBox/ListBoxSection.tsx

@@ -0,0 +1,34 @@
+import { useListBoxSection } from "@react-aria/listbox";
+import type { ListState } from "@react-stately/list";
+import type { Node } from "@react-types/shared";
+
+import { Option } from "./Option";
+
+export interface SectionProps {
+  section: Node<unknown>;
+  state: ListState<unknown>;
+}
+
+const ListBoxSection = ({ section, state }: SectionProps) => {
+  const { itemProps, headingProps, groupProps } = useListBoxSection({
+    heading: section.rendered,
+    "aria-label": section["aria-label"],
+  });
+
+  return (
+    <li {...itemProps} className="chopin/ListBoxSection">
+      {section.rendered && (
+        <span {...headingProps} className="chopin/ListBoxSectionHeading">
+          {section.rendered}
+        </span>
+      )}
+      <ul {...groupProps} className="chopin/ListBoxSectionList">
+        {[...section.childNodes].map(node => (
+          <Option key={node.key} item={node} state={state} />
+        ))}
+      </ul>
+    </li>
+  );
+};
+
+export { ListBoxSection };

package/src/components/Chopin/TradeSelector/ListBox/Option.tsx

@@ -0,0 +1,35 @@
+import { useRef } from "react";
+import { Node } from "@react-types/shared";
+import { useOption } from "@react-aria/listbox";
+import clsx from "clsx";
+import type { ListState } from "@react-stately/list";
+
+export type OptionElementType = HTMLLIElement;
+
+export interface OptionProps {
+  item: Node<unknown>;
+  state: ListState<unknown>;
+}
+
+const Option = ({ item, state }: OptionProps) => {
+  const ref = useRef<OptionElementType>(null);
+  const { optionProps, isSelected, isFocused, isDisabled } = useOption(
+    { key: item.key },
+    state,
+    ref,
+  );
+
+  const classes = clsx("chopin/TradeSelectorOption", {
+    "--is-selected": isSelected,
+    "--is-focused": isFocused,
+    "--is-disabled": isDisabled,
+  });
+
+  return (
+    <li {...optionProps} ref={ref} className={classes}>
+      {item.rendered}
+    </li>
+  );
+};
+
+export { Option };

package/src/components/Chopin/TradeSelector/ListBox/index.tsx

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

package/src/components/Chopin/TradeSelector/Popover/Popover.test.tsx

@@ -0,0 +1,28 @@
+import { render, screen } from "@testing-library/react";
+import { Popover } from ".";
+
+const POPOVER_CLASS_NAME = "chopin/Popover";
+
+describe("Popover", () => {
+  it("should render without errors", () => {
+    render(
+      <Popover>
+        <li>Item</li>
+      </Popover>,
+    );
+
+    expect(screen.getByText("Item")).toBeInTheDocument();
+  });
+
+  it("should render with class names", () => {
+    render(
+      <Popover>
+        <li>Item</li>
+      </Popover>,
+    );
+
+    const innerContainer = screen.getByText("Item").parentElement;
+
+    expect(innerContainer).toHaveClass(POPOVER_CLASS_NAME);
+  });
+});

package/src/components/Chopin/TradeSelector/Popover/Popover.tsx

@@ -0,0 +1,42 @@
+import { useRef, RefObject, ReactNode } from "react";
+import { useOverlay, DismissButton } from "@react-aria/overlays";
+import { FocusScope } from "@react-aria/focus";
+
+export interface PopoverProps {
+  popoverRef?: RefObject<HTMLDivElement>;
+  children: ReactNode;
+  isOpen?: boolean;
+  onClose?: () => void;
+}
+
+export type PopoverElementType = HTMLDivElement;
+
+const Popover = (props: PopoverProps) => {
+  const ref = useRef<PopoverElementType>(null);
+  const { popoverRef = ref, isOpen, onClose, children } = props;
+
+  // Handle events that should cause the popup to close,
+  // e.g. blur, clicking outside, or pressing the escape key.
+  const { overlayProps } = useOverlay(
+    {
+      isOpen,
+      onClose,
+      shouldCloseOnBlur: true,
+      isDismissable: true,
+    },
+    popoverRef,
+  );
+
+  // Add a hidden <DismissButton> component at the end of the popover
+  // to allow screen reader users to dismiss the popup easily.
+  return (
+    <FocusScope restoreFocus>
+      <div {...overlayProps} ref={popoverRef} className="chopin/Popover">
+        {children}
+        <DismissButton onDismiss={onClose} />
+      </div>
+    </FocusScope>
+  );
+};
+
+export { Popover };

package/src/components/Chopin/TradeSelector/Popover/index.tsx

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

package/src/components/Chopin/TradeSelector/SearchResults/SearchResults.test.tsx

@@ -0,0 +1,154 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { SearchResults } from ".";
+import { exactResults, suggestedResults } from "../mockApiResults";
+
+const defaultLabels = {
+  input: "",
+  exact: "Exact matches",
+  suggested: "Suggested matches",
+  loading: "",
+  noResults: "View all trades",
+  description: "",
+  placeholder: "",
+};
+
+const mockedTrades = [
+  {
+    name: "exact",
+    title: defaultLabels.exact,
+    children: [...exactResults],
+  },
+  {
+    name: "suggested",
+    title: defaultLabels.suggested,
+    children: [...suggestedResults],
+  },
+];
+
+const fallbackUrl = "https://www.example.com/";
+
+describe("SearchResults", () => {
+  beforeAll(() => {
+    // Suppress the following warning
+    // If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility
+    jest.spyOn(console, "warn").mockImplementation(jest.fn());
+  });
+
+  describe("given items list contain no results item", () => {
+    it("displays no results label with fallback url", async () => {
+      const props = {
+        inputValue: "",
+        items: [
+          {
+            name: defaultLabels.noResults,
+            title: defaultLabels.noResults,
+            children: [],
+          },
+        ],
+        labels: {
+          ...defaultLabels,
+          noResults: defaultLabels.noResults,
+        },
+        fallbackUrl,
+        onInputChange: () => {},
+        onSelectionChange: () => {},
+      };
+
+      render(<SearchResults {...props} />);
+
+      await userEvent.tab();
+
+      await userEvent.keyboard("[Alt][ArrowDown]");
+
+      expect(screen.getByText(defaultLabels.noResults)).toHaveAttribute(
+        "href",
+        fallbackUrl,
+      );
+    });
+  });
+
+  describe("given a list of trades", () => {
+    it("displays the trades grouped by exact and suggested matches", async () => {
+      const props = {
+        inputValue: "",
+        items: mockedTrades,
+        labels: defaultLabels,
+        fallbackUrl: "https://www.example.com/",
+        onInputChange: () => {},
+        onSelectionChange: () => {},
+      };
+
+      const exactResultTrade = "Swimming pool installers";
+      const suggestedResultTrade = "Fitness instructor";
+
+      const { container } = render(<SearchResults {...props} />);
+
+      await userEvent.tab();
+
+      await userEvent.keyboard("[Alt][ArrowDown]");
+
+      expect(screen.getByText(defaultLabels.exact)).toBeInTheDocument();
+      expect(
+        container.querySelector(`[data-key='${exactResultTrade}']`),
+      ).toBeInTheDocument();
+      expect(screen.getByText(defaultLabels.suggested)).toBeInTheDocument();
+      expect(
+        container.querySelector(`[data-key='${suggestedResultTrade}']`),
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe("given input value changes", () => {
+    it("onInputChange prop is invoked", () => {
+      const onInputChangeHandler = jest.fn();
+
+      const props = {
+        inputValue: "",
+        items: mockedTrades,
+        labels: defaultLabels,
+        fallbackUrl: "https://www.example.com/",
+        onInputChange: onInputChangeHandler,
+        onSelectionChange: () => {},
+      };
+
+      render(<SearchResults {...props} />);
+
+      const input = screen.getByRole("combobox");
+
+      fireEvent.change(input, { target: { value: "New text" } });
+
+      expect(onInputChangeHandler).toHaveBeenCalled();
+    });
+  });
+
+  describe("given user selection value changes", () => {
+    it("onSelectionChange prop is invoked", async () => {
+      const onSelectionChangeHandler = jest.fn();
+
+      const props = {
+        inputValue: "",
+        items: mockedTrades,
+        labels: defaultLabels,
+        fallbackUrl: "https://www.example.com/",
+        onInputChange: () => {},
+        onSelectionChange: onSelectionChangeHandler,
+      };
+
+      const { container } = render(<SearchResults {...props} />);
+
+      await userEvent.tab();
+
+      await userEvent.keyboard("[Alt][ArrowDown]");
+
+      const option = container.querySelector(
+        `[data-key='Swimming pool installers']`,
+      );
+
+      fireEvent.click(option as Element);
+
+      expect(onSelectionChangeHandler).toHaveBeenCalled();
+    });
+  });
+});

package/src/components/Chopin/TradeSelector/SearchResults/SearchResults.tsx

@@ -0,0 +1,74 @@
+import { SetStateAction, Dispatch, Key } from "react";
+import { AriaLabelingProps, DOMProps } from "@react-types/shared";
+import { Item, Section } from "@react-stately/collections";
+import { ComboBox } from "../ComboBox";
+import type { TradeProps, LabelProps, GroupedTradeProps } from "..";
+
+export type SearchResultsProps = {
+  inputValue: string;
+  items: GroupedTradeProps[];
+  labels: LabelProps;
+  describedBy?: string;
+  fallbackUrl: string;
+  onInputChange: Dispatch<SetStateAction<string>>;
+  onSelectionChange: (value: Key) => void;
+  fieldProps?: AriaLabelingProps & DOMProps;
+  label?: string;
+};
+
+export const SearchResults = ({
+  inputValue,
+  items,
+  labels,
+  fieldProps,
+  describedBy,
+  fallbackUrl,
+  onInputChange,
+  onSelectionChange,
+  label,
+}: SearchResultsProps) => (
+  <ComboBox
+    inputValue={inputValue}
+    onInputChange={onInputChange}
+    disabledKeys={[labels.noResults as string]}
+    items={items}
+    onSelectionChange={onSelectionChange}
+    aria-describedby={describedBy}
+    fieldProps={fieldProps}
+    label={label}
+    placeholder={labels.placeholder}
+  >
+    {section => {
+      const { name, title, children: sectionChildren } = section;
+      const noResults = items.find(item => item.name === labels.noResults);
+
+      if (noResults) {
+        return (
+          <Item key={labels.noResults} textValue={labels.noResults}>
+            <a href={fallbackUrl} className="chopin/ListBoxSectionHeadingLink">
+              {labels.noResults}
+            </a>
+          </Item>
+        );
+      }
+
+      return (
+        <Section key={name} items={sectionChildren} title={title}>
+          {item => {
+            const { value, label: itemLabel } = item as TradeProps;
+
+            return (
+              <Item key={value} textValue={value}>
+                <span
+                  className="chopin/TradeSelectorOptionContent"
+                  // eslint-disable-next-line react/no-danger
+                  dangerouslySetInnerHTML={{ __html: itemLabel }}
+                />
+              </Item>
+            );
+          }}
+        </Section>
+      );
+    }}
+  </ComboBox>
+);

package/src/components/Chopin/TradeSelector/SearchResults/index.tsx

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

package/src/components/Chopin/TradeSelector/SelectedTrade/SelectedTrade.test.tsx

@@ -0,0 +1,24 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { SelectedTrade } from ".";
+
+describe("SelectedTrade", () => {
+  it("renders without errors", () => {
+    const trade = "Plumber";
+    const clickHandler = jest.fn();
+
+    const { container } = render(
+      <SelectedTrade trade={trade} onClick={clickHandler} />,
+    );
+
+    const textElement = container.querySelector("p");
+    const button = screen.getByText("Change");
+
+    expect(textElement).toHaveTextContent(
+      `You have selected ‘${trade}’ as your trade/profession.`,
+    );
+
+    fireEvent.click(button);
+
+    expect(clickHandler).toHaveBeenCalled();
+  });
+});

package/src/components/Chopin/TradeSelector/SelectedTrade/SelectedTrade.tsx

@@ -0,0 +1,20 @@
+import { Text } from "../../../Text";
+
+export type SelectedTradeProps = {
+  trade: string;
+  onClick: () => void;
+};
+
+export const SelectedTrade = ({ trade, onClick }: SelectedTradeProps) => (
+  <Text>
+    You have selected ‘<strong>{trade}</strong>’ as your trade/profession.{" "}
+    <button
+      type="button"
+      className="mobius/Link chopin/TradeSelectorButton"
+      aria-label="Change your selected profession"
+      onClick={onClick}
+    >
+      Change
+    </button>
+  </Text>
+);

package/src/components/Chopin/TradeSelector/SelectedTrade/index.tsx

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