@simplybusiness/mobius 4.3.6 → 4.4.0

package/src/components/Box/Box.stories.tsx

@@ -1,29 +1,95 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Box, BoxProps } from "./Box";
-import { Button } from "../Button";
-import { excludeControls } from "../../utils";
+import { Box } from "./Box";
+import { excludeControls, sizeOptions } from "../../utils";
+import { BoxProps } from "./types";
+import { TextField } from "../TextField";
 
 type StoryType = StoryObj<typeof Box>;
 
+const paddingProps = Object.assign(
+  {},
+  ...[
+    "padding",
+    "paddingX",
+    "paddingInline",
+    "paddingInlineStart",
+    "paddingInlineEnd",
+    "paddingY",
+    "paddingBlock",
+    "paddingBlockStart",
+    "paddingBlockEnd",
+    "paddingTop",
+    "paddingRight",
+    "paddingBottom",
+    "paddingLeft",
+  ].map(propName => ({
+    [propName]: {
+      control: { type: "select" },
+      options: [...sizeOptions],
+    },
+  })),
+);
+
+const dimensionProps = Object.assign(
+  {},
+  ...["minWidth", "minHeight", "maxWidth", "maxHeight", "width", "height"].map(
+    propName => ({
+      [propName]: {
+        control: { type: "number" },
+      },
+    }),
+  ),
+);
+
 const meta: Meta<typeof Box> = {
   title: "Layout/Box",
   component: Box,
-  argTypes: excludeControls("style"),
+  argTypes: {
+    ...paddingProps,
+    ...dimensionProps,
+    ...excludeControls("style"),
+  },
 };
 
 export const Normal: StoryType = {
   render: (args: BoxProps) => (
     <Box {...args}>
-      <Button>Click me</Button>
+      <TextField label="First name" />
+      <TextField label="Last name" />
+      <TextField label="Email address" />
     </Box>
   ),
+  args: {
+    minWidth: 320,
+    padding: "lg",
+    style: {
+      backgroundColor: "var(--color-background-light)",
+      borderRadius: "var(--radius-1)",
+    },
+  },
 };
 
 export const CustomElement: StoryType = {
-  render: (args: BoxProps) => <Box {...args}>This text is inside a span</Box>,
+  render: (args: BoxProps) => (
+    <Box {...args}>
+      <Box>First item</Box>
+      <Box>Second item</Box>
+      <Box>Third item</Box>
+    </Box>
+  ),
   name: "Custom Element",
   args: {
     elementType: "span",
+    minWidth: 320,
+    paddingBlock: "lg",
+    paddingInline: "xxl",
+    style: {
+      display: "block",
+      backgroundColor: "var(--color-background-medium)",
+      borderRadius: "var(--radius-1)",
+      color: "var(--color-text-inverted)",
+      margin: 0,
+    },
   },
 };
 

package/src/components/Box/Box.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+import { render } from "@testing-library/react";
 import { Box } from ".";
 
 const CLASS_NAME = "mobius/Box";
