@simplybusiness/mobius 3.10.0 → 3.11.0

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

@@ -1,107 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { Header, LOGO_LINK } from ".";
-
-const HEADER_CLASS_NAME = "chopin/Header";
-const LOGO_CLASS_NAME = "chopin/HeaderLogo";
-const CONTACT_CLASS_NAME = "chopin/HeaderContactLink";
-const PHONE_NUMBER_CLASS_NAME = "chopin/HeaderPhoneNumber";
-
-const props = {
-  phone: "0333 014 6683",
-};
-
-describe("Header", () => {
-  it("should render without errors", () => {
-    const component = render(<Header {...props} />);
-    expect(component).toBeTruthy();
-  });
-
-  describe("uses correct class names", () => {
-    it("uses Chopin class", () => {
-      render(<Header {...props} data-testid="test-id" />);
-      expect(screen.getByTestId("test-id")).toHaveClass("chopin");
-    });
-
-    it("uses chopin/Header class", () => {
-      render(<Header {...props} data-testid="test-id" />);
-      expect(screen.getByTestId("test-id")).toHaveClass(HEADER_CLASS_NAME);
-    });
-
-    it("includes custom class name", () => {
-      render(<Header {...props} data-testid="test-id" className="my-class" />);
-      expect(screen.getByTestId("test-id")).toHaveClass("my-class");
-      expect(screen.getByTestId("test-id")).toHaveClass(HEADER_CLASS_NAME);
-    });
-
-    it("uses logo class name", () => {
-      render(<Header {...props} />);
-      const link = screen.getByRole("link", {
-        name: /simply business - insurance for your business/i,
-      });
-      expect(link).toHaveClass(LOGO_CLASS_NAME);
-    });
-
-    it("uses contact link class name", () => {
-      render(<Header {...props} />);
-      const link = screen.getByRole("link", {
-        name: /see our opening hours/i,
-      });
-      expect(link).toHaveClass(CONTACT_CLASS_NAME);
-    });
-
-    it("uses phone number class name", () => {
-      render(<Header {...props} />);
-      const phoneNumberEl = screen.getByText(props.phone);
-      expect(phoneNumberEl).toHaveClass(PHONE_NUMBER_CLASS_NAME);
-    });
-  });
-
-  describe("renders correct elements based on passed props", () => {
-    it("renders passed Phone prop", () => {
-      render(<Header {...props} />);
-      expect(screen.getByText(props.phone)).toBeInTheDocument();
-    });
-
-    it("renders Logo element as Link by default", () => {
-      render(<Header {...props} />);
-      const link = screen.getByRole("link", {
-        name: /simply business - insurance for your business/i,
-      });
-      expect(link).toHaveAttribute("href", LOGO_LINK);
-    });
-
-    it("doesn't render Logo as Link when whiteLabel prop is true", () => {
-      render(<Header {...props} whiteLabel />);
-      expect(
-        screen.queryByRole("link", {
-          name: /simply business - insurance for your business/i,
-        }),
-      ).not.toBeInTheDocument();
-    });
-
-    it("renders Opening Hours element as Link by default", () => {
-      render(<Header {...props} />);
-      const link = screen.getByRole("link", {
-        name: /see our opening hours/i,
-      });
-      expect(link).toHaveAttribute(
-        "href",
-        "https://www.simplybusiness.co.uk/support/",
-      );
-    });
-
-    it("renders Opening Hours element as Button when whiteLabel prop is true", () => {
-      render(<Header {...props} whiteLabel />);
-      expect(
-        screen.queryByRole("link", {
-          name: /see our opening hours/i,
-        }),
-      ).not.toBeInTheDocument();
-      expect(
-        screen.getByRole("button", {
-          name: /see our opening hours/i,
-        }),
-      ).toBeInTheDocument();
-    });
-  });
-});

package/src/components/Chopin/Header/Header.tsx

