@simplybusiness/mobius 3.0.0

package/src/components/PasswordField/PasswordField.story.mdx

@@ -0,0 +1,109 @@
+import { useState } from "react";
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { PasswordField } from "./PasswordField";
+import { Label, Segment, SegmentGroup } from "..";
+import { excludeControls } from "../../utils/excludeControls";
+
+<Meta
+  title="Forms/PasswordField"
+  component={PasswordField}
+  argTypes={{
+    validationState: {
+      control: {
+        type: "radio",
+        options: {
+          valid: "valid",
+          invalid: "invalid",
+          neither: "",
+        },
+        defaultValue: {
+          neither: "",
+        },
+      },
+    },
+    type: {
+      control: {
+        type: "radio",
+        options: {
+          text: "text",
+          password: "password",
+        },
+      },
+    },
+    ...excludeControls("className"),
+  }}
+/>
+
+# PasswordField
+
+PasswordField allows a user to input a password. It includes a show/hide button on the right hand side.
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { PasswordField } from "@simplybusiness/mobius";
+```
+
+## Examples
+
+### Normal
+
+<Canvas>
+  <Story
+    name="Normal"
+    args={{
+      label: "Password",
+      placeholder: "",
+      isDisabled: false,
+      validationState: "",
+      errorMessage: "",
+      type: "password",
+    }}
+  >
+    {args => <PasswordField {...args}></PasswordField>}
+  </Story>
+</Canvas>
+
+## Accessibility
+
+It's recommended to pass a `label` prop in order to show a visual label. When the `label` prop is not provided, make sure to provide the `aria-label` prop instead. If the text field is labeled by a separate element, the `aria-labelledby` props must be used with the id of the labeling element.
+
+## Events
+
+The `onChange` prop can be used to listen to changes of the value of the input. See the prop table for the complete list of events supported.
+See the example of controlled component using the `onChange` prop.
+
+## Props
+
+<ArgsTable of={PasswordField} />
+
+## Component HTML Structure and Class names
+
+The following HTML is rendered for a PasswordField:
+
+```html
+<div class="mobius/PasswordField mobius/TextField">
+  <label class="mobius/Label">{label}</label>
+  <input class="mobius/TextFieldInput" type="text" />
+  <div class="mobius/ErrorMessage">{errors}</div>
+</div>
+```
+
+Class names are augmented with the following flags if true:
+
+- --is-focused
+- --is-disabled
+- --is-hovered
+- --is-selected
+- --is-valid
+- --is-invalid
+
+---
+
+[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/PasswordField) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/PasswordField/PasswordField.test.tsx

@@ -0,0 +1,39 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { PasswordField } from "./PasswordField";
+
+describe("PasswordField", () => {
+  it("should render without errors", () => {
+    const { container } = render(<PasswordField label="Password" />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("should hide the password by default", () => {
+    render(<PasswordField label="Password" data-testid="password-field" />);
+    expect(screen.getByTestId("password-field")).toHaveAttribute(
+      "type",
+      "password",
+    );
+  });
+
+  it("should show the password on request", async () => {
+    render(<PasswordField label="Password" data-testid="password-field" />);
+    await userEvent.click(screen.getByTestId("show-hide-button"));
+    expect(screen.getByTestId("password-field")).toHaveAttribute(
+      "type",
+      "text",
+    );
+  });
+
+  it("should return focus to input after pressing show/hide", async () => {
+    render(<PasswordField label="Password" data-testid="password-field" />);
+    await userEvent.tab();
+    expect(screen.getByTestId("password-field")).toHaveFocus();
+
+    // Press Show button with keyboard
+    await userEvent.tab();
+    await userEvent.keyboard("{enter}");
+
+    expect(screen.getByTestId("password-field")).toHaveFocus();
+  });
+});

package/src/components/PasswordField/PasswordField.tsx

@@ -0,0 +1,39 @@
+import clsx from "clsx";
+import { forwardRef, useState, useRef } from "react";
+import { mergeRefs } from "../../utils/mergeRefs";
+import {
+  TextField,
+  type TextFieldProps,
+  type TextFieldRef,
+  type TextFieldElementType,
+} from "../TextField";
+import { ShowHideButton } from "./ShowHideButton";
+
+export interface PasswordFieldProps extends TextFieldProps {}
+
+export type PasswordFieldRef = TextFieldRef;
+
+export const PasswordField = forwardRef(
+  ({ className, ...props }: PasswordFieldProps, ref: TextFieldRef) => {
+    const [show, setShow] = useState(false);
+    const type = show ? "text" : "password";
+    const classNames = clsx("mobius/PasswordField", className);
+    const localRef = useRef<TextFieldElementType>();
+
+    const handleShowHideButtonClick = () => {
+      setShow(oldShow => !oldShow);
+      localRef.current?.focus();
+    };
+
+    return (
+      <TextField
+        ref={mergeRefs([localRef, ref])}
+        type={type}
+        className={classNames}
+        {...props}
+      >
+        <ShowHideButton onClick={handleShowHideButtonClick} show={show} />
+      </TextField>
+    );
+  },
+);

package/src/components/PasswordField/ShowHideButton.tsx

@@ -0,0 +1,22 @@
+export interface ShowHideButtonProps {
+  show?: boolean;
+  onClick: () => void;
+}
+
+export const ShowHideButton = ({
+  show = false,
+  onClick,
+}: ShowHideButtonProps) => (
+  <button
+    className="mobius/PasswordFieldShowButton"
+    type="button"
+    onClick={e => {
+      e.preventDefault();
+      onClick();
+    }}
+    aria-label={`${show ? "Hide" : "Show"} password`}
+    data-testid="show-hide-button"
+  >
+    {show ? "hide" : "show"}
+  </button>
+);

package/src/components/PasswordField/index.tsx

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

package/src/components/Progress/Progress.story.mdx

@@ -0,0 +1,172 @@
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Progress, ProgressProps } from "./Progress";
+import { excludeControls } from "../../utils/excludeControls";
+
+<Meta
+  title="Components/Progress"
+  component={Progress}
+  argTypes={{
+    value: {
+      control: {
+        type: "range",
+        min: 0,
+        max: 10,
+        step: 1,
+      },
+    },
+    minValue: {
+      control: {
+        type: "range",
+        min: 0,
+        max: 10,
+        step: 1,
+      },
+    },
+    maxValue: {
+      control: {
+        type: "range",
+        min: 0,
+        max: 10,
+        step: 1,
+      },
+    },
+    label: {
+      control: {
+        type: "text",
+      },
+    },
+    variant: {
+      control: "radio",
+      options: ["primary", "secondary"],
+    },
+    ...excludeControls("className", "valueFormatter"),
+  }}
+/>
+
+# Progress
+
+Progress bars allow users to see how far along a task or workflow is. For
+example, what step they are on in a multi-step form.
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { Progress } from "@simplybusiness/mobius";
+```
+
+## Primary
+
+<Canvas>
+  <Story
+    name="Primary"
+    args={{
+      value: 2,
+      minValue: 0,
+      maxValue: 10,
+      label: "Progress",
+      variant: "primary",
+      showValueLabel: true,
+    }}
+  >
+    {args => <Progress {...args} />}
+  </Story>
+</Canvas>
+
+## Secondary
+
+<Canvas>
+  <Story
+    name="Secondary"
+    args={{
+      value: 2,
+      minValue: 0,
+      maxValue: 10,
+      label: "Secondary",
+      variant: "secondary",
+      showValueLabel: true,
+    }}
+  >
+    {args => <Progress {...args} />}
+  </Story>
+</Canvas>
+
+## No Visible Label
+
+<Canvas>
+  <Story
+    name="No Visible Label"
+    args={{
+      value: 1,
+      minValue: 0,
+      maxValue: 4,
+      label: "",
+      variant: "primary",
+      "aria-label": "Progress",
+      showValueLabel: true,
+    }}
+    parameters={{ controls: { exclude: ["aria-label"] } }}
+  >
+    {args => <Progress {...args} />}
+  </Story>
+</Canvas>
+
+## Custom value format
+
+export const customValueFormatter = (value, minValue, maxValue) =>
+  `Step ${value} of ${maxValue}`;
+
+<Canvas>
+  <Story
+    name="Custom Value Format"
+    args={{
+      value: 1,
+      minValue: 0,
+      maxValue: 4,
+      label: "Progress",
+      variant: "primary",
+      showValueLabel: true,
+      valueFormatter: customValueFormatter,
+    }}
+  >
+    {args => <Progress {...args} />}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={Progress} />
+
+## Component HTML Structure and Class names
+
+The following HTML is rendered for a Progress:
+
+```html
+<div
+  id="react-aria123"
+  aria-labelledby="react-aria456"
+  aria-valuenow="2"
+  aria-valuemin="0"
+  aria-valuemax="10"
+  aria-valuetext="20%"
+  role="progressbar"
+  class="mobius mobius/Progress --is-primary"
+>
+  <label class="mobius mobius/Label mobius/ProgressLabel" id="react-aria456"
+    >Primary</label
+  >
+  <div class="mobius/ProgressTrack">
+    <div class="mobius/ProgressBar css-ufscxh"></div>
+  </div>
+  <label class="mobius mobius/Label">20%</label>
+</div>
+```
+
+---
+
+[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Progress) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Progress/Progress.test.tsx

