@simplybusiness/mobius 3.0.0

package/src/components/List/List.test.tsx

@@ -0,0 +1,169 @@
+import { render, screen } from "@testing-library/react";
+import { ListStyleType, List, ListItem } from ".";
+
+const LIST_CLASS_NAME = "mobius/List";
+const ITEM_CLASS_NAME = "mobius/ListItem";
+const ICON_CLASS_NAME = "--has-icon";
+const ITEM_CONTENT_CLASSNAME = "mobius/ListItemContent";
+const LIST_ICON_CLASS_NAME = "mobius/ListIcon";
+
+describe("List", () => {
+  it("should render without errors", () => {
+    render(<List>Sample text</List>);
+  });
+
+  it("renders an unordered list of items", () => {
+    render(
+      <List data-testid="test">
+        <ListItem>One</ListItem>
+        <ListItem>Two</ListItem>
+      </List>,
+    );
+    const list = screen.getByTestId("test").closest("ul");
+
+    expect(list).toBeTruthy();
+    expect(list?.childNodes.length).toEqual(2);
+  });
+
+  it("renders an ordered list of items", () => {
+    render(
+      <List isOrdered data-testid="test">
+        <ListItem>One</ListItem>
+        <ListItem>Two</ListItem>
+      </List>,
+    );
+    const unorderedList = screen.getByTestId("test").closest("ul");
+    const orderedList = screen.getByTestId("test").closest("ol");
+
+    expect(unorderedList).not.toBeTruthy();
+    expect(orderedList).toBeTruthy();
+    expect(orderedList?.childNodes.length).toEqual(2);
+  });
+
+  it("renders a reversed list of items", () => {
+    render(
+      <List isOrdered isReversed>
+        <ListItem>One</ListItem>
+        <ListItem>Two</ListItem>
+      </List>,
+    );
+
+    const list = screen.getByRole("list");
+
+    expect(list).toHaveAttribute("reversed", "");
+  });
+
+  it("renders list style", () => {
+    render(
+      <List isOrdered liststyletype="disc" data-testid="test">
+        <ListItem>One</ListItem>
+        <ListItem>Two</ListItem>
+      </List>,
+    );
+    expect(screen.getByTestId("test").closest("ol")).not.toHaveAttribute(
+      "liststyletype",
+      "disc",
+    );
+  });
+
+  describe("given the liststyletype prop is set", () => {
+    it.each([
+      "disc",
+      "circle",
+      "square",
+      "decimal",
+      "georgian",
+      "trad-chinese-informal",
+      "kannada",
+    ])("it should render with --is-%s class name", liststyletype => {
+      const { container } = render(
+        <List isOrdered liststyletype={liststyletype as ListStyleType}>
+          <ListItem>One</ListItem>
+          <ListItem>Two</ListItem>
+        </List>,
+      );
+
+      expect(container.firstChild).toHaveClass(`--is-${liststyletype}`);
+    });
+  });
+
+  it("renders list with custom icons", () => {
+    render(
+      <List icon="✅">
+        <ListItem>One</ListItem>
+        <ListItem>Two</ListItem>
+        <ListItem icon="⚠️">Three</ListItem>
+        <ListItem>Four</ListItem>
+        <ListItem icon="❌">Five</ListItem>
+        <ListItem>Six</ListItem>
+      </List>,
+    );
+
+    expect(screen.queryAllByText("✅")).toHaveLength(4);
+    expect(screen.queryAllByText("⚠️")).toHaveLength(1);
+    expect(screen.queryAllByText("❌")).toHaveLength(1);
+  });
+
+  describe("uses correct class names", () => {
+    it("uses Mobius class", () => {
+      render(<List data-testid="test">Sample text</List>);
+      expect(screen.getByTestId("test")).toHaveClass("mobius");
+    });
+
+    it("uses base Mobius class", () => {
+      render(<List data-testid="test">Sample text</List>);
+      expect(screen.getByTestId("test")).toHaveClass(LIST_CLASS_NAME);
+    });
+
+    it("includes custom class name", () => {
+      render(
+        <List className="my-class" data-testid="test">
+          Sample Text
+        </List>,
+      );
+      expect(screen.getByTestId("test")).toHaveClass("my-class");
+      expect(screen.getByTestId("test")).toHaveClass(LIST_CLASS_NAME);
+    });
+
+    it("uses base Mobius class for list items", () => {
+      render(
+        <List isOrdered data-testid="test">
+          <ListItem>One</ListItem>
+          <ListItem>Two</ListItem>
+        </List>,
+      );
+      const orderedList = screen.getByTestId("test").closest("ol");
+
+      expect(orderedList?.childNodes[0]).toHaveClass(ITEM_CLASS_NAME);
+      expect(orderedList?.childNodes[1]).toHaveClass(ITEM_CLASS_NAME);
+    });
+
+    it("includes custom class names for list items", () => {
+      render(
+        <List isOrdered data-testid="test">
+          <ListItem className="item-1">One</ListItem>
+          <ListItem className="item-2">Two</ListItem>
+        </List>,
+      );
+      const orderedList = screen.getByTestId("test").closest("ol");
+      expect(orderedList?.childNodes[0]).toHaveClass(ITEM_CLASS_NAME);
+      expect(orderedList?.childNodes[0]).toHaveClass("item-1");
+      expect(orderedList?.childNodes[1]).toHaveClass(ITEM_CLASS_NAME);
+      expect(orderedList?.childNodes[1]).toHaveClass("item-2");
+    });
+
+    it("includes custom class name when icon prop is provided", () => {
+      render(
+        <List icon="✅">
+          <ListItem>One</ListItem>
+        </List>,
+      );
+      expect(screen.getByRole("list")).toHaveClass(ICON_CLASS_NAME);
+      expect(screen.getByRole("listitem")).toHaveClass(ICON_CLASS_NAME);
+      expect(screen.getByRole("listitem").firstChild).toHaveClass(
+        ITEM_CONTENT_CLASSNAME,
+      );
+      expect(screen.getByText("✅")).toHaveClass(LIST_ICON_CLASS_NAME);
+    });
+  });
+});

