@simplybusiness/mobius 3.9.4 → 3.11.0

package/src/components/Chopin/TradeSelector/TradeSelector.mdx

@@ -1,177 +0,0 @@
-import { Meta, ArgTypes, Canvas, Story } from "@storybook/blocks";
-import { TradeSelector, TradeSelectorProps } from ".";
-import { excludeControls } from "../../../utils/excludeControls";
-import * as TradeSelectorStories from "./TradeSelector.stories";
-
-<Meta of={TradeSelectorStories} />
-
-# TradeSelector
-
-The `TradeSelector` component is used to surface the most appropriate trade given a search criteria
-
-## Install
-
-```bash
-yarn add @simplybusiness/mobius
-```
-
-## Usage
-
-```js
-import { Chopin } from "@simplybusiness/mobius";
-```
-
-## Normal
-
-<Story of={TradeSelectorStories.Normal} />
-
-{/* prettier-ignore */}
-```jsx
-import { Chopin } from "@simplybusiness/mobius";
-
-<Chopin.TradeSelector />
-```
-
-## Without label
-
-<Story of={TradeSelectorStories.WithoutLabel} />
-
-{/* prettier-ignore */}
-```jsx
-import { Chopin } from "@simplybusiness/mobius";
-
-<Chopin.TradeSelector />
-```
-
-## With Trade
-
-<Story of={TradeSelectorStories.WithTrade} />
-
-{/* prettier-ignore */}
-```jsx
-import { Chopin } from "@simplybusiness/mobius";
-
-<Chopin.TradeSelector />
-```
-
-## With Search Scope
-
-<Story of={TradeSelectorStories.WithSearchScope} />
-
-{/* prettier-ignore */}
-```jsx
-import { Chopin } from "@simplybusiness/mobius";
-
-<Chopin.TradeSelector />
-```
-
-## Labels
-
-The component has a predefined list of labels:
-
-| Label         | Default value                                   | Description                                                        |
-| ------------- | ----------------------------------------------- | ------------------------------------------------------------------ |
-| `input`       | What is your specific trade/profession?         | Appears at the very top of the component and is used for `<label>` |
-| `description` | Start typing to choose from over 1,000 options. | Appears underneath the `<label>` and it is used to guide the user  |
-| `placeholder` | e.g. Cleaner, builder, consultant               | Appears as placeholder text for the input field                    |
-| `loading`     | Loading...                                      | The label displays whilst trades are being requested               |
-| `exact`       | Exact matches for your search                   | Displays as a title for search results that are an exact match     |
-| `suggested`   | Suggested matches for your search               | Displays as a title for all other search results                   |
-| `noResults`   | View all trades                                 | Displays when no search results are found                          |
-
-In order to overwrite any of these labels, provide `labels` prop an object where keys match label names.
-
-For example, to overwrite `loading` and `suggested` labels you will use:
-
-`<Chopin.TradeSelector labels={{ loading: "Getting the results", suggested: "Other results" }} />`
-
-All other labels that are not specified will remain unchanged (as specified in the table above)
-
-In order to hide `input` and `description` you can use `hideLabel` prop as follows:
-
-`<Chopin.TradeSelector hideLabel />`
-
-## Props
-
-<ArgTypes of={TradeSelector} />
-
-## Component HTML Structure and Class names
-
-The following HTML is rendered for a TradeSelector:
-
-### With user input
-
-```html
-<div class="chopin chopin/TradeSelector">
-  <label class="mobius mobius/Label chopin/TradeSelectorLabel">
-    What is your specific trade/profession?
-  </label>
-  <p class="mobius mobius/Text caption chopin/TradeSelectorDescription">
-    Start typing to choose from over 1,000 options.
-  </p>
-  <div>
-    <div class="chopin/TradeSelectorInputContainer">
-      <input
-        placeholder="e.g. Cleaner, builder, consultant"
-        class="chopin chopin/TradeSelectorInput"
-      />
-    </div>
-  </div>
-  <dialog class="chopin/TradeSelectorResults">
-    <nav>
-      <header class="chopin/TradeSelectorListTitle">
-        Exact matches for your search
-      </header>
-      <ul class="chopin/TradeSelectorList">
-        <li class="chopin/TradeSelectorListItem">
-          <button class="chopin/TradeSelectorButton chopin/TradeSelectorOption">
-            <strong>Swimm</strong>ing pool installers
-          </button>
-        </li>
-        ...other options...
-      </ul>
-    </nav>
-    <nav>
-      <header class="chopin/TradeSelectorListTitle">
-        Suggested matches for your search
-      </header>
-      <ul class="chopin/TradeSelectorList">
-        <li class="chopin/TradeSelectorListItem">
-          <button class="chopin/TradeSelectorButton chopin/TradeSelectorOption">
-            <strong>Swim</strong> Shop
-          </button>
-        </li>
-        ...other options...
-      </ul>
-    </nav>
-  </dialog>
-  <div class="mobius mobius/ErrorMessage">
-    <span class="mobius/ErrorIcon"></span>
-    <span class="mobius mobius/Text span mobius/ErrorText">
-      The service is currently unavailable. Please try again later
-    </span>
-  </div>
-</div>
-```
-
-### With trade selected
-
-```html
-<div class="chopin chopin/TradeSelector">
-  <label class="mobius mobius/Label chopin/TradeSelectorLabel">
-    What is your specific trade/profession?
-  </label>
-  <div>
-    <p class="mobius mobius/Text p">
-      You have selected ‘<strong>Security - training only< strong>’ as your trade/profession.
-      <button class="mobius/Link chopin/TradeSelectorButton">
-        Change
-      </button>
-    </p>
-  </div>
-</div>
-```
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Chopin/TradeSelector) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

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

