@simplybusiness/mobius 3.0.0

package/src/components/NumberField/NumberField.story.mdx

@@ -0,0 +1,193 @@
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { NumberField, NumberFieldProps } from "./NumberField";
+import { excludeControls } from "../../utils/excludeControls";
+
+<Meta
+  title="Forms/NumberField"
+  component={NumberField}
+  argTypes={{
+    validationState: {
+      control: {
+        type: "radio",
+        options: {
+          valid: "valid",
+          invalid: "invalid",
+          neither: "",
+        },
+        defaultValue: {
+          neither: "",
+        },
+      },
+    },
+    ...excludeControls("className", "value", "aria-describedby"),
+  }}
+/>
+
+# NumberField
+
+The `NumberField` component is used for creating a numeric input field. It can be customised by providing any of the valid
+[Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options)
+options as the `formatOptions` prop.
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { NumberField } from "@simplybusiness/mobius";
+```
+
+## Normal
+
+<Canvas>
+  <Story
+    name="Normal"
+    args={{
+      label: "Number field",
+      defaultValue: 0,
+      errorMessage: "",
+      step: 1,
+    }}
+  >
+    {args => <NumberField {...args} />}
+  </Story>
+</Canvas>
+
+## Formatted
+
+<Canvas>
+  <Story
+    name="Formatted"
+    args={{
+      label: "Number field",
+      validationState: "",
+      defaultValue: 0,
+      formatOptions: {
+        style: "percent",
+      },
+      errorMessage: "",
+      step: 1,
+    }}
+  >
+    {args => <NumberField {...args} />}
+  </Story>
+</Canvas>
+
+## Limited range
+
+<Canvas>
+  <Story
+    name="Limited range"
+    args={{
+      label: "Number field",
+      validationState: "",
+      minValue: -10,
+      maxValue: 10,
+      defaultValue: 0,
+      errorMessage: "",
+      step: 1,
+    }}
+  >
+    {args => <NumberField {...args} />}
+  </Story>
+</Canvas>
+
+## Valid
+
+<Canvas>
+  <Story
+    name="Valid"
+    args={{
+      label: "Number field",
+      validationState: "valid",
+      defaultValue: 0,
+      errorMessage: "",
+      step: 1,
+    }}
+  >
+    {args => <NumberField {...args} />}
+  </Story>
+</Canvas>
+
+## Valid
+
+<Canvas>
+  <Story
+    name="Invalid"
+    args={{
+      label: "Number field",
+      validationState: "invalid",
+      errorMessage: "Error message",
+      defaultValue: 0,
+      step: 1,
+    }}
+  >
+    {args => <NumberField {...args} />}
+  </Story>
+</Canvas>
+
+## Disabled
+
+<Canvas>
+  <Story
+    name="Disabled"
+    args={{
+      label: "Number field",
+      validationState: "",
+      isDisabled: true,
+      defaultValue: 0,
+      errorMessage: "",
+      step: 1,
+    }}
+  >
+    {args => <NumberField {...args} />}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={NumberField} />
+
+## Component HTML Structure and Class names
+
+The following HTML is rendered for a NumberField:
+
+```html
+<div class="mobius/NumberField">
+  <label class="mobius mobius/Label mobius/NumberFieldLabel">Label</label>
+  <div class="mobius/NumberFieldInputGroup">
+    <input class="mobius/NumberFieldInput" />
+    <button class="mobius/NumberFieldButton mobius/NumberFieldButtonPlus">
+      +
+    </button>
+    <button
+      type="button"
+      class="mobius/NumberFieldButton mobius/NumberFieldButtonMinus"
+      tabindex="-1"
+      aria-label="Decrease Number field"
+      aria-controls="react-aria7586995458-316"
+    >
+      -
+    </button>
+  </div>
+  <div class="mobius/ErrorMessage">Error message</div>
+</div>
+```
+
+Class names are augmented with the following flags if true:
+
+- --is-disabled
+- --is-hovered
+- --is-focused
+- --is-valid
+- --is-invalid
+- --is-required
+- --is-optional
+
+---
+
+[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/NumberField) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/NumberField/NumberField.test.tsx

@@ -0,0 +1,137 @@
+import { render, screen } from "@testing-library/react";
+import { SSRProvider } from "@react-aria/ssr";
+import userEvent from "@testing-library/user-event";
+import { NumberField } from ".";
+
+describe("NumberField", () => {
+  it("should render without errors", () => {
+    render(<NumberField label="NumberField" />);
+  });
+
+  it("should match snapshot", () => {
+    const { asFragment } = render(
+      <SSRProvider>
+        <NumberField label="NumberField" />
+      </SSRProvider>,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it("should render with label", () => {
+    const { getByText } = render(<NumberField label="Sample label" />);
+
+    expect(getByText("Sample label")).toBeInTheDocument();
+  });
+
+  it("should render with error message", () => {
+    const { getByLabelText } = render(
+      <NumberField label="Number" errorMessage="Sample error message" />,
+    );
+
+    expect(getByLabelText("Number")).toHaveAccessibleDescription(
+      "Sample error message",
+    );
+  });
+
+  it("should render with disabled state", () => {
+    const { getByLabelText } = render(
+      <NumberField label="Number" isDisabled />,
+    );
+
+    expect(getByLabelText("Number")).toBeDisabled();
+  });
+
+  it("should render with custom class name", () => {
+    const { getByLabelText } = render(
+      <NumberField label="Number" className="sample-class" />,
+    );
+
+    expect(getByLabelText("Number")).toHaveClass("sample-class");
+  });
+
+  it("should disable the decrement button when at minimum value", () => {
+    const { getByLabelText } = render(
+      <NumberField label="Number" minValue={10} value={10} />,
+    );
+
+    expect(getByLabelText("Decrease Number")).toBeDisabled();
+  });
+
+  it("should disable the increment button when at maximum value", () => {
+    const { getByLabelText } = render(
+      <NumberField label="Number" maxValue={10} value={10} />,
+    );
+
+    expect(getByLabelText("Increase Number")).toBeDisabled();
+  });
+
+  describe("disabled", () => {
+    it("should disable the input when disabled", () => {
+      const { getByLabelText } = render(
+        <NumberField label="Number" isDisabled value={10} />,
+      );
+
+      expect(getByLabelText("Number")).toBeDisabled();
+    });
+
+    it("should disable the increment button when disabled", () => {
+      const { getByLabelText } = render(
+        <NumberField label="Number" isDisabled value={10} />,
+      );
+
+      expect(getByLabelText("Increase Number")).toBeDisabled();
+    });
+
+    it("should disable the decrement button when disabled", () => {
+      const { getByLabelText } = render(
+        <NumberField label="Number" isDisabled value={10} />,
+      );
+
+      expect(getByLabelText("Decrease Number")).toBeDisabled();
+    });
+  });
+
+  it("should reformat on blur", async () => {
+    const { getByLabelText } = render(
+      <NumberField
+        label="Number"
+        formatOptions={{
+          style: "percent",
+        }}
+      />,
+    );
+    await userEvent.tab();
+    await userEvent.type(getByLabelText("Number"), "42");
+    await userEvent.tab();
+    expect(getByLabelText("Number")).toHaveValue("42%");
+  });
+
+  describe("isRequired", () => {
+    it("should set aria-required to true", () => {
+      render(<NumberField label="Number" isDisabled value={10} isRequired />);
+      expect(screen.getByLabelText("Number")).toHaveAttribute(
+        "aria-required",
+        "true",
+      );
+    });
+
+    it("should have className of --is-required when true", () => {
+      render(<NumberField label="Number" isDisabled value={10} isRequired />);
+      expect(screen.getByLabelText("Number")).toHaveClass("--is-required");
+    });
+
+    it("should have className of --is-optional when false", () => {
+      render(
+        <NumberField label="Number" isDisabled value={10} isRequired={false} />,
+      );
+      expect(screen.getByLabelText("Number")).toHaveClass("--is-optional");
+    });
+
+    it("should have neither --is-required nor --is-optional when unset", () => {
+      render(<NumberField label="Number" isDisabled value={10} />);
+      expect(screen.getByLabelText("Number")).not.toHaveClass("--is-required");
+      expect(screen.getByLabelText("Number")).not.toHaveClass("--is-optional");
+    });
+  });
+});

package/src/components/NumberField/NumberField.tsx

@@ -0,0 +1,145 @@
+import { Ref, forwardRef, RefAttributes, ReactNode, useRef } from "react";
+import { DOMProps } from "@react-types/shared";
+import {
+  useNumberField,
+  type AriaNumberFieldProps,
+} from "@react-aria/numberfield";
+import { useNumberFieldState } from "@react-stately/numberfield";
+import { useHover } from "@react-aria/interactions";
+import { useLocale } from "@react-aria/i18n";
+import clsx from "clsx";
+import { mergeProps, useSlotId } from "@react-aria/utils";
+import { useFocusRing } from "@react-aria/focus";
+import { ForwardedRefComponent } from "../../types/components";
+import { Label } from "../Label";
+import { NumberFieldButton } from "./NumberFieldButton";
+import { ErrorMessage } from "../ErrorMessage";
+import { spaceDelimitedList } from "../../utils/spaceDelimitedList";
+import { Icon } from "../Icon";
+
+export type NumberFieldElementType = HTMLInputElement;
+
+export interface NumberFieldProps
+  extends DOMProps,
+    AriaNumberFieldProps,
+    RefAttributes<NumberFieldElementType> {
+  children?: ReactNode;
+  /** Custom class name for setting specific CSS */
+  className?: string;
+  // Duplicated here to ensure they appear in Storybook
+  value?: AriaNumberFieldProps["value"];
+  defaultValue?: AriaNumberFieldProps["defaultValue"];
+  minValue?: AriaNumberFieldProps["minValue"];
+  maxValue?: AriaNumberFieldProps["maxValue"];
+  step?: AriaNumberFieldProps["step"];
+  label?: string;
+  "aria-describedby"?: string;
+  validationState?: "valid" | "invalid" | undefined;
+  errorMessage?: string;
+}
+
+export type NumberFieldRef = Ref<NumberFieldElementType>;
+
+const NumberField: ForwardedRefComponent<
+  NumberFieldProps,
+  NumberFieldElementType
+> = forwardRef((props: NumberFieldProps, ref: NumberFieldRef) => {
+  const {
+    isDisabled,
+    isRequired,
+    label,
+    className,
+    errorMessage,
+    validationState,
+  } = props;
+  const { locale } = useLocale();
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const state = useNumberFieldState({ ...props, locale });
+
+  const {
+    inputProps,
+    incrementButtonProps,
+    decrementButtonProps,
+    groupProps,
+    labelProps,
+  } = useNumberField(props, state, inputRef);
+
+  const { hoverProps, isHovered } = useHover(props);
+
+  const { focusProps, isFocusVisible } = useFocusRing({
+    within: true,
+    isTextInput: true,
+  });
+
+  const classes = clsx("mobius/NumberField", className, {
+    "--is-disabled": isDisabled,
+    "--is-hovered": isHovered,
+    "--is-focused": isFocusVisible,
+    "--is-valid": validationState === "valid",
+    "--is-invalid": validationState === "invalid",
+    "--is-required": typeof isRequired === "boolean" && isRequired,
+    "--is-optional": typeof isRequired === "boolean" && !isRequired,
+  });
+
+  const inputClasses = clsx("mobius/NumberFieldInput", className, {
+    "--is-hovered": isHovered,
+    "--is-focused": isFocusVisible,
+    "--is-required": typeof isRequired === "boolean" && isRequired,
+    "--is-optional": typeof isRequired === "boolean" && !isRequired,
+  });
+
+  const labelClasses = clsx("mobius/NumberFieldLabel", {
+    "--is-valid": validationState === "valid",
+    "--is-invalid": validationState === "invalid",
+    "--is-disabled": isDisabled,
+  });
+
+  const errorMessageId = useSlotId([Boolean(errorMessage), validationState]);
+  const describedBy = spaceDelimitedList([
+    errorMessageId,
+    props["aria-describedby"],
+  ]);
+
+  return (
+    <div className={classes}>
+      <Label {...labelProps} className={labelClasses}>
+        {label}
+      </Label>
+      <div
+        className="mobius/NumberFieldInputGroup"
+        {...groupProps}
+        {...hoverProps}
+      >
+        <input
+          {...mergeProps(inputProps, focusProps)}
+          className={inputClasses}
+          aria-describedby={describedBy}
+          ref={inputRef || ref}
+        />
+        <NumberFieldButton
+          type="button"
+          className="mobius/NumberFieldButtonPlus"
+          {...incrementButtonProps}
+          disabled={isDisabled || state.canIncrement === false}
+        >
+          <Icon name="chevronUp" />
+        </NumberFieldButton>
+        <NumberFieldButton
+          type="button"
+          className="mobius/NumberFieldButtonMinus"
+          {...decrementButtonProps}
+          disabled={isDisabled || state.canDecrement === false}
+        >
+          <Icon name="chevronDown" />
+        </NumberFieldButton>
+      </div>
+      {errorMessage && (
+        <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />
+      )}
+    </div>
+  );
+});
+
+NumberField.displayName = "NumberField";
+export { NumberField };

package/src/components/NumberField/NumberFieldButton.tsx

@@ -0,0 +1,36 @@
+import { useButton } from "@react-aria/button";
+import { useFocusRing } from "@react-aria/focus";
+import { useHover } from "@react-aria/interactions";
+import clsx from "clsx";
+import { useRef } from "react";
+
+export function NumberFieldButton({ children, className, ...props }: any) {
+  const ref = useRef(null);
+  const { buttonProps } = useButton(props, ref);
+
+  const { hoverProps, isHovered } = useHover({
+    ...props,
+    allowFocusWhenDisabled: false,
+  });
+  const { focusProps, isFocusVisible } = useFocusRing({ within: true });
+
+  const classes = clsx("mobius/NumberFieldButton", className, {
+    "--is-hovered": isHovered,
+    "--is-focused": isFocusVisible,
+    "--is-disabled": buttonProps.disabled,
+  });
+
+  return (
+    <button
+      type="button"
+      className={classes}
+      {...buttonProps}
+      {...hoverProps}
+      {...focusProps}
+      tabIndex={props.excludeFromTabOrder ? -1 : undefined}
+      ref={ref}
+    >
+      {children}
+    </button>
+  );
+}

package/src/components/NumberField/__snapshots__/NumberField.test.tsx.snap

@@ -0,0 +1,83 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NumberField should match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="mobius/NumberField"
+  >
+    <label
+      class="mobius mobius/Label mobius/NumberFieldLabel"
+      for="react-aria-1"
+      id="react-aria-2"
+    >
+      NumberField
+    </label>
+    <div
+      class="mobius/NumberFieldInputGroup"
+      role="group"
+    >
+      <input
+        aria-labelledby="react-aria-2"
+        aria-roledescription="Number field"
+        autocomplete="off"
+        autocorrect="off"
+        class="mobius/NumberFieldInput"
+        id="react-aria-1"
+        inputmode="numeric"
+        spellcheck="false"
+        type="text"
+        value=""
+      />
+      <button
+        aria-controls="react-aria-1"
+        aria-label="Increase NumberField"
+        class="mobius/NumberFieldButton mobius/NumberFieldButtonPlus"
+        tabindex="-1"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          class="mobius mobius/Icon css-jnky18"
+          focusable="false"
+          role="img"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 6.75a.788.788 0 0 0-.607.26l-9.545 8.678c-.347.347-.347.868 0 1.215s.955.347 1.302 0l8.851-8.07 8.851 8.07c.347.347.955.347 1.302 0s.347-.868 0-1.215L12.609 7.01a.786.786 0 0 0-.607-.26z"
+            fill="currentColor"
+          />
+        </svg>
+      </button>
+      <button
+        aria-controls="react-aria-1"
+        aria-label="Decrease NumberField"
+        class="mobius/NumberFieldButton mobius/NumberFieldButtonMinus"
+        tabindex="-1"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          class="mobius mobius/Icon css-jnky18"
+          focusable="false"
+          role="img"
+          viewBox="0 0 16 16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g
+            fill="none"
+            fill-rule="evenodd"
+          >
+            <path
+              d="M2 6l5.978 5L14 6"
+              stroke="currentColor"
+              stroke-linecap="square"
+              stroke-width="1.5"
+            />
+          </g>
+        </svg>
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/components/NumberField/index.tsx

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

package/src/components/Option/Option.tsx

@@ -0,0 +1,23 @@
+import { forwardRef, RefAttributes, Ref } from "react";
+import { ForwardedRefComponent } from "../../types/components";
+
+export interface OptionProps extends RefAttributes<HTMLOptionElement> {
+  value?: string;
+  children?: string;
+  isDisabled?: boolean;
+}
+
+export type OptionRef = Ref<HTMLOptionElement>;
+
+const Option: ForwardedRefComponent<OptionProps, HTMLOptionElement> =
+  forwardRef((props: OptionProps, ref: OptionRef) => {
+    const { isDisabled, ...rest } = props;
+    const mappedProps = {
+      ...rest,
+      disabled: isDisabled,
+    };
+    return <option {...mappedProps} ref={ref} />;
+  });
+
+Option.displayName = "Option";
+export { Option };

package/src/components/Option/index.tsx

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