@simplybusiness/mobius 3.0.0

package/src/components/TextField/TextField.story.mdx

@@ -0,0 +1,232 @@
+import { useState } from "react";
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { TextField } from "./TextField";
+import { Label, Segment, SegmentGroup } from "..";
+import { excludeControls } from "../../utils/excludeControls";
+
+<Meta
+  title="Forms/TextField"
+  component={TextField}
+  argTypes={{
+    validationState: {
+      control: {
+        type: "radio",
+        options: {
+          valid: "valid",
+          invalid: "invalid",
+          neither: "",
+        },
+        defaultValue: {
+          neither: "",
+        },
+      },
+    },
+    type: {
+      control: "radio",
+      defaultValue: "text",
+      options: ["text", "password", "email", "tel", "url", "hidden"],
+    },
+    ...excludeControls("className"),
+  }}
+/>
+
+# TextField
+
+TextField allows a user to input some text.
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { TextField } from "@simplybusiness/mobius";
+```
+
+## Examples
+
+### Normal
+
+<Canvas>
+  <Story
+    name="Normal"
+    args={{
+      label: "First name",
+      placeholder: "",
+      type: "text",
+      isDisabled: false,
+      validationState: "",
+      errorMessage: "",
+    }}
+  >
+    {args => <TextField {...args}></TextField>}
+  </Story>
+</Canvas>
+
+### Placeholder
+
+<Canvas>
+  <Story
+    name="Placeholder"
+    args={{
+      label: "Email",
+      placeholder: "email@example.com",
+      type: "text",
+      isDisabled: false,
+      validationState: "",
+      errorMessage: "",
+    }}
+  >
+    {args => <TextField {...args}></TextField>}
+  </Story>
+</Canvas>
+
+### Controlled Value
+
+<Canvas>
+  <Story
+    name="Controlled Value"
+    args={{
+      label: "First name",
+      placeholder: "",
+      defaultValue: "john.doe@email.com",
+      type: "text",
+      isDisabled: false,
+      validationState: "",
+      errorMessage: "",
+    }}
+  >
+    {args => <TextField {...args}></TextField>}
+  </Story>
+</Canvas>
+
+### Disabled
+
+<Canvas>
+  <Story
+    name="Disabled"
+    args={{
+      label: "First name",
+      placeholder: "",
+      defaultValue: "john.doe@email.com",
+      type: "text",
+      isDisabled: true,
+      validationState: "",
+      errorMessage: "",
+    }}
+  >
+    {args => <TextField {...args}></TextField>}
+  </Story>
+</Canvas>
+
+### Valid
+
+<Canvas>
+  <Story
+    name="Valid"
+    args={{
+      label: "First name",
+      placeholder: "",
+      defaultValue: "john.doe@email.com",
+      type: "text",
+      isDisabled: false,
+      validationState: "valid",
+      errorMessage: "",
+    }}
+  >
+    {args => <TextField {...args}></TextField>}
+  </Story>
+</Canvas>
+
+### Hidden
+
+<Canvas>
+  <Story
+    name="Hidden"
+    args={{
+      label: "Secret",
+      placeholder: "",
+      defaultValue: "",
+      type: "hidden",
+      isDisabled: false,
+      validationState: "",
+      errorMessage: "",
+    }}
+  >
+    {args => <TextField {...args}></TextField>}
+  </Story>
+</Canvas>
+
+### Invalid
+
+<Canvas>
+  <Story
+    name="Invalid"
+    args={{
+      label: "First name",
+      placeholder: "",
+      defaultValue: "john.doe@email.com",
+      type: "text",
+      isDisabled: false,
+      validationState: "invalid",
+      errorMessage: "This is an error message",
+    }}
+  >
+    {args => <TextField {...args}></TextField>}
+  </Story>
+</Canvas>
+
+### TextField fills width of container by default
+
+<Canvas>
+  <SegmentGroup horizontal>
+    <Segment>
+      <TextField label="First name"></TextField>
+    </Segment>
+    <Segment>
+      <TextField label="Last name"></TextField>
+    </Segment>
+  </SegmentGroup>
+</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={TextField} />
+
+## Component HTML Structure and Class names
+
+The following HTML is rendered for a TextField:
+
+```html
+<div class="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
+- --is-optional
+
+---
+
+[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/TextField) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/TextField/TextField.test.tsx

