@simplybusiness/mobius 5.1.2 → 5.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "5.1.2",
+  "version": "5.3.0",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",
@@ -23,7 +23,8 @@
       "require": "./dist/cjs/index.js",
       "import": "./dist/esm/index.js",
       "default": "./dist/esm/index.js"
-    }
+    },
+    "./src/**/*.css": "./src/**/*.css"
   },
   "scripts": {
     "clean": "rm -rf dist",
@@ -41,36 +42,34 @@
   },
   "sideEffects": false,
   "devDependencies": {
-    "@react-types/button": "^3.9.6",
-    "@react-types/dialog": "^3.5.12",
-    "@react-types/progress": "^3.5.6",
-    "@swc/cli": "^0.4.0",
-    "@swc/core": "^1.7.1",
+    "@react-types/progress": "^3.5.7",
+    "@swc/cli": "^0.4.1-nightly.20240914",
+    "@swc/core": "^1.7.28",
     "@swc/jest": "^0.2.36",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "6.4.8",
-    "@testing-library/react": "^16.0.0",
+    "@testing-library/jest-dom": "6.5.0",
+    "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@total-typescript/shoehorn": "^0.1.2",
-    "@types/jest": "^29.5.12",
+    "@types/jest": "^29.5.13",
     "@types/lodash.debounce": "^4.0.9",
     "@types/node": "^20.14.12",
-    "@types/react": "^18.3.3",
+    "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.17.0",
-    "@typescript-eslint/parser": "^7.17.0",
+    "@typescript-eslint/eslint-plugin": "^8.8.0",
+    "@typescript-eslint/parser": "^8.8.0",
     "csstype": "^3.1.3",
-    "eslint": "^8.57.0",
+    "eslint": "^8.57.1",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.9.0",
-    "eslint-plugin-no-only-tests": "^3.1.0",
+    "eslint-import-resolver-typescript": "^3.6.3",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.0",
+    "eslint-plugin-no-only-tests": "^3.3.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.35.0",
+    "eslint-plugin-react": "^7.37.1",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-storybook": "^0.9.0",
     "eslint-plugin-testing-library": "^6.3.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
@@ -78,17 +77,17 @@
     "prettier": "^3.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "ts-jest": "^29.2.3",
-    "tslib": "^2.6.3",
-    "typescript": "^5.5.4"
+    "ts-jest": "^29.2.5",
+    "tslib": "^2.7.0",
+    "typescript": "^5.6.2"
   },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.26.20",
-    "@simplybusiness/icons": "^4.14.0",
+    "@floating-ui/react": "^0.26.24",
+    "@simplybusiness/icons": "^4.14.1",
     "classnames": "^2.5.1",
     "dialog-polyfill": "^0.5.6",
     "lodash.debounce": "^4.0.8",

package/src/components/Accordion/Accordion.css

@@ -58,9 +58,18 @@
   }
 }
 
+h1.mobius-accordion__link-text,
+h2.mobius-accordion__link-text,
+h3.mobius-accordion__link-text,
+h4.mobius-accordion__link-text,
+h5.mobius-accordion__link-text,
+h6.mobius-accordion__link-text,
 .mobius-accordion__link-text {
+  margin: 0;
   margin-right: var(--size-xs);
   line-height: var(--line-height-normal);
+  font-size: var(--font-size-regular);
+  font-weight: var(--font-weight-normal);
 }
 
 .mobius-accordion__link-icon {

package/src/components/Accordion/Accordion.stories.tsx

@@ -31,6 +31,7 @@ export const Default: StoryType = {
     </Accordion>
   ),
   args: {
+    linkElementType: "h2",
     showText: "See more",
     hideText: "See less",
     headerPosition: "top",

package/src/components/Accordion/Accordion.test.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { Accordion } from ".";
+import { Accordion, AccordionLinkElementType } from ".";
 import { jestMockMatchMedia } from "../../utils/jestMockMatchMedia";
 
 const CONTAINER_CLASS_NAME = "mobius-accordion";
@@ -259,4 +259,39 @@ describe("Accordion", () => {
       expect(toggle).not.toHaveBeenCalled();
     });
   });
+
+  describe("semantic heading", () => {
+    it("uses span by default", async () => {
+      const toggle = jest.fn();
+      const { container } = render(
+        <Accordion onChange={toggle}>Sample text</Accordion>,
+      );
+
+      const linkContainer = container.getElementsByClassName(LINK_CLASS_NAME);
+      const link = linkContainer[0].firstChild;
+
+      expect(link instanceof HTMLSpanElement).toBe(true);
+    });
+
+    it.each(["h1", "h2", "h3", "h4", "h5", "h6"])(
+      "uses heading type %s",
+      headingType => {
+        const toggle = jest.fn();
+        const { container } = render(
+          <Accordion
+            onChange={toggle}
+            linkElementType={headingType as AccordionLinkElementType}
+          >
+            Sample text
+          </Accordion>,
+        );
+
+        const linkContainer = container.getElementsByClassName(LINK_CLASS_NAME);
+        const link = linkContainer[0].firstChild;
+
+        expect(link instanceof HTMLHeadingElement).toBe(true);
+        expect(link?.nodeName).toBe(headingType.toUpperCase());
+      },
+    );
+  });
 });

package/src/components/Accordion/Accordion.tsx

@@ -11,17 +11,26 @@ import {
   useEffect,
   useState,
 } from "react";
+import { usePrefersReducedMotion } from "../../hooks/usePrefersReducedMotion";
 import { ForwardedRefComponent } from "../../types/components";
 import { DOMProps } from "../../types/dom";
 import { Flex } from "../Flex";
 import { Icon } from "../Icon";
