@simplybusiness/mobius 3.0.0

package/src/components/Grid/Grid.test.tsx

@@ -0,0 +1,128 @@
+import { render, screen } from "@testing-library/react";
+import { Grid } from ".";
+
+import { getBreakpointMap, DEFAULT_SPAN } from "./Item";
+
+describe("Test for Grid", () => {
+  it("should render without errors", () => {
+    const component = render(
+      <Grid>
+        <Grid.Item span={11}>span=11</Grid.Item>
+        <Grid.Item span={1}>span=1</Grid.Item>
+      </Grid>,
+    );
+    expect(component).toBeTruthy();
+  });
+
+  describe("given the span prop is an array", () => {
+    it("should render default as fallback", () => {
+      const span = [1, 2, 3];
+
+      const { container } = render(
+        <Grid>
+          <Grid.Item span={span}>span={DEFAULT_SPAN}</Grid.Item>
+        </Grid>,
+      );
+      expect(container).toBeTruthy();
+      expect(screen.getByText(`span=${DEFAULT_SPAN}`)).toHaveStyle(
+        `grid-column: span ${DEFAULT_SPAN};`,
+      );
+    });
+  });
+
+  describe("given the span prop is a custom number", () => {
+    it("should render using the custom value", () => {
+      const span = 5;
+
+      const { container } = render(
+        <Grid>
+          <Grid.Item span={span}>span={span}</Grid.Item>
+        </Grid>,
+      );
+      expect(container).toBeTruthy();
+      expect(screen.getByText(`span=${span}`)).toHaveStyle(
+        `grid-column: span ${span};`,
+      );
+    });
+  });
+});
+
+describe("getBreakpointMap", () => {
+  describe("given only the smallest breakpoint is provided", () => {
+    it("returns the smallest breakpoint repeated across the map", () => {
+      const config = {
+        xs: 6,
+        sm: undefined,
+        md: undefined,
+        lg: undefined,
+        xl: undefined,
+        xxl: undefined,
+      };
+
+      const breakpointMap = getBreakpointMap(config);
+
+      const expected = {
+        xs: 6,
+        sm: 6,
+        md: 6,
+        lg: 6,
+        xl: 6,
+        xxl: 6,
+      };
+
+      expect(breakpointMap).toEqual(expected);
+    });
+  });
+
+  describe("given only a single breakpoint is provided", () => {
+    it("returns the breakpoint, which is then repeated across the higher breakpoints", () => {
+      const config = {
+        xs: undefined,
+        sm: undefined,
+        md: undefined,
+        lg: 9,
+        xl: undefined,
+        xxl: undefined,
+      };
+
+      const breakpointMap = getBreakpointMap(config);
+
+      const expected = {
+        xs: undefined,
+        sm: undefined,
+        md: undefined,
+        lg: 9,
+        xl: 9,
+        xxl: 9,
+      };
+
+      expect(breakpointMap).toEqual(expected);
+    });
+  });
+
+  describe("given only the largest breakpoint is provided", () => {
+    it("returns the largest breakpoint", () => {
+      const config = {
+        xs: undefined,
+        sm: undefined,
+        md: undefined,
+        lg: undefined,
+        xl: undefined,
+        xxl: 2,
+      };
+
+      const breakpointMap = getBreakpointMap(config);
+
+      const expected = {
+        xs: undefined,
+        sm: undefined,
+        md: undefined,
+        lg: undefined,
+        xl: undefined,
+        xxl: 2,
+      };
+
+      expect(breakpointMap).toEqual(expected);
+    });
+  });
+});

package/src/components/Grid/Grid.tsx

