@simplybusiness/mobius 4.16.0 → 5.0.0

package/src/components/Stack/Stack.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Stack, StackProps } from ".";
+import { excludeControls } from "../../utils";
+import { Button } from "../Button";
+
+type StoryType = StoryObj<typeof Stack>;
+
+const meta: Meta<typeof Stack> = {
+  title: "Layout/Stack",
+  component: Stack,
+  argTypes: {
+    ...excludeControls("className"),
+    gap: {
+      control: {
+        type: "select",
+        options: ["", "xs", "sm", "md", "lg", "xl"],
+      },
+    },
+  },
+};
+
+export const Default: StoryType = {
+  render: (args: StackProps) => (
+    <Stack {...args}>
+      <Button type="button">One</Button>
+      <Button type="button">Two</Button>
+      <Button type="button">Three</Button>
+      <Button type="button">Four</Button>
+    </Stack>
+  ),
+  args: {
+    gap: "xs",
+  },
+};
+
+export const Nested: StoryType = {
+  render: (args: StackProps) => (
+    <Stack {...args}>
+      <Button type="button">One</Button>
+      <Button type="button">Two</Button>
+      <Stack {...args}>
+        <Button type="button" variant="secondary">
+          Three
+        </Button>
+        <Button type="button" variant="secondary">
+          Four
+        </Button>
+      </Stack>
+    </Stack>
+  ),
+  args: {
+    gap: "xs",
+  },
+};
+
+export default meta;

package/src/components/Stack/Stack.test.tsx

@@ -0,0 +1,8 @@
+import { render } from "@testing-library/react";
+import { Stack } from ".";
+
+describe("Stack", () => {
+  it("should render without errors", () => {
+    render(<Stack>Sample text</Stack>);
+  });
+});

package/src/components/Stack/Stack.tsx

@@ -0,0 +1,34 @@
+import React, { Ref, forwardRef, RefAttributes, ReactNode } from "react";
+import classNames from "classnames/dedupe";
+import type { DOMProps } from "../../types/dom";
+import type { ForwardedRefComponent } from "../../types/components";
+import { SpacingType } from "../../types";
+
+export type StackElementType = HTMLDivElement;
+
+export interface StackProps extends DOMProps, RefAttributes<StackElementType> {
+  children?: ReactNode;
+  /** How big a gap between items */
+  gap?: SpacingType;
+  /** Custom class name for setting specific CSS */
+  className?: string;
+  elementType?: string | React.ElementType;
+}
+
+export type StackRef = Ref<StackElementType>;
+
+export const Stack: ForwardedRefComponent<StackProps, StackElementType> =
+  forwardRef((props: StackProps, ref: StackRef) => {
+    const { elementType: Element = "div", gap, ...otherProps } = props;
+
+    const classes = classNames(
+      "mobius",
+      "mobius-stack",
+      {
+        [`--gap-${gap}`]: gap,
+      },
+      otherProps.className,
+    );
+
+    return <Element ref={ref} {...otherProps} className={classes} />;
+  });

package/src/components/Stack/index.tsx

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

package/src/components/Table/Body.tsx

@@ -11,7 +11,7 @@ export type BodyRef = Ref<HTMLTableSectionElement>;
 
 const Body: ForwardedRefComponent<BodyProps, HTMLTableSectionElement> =
   forwardRef((props: BodyProps, ref: BodyRef) => {
-    const classes = classNames("mobius", "mobius/TableBody", props.className);
+    const classes = classNames("mobius", "mobius-table__body", props.className);
 
     return <tbody ref={ref} {...props} className={classes} />;
   });

package/src/components/Table/Cell.tsx