@@ -0,0 +1,217 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { matchers } from "@emotion/jest";
+import { TextField } from ".";
+
+const WRAPPER_CLASS_NAME = "mobius/TextField";
+const INPUT_CLASS_NAME = "mobius/TextInput";
+
+expect.extend(matchers);
+
+describe("Test for TextField", () => {
+  it("should render without errors", () => {
+    render(<TextField label="First name" data-testid="textfield" />);
+    expect(screen.getByTestId("textfield")).toHaveAttribute("type", "text");
+  });
+
+  it("can be hidden", () => {
+    render(
+      <TextField
+        label="Secret Value"
+        type="hidden"
+        value="SECRET"
+        data-testid="test"
+      />,
+    );
+    expect(screen.getByTestId("test")).toHaveAttribute("type", "hidden");
+    expect(screen.getByTestId("test")).toHaveAttribute("value", "SECRET");
+    expect(screen.getByTestId("test")).toHaveAttribute(
+      "aria-label",
+      "Secret Value",
+    );
+  });
+
+  it("correctly passes on type attribute", () => {
+    render(
+      <TextField
+        label="Secret Value"
+        type="password"
+        value="SECRET"
+        data-testid="test"
+      />,
+    );
+    expect(screen.getByTestId("test")).toHaveAttribute("type", "password");
+  });
+
+  describe("isRequired", () => {
+    it("should set aria-required to true", () => {
+      render(<TextField label="First name" isRequired />);
+      expect(screen.getByLabelText("First name")).toHaveAttribute(
+        "aria-required",
+        "true",
+      );
+    });
+
+    it("should have className of --is-required when true", () => {
+      render(<TextField label="First name" isRequired />);
+      expect(screen.getByLabelText("First name")).toHaveClass("--is-required");
+    });
+
+    it("should have className of --is-optional when false", () => {
+      render(<TextField label="First name" isRequired={false} />);
+      expect(screen.getByLabelText("First name")).toHaveClass("--is-optional");
+    });
+
+    it("should have neither --is-required nor --is-optional when unset", () => {
+      render(<TextField label="First name" />);
+      expect(screen.getByLabelText("First name")).not.toHaveClass(
+        "--is-required",
+      );
+      expect(screen.getByLabelText("First name")).not.toHaveClass(
+        "--is-optional",
+      );
+    });
+  });
+
+  describe("uses correct class names", () => {
+    describe("for container", () => {
+      it("uses Mobius class", () => {
+        const { container } = render(
+          <TextField label="TextField" data-testid="test" />,
+        );
+        expect(container.firstChild).toHaveClass("mobius");
+      });
+
+      it("uses base Mobius class", () => {
+        const { container } = render(
+          <TextField label="TextField" data-testid="test" />,
+        );
+        expect(container.firstChild).toHaveClass(WRAPPER_CLASS_NAME);
+      });
+
+      it("includes disabled class name", () => {
+        const { container } = render(
+          <TextField label="TextField" data-testid="test" isDisabled />,
+        );
+        expect(container.firstChild).toHaveClass("--is-disabled");
+      });
+
+      it("includes valid class name", () => {
+        const { container } = render(
+          <TextField
+            label="TextField"
+            data-testid="test"
+            validationState="valid"
+          />,
+        );
+        expect(container.firstChild).toHaveClass("--is-valid");
+      });
+
+      it("includes invalid class name", () => {
+        const { container } = render(
+          <TextField
+            label="TextField"
+            data-testid="test"
+            validationState="invalid"
+          />,
+        );
+        expect(container.firstChild).toHaveClass("--is-invalid");
+      });
+
+      it("includes custom class name", () => {
+        const { container } = render(
+          <TextField
+            label="TextField"
+            data-testid="test"
+            className="my-class"
+          />,
+        );
+        expect(container.firstChild).toHaveClass("my-class");
+      });
+    });
+
+    describe("for input", () => {
+      it("uses Mobius class", () => {
+        render(<TextField label="TextField" data-testid="test" />);
+        expect(screen.getByTestId("test")).toHaveClass("mobius");
+      });
+
+      it("uses base Mobius class", () => {
+        render(<TextField label="TextField" data-testid="test" />);
+        expect(screen.getByTestId("test")).toHaveClass(INPUT_CLASS_NAME);
+      });
+
+      it("includes disabled class name and attribute", () => {
+        render(<TextField label="TextField" data-testid="test" isDisabled />);
+
+        const inputField = screen.getByTestId("test");
+
+        expect(inputField).toBeDisabled();
+        expect(screen.getByLabelText("TextField")).toHaveClass("--is-disabled");
+      });
+
+      it("includes valid class name", () => {
+        render(<TextField label="TextField" validationState="valid" />);
+        expect(screen.getByLabelText("TextField")).toHaveClass("--is-valid");
+      });
+
+      it("includes invalid class name", () => {
+        render(<TextField label="TextField" validationState="invalid" />);
+        expect(screen.getByLabelText("TextField")).toHaveClass("--is-invalid");
+      });
+
+      it("includes hovered class name", async () => {
+        render(<TextField label="TextField" data-testid="test" />);
+
+        const input = screen.getByTestId("test");
+
+        await fireEvent.mouseEnter(input);
+
+        expect(input).toHaveClass("--is-hovered");
+      });
+
+      it("includes focused-visible class name", async () => {
+        render(<TextField label="TextField" data-testid="test" />);
+
+        await userEvent.tab();
+
+        expect(screen.getByTestId("test")).toHaveClass("--is-focused");
+      });
+
+      it("includes custom class name", () => {
+        render(
+          <TextField
+            label="TextField"
+            data-testid="test"
+            className="my-class"
+          />,
+        );
+        expect(screen.getByTestId("test")).toHaveClass("my-class");
+      });
+    });
+  });
+
+  describe("with errors", () => {
+    it("should render the error", () => {
+      const { getByText } = render(
+        <TextField label="Name" name="name" errorMessage="Required" />,
+      );
+      expect(getByText("Required")).toBeTruthy();
+    });
+
+    it("should set aria-invalid to true", () => {
+      const { getByLabelText } = render(
+        <TextField label="Name" name="name" errorMessage="Required" />,
+      );
+      expect(getByLabelText("Name").getAttribute("aria-invalid")).toBeTruthy();
+    });
+
+    it("should set the correct aria-describedby attribute", () => {
+      const { getByLabelText } = render(
+        <TextField label="Name" name="name" errorMessage="Required" />,
+      );
+      expect(getByLabelText("Name")).toHaveAccessibleDescription("Required");
+    });
+  });
+});