@@ -1,67 +0,0 @@
-import type { Meta } from "@storybook/react";
-import { TradeSelector, TradeSelectorProps } from ".";
-import { excludeControls } from "../../../utils/excludeControls";
-
-export default {
-  title: "Chopin/TradeSelector",
-  component: TradeSelector,
-  argTypes: {
-    onTradeSelected: {
-      action: "onTradeSelected",
-    },
-    ...excludeControls(
-      "className",
-      "labels",
-      "urls",
-      "onTradeSelected",
-      "elementType",
-      "aria-describedby",
-      "data-cy",
-    ),
-  },
-};
-
-export const Normal: Meta<typeof TradeSelector> = {
-  render: (args: TradeSelectorProps) => <TradeSelector {...args} />,
-  args: {
-    minInput: 3,
-    apiRequestDebounceInMs: 250,
-    initialTrade: "",
-    hideLabel: false,
-    vertical: "",
-  },
-};
-
-export const WithoutLabel: Meta<typeof TradeSelector> = {
-  render: (args: TradeSelectorProps) => <TradeSelector {...args} />,
-  args: {
-    minInput: 3,
-    apiRequestDebounceInMs: 250,
-    initialTrade: "",
-    hideLabel: true,
-    vertical: "",
-  },
-};
-
-export const WithTrade: Meta<typeof TradeSelector> = {
-  render: (args: TradeSelectorProps) => <TradeSelector {...args} />,
-  args: {
-    minInput: 3,
-    apiRequestDebounceInMs: 250,
-    initialTrade: "Landlord",
-    hideLabel: false,
-    vertical: "",
-  },
-};
-
-export const WithSearchScope: Meta<typeof TradeSelector> = {
-  render: (args: TradeSelectorProps) => <TradeSelector {...args} />,
-  args: {
-    minInput: 3,
-    apiRequestDebounceInMs: 250,
-    initialTrade: "",
-    hideLabel: false,
-    vertical: "business",
-    searchScope: "current_vertical",
-  },
-};

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

