@simplybusiness/mobius 3.8.0 → 3.9.0

package/src/components/Grid/Grid.stories.tsx

@@ -0,0 +1,375 @@
+import { ReactNode } from "react";
+import type { Meta } from "@storybook/react";
+import { Grid, GridItemProps, GridProps } from ".";
+import { Box } from "../Box";
+import { Flex } from "../Flex";
+import { BreakpointsType, ThemeContext } from "../../contexts";
+import { GridItem } from "./Item";
+import { excludeControls } from "../../utils/excludeControls";
+
+const sizeOptions = [
+  "",
+  "size-0",
+  "size-10",
+  "size-20",
+  "size-30",
+  "size-40",
+  "size-50",
+  "size-60",
+  "size-70",
+  "size-80",
+  "size-90",
+  "size-100",
+];
+
+const breakpoints = [
+  { size: "xs", value: 320 },
+  { size: "sm", value: 480 },
+  { size: "md", value: 670 },
+  { size: "lg", value: 960 },
+  { size: "xl", value: 1200 },
+  { size: "xxl", value: 1320 },
+] as BreakpointsType;
+
+const setBreakpoints = () => {};
+
+type SharedProps = {
+  children: ReactNode;
+};
+
+const Card = ({ children, ...props }: SharedProps) => (
+  <Box
+    style={{
+      borderRadius: "4px",
+      padding: "8px",
+      backgroundColor: "#dddddd",
+      width: "80%",
+    }}
+    {...props}
+  >
+    {children}
+  </Box>
+);
+
+const Square = ({ children, ...props }: SharedProps) => (
+  <Flex
+    alignItems="center"
+    justifyContent="center"
+    style={{ height: "100%" }}
+    {...props}
+  >
+    {children}
+  </Flex>
+);
+
+const AlignSquare = ({ children, ...props }: SharedProps) => (
+  <Box style={{}} {...props}>
+    {children}
+  </Box>
+);
+
+export default {
+  title: "Layout/Grid",
+  component: Grid,
+  argTypes: {
+    columns: {
+      control: { type: "number" },
+    },
+    gap: {
+      control: { type: "select" },
+      options: [...sizeOptions],
+    },
+    rowGap: {
+      control: { type: "select" },
+      options: [...sizeOptions],
+      if: {
+        arg: "gap",
+        truthy: false,
+      },
+    },
+    columnGap: {
+      control: { type: "select" },
+      options: [...sizeOptions],
+      if: {
+        arg: "gap",
+        truthy: false,
+      },
+    },
+    alignContent: {
+      control: { type: "select" },
+      options: [
+        "",
+        "center",
+        "space-around",
+        "space-between",
+        "space-evenly",
+        "stretch",
+      ],
+    },
+    justifyContent: {
+      control: { type: "select" },
+      options: [
+        "",
+        "center",
+        "start",
+        "end",
+        "space-around",
+        "space-between",
+        "space-evenly",
+      ],
+    },
+    alignItems: {
+      control: { type: "select" },
+      options: ["", "center", "start", "end", "stretch", "baseline"],
+    },
+    justifyItems: {
+      control: { type: "select" },
+      options: ["", "start", "end", "center", "stretch"],
+    },
+    ...excludeControls("className"),
+  },
+  decorators: [
+    Story => {
+      // eslint-disable-next-line global-require
+      require("./Grid.story.styles.css");
+      return <Story />;
+    },
+  ],
+} satisfies Meta<typeof Grid>;
+
+export const AlignmentProperties: Meta<typeof Grid> = {
+  render: (args: GridProps) => (
+    <Grid {...args}>
+      <Grid.Item className="grid-example-grid-alignment-item" span={4}>
+        <Square>1</Square>
+      </Grid.Item>
+      <Grid.Item className="grid-example-grid-alignment-item" span={4}>
+        <Square>2</Square>
+      </Grid.Item>
+      <Grid.Item className="grid-example-grid-alignment-item" span={4}>
+        <Square>3</Square>
+      </Grid.Item>
+      <Grid.Item className="grid-example-grid-alignment-item" span={4}>
+        <Square>4</Square>
+      </Grid.Item>
+      <Grid.Item className="grid-example-grid-alignment-item" span={4}>
+        <Square>5</Square>
+      </Grid.Item>
+      <Grid.Item className="grid-example-grid-alignment-item" span={4}>
+        <Square>6</Square>
+      </Grid.Item>
+      <Grid.Item className="grid-example-grid-alignment-item" span={4}>
+        <Square>7</Square>
+      </Grid.Item>
+      <Grid.Item className="grid-example-grid-alignment-item" span={4}>
+        <Square>8</Square>
+      </Grid.Item>
+      <Grid.Item className="grid-example-grid-alignment-item" span={4}>
+        <Square>9</Square>
+      </Grid.Item>
+    </Grid>
+  ),
+  args: {
+    columns: 12,
+    gap: "size-20",
+    rowGap: "",
+    columnGap: "",
+    alignItems: "stretch",
+    justifyItems: "stretch",
+    className: "grid-example-fixed-size-grid",
+  },
+};
+
+export const Normal: Meta<typeof Grid> = {
+  render: (args: GridProps) => (
+    <Grid {...args}>
+      <Grid.Item span={12}>
+        <Card>span=12</Card>
+      </Grid.Item>
+      <Grid.Item span={11}>
+        <Card>span=11</Card>
+      </Grid.Item>
+      <Grid.Item span={1}>
+        <Card>span=1</Card>
+      </Grid.Item>
+      <Grid.Item span={10}>
+        <Card>span=10</Card>
+      </Grid.Item>
+      <Grid.Item span={2}>
+        <Card>span=2</Card>
+      </Grid.Item>
+      <Grid.Item span={9}>
+        <Card>span=9</Card>
+      </Grid.Item>
+      <Grid.Item span={3}>
+        <Card>span=3</Card>
+      </Grid.Item>
+      <Grid.Item span={8}>
+        <Card>span=8</Card>
+      </Grid.Item>
+      <Grid.Item span={4}>
+        <Card>span=4</Card>
+      </Grid.Item>
+      <Grid.Item span={7}>
+        <Card>span=7</Card>
+      </Grid.Item>
+      <Grid.Item span={5}>
+        <Card>span=5</Card>
+      </Grid.Item>
+      <Grid.Item span={6}>
+        <Card>span=6</Card>
+      </Grid.Item>
+      <Grid.Item span={6}>
+        <Card>span=6</Card>
+      </Grid.Item>
+    </Grid>
+  ),
+  args: {
+    columns: 12,
+    gap: "size-20",
+    rowGap: "",
+    columnGap: "",
+    alignItems: "stretch",
+    justifyItems: "stretch",
+  },
+};
+
+export const EightColumns: Meta<typeof Grid> = {
+  render: (args: GridProps) => (
+    <Grid {...args}>
+      {[...new Array(8)].map((_, k) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <Card key={k}>span=1</Card>
+      ))}
+    </Grid>
+  ),
+  args: {
+    columns: 8,
+    gap: "size-20",
+    alignItems: "stretch",
+    justifyItems: "stretch",
+    className: "grid-example-eight-columns",
+  },
+};
+
+const breakpointControl = {
+  control: {
+    type: "number",
+    min: 0,
+    max: 12,
+    step: 1,
+  },
+};
+
+export const Responsive: Meta<typeof GridItem> = {
+  render: (args: GridItemProps) => {
+    const breakpointArgs = ["xs", "sm", "md", "lg", "xl", "xxl"];
+    const allArgs = Object.entries(args)
+      .filter(([breakpoint]) => breakpointArgs.includes(breakpoint))
+      .map(([breakpoint, value]) => `${breakpoint}=${value}`)
+      .join(" ");
+
+    return (
+      <Grid gap="size-20" alignItems="stretch" justifyItems="stretch">
+        <Grid.Item {...args}>
+          <Card>{allArgs}</Card>
+        </Grid.Item>
+        <Grid.Item lg={4}>
+          <Card>lg=4</Card>
+        </Grid.Item>
+        <Grid.Item xs={5}>
+          <Card>xs=5</Card>
+        </Grid.Item>
+        <Grid.Item span={5}>
+          <Card>span=5</Card>
+        </Grid.Item>
+      </Grid>
+    );
+  },
+  args: {
+    xs: 12,
+    sm: 6,
+    md: 2,
+    lg: 8,
+    xl: 12,
+    xxl: 4,
+  },
+  parameters: {
+    controls: {
+      exclude: ["columns"],
+    },
+  },
+  argTypes: {
+    xs: breakpointControl,
+    sm: breakpointControl,
+    md: breakpointControl,
+    lg: breakpointControl,
+    xl: breakpointControl,
+    xxl: breakpointControl,
+  },
+  decorators: [
+    Story => (
+      <ThemeContext.Provider
+        value={{
+          breakpoints,
+          setBreakpoints,
+        }}
+      >
+        <Story />
+      </ThemeContext.Provider>
+    ),
+  ],
+};
+
+export const ItemPositioning: Meta<typeof GridItem> = {
+  render: (args: GridItemProps) => (
+    <Grid
+      columns={12}
+      gap="size-20"
+      alignItems="stretch"
+      justifyItems="stretch"
+      className="grid-example-fixed-size-grid"
+    >
+      <Grid.Item className="grid-example-align-square-item" span={4} {...args}>
+        <AlignSquare>1</AlignSquare>
+      </Grid.Item>
+      <Grid.Item className="grid-example-align-square-item" span={4}>
+        <AlignSquare>2</AlignSquare>
+      </Grid.Item>
+      <Grid.Item className="grid-example-align-square-item" span={4}>
+        <AlignSquare>3</AlignSquare>
+      </Grid.Item>
+      <Grid.Item className="grid-example-align-square-item" span={4}>
+        <AlignSquare>4</AlignSquare>
+      </Grid.Item>
+    </Grid>
+  ),
+  args: {
+    alignSelf: "center",
+    justifySelf: "end",
+  },
+  argTypes: {
+    alignSelf: {
+      control: { type: "select" },
+      options: ["", "center", "start", "end", "stretch"],
+    },
+    justifySelf: {
+      control: { type: "select" },
+      options: ["", "center", "start", "end", "stretch"],
+    },
+  },
+  parameters: {
+    controls: {
+      exclude: [
+        "columns",
+        "gap",
+        "rowGap",
+        "columnGap",
+        "alignContent",
+        "justifyContent",
+        "alignItems",
+        "justifyItems",
+      ],
+    },
+  },
+};

