@simplybusiness/mobius 10.4.4 → 10.6.0

package/dist/types/components/StickyOnMobile/StickyOnMobile.d.ts

@@ -0,0 +1,15 @@
+import type { RefAttributes, ReactNode, ElementType, CSSProperties, HTMLAttributes } from "react";
+import "./StickyOnMobile.css";
+export type StickyOnMobileElementType = HTMLElement;
+export interface StickyOnMobileProps extends HTMLAttributes<StickyOnMobileElementType>, RefAttributes<StickyOnMobileElementType> {
+    children?: ReactNode;
+    /** HTML element to render. Defaults to `div`. */
+    elementType?: ElementType;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function StickyOnMobile({ ref, ...props }: StickyOnMobileProps): import("react/jsx-runtime").JSX.Element;
+declare namespace StickyOnMobile {
+    var displayName: string;
+}
+export { StickyOnMobile };

package/dist/types/components/StickyOnMobile/index.d.ts

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

package/dist/types/components/index.d.ts

@@ -34,6 +34,7 @@ export * from "./Segment";
 export * from "./Select";
 export * from "./Slider";
 export * from "./Stack";
+export * from "./StickyOnMobile";
 export * from "./SVG";
 export * from "./Switch";
 export * from "./Table";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "10.4.4",
+  "version": "10.6.0",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",
@@ -63,34 +63,34 @@
     "dist/**/*.css"
   ],
   "devDependencies": {
-    "@eslint/compat": "^2.0.2",
-    "@eslint/eslintrc": "^3.3.4",
-    "@eslint/js": "^9.39.3",
-    "@react-types/progress": "^3.5.18",
+    "@eslint/compat": "^2.0.5",
+    "@eslint/eslintrc": "^3.3.5",
+    "@eslint/js": "^9.39.4",
+    "@react-types/progress": "^3.6.0",
     "@simplybusiness/build-scripts": "^3.0.0",
-    "@simplybusiness/eslint-config": "^2.0.6",
+    "@simplybusiness/eslint-config": "^2.0.7",
     "@simplybusiness/eslint-plugin": "^1.3.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@total-typescript/shoehorn": "^0.1.2",
-    "@types/node": "^25.3.3",
+    "@types/node": "^25.6.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@typescript-eslint/eslint-plugin": "^8.59.0",
     "@typescript-eslint/parser": "^8.59.0",
     "@typescript/native-preview": "7.0.0-dev.20260421.2",
-    "@vitest/coverage-v8": "^4.0.18",
+    "@vitest/coverage-v8": "^4.1.4",
     "csstype": "^3.2.3",
-    "eslint": "^9.39.3",
+    "eslint": "^9.39.4",
     "eslint-plugin-ssr-friendly": "^1.3.0",
-    "prettier": "^3.8.1",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "prettier": "^3.8.3",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
     "tslib": "^2.8.1",
     "typescript": "^6.0.3",
-    "vitest": "^4.0.18"
+    "vitest": "^4.1.4"
   },
   "peerDependencies": {
     "react": "^19.2.0",

package/src/components/Button/Button.css

@@ -48,14 +48,23 @@
     &:where(.--variant-primary) {
       --button-content-color: var(--button-primary-content-color);
       background: var(--button-primary-color);
+      border-color: var(--button-primary-border-color);
       font-variation-settings: var(--button-primary-font-variation);
 
       &:where(:active) {
+        --button-content-color: var(
+          --button-primary-hover-content-color,
+          var(--button-primary-content-color)
+        );
         background: var(--button-primary-hover-color);
       }
 
       @media (hover: hover) {
         &:where(:hover) {
+          --button-content-color: var(
+            --button-primary-hover-content-color,
+            var(--button-primary-content-color)
+          );
           background: var(--button-primary-hover-color);
         }
       }
@@ -67,6 +76,7 @@
       &:where(.--is-disabled) {
         --button-content-color: var(--color-text-light);
         background: var(--color-background-medium);
+        border-color: transparent;
         cursor: not-allowed;
       }
     }

package/src/components/StickyOnMobile/StickyOnMobile.css

@@ -0,0 +1,19 @@
+@layer atoms {
+  @media (max-width: 768px) {
+    .mobius-sticky-on-mobile {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      box-sizing: border-box;
+      padding: var(--size-sm);
+      padding-bottom: max(var(--size-sm), env(safe-area-inset-bottom));
+      background-color: var(--color-background);
+      /* Second shadow paints a 1px background-coloured band below the bar so sub-pixel rounding can't reveal a hairline gap. */
+      box-shadow: var(--shadow-card),
+      0 1px 0 var(--color-background);
+      /* Sit above Zendesk's launcher (z-index: 999999). */
+      z-index: 999999;
+    }
+  }
+}

package/src/components/StickyOnMobile/StickyOnMobile.mdx

@@ -0,0 +1,52 @@
+import { Meta, ArgTypes, Canvas } from "@storybook/addon-docs/blocks";
+import * as StickyOnMobileStories from "./StickyOnMobile.stories";
+import { StickyOnMobile } from "./StickyOnMobile";
+
+<Meta of={StickyOnMobileStories} />
+
+# StickyOnMobile
+
+`StickyOnMobile` is a thin layout wrapper that pins a single child to the bottom of the viewport on mobile (`max-width: 768px`) and renders in document flow on desktop. Use it for primary CTAs such as the Combined Payments checkout button.
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { StickyOnMobile } from "@simplybusiness/mobius";
+```
+
+### Default
+
+<Canvas of={StickyOnMobileStories.Default} />
+
+### As a `footer` element
+
+<Canvas of={StickyOnMobileStories.AsFooterElement} />
+
+## Behaviour
+
+- **≥ 769px** — renders as a plain block element with no margin or padding. The wrapper has no material impact on layout.
+- **≤ 768px** — clamped to the bottom of the viewport with `position: fixed; bottom: 0; left: 0; right: 0;`. White background (`var(--color-background)`) and a soft upward shadow visually layer the bar above the scrolling content. Padding of `var(--size-sm)` is applied, with `env(safe-area-inset-bottom)` honoured for iOS home-indicator safe area.
+
+## Composition
+
+`StickyOnMobile` accepts a single child. For complex content, compose it into its own component first.
+
+The breakpoint is fixed at 768px and is **not** dynamic. To override it, pass a `className` and rely on consumer-side CSS — `StickyOnMobile`'s rules sit inside `@layer atoms`, so any unlayered consumer rule wins.
+
+## Props
+
+<ArgTypes of={StickyOnMobile} />
+
+## Component HTML Structure and Class names
+
+The following HTML is rendered for a StickyOnMobile:
+
+```html
+<div class="mobius mobius-sticky-on-mobile">{children}</div>
+```

package/src/components/StickyOnMobile/StickyOnMobile.stories.tsx

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import type { StickyOnMobileProps } from "./StickyOnMobile";
+import { StickyOnMobile } from "./StickyOnMobile";
+import { excludeControls } from "../../utils";
+import { Button } from "../Button";
+import { Stack } from "../Stack";
+import { Text } from "../Text";
+import { TextField } from "../TextField";
+
+type StoryType = StoryObj<typeof StickyOnMobile>;
+
+const meta: Meta<typeof StickyOnMobile> = {
+  title: "Layout/StickyOnMobile",
+  component: StickyOnMobile,
+  argTypes: {
+    ...excludeControls("className", "style", "children"),
+    elementType: {
+      control: { type: "text" },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A thin layout wrapper that pins a single child to the bottom of the viewport on mobile (≤ 768px) using `position: fixed` and renders in document flow on desktop. Designed to wrap CTAs such as the post-quote Combined Payments checkout button.",
+      },
+    },
+  },
+};
+
+const FillerContent = () => (
+  <Stack gap="sm">
+    {Array.from({ length: 12 }).map((_, i) => (
+      <Text key={i}>
+        Scroll the canvas on a mobile viewport (≤ 768px) — the Checkout button
+        below stays clamped to the bottom of the visible area while content
+        scrolls behind it. On desktop it just renders in flow.
+      </Text>
+    ))}
+  </Stack>
+);
+
+export const Default: StoryType = {
+  render: (args: StickyOnMobileProps) => (
+    <Stack gap="lg">
+      <FillerContent />
+      <StickyOnMobile {...args}>
+        <Button type="button" variant="primary">
+          Checkout
+        </Button>
+      </StickyOnMobile>
+    </Stack>
+  ),
+};
+
+export const KeyboardTest: StoryType = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Manual QA surface for soft-keyboard behaviour. Storybook viewport addon does NOT simulate the keyboard — open this on a real (or simulator) iPhone and Android, focus the input, and observe whether the sticky bar gets covered. iOS Safari is the case the ticket flags for Browserstack.",
+      },
+    },
+  },
+  render: (args: StickyOnMobileProps) => (
+    <Stack gap="lg">
+      <FillerContent />
+      <TextField
+        label="Tap to open the keyboard"
+        name="keyboard-test"
+        placeholder="Type anything"
+      />
+      <FillerContent />
+      <StickyOnMobile {...args}>
+        <Button type="button" variant="primary">
+          Checkout
+        </Button>
+      </StickyOnMobile>
+    </Stack>
+  ),
+};
+
+export const AsFooterElement: StoryType = {
+  render: (args: StickyOnMobileProps) => (
+    <Stack gap="lg">
+      <FillerContent />
+      <StickyOnMobile {...args} elementType="footer">
+        <Button type="button" variant="primary">
+          Checkout
+        </Button>
+      </StickyOnMobile>
+    </Stack>
+  ),
+  args: {
+    elementType: "footer",
+  },
+};
+
+export default meta;

package/src/components/StickyOnMobile/StickyOnMobile.test.tsx

@@ -0,0 +1,100 @@
+import { createRef } from "react";
+import { render, screen } from "@testing-library/react";
+import { StickyOnMobile } from ".";
+
+const CLASS_NAME = "mobius-sticky-on-mobile";
+
+describe("StickyOnMobile", () => {
+  it("renders children", () => {
+    render(<StickyOnMobile>Sample text</StickyOnMobile>);
+    expect(screen.getByText("Sample text")).toBeInTheDocument();
+  });
+
+  it("renders a div by default", () => {
+    render(<StickyOnMobile data-testid="bar">x</StickyOnMobile>);
+    expect(screen.getByTestId("bar").tagName).toBe("DIV");
+  });
+
+  it("uses the provided elementType", () => {
+    render(
+      <StickyOnMobile elementType="footer" data-testid="bar">
+        x
+      </StickyOnMobile>,
+    );
+    expect(screen.getByTestId("bar").tagName).toBe("FOOTER");
+  });
+
+  it("does not pass elementType through as a DOM attribute", () => {
+    render(
+      <StickyOnMobile elementType="footer" data-testid="bar">
+        x
+      </StickyOnMobile>,
+    );
+    expect(screen.getByTestId("bar")).not.toHaveAttribute(
+      "elementtype",
+      "footer",
+    );
+  });
+
+  it("forwards style attributes", () => {
+    render(
+      <StickyOnMobile style={{ backgroundColor: "red" }} data-testid="bar">
+        x
+      </StickyOnMobile>,
+    );
+    expect(screen.getByTestId("bar")).toHaveStyle({
+      "background-color": "rgb(255, 0, 0)",
+    });
+  });
+
+  it("spreads HTML attributes onto the element", () => {
+    render(
+      <StickyOnMobile data-testid="bar" aria-label="payment actions">
+        x
+      </StickyOnMobile>,
+    );
+    expect(screen.getByTestId("bar")).toHaveAttribute(
+      "aria-label",
+      "payment actions",
+    );
+  });
+
+  describe("class names", () => {
+    it("applies the mobius base class", () => {
+      render(<StickyOnMobile data-testid="bar">x</StickyOnMobile>);
+      expect(screen.getByTestId("bar")).toHaveClass("mobius");
+    });
+
+    it("applies the mobius-sticky-on-mobile class", () => {
+      render(<StickyOnMobile data-testid="bar">x</StickyOnMobile>);
+      expect(screen.getByTestId("bar")).toHaveClass(CLASS_NAME);
+    });
+
+    it("merges a custom className", () => {
+      render(
+        <StickyOnMobile className="my-class" data-testid="bar">
+          x
+        </StickyOnMobile>,
+      );
+      expect(screen.getByTestId("bar")).toHaveClass("my-class");
+      expect(screen.getByTestId("bar")).toHaveClass(CLASS_NAME);
+    });
+  });
+
+  it("forwards ref", () => {
+    const ref = createRef<HTMLDivElement>();
+    render(<StickyOnMobile ref={ref}>x</StickyOnMobile>);
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+  });
+
+  describe("breakpoint behaviour", () => {
+    // Behaviour at the 768px breakpoint is driven by a static @media query in
+    // StickyOnMobile.css. JSDOM does not evaluate @media rules, so these tests
+    // verify the *contract*: the class hook is applied unconditionally so the
+    // CSS can switch positioning based on viewport width.
+    it("applies the sticky class hook regardless of viewport (CSS handles the switch)", () => {
+      render(<StickyOnMobile data-testid="bar">x</StickyOnMobile>);
+      expect(screen.getByTestId("bar")).toHaveClass(CLASS_NAME);
+    });
+  });
+});

package/src/components/StickyOnMobile/StickyOnMobile.tsx

@@ -0,0 +1,37 @@
+import type {
+  RefAttributes,
+  ReactNode,
+  ElementType,
+  CSSProperties,
+  HTMLAttributes,
+} from "react";
+import classNames from "classnames/dedupe";
+import "./StickyOnMobile.css";
+
+export type StickyOnMobileElementType = HTMLElement;
+
+export interface StickyOnMobileProps
+  extends
+    HTMLAttributes<StickyOnMobileElementType>,
+    RefAttributes<StickyOnMobileElementType> {
+  children?: ReactNode;
+  /** HTML element to render. Defaults to `div`. */
+  elementType?: ElementType;
+  className?: string;
+  style?: CSSProperties;
+}
+
+const StickyOnMobile = ({ ref, ...props }: StickyOnMobileProps) => {
+  const { elementType: Element = "div", ...otherProps } = props;
+
+  const classes = classNames(
+    "mobius",
+    "mobius-sticky-on-mobile",
+    otherProps.className,
+  );
+
+  return <Element ref={ref} {...otherProps} className={classes} />;
+};
+
+StickyOnMobile.displayName = "StickyOnMobile";
+export { StickyOnMobile };

package/src/components/StickyOnMobile/index.tsx

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

package/src/components/index.tsx

@@ -34,6 +34,7 @@ export * from "./Segment";
 export * from "./Select";
 export * from "./Slider";
 export * from "./Stack";
+export * from "./StickyOnMobile";
 export * from "./SVG";
 export * from "./Switch";
 export * from "./Table";

package/dist/esm/chunk-NOQ27VLY.js

@@ -1 +0,0 @@
-//# sourceMappingURL=chunk-NOQ27VLY.js.map

package/dist/esm/chunk-VVL4B2KD.js

@@ -1,92 +0,0 @@
-import {
-  LoqateAddressLookupError
-} from "./chunk-EDSRI6SV.js";
-import {
-  __privateAdd,
-  __privateGet,
-  __privateSet
-} from "./chunk-VHAA22YE.js";
-
-// src/components/AddressLookup/LoqateAddressLookupService.tsx
-var LOQATE_BASE_URL = "https://api.addressy.com/Capture/Interactive";
-var LOQATE_FIND_URL = "/Find/v1.00/json3.ws";
-var LOQATE_RETRIEVE_URL = "/Retrieve/v1.2/json3.ws";
-var DEFAULT_COUNTRIES = ["GB"];
-var _baseUrl, _apiKey, _countries, _filters;
-var LoqateAddressLookupService = class {
-  constructor({
-    baseUrl,
-    apiKey,
-    countries,
-    filters
-  }) {
-    /**
-     * Base URL for the Loqate API
-     */
-    __privateAdd(this, _baseUrl);
-    /**
-     * API key for the Loqate API
-     */
-    __privateAdd(this, _apiKey);
-    /**
-     * List of allowed country codes for the Loqate API
-     * 2 or 3 character ISO country codes
-     */
-    __privateAdd(this, _countries);
-    /**
-     * Optional filters for the Loqate API
-     * E.g., { AdministrativeArea: "CA", PostalCode: "90210" }
-     */
-    __privateAdd(this, _filters);
-    __privateSet(this, _apiKey, apiKey);
-    __privateSet(this, _baseUrl, baseUrl || LOQATE_BASE_URL);
-    __privateSet(this, _countries, countries || DEFAULT_COUNTRIES);
-    __privateSet(this, _filters, filters);
-  }
-  fetchFromApi(url) {
-    return fetch(`${__privateGet(this, _baseUrl)}${url}`).then((response) => response.json()).then((json) => {
-      if (json.Items?.some((item) => item.Error)) {
-        throw new LoqateAddressLookupError(json);
-      }
-      return json;
-    });
-  }
-  /**
-   * Builds the Filters query parameter for Loqate API requests.
-   * - Filter keys (e.g., "AdministrativeArea", "PostalCode") are predefined by Loqate API (no need to encode)
-   * - Filter values (e.g., "New York", "90210") contain user input that may have special characters (need encoding)
-   *
-   * @returns Empty string if no filters, otherwise "&Filters=key1:value1&key2:value2" (Loqate's expected format for Filters)
-   */
-  buildFiltersQuery() {
-    if (!__privateGet(this, _filters) || Object.keys(__privateGet(this, _filters)).length === 0) {
-      return "";
-    }
-    const encodedFilters = Object.entries(__privateGet(this, _filters)).map(([key, value]) => `${key}:${encodeURIComponent(value)}`).join("&");
-    return `&Filters=${encodedFilters}`;
-  }
-  search(searchTerm) {
-    let url = `${LOQATE_FIND_URL}?Key=${__privateGet(this, _apiKey)}&Text=${searchTerm}&Countries=${__privateGet(this, _countries)?.join(",")}`;
-    url += this.buildFiltersQuery();
-    return this.fetchFromApi(url);
-  }
-  findById(id) {
-    let url = `${LOQATE_FIND_URL}?Key=${__privateGet(this, _apiKey)}&Container=${id}&Countries=${__privateGet(this, _countries)?.join(",")}`;
-    url += this.buildFiltersQuery();
-    return this.fetchFromApi(url);
-  }
-  async get(id) {
-    const url = `${LOQATE_RETRIEVE_URL}?Key=${__privateGet(this, _apiKey)}&Id=${id}`;
-    const response = await this.fetchFromApi(url);
-    return response.Items[0];
-  }
-};
-_baseUrl = new WeakMap();
-_apiKey = new WeakMap();
-_countries = new WeakMap();
-_filters = new WeakMap();
-
-export {
-  LoqateAddressLookupService
-};
-//# sourceMappingURL=chunk-VVL4B2KD.js.map