package/src/components/List/List.tsx

@@ -0,0 +1,77 @@
+import {
+  Ref,
+  Children,
+  cloneElement,
+  forwardRef,
+  ReactNode,
+  RefAttributes,
+  isValidElement,
+} from "react";
+import { DOMProps } from "@react-types/shared";
+import clsx from "clsx";
+import { ForwardedRefComponent } from "../../types/components";
+
+export type ListElementType = HTMLOListElement | HTMLUListElement;
+export type ListStyleType =
+  | "disc"
+  | "circle"
+  | "square"
+  | "decimal"
+  | "georgian"
+  | "trad-chinese-informal"
+  | "kannada";
+
+export interface ListProps extends DOMProps, RefAttributes<ListElementType> {
+  children?: ReactNode;
+  isOrdered?: boolean;
+  isReversed?: boolean;
+  start?: number;
+  liststyletype?: ListStyleType;
+  icon?: ReactNode;
+  className?: string;
+}
+
+export type ListRef = Ref<ListElementType>;
+
+const List: ForwardedRefComponent<ListProps, ListElementType> = forwardRef(
+  (props: ListProps, ref: ListRef) => {
+    const Component = props.isOrdered ? "ol" : "ul";
+    const { children, icon, ...otherProps } = props;
+
+    // Remove props that should not exist on ol or ul element
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { isOrdered, liststyletype, isReversed, ...restProps } = otherProps;
+
+    const mappedProps = {
+      ...restProps,
+      reversed: isReversed,
+    };
+
+    const classes = clsx(
+      "mobius",
+      "mobius/List",
+      {
+        "--has-icon": icon,
+        [`--is-${liststyletype}`]: liststyletype,
+      },
+      otherProps.className,
+    );
+
+    return (
+      <Component ref={ref as any} {...mappedProps} className={classes}>
+        {Children.map(children, child => {
+          if (isValidElement(child)) {
+            return cloneElement(child, {
+              parentIcon: icon,
+            } as any);
+          }
+
+          return child;
+        })}
+      </Component>
+    );
+  },
+);
+
+List.displayName = "List";
+export { List };

package/src/components/List/ListItem.tsx

