@simplybusiness/mobius 3.0.0

package/src/components/Icon/types.ts

@@ -0,0 +1,30 @@
+import { IconName } from "@simplybusiness/icons";
+import { Ref, RefAttributes } from "react";
+import { IconDefinition } from "../../types/icon";
+
+export interface BaseIconProps extends RefAttributes<SVGSVGElement> {
+  /** Custom class name for setting specific CSS */
+  className?: string;
+  /** Spin the icon */
+  spin?: boolean;
+}
+
+export interface IconProps
+  extends BaseIconProps,
+    Partial<IconFromNameProps>,
+    Partial<IconFromObjectProps> {}
+
+export interface IconFromNameProps
+  extends BaseIconProps,
+    RefAttributes<SVGSVGElement> {
+  name: IconName;
+}
+
+export interface IconFromObjectProps
+  extends BaseIconProps,
+    RefAttributes<SVGSVGElement> {
+  /** Icon type */
+  icon: IconDefinition;
+}
+
+export type IconRef = Ref<SVGSVGElement>;

package/src/components/Image/Image.story.mdx

@@ -0,0 +1,96 @@
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Image } from "./Image";
+import { excludeControls } from "../../utils/excludeControls";
+
+<Meta
+  title="Components/Image"
+  component={Image}
+  argTypes={excludeControls("elementType", "className")}
+/>
+
+# Image
+
+Image is a simple component that displays an image on the screen.
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { Image } from "@simplybusiness/mobius";
+```
+
+## Using Images in NextJS
+
+**You should not use Mobius `Image` in a NextJS application**; instead, use their purpose-build, SSR-safe implementation. [See docs here](https://nextjs.org/docs/api-reference/next/future/image).
+
+### Handling remote images
+
+The NextJS docs are a little light on examples showing how to accurately style and size images sourced from CDNs and other remote file hosts. The problem is that `width` and `height` props cannot be set, because they are unknown.
+
+E.g. in our Quote Comparison Page, provider logos need to be 45px high but have varying widths.
+
+The solution is to use the `fill` prop in conjunction with a wrapping, block-scoped element. Set dimension(s) on the wrapping element and `object-fit` as needed. `contain` will ensure that the remote image maintains its natural aspect ratio.
+
+```js
+import Image from "next/future/image";
+
+const ImageWrapper = styled.div`
+  position: relative;
+  height: 45px;
+
+  & > img {
+    object-fit: contain; // This could also be set in a style prop on Image
+  }
+`;
+
+export const SomeComponent: FC<ComponentType> = ({ logoSrc }) => (
+  <ImageWrapper>
+    <Image
+      src={logoSrc}
+      alt="provider"
+      fill
+      sizes="(max-width: 768px) 100vw,
+            (max-width: 1200px) 50vw,
+            33vw"
+    />
+  </ImageWrapper>
+);
+```
+
+## Examples
+
+export const testImg =
+  "data:image/png;base64,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";
+
+### Normal
+
+<Canvas>
+  <Story name="Normal" args={{ src: testImg, alt: "test image" }}>
+    {args => <Image {...args} />}
+  </Story>
+</Canvas>
+
+## Accessibility
+
+Image must have an `alt` prop specified. If the image is not adding any valuable content to the page, set `alt=""`.
+
+## Props
+
+<ArgsTable of={Image} />
+
+## Component HTML Structure and Class names
+
+The following HTML is rendered for an Image:
+
+```html
+<img class="mobius/Image" src="/path/to/image" alt="" />
+```
+
+---
+
+[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Image) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Image/Image.test.tsx

@@ -0,0 +1,44 @@
+import { render, screen } from "@testing-library/react";
+import { Image } from ".";
+
+const CLASS_NAME = "mobius/Image";
+
+const defaultProps = {
+  src: "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==",
+  alt: "Test image",
+  "data-testid": "test",
+};
+
+describe("Test for Image", () => {
+  it("should render without errors", () => {
+    const component = render(<Image {...defaultProps} />);
+    expect(component).toBeTruthy();
+  });
+
+  describe("given elementType", () => {
+    it("is not applied as element attribute", () => {
+      const { container } = render(
+        <Image {...defaultProps} elementType="ul" />,
+      );
+      expect(container.firstChild).not.toHaveAttribute("elementtype", "ul");
+    });
+  });
+
+  describe("uses correct class names", () => {
+    it("uses Mobius class", () => {
+      render(<Image {...defaultProps} />);
+      expect(screen.getByTestId("test")).toHaveClass("mobius");
+    });
+
+    it("uses base Mobius class", () => {
+      render(<Image {...defaultProps} />);
+      expect(screen.getByTestId("test")).toHaveClass(CLASS_NAME);
+    });
+
+    it("includes custom class name", () => {
+      render(<Image {...defaultProps} className="my-class" />);
+      expect(screen.getByTestId("test")).toHaveClass("my-class");
+      expect(screen.getByTestId("test")).toHaveClass(CLASS_NAME);
+    });
+  });
+});

package/src/components/Image/Image.tsx

@@ -0,0 +1,39 @@
+import { forwardRef, RefAttributes, Ref } from "react";
+import { DOMProps } from "@react-types/shared";
+import clsx from "clsx";
+import { ForwardedRefComponent } from "../../types/components";
+
+export type IntrinsicImage = Omit<
+  JSX.IntrinsicElements["img"],
+  "css" | "width" | "height" | "color"
+> &
+  RefAttributes<HTMLImageElement>;
+
+export interface ImageProps extends DOMProps, IntrinsicImage {
+  /** HTML element for the Box */
+  elementType?: React.ElementType;
+  /** Alternative text for accessibility */
+  alt: string;
+  /** Path to image asset */
+  src: string;
+  /** Custom class name for setting specific CSS */
+  className?: string;
+}
+
+export type ImageRef = Ref<HTMLImageElement>;
+
+const Image: ForwardedRefComponent<ImageProps, HTMLImageElement> = forwardRef(
+  (
+    { alt, elementType: Component = "img", ...otherProps }: ImageProps,
+    ref: ImageRef,
+  ) => {
+    const classes = clsx("mobius", "mobius/Image", otherProps.className);
+
+    return (
+      <Component alt={alt} ref={ref} {...otherProps} className={classes} />
+    );
+  },
+);
+
+Image.displayName = "Image";
+export { Image };

package/src/components/Image/index.tsx

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

package/src/components/Label/Label.story.mdx

@@ -0,0 +1,60 @@
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Label } from "./Label";
+import { excludeControls } from "../../utils/excludeControls";
+
+<Meta
+  title="Forms/Label"
+  component={Label}
+  argTypes={excludeControls("className", "elementType")}
+/>
+
+# Label
+
+Label is always used in combination with an input component to create a form field.
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { Label } from "@simplybusiness/mobius";
+```
+
+## Examples
+
+<Canvas>
+  <Story name="Normal" args={{}}>
+    {args => <Label {...args}>Example label</Label>}
+  </Story>
+</Canvas>
+
+## Accessibility
+
+Because Label must always be used in combination with another input component, accessibility rules only apply when used in that context. See the documentation for the field components:
+
+- [Checkbox](/docs/mobius-checkbox--normal)
+- [Radio](/docs/mobius-radio--normal)
+- [TextField](/docs/mobius-textfield--normal)
+- [Select](/docs/mobius-select--normal)
+
+Label supports all React label props. Because `for` is a reserved JavaScript keyword, use the React version `htmlFor` instead.
+
+## Props
+
+<ArgsTable of={Label} />
+
+## Component HTML Structure and Class names
+
+The following HTML is rendered for a Label:
+
+```html
+<label class="mobius/Label" htmlFor="{input-id}">{Label text}</label>
+```
+
+---
+
+[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Label) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Label/Label.test.tsx