@@ -1,49 +0,0 @@
-import { FC } from "react";
-import { DOMProps } from "@react-types/shared";
-import clsx from "clsx";
-import { Logo } from "./Logo";
-import { ContactDetails } from "./ContactDetails";
-import { Flex } from "../../Flex";
-import { OpeningHoursType, OPENING_HOURS } from "./mockOpeningHoursData";
-
-export interface HeaderProps extends DOMProps {
-  /** Custom class name for setting specific CSS */
-  className?: string;
-  whiteLabel?: boolean;
-  url?: string;
-  phone: string;
-  openingHours?: OpeningHoursType;
-}
-
-export const LOGO_LINK = "https://www.simplybusiness.co.uk/";
-
-const Header: FC<HeaderProps> = ({
-  className,
-  whiteLabel = false,
-  url = LOGO_LINK,
-  phone,
-  openingHours = OPENING_HOURS,
-  ...otherProps
-}) => {
-  const classes = clsx("chopin", "chopin/Header", className);
-
-  return (
-    <header className={classes} {...otherProps}>
-      <Flex
-        alignItems="center"
-        justifyContent="space-between"
-        className="chopin/HeaderContent"
-      >
-        <Logo url={url} whiteLabel={whiteLabel} />
-        <ContactDetails
-          phone={phone}
-          whiteLabel={whiteLabel}
-          openingHours={openingHours}
-        />
-      </Flex>
-    </header>
-  );
-};
-
-Header.displayName = "Header";
-export { Header };

package/src/components/Chopin/Header/Logo.tsx

@@ -1,25 +0,0 @@
-import { FC } from "react";
-import { Box } from "../../Box";
-import { Link } from "../../Link";
-import { VisuallyHidden } from "../../VisuallyHidden";
-
-export interface LogoProps {
-  whiteLabel: boolean;
-  url?: string;
-}
-
-const Logo: FC<LogoProps> = ({ whiteLabel, url }) => {
-  if (!whiteLabel) {
-    return (
-      <Link href={url} className="chopin/HeaderLogo">
-        <VisuallyHidden>
-          Simply Business - Insurance for your business
-        </VisuallyHidden>
-      </Link>
-    );
-  }
-
-  return <Box className="chopin/HeaderLogo" />;
-};
-
-export { Logo };

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

@@ -1,2 +0,0 @@
-export * from "./Header";
-export * from "./mockOpeningHoursData";

package/src/components/Chopin/Header/mockOpeningHoursData.ts

@@ -1,13 +0,0 @@
-export type OpeningHoursType = {
-  [key: string]: string;
-};
-
-export const OPENING_HOURS: OpeningHoursType = {
-  Mon: "8am-8pm",
-  Tue: "8am-8pm",
-  Wed: "8am-8pm",
-  Thu: "8am-8pm",
-  Fri: "8am-8pm",
-  "<strong>Sat</strong>": "<strong>Closed</strong>",
-  "<strong>Sun</strong>": "<strong>Closed</strong>",
-};

package/src/components/Chopin/PercentageTotalsQuestion/PercentageItem.tsx

@@ -1,53 +0,0 @@
-"use client";
-
-import { useState, FormEventHandler } from "react";
-import { NumberField } from "../../NumberField";
-
-export type PercentageItemProps = {
-  itemLabel: string;
-  maxRemainder?: number;
-  onChange: (val: number) => void;
-};
-
-export const PercentageItem = ({
-  itemLabel,
-  maxRemainder = 1,
-  onChange,
-}: PercentageItemProps) => {
-  const [val, setVal] = useState<number>(0);
-  const maxValue = Math.round((val + maxRemainder) * 100) / 100;
-
-  // Prevent any input that would make the overall total > 100
-  const handleChange = (newVal: number) => {
-    const maxNewVal = Math.min(newVal, maxValue);
-    setVal(maxNewVal);
-    onChange(maxNewVal);
-  };
-
-  const handleInput: FormEventHandler<HTMLInputElement> = e => {
-    // @ts-ignore: does not identify EventTarget as coming from an input element
-    const currentVal: string = e.target.value;
-    const cleanVal = currentVal.replace("%", "");
-    const number = +cleanVal / 100 || 0;
-    handleChange(number);
-  };
-
-  return (
-    <>
-      <label htmlFor={itemLabel}>{itemLabel}</label>
-      <NumberField
-        id={itemLabel}
-        defaultValue={0}
-        value={Number.isNaN(val) ? 0 : val}
-        minValue={0}
-        maxValue={maxValue}
-        formatOptions={{
-          style: "percent",
-        }}
-        aria-label={itemLabel}
-        onChange={handleChange}
-        onInput={handleInput}
-      />
-    </>
-  );
-};

package/src/components/Chopin/PercentageTotalsQuestion/PercentageTotalsQuestion.mdx