package/src/components/Grid/Grid.story.styles.css

@@ -14,3 +14,7 @@
 .grid-example-align-square-item {
   background-color: #dddddd;
 }
+
+.grid-example-eight-columns {
+  height: 300px;
+}

package/src/components/Grid/Grid.tsx

@@ -1,6 +1,14 @@
-import { Ref, forwardRef, ReactNode, RefAttributes, CSSProperties } from "react";
+import {
+  Ref,
+  forwardRef,
+  ReactNode,
+  RefAttributes,
+  CSSProperties,
+} from "react";
+import clsx from "clsx";
 import { DOMProps } from "@react-types/shared";
 import { ForwardedRefComponent } from "../../types/components";
+import { withoutUndefinedValues } from "../Flex/propUtils";
 
 export type GridElementType = HTMLDivElement;
 
@@ -33,6 +41,8 @@ export interface GridProps extends RefAttributes<GridElementType>, DOMProps {
   alignItems?: "center" | "start" | "end" | "stretch" | "baseline";
   /** Aligns grid items along the inline (row) axis  */
   justifyItems?: "start" | "end" | "center" | "stretch";
+  /** Custom class name for setting specific CSS */
+  className?: string;
 }
 
 export type GridRef = Ref<GridElementType>;
@@ -48,10 +58,12 @@ const Grid: ForwardedRefComponent<GridProps, GridElementType> = forwardRef(
       alignItems,
       justifyContent,
       justifyItems,
+      className,
       ...rest
     } = props;