@@ -0,0 +1,50 @@
+import { render, screen } from "@testing-library/react";
+import { Label } from ".";
+
+const CLASS_NAME = "mobius/Label";
+
+describe("Test for Label", () => {
+  it("should render without errors", () => {
+    render(<Label>Test label</Label>);
+  });
+
+  it("should support label HTML props", () => {
+    render(
+      <Label htmlFor="some-id" data-testid="test">
+        Test label
+      </Label>,
+    );
+    expect(screen.getByTestId("test")).toHaveAttribute("for");
+  });
+
+  describe("given elementType", () => {
+    it("is not applied as element attribute", () => {
+      const { container } = render(
+        <Label data-testid="test" elementType="span" />,
+      );
+      expect(container.firstChild).not.toHaveAttribute("elementtype", "span");
+    });
+  });
+
+  describe("uses correct class names", () => {
+    it("uses Mobius class", () => {
+      render(<Label data-testid="test">Sample text</Label>);
+      expect(screen.getByTestId("test")).toHaveClass("mobius");
+    });
+
+    it("uses base Mobius class", () => {
+      render(<Label data-testid="test">Sample text</Label>);
+      expect(screen.getByTestId("test")).toHaveClass(CLASS_NAME);
+    });
+
+    it("includes custom class name", () => {
+      render(
+        <Label className="my-class" data-testid="test">
+          Sample Text
+        </Label>,
+      );
+      expect(screen.getByTestId("test")).toHaveClass("my-class");
+      expect(screen.getByTestId("test")).toHaveClass(CLASS_NAME);
+    });
+  });
+});