@@ -1,78 +0,0 @@
-import { useContext, useEffect } from "react";
-import { Meta, ArgTypes, Canvas } from "@storybook/blocks";
-import { Text } from "../../Text";
-import { ThemeProvider, ThemeContext } from "../../../contexts";
-import {
-  PercentageTotalsQuestion,
-  PercentageTotalsQuestionProps,
-} from "./PercentageTotalsQuestion";
-import { excludeControls } from "../../../utils/excludeControls";
-import * as PercentageTotalsQuestionStories from "./PercentageTotalsQuestion.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={PercentageTotalsQuestionStories} />
-
-# PercentageTotalsQuestion
-
-This is a specific type of `Question` designed to handle split percentage allocations, which must total 100% across all items. Simply pass in an array of labels for the set of items to allocate.
-
-The component will ensure that users cannot allocate more than 100% across all of the items. Increment / decrement buttons change limits as the total increases and cannot go outside of bounds.
-
-If a user types a number greater than the remaining maximum amount then it will be limited to that maximum value.
-
-## Install
-
-```bash
-yarn add @simplybusiness/mobius
-```
-
-## Usage
-
-```js
-import { Chopin } from "@simplybusiness/mobius";
-```
-
-## Normal
-
-<Canvas of={PercentageTotalsQuestionStories.Normal} />
-
-## Props
-
-<ArgTypes of={PercentageTotalsQuestion} />
-
-## Component HTML Structure and Class names
-
-The following HTML is rendered for a PercentageTotalsQuestion Molecule:
-
-```html
-<div class="chopin chopin/Question chopin/PercentageTotalsQuestion">
-  <label class="mobius mobius/Label chopin/QuestionLabel">
-    {Question label}
-  </label>
-  <div class="chopin/PercentageTotalsQuestionInner">
-    <div class="chopin/PercentageTotalsQuestionItems">
-      <label for="Item 1"> Item 1 </label>
-      <NumberField />
-      <label for="Item 2"> Item 2 </label>
-      <NumberField />
-      <label for="Item 3"> Item 3 </label>
-      <NumberField />
-
-      <div />
-      <div class="chopin/PercentageTotalsQuestionTotal">Total: 0%</div>
-    </div>
-  </div>
-</div>
-```
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Chopin/PercentageTotalsQuestion) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

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

@@ -1,63 +0,0 @@
-import type { Meta } from "@storybook/react";
-import { useContext, useEffect } from "react";
-import {
-  ThemeProvider,
-  ThemeContext,
-  BreakpointsType,
-} from "../../../contexts";
-import {
-  PercentageTotalsQuestion,
-  PercentageTotalsQuestionProps,
-} from "./PercentageTotalsQuestion";
-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/PercentageTotalsQuestion",
-  component: PercentageTotalsQuestion,
-  argTypes: excludeControls(
-    "className",
-    "help",
-    "onChange",
-    "closeHelpOnOutsideClick",
-  ),
-  decorators: [
-    Story => (
-      <ThemeProvider>
-        <Story />
-      </ThemeProvider>
-    ),
-  ],
-} satisfies Meta<typeof PercentageTotalsQuestion>;
-
-export const Normal: Meta<typeof PercentageTotalsQuestion> = {
-  render: (args: PercentageTotalsQuestionProps) => {
-    // eslint-disable-next-line
-    const { setBreakpoints } = useContext(ThemeContext);
-
-    // eslint-disable-next-line
-    useEffect(() => {
-      setBreakpoints(breakpoints);
-    }, [setBreakpoints]);
-
-    return <PercentageTotalsQuestion {...args} />;
-  },
-  args: {
-    label: "What percentage of your work is on?",
-    alertText: "The total percentage of your work must be 100%",
-    items: [
-      "UK contracts",
-      "EU contracts",
-      "USA and Canada contracts",
-      "Rest of the world contracts",
-    ],
-  },
-};

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

