@simplybusiness/mobius 3.0.0

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

@@ -0,0 +1,51 @@
+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.story.mdx

@@ -0,0 +1,112 @@
+import { useContext, useEffect } from "react";
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Text } from "../../Text";
+import { ThemeProvider, ThemeContext } from "../../../contexts";
+import {
+  PercentageTotalsQuestion,
+  PercentageTotalsQuestionProps,
+} from "./PercentageTotalsQuestion";
+import { excludeControls } from "../../../utils/excludeControls";
+
+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
+  title="Chopin/PercentageTotalsQuestion"
+  component={PercentageTotalsQuestion}
+  argTypes={excludeControls("className", "help")}
+  decorators={[
+    Story => {
+      return (
+        <ThemeProvider>
+          <Story />
+        </ThemeProvider>
+      );
+    },
+  ]}
+/>
+
+# 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>
+  <Story
+    name="Normal"
+    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",
+      ],
+    }}
+  >
+    {args => {
+      const { setBreakpoints } = useContext(ThemeContext);
+      useEffect(() => {
+        setBreakpoints(breakpoints);
+      }, [setBreakpoints]);
+      return <PercentageTotalsQuestion {...args} />;
+    }}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable 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.test.tsx

@@ -0,0 +1,170 @@
+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

@@ -0,0 +1,68 @@
+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

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