package/src/components/Label/Label.tsx

@@ -0,0 +1,39 @@
+import { forwardRef, ReactNode, Ref, RefAttributes } from "react";
+import { DOMProps } from "@react-types/shared";
+import clsx from "clsx";
+import { ForwardedRefComponent } from "../../types/components";
+
+export type LabelElementType = HTMLLabelElement;
+export type IntrinsicLabel = Omit<
+  JSX.IntrinsicElements["label"],
+  "css" | "color" | "ref"
+>;
+
+export interface LabelProps
+  extends IntrinsicLabel,
+    DOMProps,
+    RefAttributes<LabelElementType> {
+  children?: ReactNode;
+  className?: string;
+  elementType?: "label" | "span";
+}
+
+export type LabelRef = Ref<LabelElementType>;
+
+const Label: ForwardedRefComponent<LabelProps, LabelElementType> = forwardRef(
+  (props: LabelProps, ref: LabelRef) => {
+    const { elementType: Element = "label", children, ...otherProps } = props;
+
+    const classes = clsx("mobius", "mobius/Label", props.className);
+    otherProps.className = classes;
+
+    return (
+      <Element ref={ref} {...otherProps} className={classes}>
+        {children}
+      </Element>
+    );
+  },
+);
+
+Label.displayName = "Label";
+export { Label };

package/src/components/Label/index.tsx

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

package/src/components/Link/Link.story.mdx