+    const classes = clsx("mobius", "mobius/Grid", className);
 
-    const styles: CSSProperties = {
+    const styles: CSSProperties = withoutUndefinedValues({
       boxSizing: "border-box",
       display: "grid",
       gridTemplateColumns: `repeat(${columns}, 1fr)`,
@@ -62,9 +74,9 @@ const Grid: ForwardedRefComponent<GridProps, GridElementType> = forwardRef(
       alignItems,
       justifyContent,
       justifyItems,
-    };
+    });
 
-    return <div style={styles} {...rest} />;
+    return <div style={styles} className={classes} {...rest} />;
   },
 );
 

package/src/components/Grid/Item.tsx

@@ -1,6 +1,14 @@
 "use client";
 
-import { Ref, forwardRef, RefAttributes, useEffect, useState, CSSProperties } from "react";
+import {
+  Ref,
+  forwardRef,
+  RefAttributes,
+  useEffect,
+  useState,
+  CSSProperties,
+} from "react";
+import clsx from "clsx";
 import { DOMProps } from "@react-types/shared";
 import { useBreakpoint } from "../../hooks";
 import { ForwardedRefComponent } from "../../types/components";
@@ -27,6 +35,8 @@ export interface GridItemProps
   alignSelf?: "center" | "start" | "end" | "stretch";
   /** Aligns the grid item along the inline (row) axis */
   justifySelf?: "center" | "start" | "end" | "stretch";
+  /** Custom class name for setting specific CSS */
+  className?: string;
 }
 
 export const getBreakpointMap = (config: Partial<Record<SizeType, number>>) =>
@@ -55,6 +65,7 @@ const GridItem: ForwardedRefComponent<GridItemProps, GridItemElementType> =
       xxl,
       alignSelf,
       justifySelf,
+      className,
       ...rest
     } = props;
     const breakpointMap = getBreakpointMap({
@@ -66,6 +77,7 @@ const GridItem: ForwardedRefComponent<GridItemProps, GridItemElementType> =
       xxl,
     });
     const [responsiveSpan, setResponsiveSpan] = useState();