@@ -0,0 +1,73 @@
+import { Ref, forwardRef, ReactNode, RefAttributes } from "react";
+import { DOMProps } from "@react-types/shared";
+import { CSSObject } from "@emotion/react";
+import { ForwardedRefComponent } from "../../types/components";
+
+export type GridElementType = HTMLDivElement;
+
+export interface GridProps extends RefAttributes<GridElementType>, DOMProps {
+  children?: ReactNode;
+  /** The number of columns */
+  columns?: number;
+  /** How big a gap between the columns and rows */
+  gap?: string;
+  /** How big a gap between the columns */
+  columnGap?: string;
+  /** How big a gap between the rows */
+  rowGap?: string;
+  /** Aligns the grid along the block (column) axis */
+  alignContent?:
+    | "center"
+    | "space-around"
+    | "space-between"
+    | "space-evenly"
+    | "stretch";
+  /** Aligns the grid along the inline (row) axis */
+  justifyContent?:
+    | "center"
+    | "start"
+    | "end"
+    | "space-around"
+    | "space-between"
+    | "space-evenly";
+  /** Aligns grid items along the block (column) axis  */
+  alignItems?: "center" | "start" | "end" | "stretch" | "baseline";
+  /** Aligns grid items along the inline (row) axis  */
+  justifyItems?: "start" | "end" | "center" | "stretch";
+}
+
+export type GridRef = Ref<GridElementType>;
+
+const Grid: ForwardedRefComponent<GridProps, GridElementType> = forwardRef(
+  (props: GridProps, _ref: GridRef) => {
+    const {
+      columns = 12,
+      gap,
+      columnGap,
+      rowGap,
+      alignContent,
+      alignItems,
+      justifyContent,
+      justifyItems,
+      ...rest
+    } = props;
+
+    const styles: CSSObject = {
+      boxSizing: "border-box",
+      display: "grid",
+      gridTemplateColumns: `repeat(${columns}, 1fr)`,
+      gap: gap ? `var(--${gap})` : undefined,
+      columnGap: columnGap ? `var(--${columnGap})` : undefined,
+      rowGap: rowGap ? `var(--${rowGap})` : undefined,
+      alignContent,
+      alignItems,
+      justifyContent,
+      justifyItems,
+    };
+
+    return <div css={styles} {...rest} />;
+  },
+);
+
+Grid.displayName = "Grid";
+export { Grid };

package/src/components/Grid/Item.tsx

@@ -0,0 +1,83 @@
+import { Ref, forwardRef, RefAttributes, useEffect, useState } from "react";
+import { DOMProps } from "@react-types/shared";
+import { CSSObject } from "@emotion/react";
+import { useBreakpoint } from "../../hooks";
+import { ForwardedRefComponent } from "../../types/components";
+import { SizeType } from "../../types";
+
+export type GridItemElementType = HTMLDivElement;
+
+export interface GridItemProps
+  extends RefAttributes<GridItemElementType>,
+    DOMProps {
+  /** How many columns the item spans */
+  span?: number | number[];
+  /** React children */
+  children?: React.ReactNode;
+  /** How many columns the item spans on the smallest breakpoint */
+  xs?: number;
+  sm?: number;
+  md?: number;
+  lg?: number;
+  xl?: number;
+  /** How many columns the item spans on the largest breakpoint */
+  xxl?: number;
+  /** Aligns the grid item along the block (column) axis */
+  alignSelf?: "center" | "start" | "end" | "stretch";
+  /** Aligns the grid item along the inline (row) axis */
+  justifySelf?: "center" | "start" | "end" | "stretch";
+}
+
+export const getBreakpointMap = (config: Partial<Record<SizeType, number>>) =>
+  Object.entries(config).reduce((prev, [key, value]) => {
+    const previous = Object.values(prev);
+    const lastDefined = previous[previous.length - 1];
+    return { ...prev, [key]: value || lastDefined };
+  }, {});
+
+export type GridItemRef = Ref<GridItemElementType>;
+
+export const DEFAULT_SPAN = 12;
+
+const GridItem: ForwardedRefComponent<GridItemProps, GridItemElementType> =
+  forwardRef((props: GridItemProps, _ref: GridItemRef) => {
+    const {
+      breakpoint: { size: breakpointSize },
+    } = useBreakpoint();
+    const {
+      span,
+      xs = Array.isArray(span) ? DEFAULT_SPAN : span,
+      sm,
+      md,
+      lg,
+      xl,
+      xxl,
+      alignSelf,
+      justifySelf,
+      ...rest
+    } = props;
+    const breakpointMap = getBreakpointMap({
+      xs,
+      sm,
+      md,
+      lg,
+      xl,
+      xxl,
+    });
+    const [responsiveSpan, setResponsiveSpan] = useState();
+
+    useEffect(() => {
+      setResponsiveSpan(breakpointMap[breakpointSize]);
+    }, [breakpointSize, breakpointMap]);
+
+    const styles: CSSObject = {
+      gridColumn: responsiveSpan ? `span ${responsiveSpan}` : undefined,
+      alignSelf,
+      justifySelf,
+    };
+
+    return <div css={{ ...styles }} {...rest} />;
+  });
+
+GridItem.displayName = "GridItem";
+export { GridItem };