package/src/components/TextField/TextField.tsx

@@ -0,0 +1,133 @@
+import {
+  Ref,
+  forwardRef,
+  RefObject,
+  RefAttributes,
+  ReactNode,
+  HTMLInputTypeAttribute,
+} from "react";
+import { AriaTextFieldOptions, useTextField } from "@react-aria/textfield";
+import { useHover } from "@react-aria/interactions";
+import { useFocusRing } from "@react-aria/focus";
+import { FocusEvents, HoverEvents, DOMProps } from "@react-types/shared";
+import clsx from "clsx";
+import { Label } from "../Label";
+import { ErrorMessage } from "../ErrorMessage";
+import { ForwardedRefComponent } from "../../types/components";
+import { Flex } from "../Flex";
+
+export type TextFieldElementType = HTMLInputElement;
+export interface TextFieldProps
+  extends DOMProps,
+    AriaTextFieldOptions<"input">,
+    HoverEvents,
+    FocusEvents,
+    RefAttributes<TextFieldElementType> {
+  className?: string;
+  errorMessage?: string;
+  children?: ReactNode;
+  label?: string;
+  type?: Exclude<
+    HTMLInputTypeAttribute,
+    | "button"
+    | "checkbox"
+    | "color"
+    | "date"
+    | "datetime-local"
+    | "file"
+    | "image"
+    | "month"
+    | "radio"
+    | "range"
+    | "reset"
+    | "submit"
+    | "week"
+  >;
+}
+
+export type TextFieldRef = Ref<TextFieldElementType>;
+
+const TextField: ForwardedRefComponent<TextFieldProps, TextFieldElementType> =
+  forwardRef((props: TextFieldProps, ref: TextFieldRef) => {
+    const {
+      isDisabled,
+      onHoverChange,
+      onHoverStart,
+      onHoverEnd,
+      type = "text",
+      validationState,
+      className,
+      label,
+      errorMessage,
+      children,
+      isRequired,
+    } = props;
+
+    const { inputProps, labelProps, errorMessageProps } = useTextField(
+      { ...props, "aria-errormessage": errorMessage },
+      ref as RefObject<HTMLInputElement>,
+    );
+    const { isFocusVisible, focusProps } = useFocusRing({
+      within: true,
+    });
+    const { isHovered, hoverProps } = useHover({
+      isDisabled,
+      onHoverChange,
+      onHoverStart,
+      onHoverEnd,
+    });
+
+    const hidden = type === "hidden";
+
+    const textfieldClasses = {
+      "--is-focused": isFocusVisible,
+      "--is-disabled": isDisabled,
+      "--is-hovered": isHovered,
+      "--is-valid": validationState === "valid",
+      "--is-invalid": validationState === "invalid",
+      "--is-required": typeof isRequired === "boolean" && isRequired,
+      "--is-optional": typeof isRequired === "boolean" && !isRequired,
+      [className || ""]: true,
+    };
+
+    const labelClasses = clsx({
+      "--is-disabled": isDisabled,
+      "--is-valid": validationState === "valid",
+      "--is-invalid": validationState === "invalid",
+    });
+
+    const containerClasses = clsx("mobius/TextField", textfieldClasses);
+
+    const inputClasses = clsx("mobius", "mobius/TextInput", textfieldClasses);
+
+    return (
+      <Flex
+        css={{ flexDirection: "column" }}
+        className={containerClasses}
+        {...focusProps}
+      >
+        {label && !hidden && (
+          <Label {...labelProps} className={labelClasses}>
+            {label}
+          </Label>
+        )}
+        <div className="mobius/TextFieldInputWrapper">
+          <input
+            {...inputProps}
+            {...hoverProps}
+            disabled={isDisabled}
+            ref={ref}
+            type={type}
+            aria-label={hidden ? props.label : undefined}
+            aria-invalid={errorMessage != null}
+            className={inputClasses}
+          />
+          <div className="mobius/TextFieldChildren">{children}</div>
+        </div>
+        <ErrorMessage {...errorMessageProps} errorMessage={errorMessage} />
+      </Flex>
+    );
+  });
+
+TextField.displayName = "TextField";
+export { TextField };

