@simplybusiness/mobius 3.9.4 → 3.11.0

package/src/components/Chopin/TradeSelector/Listing/ListingItem.test.tsx

@@ -1,54 +0,0 @@
-import { fireEvent, render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { mockTrade } from "../mockApiResults";
-import { ListingItem } from "./ListingItem";
-
-describe("ListingItem", () => {
-  it("renders trade", () => {
-    const onClick = jest.fn();
-    const { container } = render(
-      <ListingItem trade={mockTrade} onClick={onClick} selected={false} />,
-    );
-
-    const button = container.querySelector("button");
-
-    expect(button).toHaveAttribute("data-key", "Landlord");
-    expect(button).toHaveTextContent("Landlord");
-  });
-
-  it("sets classes for interaction states", async () => {
-    const onClick = jest.fn();
-    const { container } = render(
-      <ListingItem trade={mockTrade} onClick={onClick} selected={false} />,
-    );
-
-    const button = container.querySelector("button");
-
-    fireEvent.mouseEnter(button!);
-    expect(button).toHaveClass("--is-hovered");
-
-    await userEvent.tab();
-    expect(button).toHaveClass("--is-focused");
-  });
-
-  it("sets interaction class when selected prop is true", () => {
-    const onClick = jest.fn();
-    const { container } = render(
-      <ListingItem trade={mockTrade} onClick={onClick} selected />,
-    );
-
-    const button = container.querySelector("button");
-    expect(button).toHaveClass("--is-focused");
-  });
-
-  it("calls onClick", () => {
-    const onClick = jest.fn();
-    const { container } = render(
-      <ListingItem trade={mockTrade} onClick={onClick} selected={false} />,
-    );
-
-    const button = container.querySelector("button");
-    fireEvent.click(button!);
-    expect(onClick).toHaveBeenCalled();
-  });
-});

package/src/components/Chopin/TradeSelector/Listing/ListingItem.tsx

@@ -1,52 +0,0 @@
-"use client";
-
-import { useFocusRing } from "@react-aria/focus";
-import { useHover } from "@react-aria/interactions";
-import clsx from "clsx";
-import { Ref, Key, forwardRef } from "react";
-import { TradeProps } from "../types";
-
-export type ListingItemElementType = HTMLButtonElement;
-
-export type ListingItemProps = {
-  key?: Key;
-  trade: TradeProps;
-  onClick: (trade: TradeProps) => void;
-  selected: boolean;
-};
-
-export const ListingItem = forwardRef(
-  (props: ListingItemProps, ref: Ref<ListingItemElementType>) => {
-    const { trade, selected, onClick } = props;
-    const { isFocusVisible, focusProps } = useFocusRing({
-      within: false,
-    });
-    const { hoverProps, isHovered } = useHover({});
-    const classes = clsx(
-      "chopin/TradeSelectorButton",
-      "chopin/TradeSelectorOption",
-      {
-        "--is-focused": isFocusVisible || selected,
-        "--is-hovered": isHovered,
-      },
-    );
-
-    const handleClick = () => onClick(trade);
-
-    return (
-      <li className="chopin/TradeSelectorListItem">
-        <button
-          ref={ref}
-          type="button"
-          onClick={handleClick}
-          // eslint-disable-next-line react/no-danger
-          dangerouslySetInnerHTML={{ __html: trade.label }}
-          className={classes}
-          data-key={trade.value}
-          {...hoverProps}
-          {...focusProps}
-        />
-      </li>
-    );
-  },
-);

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

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

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

@@ -1,114 +0,0 @@
-import React, { useRef } from "react";
-import { fireEvent, render, screen } from "@testing-library/react";
-import { jestHTMLDialogPolyfill } from "../jestHTMLDialogPolyfill";
-import { SearchResults, SearchResultsProps } from "./SearchResults";
-import { mockTrade } from "../mockApiResults";
-import { getConfig } from "../config";
-
-jestHTMLDialogPolyfill();
-
-jest.mock("react", () => ({
-  ...jest.requireActual<typeof React>("react"),
-  useRef: jest.fn(),
-}));
-
-jest.mock("@react-aria/focus", () => ({
-  useFocusRing: () => ({
-    isFocusVisible: () => {},
-    focusProps: () => {},
-  }),
-}));
-
-jest.mock("@react-aria/interactions", () => ({
-  useHover: () => ({
-    hoverProps: () => {},
-    isHovered: () => {},
-  }),
-}));
-
-const SearchResultsComponent = (props: Partial<SearchResultsProps>) => {
-  const { defaultLabels } = getConfig();
-
-  const defaultProps = {
-    isOpen: true,
-    inputRef: useRef(null),
-    results: [mockTrade],
-    fallbackUrl: "https://www.example.com",
-    labels: {
-      ...defaultLabels,
-    },
-    isLoading: false,
-    onClick: jest.fn(),
-    onClose: jest.fn(),
-  };
-
-  return <SearchResults {...defaultProps} {...props} />;
-};
-
-describe("SearchResults", () => {
-  beforeEach(() => {
-    jest.spyOn(React, "useRef").mockReturnValue({
-      current: [],
-    });
-  });
-
-  const loadingText = "Loading...";
-  const tradeText = "Landlord";
-  const noResultsText = "View all trades";
-
-  it("renders loading state", () => {
-    render(<SearchResultsComponent isLoading />);
-
-    const loading = screen.queryByText(loadingText);
-    const trade = screen.queryByText(tradeText);
-    const noResultsLink = screen.queryByText(noResultsText);
-
-    expect(loading).toBeInTheDocument();
-    expect(noResultsLink).not.toBeInTheDocument();
-    expect(trade).not.toBeInTheDocument();
-  });
-
-  it("renders no results state", () => {
-    render(<SearchResultsComponent results={[]} />);
-
-    const loading = screen.queryByText(loadingText);
-    const trade = screen.queryByText(tradeText);
-    const noResultsLink = screen.queryByText(noResultsText);
-
-    expect(loading).not.toBeInTheDocument();
-    expect(noResultsLink).toBeInTheDocument();
-    expect(trade).not.toBeInTheDocument();
-  });
-
-  it("renders trades list", () => {
-    render(<SearchResultsComponent />);
-
-    const loading = screen.queryByText(loadingText);
-    const trade = screen.queryByText(tradeText);
-    const noResultsLink = screen.queryByText(noResultsText);
-
-    expect(loading).not.toBeInTheDocument();
-    expect(noResultsLink).not.toBeInTheDocument();
-    expect(trade).toBeInTheDocument();
-  });
-
-  describe("pressing Enter key", () => {
-    it("selects the first trade from the list", () => {
-      const onClick = jest.fn();
-
-      const { container } = render(
-        <SearchResultsComponent onClick={onClick} />,
-      );
-
-      const button = container.querySelector("button");
-      expect(button).toHaveClass("--is-focused");
-
-      fireEvent.keyDown(container, {
-        key: "Enter",
-        code: "Enter",
-      });
-
-      expect(onClick).toHaveBeenCalled();
-    });
-  });
-});

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

@@ -1,179 +0,0 @@
-"use client";
-
-import { RefObject, useCallback, useEffect, useRef, useState } from "react";
-import clsx from "clsx";
-import { Listing } from "../Listing";
-import type { DialogRef, LabelProps, TradeProps } from "../types";
-import { useOnClickOutside } from "../../../../hooks/useOnClickOutside";
-
-export type SearchResultsProps = {
-  isOpen: boolean;
-  inputRef: RefObject<HTMLInputElement>;
-  results: TradeProps[] | null;
-  fallbackUrl: string;
-  labels: LabelProps;
-  className?: string;
-  isLoading: boolean;
-  describedBy?: string;
-  onClick: (trade: TradeProps) => void;
-  onClose: () => void;
-};
-
-export const SearchResults = (props: SearchResultsProps) => {
-  const {
-    isOpen,
-    labels,
-    className,
-    results,
-    isLoading,
-    fallbackUrl,
-    describedBy,
-    inputRef,
-    onClick,
-    onClose,
-  } = props;
-  const dialogRef = useRef<DialogRef>(null);
-  const resultRefs = useRef<HTMLButtonElement[]>([]);
-  const [focusId, setFocusId] = useState<number>(0);
-  const classes = clsx(
-    "chopin/TradeSelectorResults",
-    {
-      "--is-open": isOpen,
-    },
-    className,
-  );
-
-  const closeSearchResults = useCallback(() => {
-    setFocusId(0);
-    onClose();
-
-    if (dialogRef.current) {
-      dialogRef.current.close();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useOnClickOutside(dialogRef, () => {
-    if (dialogRef.current && dialogRef.current.open) {
-      closeSearchResults();
-    }
-  });
-
-  const handleTradeClick = useCallback(
-    (trade: TradeProps) => {
-      closeSearchResults();
-      onClick(trade);
-    },
-    [closeSearchResults, onClick],
-  );
-
-  const handleKeyDown = useCallback(
-    (event: KeyboardEvent) => {
-      if (!dialogRef.current?.open || !results) return;
-
-      if (event.code === "ArrowDown") {
-        if (focusId === results.length - 1) {
-          setFocusId(0);
-          return;
-        }
-
-        setFocusId(focusId + 1);
-      }
-
-      if (event.code === "ArrowUp") {
-        if (focusId === 0) {
-          setFocusId(results.length - 1);
-          return;
-        }
-
-        setFocusId(focusId - 1);
-      }
-
-      if (event.code === "Escape") {
-        closeSearchResults();
-      }
-
-      if (event.code === "Enter") {
-        if (focusId === 0 && results) {
-          const [firstTrade] = results;
-          handleTradeClick(firstTrade);
-        }
-      }
-    },
-    [focusId, closeSearchResults, results, handleTradeClick],
-  );
-
-  useEffect(() => {
-    if (dialogRef.current?.open && resultRefs.current[focusId]) {
-      resultRefs.current[focusId].focus();
-    }
-  }, [focusId]);
-
-  useEffect(() => {
-    window.addEventListener("keydown", handleKeyDown);
-
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [handleKeyDown]);
-
-  useEffect(() => {
-    if (dialogRef.current && isOpen) {
-      if (!dialogRef.current.open && inputRef.current) {
-        dialogRef.current.show();
-        // Return focus from <dialog> back to <input>
-        inputRef.current.focus();
-      }
-    }
-  }, [isOpen, inputRef]);
-
-  if (!isOpen) return null;
-
-  const searchResponseExact = results
-    ? results.filter((result: TradeProps) => result.type === "exact")
-    : [];
-
-  const searchResponseSuggested = results
-    ? results.filter((result: TradeProps) => result.type === "suggested")
-    : [];
-
-  const noResults = results?.length === 0;
-
-  return (
-    <dialog className={classes} ref={dialogRef} aria-describedby={describedBy}>
-      {isLoading ? (
-        <header className="chopin/TradeSelectorListTitle">
-          {labels.loading}
-        </header>
-      ) : noResults ? (
-        <header className="chopin/TradeSelectorListTitle">
-          <a href={fallbackUrl} className="chopin/TradeSelectorListTitleLink">
-            {labels.noResults}
-          </a>
-        </header>
-      ) : (
-        <>
-          {searchResponseExact.length > 0 && (
-            <Listing
-              title={labels.exact}
-              trades={searchResponseExact}
-              resultRefs={resultRefs}
-              onClick={handleTradeClick}
-              selectedId={focusId}
-            />
-          )}
-          {searchResponseSuggested.length > 0 && (
-            <Listing
-              title={labels.suggested}
-              trades={searchResponseSuggested}
-              resultRefs={resultRefs}
-              refCountStart={searchResponseExact.length}
-              onClick={handleTradeClick}
-              selectedId={focusId}
-            />
-          )}
-        </>
-      )}
-    </dialog>
-  );
-};

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

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

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

@@ -1,74 +0,0 @@
-import { render, fireEvent, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { useRef } from "react";
-import { TradeInput, TradeInputProps } from "./TradeInput";
-
-const TradeInputComponent = (props: Partial<TradeInputProps>) => {
-  const defaultProps = {
-    onChange: jest.fn(),
-    inputRef: useRef(null),
-    value: "",
-    placeholder: "e.g. Cleaner, builder, consultant",
-    onEdit: jest.fn(),
-    isEditable: false,
-  };
-
-  return <TradeInput {...defaultProps} {...props} />;
-};
-
-describe("TradeInput", () => {
-  it("renders selected trade", () => {
-    const initialTrade = "Landlord";
-    const onEdit = jest.fn();
-
-    render(<TradeInputComponent initialTrade={initialTrade} onEdit={onEdit} />);
-
-    const initialTradeText = screen.queryByText(initialTrade);
-    const changeButton = screen.queryByRole("button");
-
-    expect(initialTradeText?.parentNode?.textContent).toEqual(
-      `You have selected ‘${initialTrade}’ as your trade/profession. Change`,
-    );
-
-    fireEvent.click(changeButton!);
-
-    expect(onEdit).toHaveBeenCalled();
-  });
-
-  it("renders input field", async () => {
-    const onChange = jest.fn();
-
-    render(<TradeInputComponent onChange={onChange} />);
-
-    const inputField = screen.queryByRole("textbox");
-
-    expect(inputField).toBeInTheDocument();
-
-    await userEvent.tab();
-    await userEvent.keyboard("[Space]");
-
-    expect(onChange).toHaveBeenCalled();
-  });
-
-  it("sets classes for interaction states", async () => {
-    render(<TradeInputComponent />);
-
-    const inputField = screen.queryByRole("textbox");
-
-    await userEvent.tab();
-
-    expect(inputField).toHaveClass("--is-focused");
-
-    fireEvent.mouseEnter(inputField!);
-
-    expect(inputField).toHaveClass("--is-hovered");
-  });
-
-  it("allows user to edit trade", () => {
-    render(<TradeInputComponent isEditable />);
-
-    const cancelText = screen.queryByText("Cancel");
-
-    expect(cancelText).toBeInTheDocument();
-  });
-});

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

@@ -1,96 +0,0 @@
-"use client";
-
-import { RefObject, ChangeEvent, MouseEvent } from "react";
-import { AriaLabelingProps, DOMProps } from "@react-types/shared";
-import clsx from "clsx";
-import { useFocusRing } from "@react-aria/focus";
-import { useHover } from "@react-aria/interactions";
-import { Text } from "../../../Text";
-
-export type TradeInputProps = {
-  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
-  inputRef: RefObject<HTMLInputElement>;
-  inputProps?: AriaLabelingProps & DOMProps;
-  value: string;
-  className?: string;
-  label?: string;
-  placeholder: string;
-  initialTrade?: string;
-  onEdit: (event: MouseEvent<HTMLButtonElement>) => void;
-  isEditable: boolean;
-};
-
-export const TradeInput = (props: TradeInputProps) => {
-  const {
-    onChange,
-    onEdit,
-    inputRef,
-    inputProps,
-    value,
-    className,
-    label,
-    placeholder,
-    initialTrade,
-    isEditable,
-    ...otherProps
-  } = props;
-  const selectedTrade = initialTrade && !isEditable;
-  const { isFocusVisible, focusProps } = useFocusRing({
-    within: true,
-  });
-  const { hoverProps, isHovered } = useHover({
-    ...otherProps,
-  });
-  const classes = clsx(
-    "chopin",
-    "chopin/TradeSelectorInput",
-    {
-      "--is-focused": isFocusVisible,
-      "--is-hovered": isHovered,
-    },
-    className,
-  );
-
-  return (
-    <div {...focusProps}>
-      {selectedTrade ? (
-        <Text>
-          You have selected ‘<strong>{initialTrade}</strong>’ as your
-          trade/profession.{" "}
-          <button
-            type="button"
-            className="mobius/Link chopin/TradeSelectorButton"
-            aria-label="Change your selected profession"
-            onClick={onEdit}
-          >
-            Change
-          </button>
-        </Text>
-      ) : (
-        <div className="chopin/TradeSelectorInputContainer">
-          <input
-            {...hoverProps}
-            {...inputProps}
-            type="text"
-            placeholder={placeholder}
-            aria-label={label}
-            className={classes}
-            onChange={onChange}
-            ref={inputRef}
-            value={value}
-          />
-          {isEditable && (
-            <button
-              type="button"
-              className="mobius/Link chopin/TradeSelectorButton"
-              aria-label="Cancel changes"
-              onClick={onEdit}
-            >
-              Cancel
-            </button>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};

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

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