@@ -11,6 +11,7 @@ describe("Box", () => {
   describe("given elementType", () => {
     it("is not applied as element attribute", () => {
       const { container } = render(<Box elementType="span" />);
+
       expect(container.firstChild).not.toHaveAttribute("elementtype", "span");
     });
   });
@@ -18,22 +19,202 @@ describe("Box", () => {
   describe("uses correct class names", () => {
     it("uses mobius class", () => {
       const { container } = render(<Box>Sample text</Box>);
+
       expect(container.firstChild).toHaveClass("mobius");
     });
 
     it("uses base Mobius class", () => {
-      render(<Box data-testid="test">Sample text</Box>);
-      expect(screen.getByTestId("test")).toHaveClass(CLASS_NAME);
+      const { container } = render(<Box>Sample text</Box>);
+
+      expect(container.firstChild).toHaveClass(CLASS_NAME);
     });
 
     it("includes custom class name", () => {
-      render(
-        <Box className="my-class" data-testid="test">
-          Sample Text
+      const customClassName = "my-class";
+      const { container } = render(
+        <Box className={customClassName}>Sample Text</Box>,
+      );
+
+      expect(container.firstChild).toHaveClass(customClassName);
+      expect(container.firstChild).toHaveClass(CLASS_NAME);
+    });
+  });
+
+  describe("given other props", () => {
+    it("passes them to the element", () => {
+      const { container } = render(
+        <Box data-testid="test-id">Sample text</Box>,
+      );
+
+      expect(container.firstChild).toHaveAttribute("data-testid", "test-id");
+    });
+  });
+
+  describe("given all padding props", () => {
+    it("regardless of order, prioritises paddingTop/Right/Bottom/Left values over others", () => {
+      const paddingTop = 100;
+      const paddingRight = 110;
+      const paddingBottom = 120;
+      const paddingLeft = 130;
+      const padding = 10;
+      const paddingX = 20;
+      const paddingInline = 30;
+      const paddingInlineStart = 40;
+      const paddingInlineEnd = 50;
+      const paddingY = 60;
+      const paddingBlock = 70;
+      const paddingBlockStart = 80;
+      const paddingBlockEnd = 90;
+
+      const { container } = render(
+        <Box
+          paddingTop={paddingTop}
+          paddingRight={paddingRight}
+          paddingBottom={paddingBottom}
+          paddingLeft={paddingLeft}
+          padding={padding}
+          paddingX={paddingX}
+          paddingInline={paddingInline}
+          paddingInlineStart={paddingInlineStart}
+          paddingInlineEnd={paddingInlineEnd}
+          paddingY={paddingY}
+          paddingBlock={paddingBlock}
+          paddingBlockStart={paddingBlockStart}
+          paddingBlockEnd={paddingBlockEnd}
+        />,
+      );
+
+      const elementStyles = (container.firstChild as HTMLElement)?.style;
+
+      expect(elementStyles.paddingTop).toEqual(`${paddingTop}px`);
+      expect(elementStyles.paddingRight).toEqual(`${paddingRight}px`);
+      expect(elementStyles.paddingBottom).toEqual(`${paddingBottom}px`);
+      expect(elementStyles.paddingLeft).toEqual(`${paddingLeft}px`);
+    });
+  });
+
+  describe("given padding inline start/end, block start/end props", () => {
+    it("regardless of order, prioritises inline/block start/end values over others", () => {
+      const padding = 10;
+      const paddingX = 20;
+      const paddingInline = 30;
+      const paddingInlineStart = 40;
+      const paddingInlineEnd = 50;
+      const paddingY = 60;
+      const paddingBlock = 70;
+      const paddingBlockStart = 80;
+      const paddingBlockEnd = 90;
+
+      const { container } = render(
+        <Box
+          paddingBlockStart={paddingBlockStart}
+          paddingInlineEnd={paddingInlineEnd}
+          paddingBlockEnd={paddingBlockEnd}
+          paddingInlineStart={paddingInlineStart}
+          padding={padding}
+          paddingX={paddingX}
+          paddingInline={paddingInline}
+          paddingY={paddingY}
+          paddingBlock={paddingBlock}
+        />,
+      );
+
+      const elementStyles = (container.firstChild as HTMLElement)?.style;
+
+      expect(elementStyles.paddingTop).toEqual(`${paddingBlockStart}px`);
+      expect(elementStyles.paddingRight).toEqual(`${paddingInlineEnd}px`);
+      expect(elementStyles.paddingBottom).toEqual(`${paddingBlockEnd}px`);
+      expect(elementStyles.paddingLeft).toEqual(`${paddingInlineStart}px`);
+    });
+  });
+
+  describe("given padding inline, block props", () => {
+    it("regardless of order, prioritises inline/block values over x/y aliases", () => {
+      // If `padding` value is provided, it does not reflect Chrome browser behaviour
+      // JSDOM applies `padding` for all sides
+      // const padding = 10;
+      const paddingInline = 30;
+      const paddingBlock = 70;
+      const paddingX = 20;
+      const paddingY = 60;
+
+      const { container } = render(
+        <Box
+          // padding={padding}
+          paddingX={paddingX}
+          paddingInline={paddingInline}
+          paddingY={paddingY}
+          paddingBlock={paddingBlock}
+        />,
+      );
+
+      const elementStyles = (container.firstChild as HTMLElement)?.style;
+
+      expect(elementStyles.paddingBlock).toEqual(`${paddingBlock}px`);
+      expect(elementStyles.paddingInline).toEqual(`${paddingInline}px`);
+    });
+  });
+
+  describe("given padding X, Y props", () => {
+    it("applies values as padding-inline, padding-block respectively ", () => {
+      const paddingX = 20;
+      const paddingY = 60;
+
+      const { container } = render(
+        <Box paddingX={paddingX} paddingY={paddingY} />,
+      );
+
+      const elementStyles = (container.firstChild as HTMLElement)?.style;
+
+      expect(elementStyles.paddingBlock).toEqual(`${paddingY}px`);
+      expect(elementStyles.paddingInline).toEqual(`${paddingX}px`);
+    });
+  });
+
+  describe("given padding prop", () => {
+    it("applies same padding value for all sides", () => {
+      const padding = 10;
+
+      const { container } = render(<Box padding={padding} />);
+
+      const elementStyles = (container.firstChild as HTMLElement)?.style;
+
+      expect(elementStyles.padding).toEqual(`${padding}px`);
+    });
+  });
+
+  describe("given minWidth prop", () => {
+    it.each([
+      "minWidth",
+      "minHeight",
+      "maxWidth",
+      "maxHeight",
+      "width",
+      "height",
+    ])("applies %s value", (propName: string) => {
+      const value = 100;
+
+      const { container } = render(<Box {...{ [propName]: value }} />);
+
+      const elementStyles = (container.firstChild as HTMLElement)?.style;
+
+      expect(elementStyles[propName as keyof CSSStyleDeclaration]).toEqual(
+        `${value}px`,
+      );
+    });
+  });
+
+  describe("given style prop", () => {
+    it("overrides default styles", () => {
+      const { container } = render(
+        <Box padding={50} style={{ padding: 100 }}>
+          Sample text
         </Box>,
       );
-      expect(screen.getByTestId("test")).toHaveClass("my-class");
-      expect(screen.getByTestId("test")).toHaveClass(CLASS_NAME);
+
+      const elementStyles = (container.firstChild as HTMLElement)?.style;
+
+      expect(elementStyles.padding).toEqual("100px");
     });
   });
 });

package/src/components/Box/Box.tsx

@@ -1,28 +1,65 @@
-import { Ref, forwardRef, RefAttributes, ReactNode } from "react";
+import { Ref, forwardRef } from "react";
 import classNames from "classnames/dedupe";
-import { DOMProps } from "../../types/dom";
 import { ForwardedRefComponent } from "../../types/components";
-
-export type BoxElementType = HTMLDivElement;
-
-export interface BoxProps extends DOMProps, RefAttributes<BoxElementType> {
-  children?: ReactNode;
-  /** Custom class name for setting specific CSS */
-  className?: string;
-  /** HTML element for the Box */
-  elementType?: "div" | "span";
-  style?: React.CSSProperties;
-}
+import { BoxElementType, BoxProps } from "./types";
+import { getSpacingValue, filterUndefinedProps } from "../../utils";
 
 export type BoxRef = Ref<BoxElementType>;
 
 const Box: ForwardedRefComponent<BoxProps, BoxElementType> = forwardRef(
   (props: BoxProps, ref: BoxRef) => {
-    const { elementType: Element = "div", ...otherProps } = props;
+    const {
+      elementType: Element = "div",
+      padding,
+      paddingX,
+      paddingInline,
+      paddingInlineStart,
+      paddingInlineEnd,
+      paddingY,
+      paddingBlock,
+      paddingBlockStart,
+      paddingBlockEnd,
+      paddingTop,
+      paddingRight,
+      paddingBottom,
+      paddingLeft,
+      minWidth,
+      minHeight,
+      maxWidth,
+      maxHeight,
+      width,
+      height,
+      style,
+      ...otherProps
+    } = props;
 
     const classes = classNames("mobius", "mobius/Box", otherProps.className);
 
-    return <Element ref={ref} {...otherProps} className={classes} />;
+    const styleProps = filterUndefinedProps({
+      padding: getSpacingValue(padding),
+      paddingInline: getSpacingValue(paddingInline || paddingX),
+      paddingBlock: getSpacingValue(paddingBlock || paddingY),
+      paddingTop: getSpacingValue(paddingTop || paddingBlockStart),
+      paddingRight: getSpacingValue(paddingRight || paddingInlineEnd),
+      paddingBottom: getSpacingValue(paddingBottom || paddingBlockEnd),
+      paddingLeft: getSpacingValue(paddingLeft || paddingInlineStart),
+      minWidth,
+      minHeight,
+      maxWidth,
+      maxHeight,
+      width,
+      height,
+      ...style,
+    });
+
+    return (
+      <Element
+        ref={ref}
+        style={styleProps}
+        {...otherProps}
+        className={classes}
+      />
+    );
   },
 );
 

package/src/components/Box/types.ts

@@ -0,0 +1,34 @@
+import { ReactNode, RefAttributes } from "react";
+import { DOMProps, SpacingType } from "../../types";
+
+export type BoxElementType = HTMLDivElement;
+
+export type BoxDimensionsType = string | number;
+
+export interface BoxProps extends DOMProps, RefAttributes<BoxElementType> {
+  children?: ReactNode;
+  /** Custom class name for setting specific CSS */
+  className?: string;
+  /** HTML element for the Box */
+  elementType?: "div" | "span";
+  style?: React.CSSProperties;
+  padding?: SpacingType;
+  paddingX?: SpacingType;
+  paddingInline?: SpacingType;
+  paddingInlineStart?: SpacingType;
+  paddingInlineEnd?: SpacingType;
+  paddingY?: SpacingType;
+  paddingBlock?: SpacingType;
+  paddingBlockStart?: SpacingType;
+  paddingBlockEnd?: SpacingType;
+  paddingTop?: SpacingType;
+  paddingRight?: SpacingType;
+  paddingBottom?: SpacingType;
+  paddingLeft?: SpacingType;
+  minWidth?: BoxDimensionsType;
+  minHeight?: BoxDimensionsType;
+  maxWidth?: BoxDimensionsType;
+  maxHeight?: BoxDimensionsType;
+  width?: BoxDimensionsType;
+  height?: BoxDimensionsType;
+}

package/src/components/Flex/Flex.mdx

@@ -3,16 +3,6 @@ import { Flex } from "./Flex";
 import { Box } from "../Box";
 import * as FlexStories from "./Flex.stories";
 
-export const sizeOptions = [
-  "",
-  "var(--size-xs)",
-  "var(--size-sm)",
-  "var(--size-md)",
-  "var(--size-lg)",
-  "var(--size-xl)",
-  "var(--size-xxl)",
-];
-
 <Meta of={FlexStories} />
 
 # Flex

package/src/components/Flex/Flex.stories.tsx

@@ -2,19 +2,9 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { CSSProperties, ReactNode } from "react";
 import { Flex } from "./Flex";
 import { Box } from "../Box";
-import { excludeControls } from "../../utils";
+import { excludeControls, sizeOptions } from "../../utils";
 import { FlexProps } from "./types";
 
-const sizeOptions = [
-  "",
-  "var(--size-xs)",
-  "var(--size-sm)",
-  "var(--size-md)",
-  "var(--size-lg)",
-  "var(--size-xl)",
-  "var(--size-xxl)",
-];
-
 type StoryType = StoryObj<typeof Flex>;
 
 const meta: Meta<typeof Flex> = {
@@ -150,9 +140,7 @@ export const RowLayout: StoryType = {
     justifyContent: "normal",
     alignItems: "stretch",
     alignContent: "flex-start",
-    gap: "var(--size-xs)",
-    rowGap: "",
-    columnGap: "",
+    gap: "xs",
   },
 };
 
@@ -172,9 +160,7 @@ export const ColumnLayout: StoryType = {
     justifyContent: "normal",
     alignItems: "stretch",
     alignContent: "normal",
-    gap: "var(--size-xs)",
-    rowGap: "",
-    columnGap: "",
+    gap: "xs",
   },
 };
 

package/src/components/Flex/propUtils.test.ts

@@ -1,32 +1,4 @@
-import {
-  withoutUndefinedValues,
-  buildFlexStyles,
-  splitProps,
-} from "./propUtils";
-
-describe("withoutUndefinedValues", () => {
-  it("returns object without undefined values", () => {
-    const props = {
-      a: 1,
-      b: "Two",
-      c: [],
-      d: {},
-      e: undefined,
-      f: undefined,
-    };
-
-    const actual = withoutUndefinedValues(props);
-
-    const expected = {
-      a: 1,
-      b: "Two",
-      c: [],
-      d: {},
-    };
-
-    expect(actual).toStrictEqual(expected);
-  });
-});
+import { buildFlexStyles, splitProps } from "./propUtils";
 
 describe("buildFlexStyles", () => {
   describe("given a list of props", () => {
@@ -39,14 +11,21 @@ describe("buildFlexStyles", () => {
         justifyContent: "start",
         alignItems: "stretch",
         alignContent: "center",
+        gap: 10,
+        rowGap: 20,
+        columnGap: 30,
+      } as const;
+
+      const transformedProps = {
         gap: "10px",
         rowGap: "20px",
         columnGap: "30px",
-      } as const;
+      };
 
       const expectedProps = {
-        ...props,
         display: "flex",
+        ...props,
+        ...transformedProps,
       };
 
       const actual = buildFlexStyles(props);
@@ -66,7 +45,7 @@ describe("buildFlexStyles", () => {
         alignItems: undefined,
         alignContent: "center",
         gap: undefined,
-        rowGap: "20px",
+        rowGap: 20,
         columnGap: undefined,
       } as const;
 
@@ -97,9 +76,9 @@ describe("splitProps", () => {
         justifyContent: "start",
         alignItems: "stretch",
         alignContent: "center",
-        gap: "10px",
-        rowGap: "20px",
-        columnGap: "30px",
+        gap: 10,
+        rowGap: 20,
+        columnGap: 30,
       } as const;
 
       const otherProps = {

package/src/components/Flex/propUtils.ts

@@ -1,8 +1,7 @@
+import { getSpacingValue } from "../../utils";
+import { filterUndefinedProps } from "../../utils/filterUndefinedProps";
 import { FlexNonStyleProps, FlexProps, FlexStyleProps } from "./types";
 
-export const withoutUndefinedValues = (obj: Record<string, unknown>) =>
-  Object.fromEntries(Object.entries(obj).filter(([_, value]) => value));
-
 export const buildFlexStyles = (props: FlexStyleProps) => {
   const {
     flexDirection,
@@ -26,12 +25,12 @@ export const buildFlexStyles = (props: FlexStyleProps) => {
     justifyContent,
     alignItems,
     alignContent,
-    gap,
-    rowGap,
-    columnGap,
+    gap: getSpacingValue(gap),
+    columnGap: getSpacingValue(columnGap),
+    rowGap: getSpacingValue(rowGap),
   };
 
-  return withoutUndefinedValues(styleProps);
+  return filterUndefinedProps(styleProps);
 };
 
 export const splitProps = (

package/src/components/Flex/types.ts

@@ -1,6 +1,7 @@
 import { Ref, ReactNode, RefAttributes, AriaRole } from "react";
 import type { Property } from "csstype";
 import { DOMProps } from "../../types/dom";
+import { SpacingType } from "../../types";
 
 export type FlexElementType = HTMLDivElement;
 
@@ -17,11 +18,11 @@ export interface FlexStyleProps {
   /** Aligns the grid along the inline (row) axis */
   justifyContent?: Property.JustifyContent;
   /** How big a gap between the columns and rows */
-  gap?: Property.Gap;
+  gap?: SpacingType;
   /** How big a gap between the rows */
-  rowGap?: Property.RowGap;
+  rowGap?: SpacingType;
   /** How big a gap between the columns */
-  columnGap?: Property.ColumnGap;
+  columnGap?: SpacingType;
   style?: React.CSSProperties;
   role?: AriaRole;
 }

package/src/components/Grid/Grid.mdx

@@ -4,16 +4,6 @@ import { Box } from "../Box";
 import { Flex } from "../Flex";
 import * as GridStories from "./Grid.stories";
 
-export const sizeOptions = [
-  "",
-  "size-xs",
-  "size-s",
-  "size-m",
-  "size-l",
-  "size-xl",
-  "size-xxl",
-];
-
 <Meta of={GridStories} />
 
 # Grid