package/src/components/Grid/index.tsx

@@ -0,0 +1,16 @@
+import { ForwardedRefComponent } from "../../types/components";
+import { Grid as GridComponent, GridElementType, GridProps } from "./Grid";
+import { GridItem, GridItemProps, GridItemElementType } from "./Item";
+
+export interface GridCompound
+  extends ForwardedRefComponent<GridProps, GridItemElementType> {
+  Item: ForwardedRefComponent<GridItemProps, GridElementType>;
+}
+
+const Grid: GridCompound = Object.assign(GridComponent, {
+  Item: GridItem,
+});
+
+Grid.displayName = "Grid";
+export { Grid };
+export type { GridProps, GridItemProps, GridElementType, GridItemElementType };

package/src/components/Icon/Icon.story.mdx

@@ -0,0 +1,168 @@
+import { useContext, useState } from "react";
+import { Meta, ArgsTable, Story } from "@storybook/addon-docs";
+import { Icon } from "./Icon";
+import { Box } from "../Box";
+import { Text } from "../Text";
+import * as baseIcons from "@simplybusiness/icons";
+import { ThemeProvider, ThemeContext } from "../../contexts";
+import { excludeControls } from "../../utils/excludeControls";
+import { PARTNERS } from "../../../../../.storybook/partnerThemes";
+
+<Meta
+  title="Theming/Icon"
+  component={Icon}
+  argTypes={{
+    name: {
+      options: [
+        "menu",
+        "rightArrow",
+        "leftArrow",
+        "dropdown",
+        "home",
+        "star",
+        "youtube",
+        "error",
+        "search",
+        "user",
+        "chevronDown",
+        "loading",
+      ],
+      control: "radio",
+    },
+    spin: {
+      if: {
+        arg: "name",
+        eq: "loading",
+      },
+    },
+    ...excludeControls("className", "icon"),
+  }}
+/>
+
+# Icon
+
+Icon is a component for showing SVG icons provided by an icon library.
+
+See the [icons documentation](/?path=/story/icons-getting-started--page) for the full list of icons.
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { Icon } from "@simplybusiness/mobius";
+```
+
+## Icon Set
+
+export const AllIcons = () => {
+  const { icons } = useContext(ThemeContext);
+  const availableIcons = Object.keys(icons).length === 0 ? baseIcons : icons;
+  return Object.entries(availableIcons).map(([iconName, icon]) => (
+    <div
+      key={icon.iconName}
+      style={{
+        backgroundColor: "#eee",
+        padding: "10px",
+        borderRadius: "5px",
+        color: "var(--color-primary)",
+      }}
+    >
+      <Icon fontSize="48px" key={icon.name} name={iconName} />
+      <div style={{ marginTop: "20px" }}>{iconName}</div>
+    </div>
+  ));
+};
+
+<Story name="Icon Set">
+  {(args, { globals: { theme } }) => {
+    const [icons, setIcons] = useState({});
+    const partnerThemes = {
+      [PARTNERS.SB]: () => import("@simplybusiness/theme-sb/icons"),
+      [PARTNERS.CHOPIN]: () => import("@simplybusiness/theme-chopin/icons"),
+      [PARTNERS.OTT]: () => import("@simplybusiness/theme-ott/icons"),
+      [PARTNERS.SBLEGACY]: () => {},
+    };
+    const partnerIcons = partnerThemes[theme]()?.then(data => setIcons(data));
+    return (
+      <ThemeProvider icons={partnerIcons ? icons : {}}>
+        <Text style={{ marginBottom: "16px" }}>
+          <em>NOTE:</em> when switching between the themes, refresh the page for
+          the icons to update
+        </Text>
+        <div
+          style={{
+            display: "grid",
+            gap: "16px",
+            gridTemplateColumns: "repeat(auto-fill,minmax(150px,1fr))",
+            textAlign: "center",
+            fontFamily:
+              'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
+          }}
+        >
+          <AllIcons />
+        </div>
+      </ThemeProvider>
+    );
+  }}
+</Story>
+
+## Examples
+
+### Normal
+
+<Story name="Normal" args={{ name: "chevronDown" }}>
+  {args => <Icon {...args} />}
+</Story>
+
+<!-- prettier-ignore -->
+```jsx
+import { Icon } from "@simplybusiness/mobius";
+
+<Icon name="chevronDown" />
+```
+
+### Spinning
+
+<Story name="Spinning" args={{ spin: true, name: "loading" }}>
+  {args => <Icon {...args} />}
+</Story>
+
+<!-- prettier-ignore -->
+```jsx
+import { Icon } from "@simplybusiness/mobius";
+
+<Icon name="loading" spin={true} />
+```
+
+## Accessibility
+
+All icons are marked with aria-hidden and should not be used without some form of description outside of the icon. For example:
+
+```jsx
+<Link aria-label="Go back to home" href="/">
+  <Icon name="chevronLeft" title="Go back" />
+</Link>
+```
+
+## Props
+
+<ArgsTable of={Icon} />
+
+## Component HTML Structure and Class names
+
+The following HTML is rendered for an Icon:
+
+```html
+<svg class="mobius/Icon" focusable="false" role="img">
+  <g ... />
+</svg>
+```
+
+---
+
+[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Icon) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Icon/Icon.test.tsx

@@ -0,0 +1,68 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { chevronLeft } from "@simplybusiness/icons";
+import { Icon } from ".";
+
+const CLASS_NAME = "mobius/Icon";
+
+describe("Test for Icon", () => {
+  describe("given an icon is an object", () => {
+    it("renders an icon", () => {
+      const component = render(<Icon icon={chevronLeft} />);
+      expect(component).toBeTruthy();
+    });
+
+    describe("uses correct class names", () => {
+      it("uses Mobius class", () => {
+        render(<Icon icon={chevronLeft} data-testid="test" />);
+        expect(screen.getByTestId("test")).toHaveClass("mobius");
+      });
+
+      it("uses base Mobius class", () => {
+        render(<Icon icon={chevronLeft} data-testid="test" />);
+        expect(screen.getByTestId("test")).toHaveClass(CLASS_NAME);
+      });
+
+      it("includes custom class name", () => {
+        render(
+          <Icon icon={chevronLeft} data-testid="test" className="my-class" />,
+        );
+        expect(screen.getByTestId("test")).toHaveClass("my-class");
+        expect(screen.getByTestId("test")).toHaveClass(CLASS_NAME);
+      });
+    });
+  });
+
+  describe("given an icon is a string", () => {
+    it("renders an icon", async () => {
+      const component = render(<Icon name="chevronLeft" />);
+      await waitFor(() => expect(component).toBeTruthy());
+    });
+
+    describe("uses correct class names", () => {
+      it("uses Mobius class", async () => {
+        render(<Icon name="chevronLeft" data-testid="test" />);
+        await waitFor(() =>
+          expect(screen.getByTestId("test")).toHaveClass("mobius"),
+        );
+      });
+
+      it("uses base Mobius class", async () => {
+        render(<Icon name="chevronLeft" data-testid="test" />);
+        await waitFor(() =>
+          expect(screen.getByTestId("test")).toHaveClass(CLASS_NAME),
+        );
+      });
+
+      it("includes custom class name", async () => {
+        render(
+          <Icon name="chevronLeft" data-testid="test" className="my-class" />,
+        );
+
+        await waitFor(() => {
+          expect(screen.getByTestId("test")).toHaveClass("my-class");
+          expect(screen.getByTestId("test")).toHaveClass(CLASS_NAME);
+        });
+      });
+    });
+  });
+});

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,26 @@
+import { forwardRef } from "react";
+import { ForwardedRefComponent } from "../../types/components";
+
+import { IconFromName } from "./IconFromName";
+import { IconFromObject } from "./IconFromObject";
+import {
+  IconRef,
+  IconProps,
+  IconFromNameProps,
+  IconFromObjectProps,
+} from "./types";
+
+const Icon: ForwardedRefComponent<IconProps, SVGSVGElement> = forwardRef(
+  (props: IconProps, ref: IconRef) => {
+    const { name } = props;
+
+    if (name) {
+      return <IconFromName {...(props as IconFromNameProps)} ref={ref} />;
+    }
+
+    return <IconFromObject {...(props as IconFromObjectProps)} ref={ref} />;
+  },
+);
+
+Icon.displayName = "Icon";
+export { Icon };

package/src/components/Icon/IconFromName.tsx

@@ -0,0 +1,31 @@
+import { forwardRef, useContext } from "react";
+import * as baseIcons from "@simplybusiness/icons";
+import { ForwardedRefComponent } from "../../types/components";
+import { IconFromObject } from "./IconFromObject";
+import { IconFromNameProps, IconRef } from "./types";
+import { ThemeContext } from "../../contexts";
+
+const IconFromName: ForwardedRefComponent<IconFromNameProps, SVGSVGElement> =
+  forwardRef((props: IconFromNameProps, ref: IconRef) => {
+    const { name, ...otherProps } = props;
+    const { icons } = useContext(ThemeContext);
+
+    if (!icons)
+      throw new Error("No icons have been been found in ThemeContext");
+
+    // Lookup icon from partner icon set (if available); load default Mobius icons otherwise
+    const mappedIcon =
+      Object.keys(icons).length === 0 ? baseIcons[name] : icons[name];
+
+    if (!mappedIcon) {
+      // eslint-disable-next-line no-console
+      console.warn(`Icon with the following name could not be found: ${name}`);
+
+      return null;
+    }
+
+    return <IconFromObject icon={mappedIcon} {...otherProps} ref={ref} />;
+  });
+
+IconFromName.displayName = "IconFromName";
+export { IconFromName };

package/src/components/Icon/IconFromObject.tsx

@@ -0,0 +1,76 @@
+import { forwardRef } from "react";
+import { keyframes } from "@emotion/react";
+import clsx from "clsx";
+import { ForwardedRefComponent } from "../../types/components";
+import { combineTruthyObjects } from "../../utils/combineTruthyObjects";
+import { IconFromObjectProps, IconRef } from "./types";
+
+const spinKeyframes = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(1turn);
+  }
+`;
+
+const IconFromObject: ForwardedRefComponent<
+  IconFromObjectProps,
+  SVGSVGElement
+> = forwardRef((props: IconFromObjectProps, ref: IconRef) => {
+  const {
+    icon: {
+      width,
+      height,
+      svgPathData,
+      iconType,
+      strokeWidth = 1.5,
+      fill = "none",
+    },
+    spin = false,
+    ...otherProps
+  } = props;
+
+  const strokePath = (
+    <g fillRule="evenodd" fill={fill}>
+      <path
+        stroke="currentColor"
+        strokeWidth={strokeWidth}
+        strokeLinecap="square"
+        d={svgPathData}
+      />
+    </g>
+  );
+
+  const fillPath = <path fill="currentColor" d={svgPathData} />;
+
+  const classes = clsx("mobius", "mobius/Icon", otherProps.className);
+  otherProps.className = classes;
+
+  const styles = combineTruthyObjects([
+    {
+      height: "1em",
+      verticalAlign: "-0.2em",
+      transformOrigin: "center",
+    },
+    spin && { animation: `${spinKeyframes} 2s linear infinite` },
+  ]);
+
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      role="img"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox={`0 0 ${width} ${height}`}
+      css={styles}
+      ref={ref}
+      {...otherProps}
+    >
+      {iconType === "fill" ? fillPath : strokePath}
+    </svg>
+  );
+});
+
+IconFromObject.displayName = "IconFromObject";
+export { IconFromObject };

package/src/components/Icon/index.tsx

@@ -0,0 +1,2 @@
+export * from "./Icon";
+export * from "./types";