@@ -1,352 +0,0 @@
-import {
-  fireEvent,
-  render,
-  screen,
-  waitFor,
-  waitForElementToBeRemoved,
-} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { ERROR_MESSAGE_SERVICE_UNAVAILABLE, TradeSelector } from ".";
-import { getConfig } from "./config";
-import { jestHTMLDialogPolyfill } from "./jestHTMLDialogPolyfill";
-import { exactResults, suggestedResults } from "./mockApiResults";
-
-jestHTMLDialogPolyfill();
-
-const mockedApiResults = [...exactResults, ...suggestedResults];
-
-const { defaultLabels } = getConfig();
-
-describe("TradeSelector", () => {
-  it("should render without errors", () => {
-    render(<TradeSelector />);
-  });
-
-  describe("given a minimum required user input", () => {
-    describe("when no results are returned", () => {
-      it("should display a link to view all trades", async () => {
-        global.fetch = jest.fn(() =>
-          Promise.resolve({
-            json: () => Promise.resolve({ results: [] }),
-            ok: true,
-          }),
-        ) as jest.Mock;
-
-        const userInput = "qwa";
-        render(<TradeSelector />);
-
-        await userEvent.tab();
-        await userEvent.keyboard(userInput);
-        await waitFor(() => screen.getByText("View all trades"));
-
-        const noResultsLink = screen.getByText("View all trades");
-
-        expect(noResultsLink).toBeInTheDocument();
-        expect(noResultsLink).toHaveAttribute(
-          "href",
-          "https://quote.simplybusiness.co.uk/trades?vertical=business",
-        );
-      });
-    });
-  });
-
-  describe("given a set of results", () => {
-    describe("containing both exact matches and suggested trades", () => {
-      it("should display the results under their respective titles", async () => {
-        global.fetch = jest.fn(() =>
-          Promise.resolve({
-            json: () => Promise.resolve({ results: mockedApiResults }),
-            ok: true,
-          }),
-        ) as jest.Mock;
-
-        const userInput = "swim";
-        render(<TradeSelector />);
-
-        await userEvent.tab();
-        await userEvent.keyboard(userInput);
-        await waitForElementToBeRemoved(() => screen.getByText("Loading..."));
-
-        const exactTitle = screen.queryByText(defaultLabels.exact);
-        const suggestedTitle = screen.queryByText(defaultLabels.suggested);
-        const exactResultExample = document.querySelector(
-          '[data-key="Swim Shop"]',
-        );
-        const suggestedResultExample = document.querySelector(
-          '[data-key="Teacher / tutor"]',
-        );
-
-        expect(exactTitle).toBeInTheDocument();
-        expect(suggestedTitle).toBeInTheDocument();
-        expect(exactResultExample).toBeInTheDocument();
-        expect(suggestedResultExample).toBeInTheDocument();
-      });
-    });
-
-    describe("containing only the exact matches", () => {
-      it("should display the results under the title for exact matches", async () => {
-        global.fetch = jest.fn(() =>
-          Promise.resolve({
-            json: () => Promise.resolve({ results: exactResults }),
-            ok: true,
-          }),
-        ) as jest.Mock;
-
-        const userInput = "swim";
-        render(<TradeSelector />);
-
-        await userEvent.tab();
-        await userEvent.keyboard(userInput);
-        await waitForElementToBeRemoved(() => screen.getByText("Loading..."));
-
-        const exactTitle = screen.queryByText(defaultLabels.exact);
-        const suggestedTitle = screen.queryByText(defaultLabels.suggested);
-        const exactResultExample = document.querySelector(
-          '[data-key="Swim Shop"]',
-        );
-        const suggestedResultExample = document.querySelector(
-          '[data-key="Teacher / tutor"]',
-        );
-
-        expect(exactTitle).toBeInTheDocument();
-        expect(suggestedTitle).not.toBeInTheDocument();
-        expect(exactResultExample).toBeInTheDocument();
-        expect(suggestedResultExample).toBeNull();
-      });
-    });
-  });
-
-  describe("given the API is unavailable", () => {
-    // eslint-disable-next-line no-console
-    const consoleError = console.error;
-
-    beforeAll(() => {
-      // eslint-disable-next-line no-console
-      console.error = jest.fn();
-    });
-
-    afterAll(() => {
-      // eslint-disable-next-line no-console
-      console.error = consoleError;
-      jest.resetAllMocks();
-    });
-
-    it("should show the error message", async () => {
-      global.fetch = jest.fn(() =>
-        Promise.resolve({
-          json: () => Promise.resolve({ statusText: "Internal Server Error" }),
-          ok: false,
-        }),
-      ) as jest.Mock;
-
-      const userInput = "swim";
-      render(<TradeSelector />);
-
-      await userEvent.tab();
-      await userEvent.keyboard(userInput);
-      await waitFor(() => screen.getByText(ERROR_MESSAGE_SERVICE_UNAVAILABLE));
-
-      const errorMessage = screen.getByText(ERROR_MESSAGE_SERVICE_UNAVAILABLE);
-      const resultsOverlay = document.querySelector("dialog");
-
-      expect(errorMessage).toBeInTheDocument();
-      expect(resultsOverlay).not.toBeInTheDocument();
-    });
-  });
-
-  describe("when the user reduces the input value to a single character", () => {
-    it("should not display the overlay component", async () => {
-      global.fetch = jest.fn(() =>
-        Promise.resolve({
-          json: () => Promise.resolve({ results: mockedApiResults }),
-          ok: true,
-        }),
-      ) as jest.Mock;
-
-      const userInput = "swim";
-      render(<TradeSelector />);
-
-      await userEvent.tab();
-      await userEvent.keyboard(userInput);
-
-      const resultsOverlay = document.querySelector("dialog");
-
-      expect(resultsOverlay).toBeInTheDocument();
-
-      await userEvent.keyboard("{Backspace}{Backspace}{Backspace}");
-
-      expect(resultsOverlay).not.toBeInTheDocument();
-    });
-  });
-
-  describe("given a user has selected a trade", () => {
-    it("should display the selected trade and hide the input field", async () => {
-      global.fetch = jest.fn(() =>
-        Promise.resolve({
-          json: () => Promise.resolve({ results: mockedApiResults }),
-          ok: true,
-        }),
-      ) as jest.Mock;
-
-      const userInput = "swim";
-      const expectedTrade = "Swim Shop";
-      const { container } = render(<TradeSelector />);
-
-      await userEvent.tab();
-      await userEvent.keyboard(userInput);
-      await waitForElementToBeRemoved(() => screen.getByText("Loading..."));
-
-      const exactResultExample = document.querySelector(
-        `[data-key="${expectedTrade}"]`,
-      );
-
-      expect(exactResultExample).toBeInTheDocument();
-
-      await fireEvent.click(
-        document.querySelector(`[data-key="${expectedTrade}"]`)!,
-      );
-
-      const textElement = container.querySelector("p");
-
-      expect(textElement).toHaveTextContent(
-        `You have selected ‘${expectedTrade}’ as your trade/profession. Change`,
-      );
-    });
-  });
-
-  describe("given an initial trade", () => {
-    it("clicking Change should reveal result overlay", async () => {
-      global.fetch = jest.fn(() =>
-        Promise.resolve({
-          json: () => Promise.resolve({ results: mockedApiResults }),
-          ok: true,
-        }),
-      ) as jest.Mock;
-
-      const initialTrade = "Swim Shop";
-      const { container } = render(
-        <TradeSelector initialTrade={initialTrade} />,
-      );
-
-      const button = screen.getByText("Change");
-
-      await userEvent.click(button);
-      await waitForElementToBeRemoved(() => screen.getByText("Loading..."));
-
-      const dialog = container.querySelector("dialog");
-
-      expect(dialog).toHaveClass("--is-open");
-    });
-  });
-
-  describe("clicking Change", () => {
-    it("should display the input field with previously selected trade", async () => {
-      global.fetch = jest.fn(() =>
-        Promise.resolve({
-          json: () => Promise.resolve({ results: mockedApiResults }),
-          ok: true,
-        }),
-      ) as jest.Mock;
-
-      const userInput = "swim";
-      const expectedTrade = "Swim Shop";
-      render(<TradeSelector />);
-
-      await userEvent.tab();
-      await userEvent.keyboard(userInput);
-      await waitForElementToBeRemoved(() => screen.getByText("Loading..."));
-
-      const exactResultExample = document.querySelector(
-        `[data-key="${expectedTrade}"]`,
-      );
-
-      expect(exactResultExample).toBeInTheDocument();
-
-      await fireEvent.click(
-        document.querySelector(`[data-key="${expectedTrade}"]`)!,
-      );
-
-      const button = screen.getByText("Change");
-
-      await userEvent.click(button);
-
-      waitFor(() => screen.getByRole("textbox"));
-
-      const inputField = screen.getByRole("textbox");
-
-      expect(inputField).toHaveValue(expectedTrade);
-    });
-  });
-
-  describe("given hideLabel is set to true", () => {
-    it("hides the label and the description and renders aria-label instead", () => {
-      render(<TradeSelector hideLabel />);
-
-      const label = screen.queryByText(defaultLabels.input);
-      const description = screen.queryByText(
-        "Start typing to choose from over 1,000 options.",
-      );
-      const input = screen.getByRole("textbox");
-
-      expect(label).not.toBeInTheDocument();
-      expect(description).not.toBeInTheDocument();
-      expect(input).toHaveAttribute("aria-label", defaultLabels.input);
-    });
-  });
-
-  describe("API calls", () => {
-    global.fetch = jest.fn(() =>
-      Promise.resolve({
-        json: () => Promise.resolve({ results: mockedApiResults }),
-        ok: true,
-      }),
-    ) as jest.Mock;
-
-    describe("with no initial trade provided", () => {
-      it("should not call the API on render", async () => {
-        render(<TradeSelector />);
-
-        await waitFor(() => expect(global.fetch).not.toHaveBeenCalled());
-      });
-    });
-
-    describe("with initial trade provided", () => {
-      it("should not call the API on initial render", async () => {
-        render(<TradeSelector initialTrade="Builder" />);
-
-        await waitFor(() => expect(global.fetch).not.toHaveBeenCalled());
-      });
-    });
-
-    describe("with user input set above minimum length", () => {
-      it("should call the API", async () => {
-        const userInput = "swim";
-        const AbortSignalMock = expect.anything();
-
-        render(<TradeSelector />);
-
-        await userEvent.tab();
-        await userEvent.keyboard(userInput);
-        await waitFor(() => {
-          expect(global.fetch).toHaveBeenCalledWith(
-            expect.any(URL),
-            AbortSignalMock,
-          );
-          expect(
-            (global.fetch as jest.Mock).mock.calls[2][0].toString(),
-          ).toEqual(
-            `https://fns-staging.simplybusiness.co.uk/rambdas/trade-selector-chopin?q=${userInput}&site=simplybusiness_hoverla`,
-          );
-        });
-      });
-    });
-  });
-
-  describe("given data-cy prop is provided", () => {
-    it("applies the attribute on the outer container", () => {
-      const { container } = render(<TradeSelector data-cy="test-123" />);
-
-      expect(container.firstChild).toHaveAttribute("data-cy", "test-123");
-    });
-  });
-});