@@ -1,170 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { PercentageTotalsQuestion } from ".";
-
-const LABEL = "How do you split your time across these items?";
-const THREE_ITEMS = ["Item 1", "Item 2", "Item 3"];
-const FIVE_ITEMS = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"];
-
-describe("PercentageTotalsQuestion", () => {
-  it("should render without errors", () => {
-    const label = "This is my custom label";
-    const { container } = render(
-      <PercentageTotalsQuestion label={label} items={THREE_ITEMS} />,
-    );
-    expect(screen.getByText(label)).toBeInTheDocument();
-
-    const items = container.getElementsByClassName("mobius/NumberField");
-
-    expect(items.length).toBe(3);
-  });
-
-  it("should display custom alert message", () => {
-    const alertText = "This is my alert!";
-
-    render(
-      <PercentageTotalsQuestion
-        label={LABEL}
-        alertText={alertText}
-        items={FIVE_ITEMS}
-      />,
-    );
-    expect(screen.getByText(alertText)).toBeInTheDocument();
-  });
-
-  it("should render a row for every item", () => {
-    const { container } = render(
-      <PercentageTotalsQuestion label={LABEL} items={FIVE_ITEMS} />,
-    );
-    const items = container.getElementsByClassName("mobius/NumberField");
-
-    expect(items.length).toBe(5);
-  });
-
-  describe("Calculations", () => {
-    it("should correctly total the sum of typed item values", async () => {
-      const { getByLabelText } = render(
-        <PercentageTotalsQuestion label={LABEL} items={THREE_ITEMS} />,
-      );
-
-      await userEvent.type(getByLabelText("Item 1"), "25");
-      expect(screen.getByText("Total: 25%")).toBeInTheDocument();
-
-      await userEvent.type(getByLabelText("Item 2"), "37");
-      expect(screen.getByText("Total: 62%")).toBeInTheDocument();
-
-      await userEvent.type(getByLabelText("Item 3"), "13");
-      expect(screen.getByText("Total: 75%")).toBeInTheDocument();
-    });
-
-    it("should prevent any typed input that exceeds a total of 100%", async () => {
-      const { getByLabelText } = render(
-        <PercentageTotalsQuestion label={LABEL} items={THREE_ITEMS} />,
-      );
-      const inputs = THREE_ITEMS.map(i =>
-        screen.getByLabelText(i, { selector: "input" }),
-      );
-
-      await userEvent.type(getByLabelText("Item 1"), "123");
-      expect(inputs[0]).toHaveValue("100%");
-      expect(screen.getByText("Total: 100%")).toBeInTheDocument();
-
-      await userEvent.type(getByLabelText("Item 2"), "37");
-      expect(inputs[1]).toHaveValue("0%");
-      expect(screen.getByText("Total: 100%")).toBeInTheDocument();
-
-      await userEvent.type(getByLabelText("Item 3"), "13");
-      expect(inputs[2]).toHaveValue("0%");
-      expect(screen.getByText("Total: 100%")).toBeInTheDocument();
-    });
-
-    it("supports keyboard navigation and up/down arrows to increase/decrease", async () => {
-      const { getByLabelText } = render(
-        <PercentageTotalsQuestion label={LABEL} items={THREE_ITEMS} />,
-      );
-      const inputs = THREE_ITEMS.map(i =>
-        screen.getByLabelText(i, { selector: "input" }),
-      );
-
-      await userEvent.type(getByLabelText("Item 1"), "30");
-      expect(inputs[0]).toHaveValue("30%");
-      expect(screen.getByText("Total: 30%")).toBeInTheDocument();
-
-      await userEvent.tab(); // Move focus to Item 2
-      await userEvent.keyboard("[ArrowUp]");
-      await userEvent.keyboard("[ArrowUp]");
-      await userEvent.keyboard("[ArrowUp]");
-      expect(inputs[1]).toHaveValue("3%");
-      expect(screen.getByText("Total: 33%")).toBeInTheDocument();
-
-      await userEvent.keyboard("[ArrowDown]");
-      expect(inputs[1]).toHaveValue("2%");
-      expect(screen.getByText("Total: 32%")).toBeInTheDocument();
-    });
-
-    it("should prevent changing any initial value above 100", async () => {
-      const { getByLabelText } = render(
-        <PercentageTotalsQuestion label={LABEL} items={THREE_ITEMS} />,
-      );
-      const inputs = THREE_ITEMS.map(i =>
-        screen.getByLabelText(i, { selector: "input" }),
-      );
-
-      await userEvent.type(getByLabelText("Item 1"), "9");
-      expect(inputs[0]).toHaveValue("9%");
-      expect(screen.getByText("Total: 9%")).toBeInTheDocument();
-
-      await userEvent.type(getByLabelText("Item 1"), "9");
-      expect(inputs[0]).toHaveValue("99%");
-      expect(screen.getByText("Total: 99%")).toBeInTheDocument();
-
-      await userEvent.type(getByLabelText("Item 1"), "9");
-      expect(inputs[0]).toHaveValue("100%");
-      expect(screen.getByText("Total: 100%")).toBeInTheDocument();
-    });
-
-    it("should prevent changing any subsequent value above remaining percentage", async () => {
-      const { getByLabelText } = render(
-        <PercentageTotalsQuestion label={LABEL} items={THREE_ITEMS} />,
-      );
-      const inputs = THREE_ITEMS.map(i =>
-        screen.getByLabelText(i, { selector: "input" }),
-      );
-
-      await userEvent.type(getByLabelText("Item 1"), "75");
-      expect(inputs[0]).toHaveValue("75%");
-      expect(screen.getByText("Total: 75%")).toBeInTheDocument();
-
-      await userEvent.type(getByLabelText("Item 2"), "40");
-      expect(inputs[1]).toHaveValue("25%");
-      expect(screen.getByText("Total: 100%")).toBeInTheDocument();
-    });
-
-    it("sets maxValue on each item based upon remaining percentage", async () => {
-      const { getByLabelText } = render(
-        <PercentageTotalsQuestion label={LABEL} items={THREE_ITEMS} />,
-      );
-      const inputs = THREE_ITEMS.map(i =>
-        screen.getByLabelText(i, { selector: "input" }),
-      );
-
-      await userEvent.type(getByLabelText("Item 1"), "98");
-      expect(inputs[0]).toHaveValue("98%");
-      expect(screen.getByText("Total: 98%")).toBeInTheDocument();
-
-      // Click increment button on second item until it is disabled
-      await userEvent.click(getByLabelText(`Increase ${THREE_ITEMS[1]}`));
-      expect(inputs[1]).toHaveValue("1%");
-      expect(screen.getByText("Total: 99%")).toBeInTheDocument();
-
-      await userEvent.click(getByLabelText(`Increase ${THREE_ITEMS[1]}`));
-      expect(inputs[1]).toHaveValue("2%");
-      expect(screen.getByText("Total: 100%")).toBeInTheDocument();
-
-      // All increase buttons should be disabled
-      expect(getByLabelText(`Increase ${THREE_ITEMS[0]}`)).toBeDisabled();
-      expect(getByLabelText(`Increase ${THREE_ITEMS[1]}`)).toBeDisabled();
-      expect(getByLabelText(`Increase ${THREE_ITEMS[2]}`)).toBeDisabled();
-    });
-  });
-});