@@ -0,0 +1,53 @@
+import { Ref, forwardRef, ReactNode, RefAttributes } from "react";
+import { DOMProps } from "@react-types/shared";
+import clsx from "clsx";
+import { ForwardedRefComponent } from "../../types/components";
+
+export type ListItemElementType = HTMLLIElement;
+export interface ListItemProps
+  extends DOMProps,
+    RefAttributes<ListItemElementType> {
+  children?: ReactNode;
+  value?: number;
+  className?: string;
+  parentIcon?: ReactNode;
+  icon?: ReactNode;
+}
+
+export type ListItemRef = Ref<ListItemElementType>;
+
+const ListItem: ForwardedRefComponent<ListItemProps, ListItemElementType> =
+  forwardRef((props: ListItemProps, ref: ListItemRef) => {
+    const { parentIcon, icon, children, ...otherProps } = props;
+    const iconContent = icon || parentIcon;
+    const classes = clsx(
+      "mobius",
+      "mobius/ListItem",
+      {
+        "--has-icon": iconContent,
+      },
+      props.className,
+    );
+    const contentClasses = clsx("mobius", "mobius/ListItemContent");
+    const iconClasses = clsx("mobius", "mobius/ListIcon");
+
+    if (iconContent) {
+      return (
+        <li ref={ref} {...otherProps} className={classes}>
+          <span className={contentClasses}>
+            <span className={iconClasses}>{iconContent}</span>
+            {children}
+          </span>
+        </li>
+      );
+    }
+
+    return (
+      <li ref={ref} {...otherProps} className={classes}>
+        {children}
+      </li>
+    );
+  });
+
+ListItem.displayName = "ListItem";
+export { ListItem };

package/src/components/List/index.tsx

@@ -0,0 +1,2 @@
+export * from "./List";
+export * from "./ListItem";

package/src/components/LoadingIndicator/LoadingIndicator.story.mdx