@@ -0,0 +1,133 @@
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Link } from "./Link";
+import { excludeControls } from "../../utils/excludeControls";
+
+<Meta
+  title="Components/Link"
+  component={Link}
+  argTypes={{
+    target: {
+      options: ["_self", "_blank", "_parent", "_top"],
+      control: "select",
+    },
+    to: {
+      control: "text",
+    },
+    title: {
+      control: "text",
+    },
+    download: {
+      control: "boolean",
+    },
+    rel: {
+      options: ["noopener noreferrer", "canonical", "nofollow"],
+      control: "select",
+    },
+    ...excludeControls("className", "elementType", "style", "onClick"),
+  }}
+/>
+
+# Link
+
+Link component is a wrapper around the `a` HTML element.
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { Link } from "@simplybusiness/mobius";
+```
+
+## Usage with `react-router-dom`
+
+To use with react-router-dom, you need to pass the `to` prop and the elementType prop as the `Link` component.
+
+<!-- prettier-ignore -->
+```js
+import { Link as RouterLink } from "react-router-dom";
+import { Link } from "@simplybusiness/mobius";
+
+<Link elementType={RouterLink} to="/">
+  Home
+</Link>
+```
+
+## Usage with `NextJS`
+
+NextJS has it's own type of link element supplied in the `next/link` package. This element uses the `href` prop, but cannot be consumed in an `elementType` prop like `react-router` (above).
+
+NextJS has some peccadillos about how `next/link` should be used, notably:
+
+- It should generally wrap other content (rather than be wrapped); and
+- It cannot support `onClick`; if you need that you should nest an anchor tag inside and set the prop on that.
+
+Taking these into account, the correct "Next Way" is to wrap our Mobius Link like so:
+
+<!-- prettier-ignore -->
+```js
+import NextLink from "next/link";
+import { Link } from "@simplybusiness/mobius";
+
+...
+
+<NextLink href={url}>
+   <Link href={url}>{value}</Link> // onClick would also go here if needed
+</NextLink>
+```
+
+## Examples
+
+### Normal
+
+<Canvas>
+  <Story
+    name="Normal"
+    args={{
+      href: "https://www.google.com",
+      isDisabled: false,
+      download: false,
+      to: "",
+      title: "",
+    }}
+  >
+    {args => <Link {...args}>Link text</Link>}
+  </Story>
+</Canvas>
+
+### Disabled
+
+<Canvas>
+  <Story
+    name="Disabled"
+    args={{
+      href: "https://www.google.com",
+      isDisabled: true,
+      download: false,
+      to: "",
+      title: "",
+    }}
+  >
+    {args => <Link {...args}>Link text</Link>}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={Link} />
+
+## Component HTML Structure and Class names
+
+The following HTML is rendered for a Link:
+
+```html
+<a class="mobius/Link" href="path/to/page">{link text}</a>
+```
+
+---
+
+[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Link) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Link/Link.test.tsx

@@ -0,0 +1,109 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Link } from ".";
+
+const CLASS_NAME = "mobius/Link";
+
+describe("Test for Link", () => {
+  it("should render without errors", () => {
+    render(<Link href="#test">Test</Link>);
+  });
+
+  it("should call the onClick", async () => {
+    const onClick = jest.fn();
+    const { getByText } = render(
+      <Link href="#test" onClick={onClick}>
+        Click
+      </Link>,
+    );
+    await userEvent.click(getByText("Click"));
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it("uses the elementType prop", () => {
+    function CustomComponent(props: any) {
+      // eslint-disable-next-line jsx-a11y/anchor-has-content
+      return <a data-testid="custom-component" {...props} />;
+    }
+    render(
+      // eslint-disable-next-line react/jsx-no-bind
+      <Link href="#test" elementType={CustomComponent}>
+        Test
+      </Link>,
+    );
+    expect(screen.getByTestId("custom-component")).toBeInTheDocument();
+  });
+
+  describe("given elementType", () => {
+    it("is not applied as element attribute", () => {
+      const { container } = render(
+        <Link href="#test" elementType="ul">
+          Test
+        </Link>,
+      );
+      expect(container.firstChild).not.toHaveAttribute("elementtype", "ul");
+    });
+  });
+
+  describe("uses correct class names", () => {
+    it("uses Mobius class", () => {
+      render(
+        <Link href="#test" data-testid="test">
+          Sample text
+        </Link>,
+      );
+      expect(screen.getByTestId("test")).toHaveClass("mobius");
+    });
+
+    it("uses base Mobius class", () => {
+      render(
+        <Link href="#test" data-testid="test">
+          Sample text
+        </Link>,
+      );
+      expect(screen.getByTestId("test")).toHaveClass(CLASS_NAME);
+    });
+
+    it("includes custom class name", () => {
+      render(
+        <Link href="#test" className="my-class" data-testid="test">
+          Sample Text
+        </Link>,
+      );
+      expect(screen.getByTestId("test")).toHaveClass("my-class");
+      expect(screen.getByTestId("test")).toHaveClass(CLASS_NAME);
+    });
+
+    it("includes the focus-visible class name", async () => {
+      render(
+        <Link href="#test" data-testid="test">
+          Sample text
+        </Link>,
+      );
+      await userEvent.tab();
+      expect(screen.getByTestId("test")).toHaveClass("--is-focus-visible");
+    });
+
+    it("includes the disabled class name", async () => {
+      render(
+        <Link href="#test" data-testid="test" isDisabled>
+          Sample text
+        </Link>,
+      );
+      await userEvent.tab();
+      expect(screen.getByTestId("test")).toHaveClass("--is-disabled");
+    });
+  });
+
+  describe("given the the link has disabled prop", () => {
+    it("does not pass the prop as an attribute", async () => {
+      render(
+        <Link href="#test" data-testid="test" isDisabled>
+          Sample text
+        </Link>,
+      );
+      await userEvent.tab();
+      expect(screen.getByTestId("test")).not.toHaveAttribute("disabled", "");
+    });
+  });
+});