package/src/components/TextField/index.tsx

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

package/src/components/Title/Title.story.mdx

@@ -0,0 +1,62 @@
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Title, TitleProps } from "./Title";
+import { excludeControls } from "../../utils/excludeControls";
+
+<Meta
+  title="Components/Title"
+  component={Title}
+  argTypes={excludeControls("className", "elementType")}
+/>
+
+# Title
+
+The `Title` component is used for displaying context based information. A title and description can be provided.
+
+It was originally designed to display a insurance type, and company name.
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { Title } from "@simplybusiness/mobius";
+```
+
+## Normal
+
+<Canvas>
+  <Story
+    name="Normal"
+    args={{ title: "General Liability", description: "Business Co." }}
+  >
+    {args => <Title {...args} />}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={Title} />
+
+## Component HTML Structure and Class names
+
+The following HTML is rendered for a Title:
+
+```html
+<element className="mobius/Title">
+  <Flex>
+    <svg className="mobius/TitleIcon">{VerticalLine}</svg>
+    <Flex flexDirection="column">
+      <p className="mobius/Title">Title</p>
+      <div className="mobius/TitleDescription">Description</div>
+    </Flex>
+  </Flex>
+</element>
+```
+
+---
+
+[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Title) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Title/Title.test.tsx

@@ -0,0 +1,29 @@
+import { render, screen } from "@testing-library/react";
+import { Title } from ".";
+
+describe("Title", () => {
+  it("should render the correct title", () => {
+    render(<Title title="General Liability" description="Business Co." />);
+
+    expect(screen.getByText("General Liability")).toBeInTheDocument();
+  });
+
+  it("should render the correct description", () => {
+    render(<Title title="General Liability" description="Business Co." />);
+
+    expect(screen.getByText("Business Co.")).toBeInTheDocument();
+  });
+
+  describe("given elementType", () => {
+    it("is not applied as element attribute", () => {
+      const { container } = render(
+        <Title
+          title="General Liability"
+          description="Business Co."
+          elementType="ul"
+        />,
+      );
+      expect(container.firstChild).not.toHaveAttribute("elementtype", "ul");
+    });
+  });
+});