@@ -0,0 +1,96 @@
+import { useContext } from "react";
+import { Meta, ArgsTable, Story } from "@storybook/addon-docs";
+import { LoadingIndicator } from "./LoadingIndicator";
+import { excludeControls } from "../../utils/excludeControls";
+
+<Meta
+  title="Components/LoadingIndicator"
+  component={LoadingIndicator}
+  argTypes={{
+    icon: {
+      options: ["loading", "refreshArrow", "home"],
+      control: "radio",
+    },
+    color: {
+      options: ["darkcyan", "deeppink", "royalblue", "tomato"],
+      control: "radio",
+    },
+    fontSize: {
+      options: ["72px", "48px", "24px"],
+      control: "radio",
+    },
+    ...excludeControls("className"),
+  }}
+/>
+
+# LoadingIndicator
+
+LoadingIndicator is a component for displaying loading state.
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { LoadingIndicator } from "@simplybusiness/mobius";
+```
+
+## Examples
+
+### Normal
+
+<Story
+  name="Normal"
+  args={{ icon: "loading", fontSize: "24px", color: "darkcyan" }}
+>
+  {args => <LoadingIndicator {...args} />}
+</Story>
+
+### Large
+
+<Story
+  name="Large"
+  args={{ icon: "loading", fontSize: "72px", color: "darkcyan" }}
+>
+  {args => <LoadingIndicator {...args} />}
+</Story>
+
+### With Custom Colour
+
+<Story
+  name="With Custom Colour"
+  args={{ icon: "loading", fontSize: "24px", color: "darkcyan" }}
+>
+  {args => <LoadingIndicator {...args} />}
+</Story>
+
+### With Custom Icon
+
+<Story
+  name="With Custom Icon"
+  args={{ icon: "refreshArrow", fontSize: "24px", color: "darkcyan" }}
+>
+  {args => <LoadingIndicator {...args} />}
+</Story>
+
+## Props
+
+<ArgsTable of={LoadingIndicator} />
+
+## Component HTML Structure and Class names
+
+The following HTML is rendered for an Icon:
+
+```html
+<svg class="mobius/Icon mobius/LoadingIndicator" focusable="false" role="img">
+  <g ... />
+</svg>
+```
+
+---
+
+[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/LoadingIndicator) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/LoadingIndicator/LoadingIndicator.test.tsx

@@ -0,0 +1,30 @@
+/* eslint-disable no-restricted-syntax */
+import { render, screen } from "@testing-library/react";
+import { LoadingIndicator } from ".";
+
+const CLASS_NAME = "mobius/LoadingIndicator";
+
+describe("Test for LoadingIndicator", () => {
+  it("should render the LoadingIndicator component", () => {
+    const { container } = render(<LoadingIndicator />);
+    expect(container).toBeTruthy();
+  });
+
+  describe("uses correct class names", () => {
+    it("uses Mobius class", () => {
+      render(<LoadingIndicator data-testid="test" />);
+      expect(screen.getByTestId("test")).toHaveClass("mobius");
+    });
+
+    it("uses base Mobius class", () => {
+      render(<LoadingIndicator data-testid="test" />);
+      expect(screen.getByTestId("test")).toHaveClass(CLASS_NAME);
+    });
+
+    it("includes custom class name", () => {
+      render(<LoadingIndicator data-testid="test" className="my-class" />);
+      expect(screen.getByTestId("test")).toHaveClass("my-class");
+      expect(screen.getByTestId("test")).toHaveClass(CLASS_NAME);
+    });
+  });
+});

package/src/components/LoadingIndicator/LoadingIndicator.tsx

@@ -0,0 +1,32 @@
+import { Ref, forwardRef, RefAttributes } from "react";
+import clsx from "clsx";
+import type { IconName } from "@simplybusiness/icons";
+import { ForwardedRefComponent } from "../../types/components";
+import { Icon } from "../Icon";
+
+export interface LoadingIndicatorProps extends RefAttributes<SVGSVGElement> {
+  className?: string;
+  icon?: IconName;
+}
+
+export type LoadingIndicatorRef = Ref<SVGSVGElement>;
+
+const LoadingIndicator: ForwardedRefComponent<
+  LoadingIndicatorProps,
+  SVGSVGElement
+> = forwardRef((props: LoadingIndicatorProps, ref: LoadingIndicatorRef) => {
+  const { icon = "loading", ...otherProps } = props;
+
+  const classes = clsx(
+    "mobius",
+    "mobius/LoadingIndicator",
+    otherProps.className,
+  );
+
+  return (
+    <Icon name={icon} spin ref={ref} {...otherProps} className={classes} />
+  );
+});
+
+LoadingIndicator.displayName = "LoadingIndicator";
+export { LoadingIndicator };

package/src/components/LoadingIndicator/index.tsx

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

package/src/components/Modal/Content.tsx

@@ -0,0 +1,46 @@
+import {
+  Children,
+  isValidElement,
+  cloneElement,
+  ReactNode,
+  Ref,
+  RefAttributes,
+  forwardRef,
+} from "react";
+import { DOMProps } from "@react-types/shared";
+import clsx from "clsx";
+
+export type DivRef = Ref<HTMLDivElement>;
+export type DivElementType = HTMLDivElement;
+export interface ContentProps extends DOMProps, RefAttributes<DivElementType> {
+  children?: ReactNode;
+  onClose?: () => void;
+  closeLabel?: string;
+}
+
+const Content = forwardRef(
+  (
+    { children, onClose, closeLabel, ...otherProps }: ContentProps,
+    ref: DivRef,
+  ) => {
+    const classes = clsx("mobius/ModalContent");
+
+    return (
+      <div ref={ref} {...otherProps} className={classes}>
+        {Children.map(children, child => {
+          if (isValidElement(child)) {
+            return cloneElement(child, {
+              onClose,
+              closeLabel,
+            } as any);
+          }
+
+          return child;
+        })}
+      </div>
+    );
+  },
+);
+
+Content.displayName = "Content";
+export { Content };

package/src/components/Modal/Header.tsx

@@ -0,0 +1,45 @@
+import { ReactNode, Ref, RefAttributes, forwardRef } from "react";
+import { DOMProps } from "@react-types/shared";
+import clsx from "clsx";
+
+import { cross } from "@simplybusiness/icons";
+import { Button } from "../Button";
+import { Icon } from "../Icon";
+
+export type HeaderElementType = HTMLDivElement;
+export type HeaderRef = Ref<HTMLElement>;
+
+export interface HeaderProps
+  extends DOMProps,
+    RefAttributes<HeaderElementType> {
+  children?: ReactNode;
+  onClose?: () => void;
+  closeLabel?: string;
+}
+
+const Header = forwardRef(
+  (
+    { children, onClose, closeLabel, ...otherProps }: HeaderProps,
+    ref: HeaderRef,
+  ) => {
+    const classes = clsx("mobius/ModalHeader");
+    const closeClasses = clsx("mobius/ModalClose");
+
+    return (
+      <header ref={ref} {...otherProps} className={classes}>
+        {children}
+        <Button
+          aria-label="Close"
+          variant="basic"
+          onPress={onClose}
+          className={closeClasses}
+        >
+          <Icon icon={cross} /> {closeLabel}
+        </Button>
+      </header>
+    );
+  },
+);
+
+Header.displayName = "Header";
+export { Header };