@@ -15,7 +15,7 @@ const Cell: ForwardedRefComponent<CellProps, HTMLTableCellElement> = forwardRef(
   (props: CellProps, ref: CellRef) => {
     const classes = classNames(
       "mobius",
-      "mobius/TableBodyCell",
+      "mobius-table__body-cell",
       props.className,
     );
 

package/src/components/Table/Foot.tsx

@@ -11,7 +11,7 @@ export type FootRef = Ref<HTMLTableSectionElement>;
 
 const Foot: ForwardedRefComponent<FootProps, HTMLTableSectionElement> =
   forwardRef((props: FootProps, ref: FootRef) => {
-    const classes = classNames("mobius", "mobius/TableFoot", props.className);
+    const classes = classNames("mobius", "mobius-table__foot", props.className);
 
     return <tfoot ref={ref} {...props} className={classes} />;
   });

package/src/components/Table/Head.tsx

@@ -11,7 +11,7 @@ export type HeadRef = Ref<HTMLTableSectionElement>;
 
 const Head: ForwardedRefComponent<HeadProps, HTMLTableSectionElement> =
   forwardRef((props: HeadProps, ref: HeadRef) => {
-    const classes = classNames("mobius", "mobius/TableHead", props.className);
+    const classes = classNames("mobius", "mobius-table__head", props.className);
 
     return <thead ref={ref} {...props} className={classes} />;
   });

package/src/components/Table/HeaderCell.tsx

@@ -15,7 +15,7 @@ const HeaderCell: ForwardedRefComponent<HeaderCellProps, HTMLTableCellElement> =
   forwardRef((props: HeaderCellProps, ref: HeaderCellRef) => {
     const classes = classNames(
       "mobius",
-      "mobius/TableHeadCell",
+      "mobius-table__head-cell",
       props.className,
     );
 

package/src/components/Table/Row.tsx

@@ -11,7 +11,7 @@ export type RowRef = Ref<HTMLTableRowElement>;
 
 const Row: ForwardedRefComponent<RowProps, HTMLTableRowElement> = forwardRef(
   (props: RowProps, ref: RowRef) => {
-    const classes = classNames("mobius", "mobius/TableRow", props.className);
+    const classes = classNames("mobius", "mobius-table__row", props.className);
 
     return <tr ref={ref} {...props} className={classes} />;
   },

package/src/components/Table/Table.css

@@ -0,0 +1,62 @@
+:root,
+:host {
+  --table-border-width: 1px;
+}
+
+.mobius-table {
+  display: table;
+  box-sizing: border-box;
+  width: 100%;
+  text-align: left;
+  border-collapse: collapse;
+  line-height: 1.7;
+  box-sizing: border-box;
+  text-indent: initial;
+  border-spacing: 2px;
+  border-color: var(--color-border-light);
+}
+
+.mobius-table__head {
+  display: table-row-group;
+  box-sizing: border-box;
+  vertical-align: middle;
+  border-color: inherit;
+  font-weight: var(--font-weight-bold);
+}
+
+.mobius-table__head-cell {
+  display: table-cell;
+  font-weight: var(--font-weight-bold);
+  box-sizing: border-box;
+  vertical-align: baseline;
+  padding-top: var(--size-xs);
+  padding-bottom: var(--size-xs);
+  padding-right: var(--size-lg);
+  border-color: currentColor;
+  border-width: var(--table-border-width);
+  border-bottom-style: solid;
+}
+
+.mobius-table__body {
+  display: table-row-group;
+  box-sizing: border-box;
+  vertical-align: middle;
+  border-color: inherit;
+}
+
+.mobius-table__body-cell {
+  display: table-cell;
+  vertical-align: baseline;
+  box-sizing: border-box;
+  color: var(--color-text-medium);
+  padding-top: var(--size-xs);
+  padding-bottom: var(--size-xs);
+  padding-right: var(--size-lg);
+  border-color: var(--color-border-light);
+  border-width: var(--table-border-width);
+  border-bottom-style: solid;
+}
+
+.mobius-table__row {
+  display: table-row;
+}

package/src/components/Table/Table.mdx

@@ -45,25 +45,21 @@ a `Table.HeaderCell` to indicate what the data for that row is pertaining to.
 The following HTML is rendered for a Table:
 
 ```html
-<table class="mobius/Table">
-  <thead class="mobius/TableHead">
-    <tr class="mobius/TableRow">
-      <th class="mobius/TableCell">Header cell</th>
+<table class="mobius-table">
+  <thead class="mobius-table__head">
+    <tr class="mobius-table__row">
+      <th class="mobius-table__cell">Header cell</th>
     </tr>
   </thead>
-  <tbody class="mobius/TableBody">
-    <tr class="mobius/TableRow">
-      <td class="mobius/TableCell">Body cell</td>
+  <tbody class="mobius-table__body">
+    <tr class="mobius-table__row">
+      <td class="mobius-table__cell">Body cell</td>
     </tr>
   </tbody>
-  <tfoot class="mobius/TableFoot">
-    <tr class="mobius/TableRow">
-      <td class="mobius/TableCell">Footer cell</td>
+  <tfoot class="mobius-table__foot">
+    <tr class="mobius-table__row">
+      <td class="mobius-table__cell">Footer cell</td>
     </tr>
   </tfoot>
 </table>
 ```
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Table) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Table/Table.test.tsx

@@ -1,7 +1,12 @@
 import { render, screen } from "@testing-library/react";
 import { Table } from ".";
 
-const TABLE_CLASS_NAME = "mobius/Table";
+const TABLE_CLASS_NAME = "mobius-table";
+const TABLE_HEAD_CLASS_NAME = "mobius-table__head";
+const TABLE_HEAD_CELL_CLASS_NAME = "mobius-table__head-cell";
+const TABLE_BODY_CLASS_NAME = "mobius-table__body";
+const TABLE_FOOT_CLASS_NAME = "mobius-table__foot";
+const TABLE_ROW_CLASS_NAME = "mobius-table__row";
 
 describe("Test for Table", () => {
   it("renders an empty table", () => {
@@ -71,17 +76,21 @@ describe("Test for Table", () => {
       // Table and head
       expect(screen.getByTestId("test")).toHaveClass(TABLE_CLASS_NAME);
       const head = screen.getByTestId("test").firstChild;
-      expect(head).toHaveClass("mobius/TableHead");
-      expect(head?.firstChild).toHaveClass("mobius/TableRow");
-      expect(head?.firstChild?.firstChild).toHaveClass("mobius/TableHeadCell");
+      expect(head).toHaveClass(TABLE_HEAD_CLASS_NAME);
+      expect(head?.firstChild).toHaveClass(TABLE_ROW_CLASS_NAME);
+      expect(head?.firstChild?.firstChild).toHaveClass(
+        TABLE_HEAD_CELL_CLASS_NAME,
+      );
       // Body
       const body = screen.getByTestId("test").childNodes[1];
-      expect(body).toHaveClass("mobius/TableBody");
-      expect(body?.firstChild).toHaveClass("mobius/TableRow");
-      expect(body?.firstChild?.firstChild).toHaveClass("mobius/TableHeadCell");
+      expect(body).toHaveClass(TABLE_BODY_CLASS_NAME);
+      expect(body?.firstChild).toHaveClass(TABLE_ROW_CLASS_NAME);
+      expect(body?.firstChild?.firstChild).toHaveClass(
+        TABLE_HEAD_CELL_CLASS_NAME,
+      );
       // Foot
       const foot = screen.getByTestId("test").childNodes[2];
-      expect(foot).toHaveClass("mobius/TableFoot");
+      expect(foot).toHaveClass(TABLE_FOOT_CLASS_NAME);
     });
 
     it("includes custom class name", () => {
@@ -114,23 +123,27 @@ describe("Test for Table", () => {
       expect(screen.getByTestId("test")).toHaveClass(TABLE_CLASS_NAME);
       expect(screen.getByTestId("test")).toHaveClass("my-table");
       const head = screen.getByTestId("test").firstChild;
-      expect(head).toHaveClass("mobius/TableHead");
+      expect(head).toHaveClass(TABLE_HEAD_CLASS_NAME);
       expect(head).toHaveClass("my-header");
-      expect(head?.firstChild).toHaveClass("mobius/TableRow");
+      expect(head?.firstChild).toHaveClass(TABLE_ROW_CLASS_NAME);
       expect(head?.firstChild).toHaveClass("my-header-row");
-      expect(head?.firstChild?.firstChild).toHaveClass("mobius/TableHeadCell");
+      expect(head?.firstChild?.firstChild).toHaveClass(
+        TABLE_HEAD_CELL_CLASS_NAME,
+      );
       expect(head?.firstChild?.firstChild).toHaveClass("my-header-cell");
       // Body
       const body = screen.getByTestId("test").childNodes[1];
-      expect(body).toHaveClass("mobius/TableBody");
+      expect(body).toHaveClass(TABLE_BODY_CLASS_NAME);
       expect(body).toHaveClass("my-body");
-      expect(body?.firstChild).toHaveClass("mobius/TableRow");
+      expect(body?.firstChild).toHaveClass(TABLE_ROW_CLASS_NAME);
       expect(body?.firstChild).toHaveClass("my-body-row");
-      expect(body?.firstChild?.firstChild).toHaveClass("mobius/TableHeadCell");
+      expect(body?.firstChild?.firstChild).toHaveClass(
+        TABLE_HEAD_CELL_CLASS_NAME,
+      );
       expect(body?.firstChild?.firstChild).toHaveClass("my-body-cell");
       // Foot
       const foot = screen.getByTestId("test").childNodes[2];
-      expect(foot).toHaveClass("mobius/TableFoot");
+      expect(foot).toHaveClass(TABLE_FOOT_CLASS_NAME);
       expect(foot).toHaveClass("my-footer");
     });
   });

package/src/components/Table/Table.tsx

@@ -14,7 +14,7 @@ export type TableRef = Ref<TableElementType>;
 
 const Table: ForwardedRefComponent<TableProps, TableElementType> = forwardRef(
   (props: TableProps, ref: TableRef) => {
-    const classes = classNames("mobius", "mobius/Table", props.className);
+    const classes = classNames("mobius", "mobius-table", props.className);
 
     return <table ref={ref} {...props} className={classes} />;
   },

package/src/components/Text/Text.css

@@ -0,0 +1,94 @@
+.mobius-text {
+  box-sizing: border-box;
+  font-family: var(--font-family);
+  font-size: var(--font-size-regular);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--line-height-normal);
+
+  &:where(.--is-p) {
+    box-sizing: border-box;
+    font-family: var(--font-family);
+    font-size: var(--font-size-regular);
+    font-weight: var(--font-weight-normal);
+    line-height: var(--line-height-normal);
+  }
+
+  &:where(.--is-h1) {
+    box-sizing: border-box;
+    font-family: var(--font-family);
+    font-size: var(--font-size-title); /* 32px */
+    font-weight: var(--font-weight-bold);
+    line-height: 1.25; /* 40px */
+    margin: 0.35em 0;
+  }
+
+  &:where(.--is-h2) {
+    box-sizing: border-box;
+    font-family: var(--font-family);
+    font-size: var(--font-size-small-title); /* 24px */
+    font-weight: var(--font-weight-bold);
+    line-height: var(--line-height-tight); /* 1.333, 32px */
+    margin: 0.45em 0;
+  }
+
+  &:where(.--is-h3) {
+    box-sizing: border-box;
+    font-family: var(--font-family);
+    font-size: var(--font-size-lead); /* 20px */
+    font-weight: var(--font-weight-bold);
+    line-height: 1.2; /* 24px */
+    margin: 0.5em 0;
+  }
+
+  &:where(.--is-h4) {
+    box-sizing: border-box;
+    font-family: var(--font-family);
+    font-size: var(--font-size-regular); /* 16px */
+    font-weight: var(--font-weight-bold);
+    line-height: var(--line-height-normal); /* 1.5, 24px */
+    margin: 0.55em 0;
+  }
+
+  &:where(.--is-span) {
+    box-sizing: border-box;
+    font-size: var(--font-size-regular);
+    font-weight: var(--font-weight-normal);
+    line-height: var(--line-height-normal);
+  }
+
+  &:where(.--is-body) {
+    box-sizing: border-box;
+    font-family: var(--font-family);
+    font-size: var(--font-size-regular); /* 16px */
+    font-weight: var(--font-weight-normal);
+    line-height: var(--line-height-normal); /* 1.5, 24px */
+    color: var(--color-text-medium);
+  }
+
+  &:where(.--is-small) {
+    box-sizing: border-box;
+    font-family: var(--font-family);
+    font-size: var(--font-size-small-paragraph); /* 14px */
+    font-weight: var(--font-weight-normal);
+    line-height: 1.428; /* 20px */
+    color: var(--color-text-medium);
+  }
+
+  &:where(.--is-legal) {
+    box-sizing: border-box;
+    font-family: var(--font-family);
+    font-size: var(--font-size-small-print); /* 12px */
+    font-weight: var(--font-weight-normal);
+    line-height: var(--line-height-tight); /* 1.333, 16px */
+    color: var(--color-text-medium);
+  }
+
+  /* Compact text */
+  &:where(.--has-line-height-tight) {
+    line-height: var(--line-height-tight);
+  }
+
+  &:where(.--has-line-height-loose) {
+    line-height: var(--line-height-normal);
+  }
+}

package/src/components/Text/Text.mdx

@@ -113,9 +113,5 @@ Set the spacing to "loose" or "tight" to override the default line height for te
 The following HTML is rendered for Text. The element type is added as a class.
 
 ```html
-<h4 class="mobius/Text h4">{text}</h4>
+<h4 class="mobius-text --is-h4">{text}</h4>
 ```
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Text) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Text/Text.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import { Text } from ".";
 
-const CLASS_NAME = "mobius/Text";
+const CLASS_NAME = "mobius-text";
 
 describe("Text", () => {
   it("should render without errors", () => {

package/src/components/Text/Text.tsx

@@ -46,12 +46,11 @@ const Text: ForwardedRefComponent<TextProps, TextElementType> = forwardRef(
     // If a variant is supplied, set the class name and element type
     const elementType = getElementType(variant, Component);
     const variantType = variant || elementType;
-    const lineHeight = spacing ? `line-height-${spacing}` : "";
     const classes = classNames(
       "mobius",
-      "mobius/Text",
-      variantType,
-      lineHeight,
+      "mobius-text",
+      { [`--is-${variantType}`]: variantType },
+      { [`--has-line-height-${spacing}`]: spacing },
       className,
     );
 

package/src/components/TextArea/TextArea.css

@@ -0,0 +1,46 @@
+.mobius-text-area__input {
+  box-sizing: border-box;
+  flex: 1 1 0%;
+  border: var(--border-default);
+  border-radius: var(--radius-1);
+  padding: var(--size-xs) var(--size-sm);
+  margin: 0px;
+  font-family: var(--font-family);
+  font-size: var(--font-size-regular);
+  color: var(--color-text);
+  outline: 0px;
+  background-color: var(--color-background-input);
+
+  /* Hovered  */
+  &:hover:not(.--is-disabled):not(&.--is-invalid) {
+    border-color: var(--color-primary);
+    background-color: var(--color-background-input-active);
+  }
+
+  /* Focused */
+  &:focus-visible {
+    border-color: var(--color-primary);
+    background-color: var(--color-background-input-active);
+    box-shadow: var(--box-shadow-default);
+  }
+
+  /* Disabled  */
+  &.--is-disabled {
+    background-color: var(--color-background-light);
+    border-color: var(--color-border-medium);
+    color: var(--color-text-light);
+    cursor: not-allowed;
+  }
+
+  /* Invalid */
+  &:not(.--is-disabled).--is-invalid {
+    border-color: var(--color-error);
+    background-color: var(--color-error-background);
+    color: var(--color-error);
+  }
+}
+
+.mobius-text-area {
+  box-sizing: border-box;
+  width: 100%;
+}

package/src/components/TextArea/TextArea.mdx

@@ -57,13 +57,9 @@ Refer to [TextField docs](/story/core-docs-textfield--page) for usage and exampl
 The following HTML is rendered for a TextArea:
 
 ```html
-<div class="mobius/TextArea">
-  <label class="mobius/Label">{label}</label>
-  <textarea class="mobius/TextAreaInput">{text}</textarea>
-  <div class="mobius/ErrorMessage">{errors}</div>
+<div class="mobius-text-area">
+  <label class="mobius-label">{label}</label>
+  <textarea class="mobius-text-area__input">{text}</textarea>
+  <div class="mobius-error-message">{errors}</div>
 </div>
 ```
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/TextArea) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/TextArea/TextArea.test.tsx

@@ -2,7 +2,7 @@ import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { TextArea } from ".";
 
-const CLASS_NAME = "mobius/TextArea";
+const CLASS_NAME = "mobius-text-area";
 
 describe("TextArea", () => {
   it("should render without error", () => {

package/src/components/TextArea/TextArea.tsx

@@ -6,13 +6,13 @@ import { DOMProps } from "../../types/dom";
 import { TextAreaInput } from "../TextAreaInput";
 import { Label } from "../Label";
 import { ForwardedRefComponent } from "../../types/components";
-import { Flex } from "../Flex";
 import { ErrorMessage } from "../ErrorMessage";
 import {
   UseTextFieldProps,
   useTextField,
   useValidationClasses,
 } from "../../hooks";
+import { Stack } from "../Stack";
 
 export type TextAreaElementType = HTMLTextAreaElement;
 
@@ -41,12 +41,15 @@ const TextArea: ForwardedRefComponent<TextAreaProps, TextAreaElementType> =
     const { inputProps, labelProps, errorMessageProps } = useTextField(props);
 
     // Set class name for atom, including interaction state
-    const classes = classNames("mobius", "mobius/TextArea", className);
+    const classes = classNames("mobius", "mobius-text-area", className);
     const validationClasses = useValidationClasses({
       validationState,
       isInvalid,
     });
-    const inputClasses = classNames("mobius/TextAreaInput", validationClasses);
+    const inputClasses = classNames(
+      "mobius-text-area__input",
+      validationClasses,
+    );
     const labelClasses = classNames(
       {
         "--is-disabled": isDisabled,
@@ -55,7 +58,7 @@ const TextArea: ForwardedRefComponent<TextAreaProps, TextAreaElementType> =
     );
 
     return (
-      <Flex flexDirection="column" className={classes}>
+      <Stack className={classes} gap="xs">
         {label && (
           <Label {...labelProps} className={labelClasses}>
             {props.label}
@@ -70,7 +73,7 @@ const TextArea: ForwardedRefComponent<TextAreaProps, TextAreaElementType> =
           aria-invalid={errorMessage != null}
         />
         <ErrorMessage {...errorMessageProps} errorMessage={errorMessage} />
-      </Flex>
+      </Stack>
     );
   });
 

package/src/components/TextAreaInput/TextAreaInput.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import { TextAreaInput } from ".";
 
-const CLASS_NAME = "mobius/TextAreaInput";
+const CLASS_NAME = "mobius-text-area__input";
 
 describe("TextAreaInput", () => {
   it("should render without errors", () => {

package/src/components/TextAreaInput/TextAreaInput.tsx

@@ -28,7 +28,7 @@ const TextAreaInput: ForwardedRefComponent<
 
   const classes = classNames(
     "mobius",
-    "mobius/TextAreaInput",
+    "mobius-text-area__input",
     {
       "--is-disabled": isDisabled,
       "--is-selected": isSelected,