-import { usePrefersReducedMotion } from "../../hooks/usePrefersReducedMotion";
 
+export type AccordionLinkElementType =
+  | "h1"
+  | "h2"
+  | "h3"
+  | "h4"
+  | "h5"
+  | "h6"
+  | "span";
 export type AccordionElementType = HTMLDivElement;
 export type AccordionRef = Ref<AccordionElementType>;
 export interface AccordionLinkProps extends DOMProps {
   /** Link text to show accordion content */
   text?: string;
+  elementType?: AccordionLinkElementType;
   onClick?: () => void;
   toggle: () => void;
   headerChildren?: ReactNode;
@@ -30,6 +39,7 @@ export interface AccordionLinkProps extends DOMProps {
 
 const AccordionLink = ({
   text,
+  elementType: LinkElement = "span",
   toggle,
   onClick,
   headerChildren,
@@ -41,7 +51,6 @@ const AccordionLink = ({
   const iconClasses = classNames("mobius-accordion__link-icon", {
     "--is-open": ariaExpanded,
   });
-
   const handleOnClick = (): void => {
     if (onClick) {
       onClick();
@@ -70,7 +79,9 @@ const AccordionLink = ({
           tabIndex={0}
           aria-expanded={!!ariaExpanded}
         >
-          <span className="mobius-accordion__link-text">{text}</span>
+          <LinkElement className="mobius-accordion__link-text">
+            {text}
+          </LinkElement>
           <Icon icon={chevronDown} className={iconClasses} />
         </div>
         {headerChildren}
@@ -87,7 +98,7 @@ const AccordionLink = ({
       tabIndex={0}
       aria-expanded={!!ariaExpanded}
     >
-      <span className="mobius-accordion__link-text">{text}</span>
+      <LinkElement className="mobius-accordion__link-text">{text}</LinkElement>
       <Icon icon={chevronDown} className={iconClasses} />
     </div>
   );
@@ -106,6 +117,8 @@ export interface AccordionProps
   headerPosition?: "top" | "bottom";
   /** Whether to expand the accordion initially */
   startOpen?: boolean | undefined;
+  /** Semantic heading for title link (default is span) */
+  linkElementType?: AccordionLinkElementType;
   /** Callback that fires each time the accordion is opened */
   onOpen?: () => void;
   /** Callback that fires each time the accordion is closed */
@@ -125,6 +138,7 @@ export const Accordion: ForwardedRefComponent<
     hideText = "See less",
     headerPosition = "top",
     startOpen = false,
+    linkElementType,
     onOpen,
     onClose,
     onChange = () => {},
@@ -186,6 +200,7 @@ export const Accordion: ForwardedRefComponent<
       {headerPosition === "top" && (
         <AccordionLink
           text={linkText}
+          elementType={linkElementType}
           toggle={handleChange}
           ariaExpanded={accordionState.open}
           headerChildren={headerChildren}

package/src/components/Button/Button.tsx

@@ -26,6 +26,10 @@ export interface ButtonProps
   extends UseButtonProps,
     DOMProps,
     RefAttributes<ButtonElementType> {
+  /** The name of the button when submitted in a form */
+  name?: string | undefined;
+  /** The value of the button when submitted in a form */
+  value?: string | undefined;
   /** Custom class name for setting specific CSS */
   className?: string;
   /** Shortlist of styles */

package/src/components/Segment/Segment.css

@@ -159,7 +159,7 @@
 
   /* Colours */
   &.subtle {
-    background-color: var(--color-background-highlight);
+    background-color: var(--color-border-light);
   }
 
   &.grey {

package/src/components/Text/Text.css

@@ -11,6 +11,7 @@
     font-size: var(--font-size-regular);
     font-weight: var(--font-weight-normal);
     line-height: var(--line-height-normal);
+    text-wrap: pretty;
   }
 
   &:where(.--is-h1) {
@@ -20,6 +21,7 @@
     font-weight: var(--font-weight-bold);
     line-height: 1.25; /* 40px */
     margin: 0.35em 0;
+    text-wrap: balance;
   }
 
   &:where(.--is-h2) {
@@ -29,6 +31,7 @@
     font-weight: var(--font-weight-bold);
     line-height: var(--line-height-tight); /* 1.333, 32px */
     margin: 0.45em 0;
+    text-wrap: balance;
   }
 
   &:where(.--is-h3) {
@@ -38,6 +41,7 @@
     font-weight: var(--font-weight-bold);
     line-height: 1.2; /* 24px */
     margin: 0.5em 0;
+    text-wrap: balance;
   }
 
   &:where(.--is-h4) {
@@ -47,6 +51,7 @@
     font-weight: var(--font-weight-bold);
     line-height: var(--line-height-normal); /* 1.5, 24px */
     margin: 0.55em 0;
+    text-wrap: balance;
   }
 
   &:where(.--is-span) {

package/src/hooks/useButton/useButton.tsx

@@ -16,6 +16,8 @@ export interface UseButtonProps {
   target?: string;
   rel?: string;
   role?: string;
+  name?: string | undefined;
+  value?: string | undefined;
 }
 
 export function useButton({
@@ -26,6 +28,8 @@ export function useButton({
   target,
   rel,
   role,
+  name,
+  value,
   onClick,
   onPress,
 }: UseButtonProps) {
@@ -68,6 +72,10 @@ export function useButton({
       tabIndex: isDisabled ? -1 : 0,
       disabled: isDisabled || undefined,
       "aria-disabled": isDisabled || undefined,
+      name:
+        elementType === "input" || elementType === "button" ? name : undefined,
+      value:
+        elementType === "input" || elementType === "button" ? value : undefined,
       ...extraProps,
       onClick: realOnClick,
     },