@@ -0,0 +1,60 @@
+import { render } from "@testing-library/react";
+import { Progress } from ".";
+
+describe("Progress", () => {
+  describe("classnames", () => {
+    let result: any;
+
+    beforeEach(() => {
+      result = render(
+        <Progress
+          label="Progress"
+          className="test"
+          minValue={0}
+          maxValue={10}
+        />,
+      );
+    });
+
+    const classNames = ["mobius", "mobius/Progress", "test"];
+    it.each(classNames)("should have classname %s", className => {
+      expect(result.container.firstChild).toHaveClass(className);
+    });
+  });
+
+  const valueFormatter = (value: number, minValue: number, maxValue: number) =>
+    `${value},${minValue},${maxValue}`;
+
+  describe("custom formatter", () => {
+    const value = 5;
+    const minValue = 0;
+    const maxValue = 10;
+
+    let result: any;
+
+    beforeEach(() => {
+      result = render(
+        <Progress
+          label="Progress"
+          minValue={minValue}
+          maxValue={maxValue}
+          value={value}
+          valueFormatter={valueFormatter}
+        />,
+      );
+    });
+
+    it("should use custom formatter for aria-valuetext", () => {
+      expect(result.container.firstChild).toHaveAttribute(
+        "aria-valuetext",
+        `${value},${minValue},${maxValue}`,
+      );
+    });
+
+    it("should use custom formatter for value text", () => {
+      expect(result.getByTestId("value-label")).toHaveTextContent(
+        `${value},${minValue},${maxValue}`,
+      );
+    });
+  });
+});