package/src/components/Chopin/PercentageTotalsQuestion/PercentageTotalsQuestion.tsx

@@ -1,70 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import clsx from "clsx";
-import { Question, QuestionProps } from "../Question";
-import { Alert } from "../../Alert";
-import { PercentageItem } from "./PercentageItem";
-
-export type PercentageTotalsQuestionProps = Omit<
-  QuestionProps,
-  "children" | "description" | "validationState" | "errorMessage"
-> & {
-  alertText?: string;
-  items: string[];
-};
-
-// Question expects a field as a child and as such, passes
-// props that break in the DOM (validationState, errorMessage).
-// Create a thin handler to ignore these props FOR NOW
-const Inner = (props: QuestionProps) => {
-  const { children } = props;
-  return <div className="chopin/PercentageTotalsQuestionInner">{children}</div>;
-};
-
-const PercentageTotalsQuestion = (props: PercentageTotalsQuestionProps) => {
-  const { alertText, items, label, className } = props;
-  // Create array with same size as items, filled with zeros
-  const [totals, setTotals] = useState<number[]>(
-    new Array(items.length).fill(0),
-  );
-  const total = Math.round(totals.reduce((a, b) => a + b, 0) * 100) / 100;
-
-  const maxRemainder = Math.round((1 - total) * 100) / 100; // Max that can be set in any other fields
-  const showTotal = Math.floor(total * 100);
-
-  const handleChange = (index: number) => (val: number) => {
-    setTotals(t => {
-      const newTotals = [...t];
-      newTotals[index] = val;
-      return newTotals;
-    });
-  };
-
-  const classes = clsx("chopin", "chopin/PercentageTotalsQuestion", className);
-
-  return (
-    <Question label={label} className={classes}>
-      <Inner>
-        {alertText && <Alert variant="warning">{alertText}</Alert>}
-        <div className="chopin/PercentageTotalsQuestionItems">
-          {items.map((itemLabel, index) => (
-            <PercentageItem
-              key={itemLabel}
-              itemLabel={itemLabel}
-              maxRemainder={maxRemainder}
-              onChange={handleChange(index)}
-            />
-          ))}
-          <div />
-          <div className="chopin/PercentageTotalsQuestionTotal">
-            {`Total: ${showTotal}%`}
-          </div>
-        </div>
-      </Inner>
-    </Question>
-  );
-};
-
-PercentageTotalsQuestion.displayName = "PercentageTotalsQuestion";
-export { PercentageTotalsQuestion };

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

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