+    const classes = clsx("mobius/GridItem", className);
 
     useEffect(() => {
       // @ts-expect-error
@@ -78,7 +90,7 @@ const GridItem: ForwardedRefComponent<GridItemProps, GridItemElementType> =
       justifySelf,
     };
 
-    return <div style={{ ...styles }} {...rest} />;
+    return <div style={{ ...styles }} className={classes} {...rest} />;
   });
 
 GridItem.displayName = "GridItem";

package/src/components/Icon/Icon.mdx

@@ -0,0 +1,75 @@
+import { Meta, ArgsTable, Story } from "@storybook/blocks";
+import { Icon } from "./Icon";
+import * as IconStories from "./Icon.stories";
+
+<Meta of={IconStories} />
+
+# 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";
+```
+
+## Examples
+
+### Normal
+
+<Story of={IconStories.Normal} />
+
+{/* prettier-ignore */}
+```jsx
+import { Icon } from "@simplybusiness/mobius";
+
+<Icon name="chevronDown" />
+```
+
+### Spinning
+
+<Story of={IconStories.Spinning} />
+
+{/* 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.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta } from "@storybook/react";
+import { Icon } from "./Icon";
+import { excludeControls } from "../../utils/excludeControls";
+import { IconProps } from "./types";
+
+export default {
+  title: "Components/Icon",
+  component: Icon,
+  argTypes: {
+    name: {
+      options: [
+        "menu",
+        "rightArrow",
+        "leftArrow",
+        "dropdown",
+        "home",
+        "star",
+        "youtube",
+        "error",
+        "search",
+        "user",
+        "chevronDown",
+        "loading",
+      ],
+      control: { type: "radio" },
+    },
+    spin: {
+      if: {
+        arg: "name",
+        eq: "loading",
+      },
+    },
+    ...excludeControls("className", "icon"),
+  },
+};
+
+export const Normal: Meta<typeof Icon> = {
+  render: (args: IconProps) => <Icon {...args} />,
+  args: {
+    name: "chevronDown",
+  },
+};
+
+export const Spinning: Meta<typeof Icon> = {
+  render: (args: IconProps) => <Icon {...args} />,
+  args: {
+    spin: true,
+    name: "loading",
+  },
+};

package/src/components/Icon/types.ts

@@ -7,6 +7,8 @@ export interface BaseIconProps extends RefAttributes<SVGSVGElement> {
   className?: string;
   /** Spin the icon */
   spin?: boolean;
+  fontSize?: string;
+  color?: string;
 }
 
 export interface IconProps

package/src/components/Image/{Image.story.mdx → Image.mdx}

@@ -1,12 +1,9 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
 import { Image } from "./Image";
 import { excludeControls } from "../../utils/excludeControls";
+import * as ImageStories from "./Image.stories";
 
-<Meta
-  title="Components/Image"
-  component={Image}
-  argTypes={excludeControls("elementType", "className")}
-/>
+<Meta of={ImageStories} />
 
 # Image
 
@@ -70,9 +67,7 @@ export const testImg =
 ### Normal
 
 <Canvas>
-  <Story name="Normal" args={{ src: testImg, alt: "test image" }}>
-    {args => <Image {...args} />}
-  </Story>
+  <Story of={ImageStories.Normal} />
 </Canvas>
 
 ## Accessibility

package/src/components/Image/Image.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta } from "@storybook/react";
+import { Image, ImageProps } from "./Image";
+import { excludeControls } from "../../utils/excludeControls";
+
+const testImg =
+  "data:image/png;base64,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";
+
+export default {
+  title: "Components/Image",
+  component: Image,
+  argTypes: excludeControls("elementType", "className"),
+};
+
+export const Normal: Meta<typeof Image> = {
+  render: (args: ImageProps) => <Image {...args} />,
+  args: {
+    src: testImg,
+    alt: "test image",
+  },
+};

package/src/components/Label/{Label.story.mdx → Label.mdx}

@@ -1,12 +1,9 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
 import { Label } from "./Label";
 import { excludeControls } from "../../utils/excludeControls";
+import * as LabelStories from "./Label.stories";
 
-<Meta
-  title="Forms/Label"
-  component={Label}
-  argTypes={excludeControls("className", "elementType")}
-/>
+<Meta of={LabelStories} />
 
 # Label
 
@@ -27,9 +24,7 @@ import { Label } from "@simplybusiness/mobius";
 ## Examples
 
 <Canvas>
-  <Story name="Normal" args={{}}>
-    {args => <Label {...args}>Example label</Label>}
-  </Story>
+  <Story of={LabelStories.Normal} />
 </Canvas>
 
 ## Accessibility