package/src/components/Progress/Progress.tsx

@@ -0,0 +1,139 @@
+/* eslint no-console: "off" */
+import { Ref, forwardRef, RefAttributes, ReactNode } from "react";
+import { DOMProps } from "@react-types/shared";
+import clsx from "clsx";
+import { useProgressBar } from "@react-aria/progress";
+import type { AriaProgressBarProps } from "@react-types/progress";
+import { clamp } from "@react-aria/utils";
+import { ForwardedRefComponent } from "../../types/components";
+import { Label } from "../Label";
+
+export type ProgressElementType = HTMLDivElement;
+
+export interface ProgressProps
+  extends AriaProgressBarProps,
+    DOMProps,
+    RefAttributes<ProgressElementType> {
+  children?: ReactNode;
+  /** Custom class name for setting specific CSS */
+  className?: string;
+  variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info";
+  value?: number;
+  minValue?: number;
+  maxValue?: number;
+  valueFormatter?: (
+    value: number,
+    minValue: number,
+    maxValue: number,
+  ) => string;
+}
+
+export type ProgressRef = Ref<ProgressElementType>;
+
+function warnAboutInvalidValues(
+  value: number,
+  minValue: number,
+  maxValue: number,
+) {
+  if (minValue > maxValue) {
+    console.warn("minValue is greater than maxValue");
+  }
+  if (value < minValue) {
+    console.warn("Progress value is less than minValue");
+  }
+  if (value > maxValue) {
+    console.warn("Progress value is greater than maxValue");
+  }
+}
+
+const sanitizedValue = (
+  value: number | undefined,
+  defaultValue: number,
+): number => {
+  const numberValue = parseFloat(value as any);
+  return Number.isNaN(numberValue) ? defaultValue : numberValue;
+};
+
+const DEFAULT_VALUE = 0;
+const DEFAULT_MIN_VALUE = 0;
+const DEFAULT_MAX_VALUE = 100;
+
+const Progress: ForwardedRefComponent<ProgressProps, ProgressElementType> =
+  forwardRef((props: ProgressProps, ref: ProgressRef) => {
+    const {
+      label,
+      showValueLabel = !!label,
+      valueFormatter,
+      variant = "primary",
+    } = props;
+
+    let { value, minValue, maxValue } = props;
+
+    value = sanitizedValue(value, DEFAULT_VALUE);
+    minValue = sanitizedValue(minValue, DEFAULT_MIN_VALUE);
+    maxValue = sanitizedValue(maxValue, DEFAULT_MAX_VALUE);
+
+    // Will never happen but lets appease the typescript gods
+    if (
+      value === undefined ||
+      minValue === undefined ||
+      maxValue === undefined
+    ) {
+      return null;
+    }
+
+    warnAboutInvalidValues(value, minValue, maxValue);
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const { progressBarProps, labelProps } = useProgressBar({
+      ...props,
+      value,
+      minValue,
+      maxValue,
+    });
+
+    // Calculate the width of the progress bar as a percentage
+    const percentage = clamp(
+      Math.round(((value - minValue) / (maxValue - minValue)) * 100),
+      0,
+      100,
+    );
+    const barWidth = `${percentage}%`;
+
+    const classes = clsx("mobius", "mobius/Progress", props.className, {
+      "--is-primary": variant === "primary",
+      "--is-secondary": variant === "secondary",
+    });
+
+    progressBarProps["aria-valuetext"] =
+      valueFormatter instanceof Function
+        ? valueFormatter(value, minValue, maxValue!)
+        : progressBarProps["aria-valuetext"];
+
+    return (
+      <div {...progressBarProps} ref={ref} className={classes}>
+        {label && (
+          <Label className="mobius/ProgressLabel" {...labelProps}>
+            {label}
+          </Label>
+        )}
+        <div className="mobius/ProgressTrack">
+          <div className="mobius/ProgressBar" css={{ width: barWidth }} />
+        </div>
+        {showValueLabel && (
+          <Label data-testid="value-label">
+            {progressBarProps["aria-valuetext"]}
+          </Label>
+        )}
+      </div>
+    );
+  });
+
+Progress.defaultProps = {
+  value: DEFAULT_VALUE,
+  minValue: DEFAULT_MIN_VALUE,
+  maxValue: DEFAULT_MAX_VALUE,
+};
+
+Progress.displayName = "Progress";
+export { Progress };

package/src/components/Progress/index.tsx

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