@coopdigital/react 0.19.6 → 0.20.0

package/dist/components/Button/Button.d.ts

@@ -20,7 +20,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** **(Optional)** Callback to run when the button is pressed. If this is an async function, it will be awaited and the button will be in a pending state until the promise is resolved. */
     onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
     /** **(Optional)** Specify the Button size. */
-    size?: "sm" | "md" | "lg" | "xl";
+    size?: "sm" | "md" | "lg";
     /** **(Optional)** Specify the Button variant. */
     variant?: "green" | "blue" | "white" | "grey" | "green-ghost" | "blue-ghost" | "white-ghost" | "grey-ghost" | "text";
 }

package/dist/components/Card/Card.js

@@ -3,6 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 import React from 'react';
 import { bgPropToClass } from '../../utils/index.js';
+import { ChevronRightIcon } from '../Icon/ChevronRightIcon.js';
 import { Image } from '../Image/Image.js';
 
 function getCardLinkElement(as, href) {
@@ -23,7 +24,7 @@ const Card = (_a) => {
     const linkElement = getCardLinkElement(as, href);
     const imageProps = Object.assign({ crop: "wide" }, image);
     const componentProps = Object.assign({ className: clsx("coop-card", background && bgPropToClass(background, className), className), "data-badge-pos": badgePosition, "data-image-pos": imagePosition, "data-layout": layout !== "vertical" ? layout : undefined }, props);
-    return (jsxs("article", Object.assign({}, componentProps, { children: [image && jsx(Image, Object.assign({}, imageProps)), badge && jsx("div", { className: "coop-card--badge", children: badge }), jsxs("div", { className: "coop-card--inner", children: [jsxs("div", { className: "coop-card--content", children: [label && (jsx("span", { className: clsx("coop-card--label", labelBackground && bgPropToClass(labelBackground, className)), children: label })), React.createElement(linkElement.element, linkElement.props, React.createElement(headingLevel, { className: "coop-card--heading" }, heading)), children] }), chevron && (jsx("span", { "aria-hidden": "true", className: "coop-card--icon", role: "presentation", children: jsx("svg", { viewBox: "0 0 16 29", children: jsx("path", { d: "M2 28.1a1.6 1.6 0 0 1-1.2-2.7l11-10.9-11-11A1.6 1.6 0 1 1 3 1.5l12 12a1.6 1.6 0 0 1 0 2.2l-12 12c-.3.4-.7.5-1 .5z" }) }) }))] })] })));
+    return (jsxs("article", Object.assign({}, componentProps, { children: [image && jsx(Image, Object.assign({}, imageProps)), badge && jsx("div", { className: "coop-card--badge", children: badge }), jsxs("div", { className: "coop-card--inner", children: [jsxs("div", { className: "coop-card--content", children: [label && (jsx("span", { className: clsx("coop-card--label", labelBackground && bgPropToClass(labelBackground, className)), children: label })), React.createElement(linkElement.element, linkElement.props, React.createElement(headingLevel, { className: "coop-card--heading" }, heading)), children] }), chevron && (jsx("span", { "aria-hidden": "true", className: "coop-card--icon", role: "presentation", children: jsx(ChevronRightIcon, {}) }))] })] })));
 };
 
 export { Card, Card as default };

package/dist/components/Pill/Pill.d.ts

@@ -1,5 +1,6 @@
 import type { AnchorHTMLAttributes, ForwardRefExoticComponent, HTMLAttributes, JSX } from "react";
 import React from "react";
+import { StandardSizes } from "src/types";
 import { Darks, OfferRed, Tints } from "../../types/colors";
 export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
     /** **(Optional)** Specify a custom element to override default `a` or `span`. */
@@ -17,7 +18,7 @@ export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
     /** **(Optional)** Specify the URL that the Pill component will link to when clicked. */
     href?: string;
     /** **(Optional)** Specify the Pill size. */
-    size?: "sm" | "md" | "lg" | "xl";
+    size?: StandardSizes;
 }
 export declare const Pill: ({ as, background, badge, badgeBackground, children, className, href, size, ...props }: PillProps) => JSX.Element;
 export default Pill;

package/dist/components/SearchBox/SearchBox.d.ts

@@ -1,5 +1,6 @@
 import React, { HTMLAttributes } from "react";
 import { type JSX } from "react";
+import { StandardSizes } from "src/types";
 import { type ButtonProps } from "../Button";
 export interface SearchBoxProps extends HTMLAttributes<HTMLInputElement> {
     /** **(Optional)** Specify a server endpoint to submit the form. Will be ignored if onSubmit is also set. */
@@ -23,7 +24,7 @@ export interface SearchBoxProps extends HTMLAttributes<HTMLInputElement> {
     /** **(Optional)** Specify placeholder text for the search field. Do not in place of a form label. */
     placeholder?: string;
     /** **(Optional)** Specify the SearchBox size. */
-    size?: string;
+    size?: StandardSizes;
     /** **(Optional)** Specify the SearchBox variant. */
     variant?: "green" | "blue" | "white" | "grey" | "green-ghost" | "blue-ghost" | "white-ghost" | "grey-ghost";
 }

package/dist/components/Signpost/Signpost.js

@@ -2,6 +2,7 @@ import { __rest } from '../../node_modules/tslib/tslib.es6.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 import React from 'react';
+import { ChevronRightIcon } from '../Icon/ChevronRightIcon.js';
 import { Image } from '../Image/Image.js';
 
 const Signpost = (_a) => {
@@ -11,7 +12,7 @@ const Signpost = (_a) => {
         element = as;
     }
     const componentProps = Object.assign({ className: clsx("coop-signpost", className) }, props);
-    return (jsxs("div", Object.assign({}, componentProps, { children: [image && jsx(Image, Object.assign({ crop: "wide" }, image)), React.createElement(element, { href }, jsxs("div", { className: "coop-signpost--content", children: [React.createElement(headingLevel, { className: "coop-signpost--heading" }, children), jsx("span", { "aria-hidden": "true", className: "coop-signpost--icon", role: "presentation", children: jsx("svg", { viewBox: "0 0 16 29", children: jsx("path", { d: "M2 28.1a1.6 1.6 0 0 1-1.2-2.7l11-10.9-11-11A1.6 1.6 0 1 1 3 1.5l12 12a1.6 1.6 0 0 1 0 2.2l-12 12c-.3.4-.7.5-1 .5z" }) }) })] }))] })));
+    return (jsxs("div", Object.assign({}, componentProps, { children: [image && jsx(Image, Object.assign({ crop: "wide" }, image)), React.createElement(element, { href }, jsxs("div", { className: "coop-signpost--content", children: [React.createElement(headingLevel, { className: "coop-signpost--heading" }, children), jsx("span", { "aria-hidden": "true", className: "coop-signpost--icon", role: "presentation", children: jsx(ChevronRightIcon, {}) })] }))] })));
 };
 
 export { Signpost, Signpost as default };

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export type StandardSizes = "sm" | "md" | "lg";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.19.6",
+  "version": "0.20.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -34,15 +34,19 @@
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
-    "test:e2e": "npx playwright test",
-    "test:e2e:ui": "npx playwright test --ui",
+    "test:avt": "./test-utils/run-playwright-tests.sh -g avt",
+    "test:avt:ui": "npm run test:avt -- --ui",
+    "test:vrt": "ENVIRONMENT=docker ./test-utils/run-playwright-tests.sh -g vrt --workers 4 --timeout 5000 --fully-parallel",
+    "test:vrt:ui": "npm run test:vrt -- --ui",
+    "test:e2e": "./test-utils/run-e2e-tests.sh",
     "test:e2e:ci": "npx playwright test --shard=$CI_NODE_INDEX/$CI_NODE_TOTAL",
     "build": "tsx scripts build",
     "build:docs": "tsx scripts build-docs",
     "build:icons": "tsx scripts build-icons",
     "build:storybook": "storybook build --disable-telemetry && npm run storybook:fix-paths",
+    "build:storybook:test": "storybook build --test --disable-telemetry --output-dir storybook-test",
+    "serve:storybook:test": "serve -p 9000 ./storybook-test",
     "storybook": "storybook dev -p 6006",
-    "storybook:playwright": "storybook dev -p 9000",
     "storybook:fix-paths": "tsx scripts/storybook-fix-paths.ts"
   },
   "author": "",
@@ -50,7 +54,7 @@
   "description": "",
   "devDependencies": {
     "@axe-core/playwright": "^4.10.1",
-    "@coopdigital/styles": "^0.16.6",
+    "@coopdigital/styles": "^0.18.0",
     "@playwright/test": "^1.52.0",
     "@storybook/addon-a11y": "^8.6.12",
     "@storybook/addon-essentials": "^8.6.12",
@@ -66,6 +70,7 @@
     "@testing-library/react": "^16.3.0",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
+    "serve": "^14.2.4",
     "storybook": "^8.6.12"
   },
   "peerDependencies": {
@@ -75,5 +80,5 @@
   "dependencies": {
     "clsx": "^2.1.1"
   },
-  "gitHead": "3f62473cc66936fb06440ba4794ae191e9d2ae6f"
+  "gitHead": "b01e10d738d118e3b84b8e70e00ed27471109131"
 }

package/src/components/Button/Button.tsx

@@ -31,7 +31,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** **(Optional)** Callback to run when the button is pressed. If this is an async function, it will be awaited and the button will be in a pending state until the promise is resolved. */
   onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void
   /** **(Optional)** Specify the Button size. */
-  size?: "sm" | "md" | "lg" | "xl"
+  size?: "sm" | "md" | "lg"
   /** **(Optional)** Specify the Button variant. */
   variant?:
     | "green"

package/src/components/Pill/Pill.tsx

@@ -2,6 +2,7 @@ import type { AnchorHTMLAttributes, ForwardRefExoticComponent, HTMLAttributes, J
 
 import clsx from "clsx"
 import React from "react"
+import { StandardSizes } from "src/types"
 
 import { bgPropToClass } from "../../../src/utils"
 import { Darks, OfferRed, Tints } from "../../types/colors"
@@ -23,7 +24,7 @@ export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
   /** **(Optional)** Specify the URL that the Pill component will link to when clicked. */
   href?: string
   /** **(Optional)** Specify the Pill size. */
-  size?: "sm" | "md" | "lg" | "xl"
+  size?: StandardSizes
 }
 
 export const Pill = ({

package/src/components/SearchBox/SearchBox.tsx

@@ -1,6 +1,7 @@
 import clsx from "clsx"
 import React, { HTMLAttributes, useCallback, useId, useState } from "react"
 import { type JSX } from "react"
+import { StandardSizes } from "src/types"
 
 import { Button, type ButtonProps } from "../Button"
 import { SearchIcon } from "../Icon"
@@ -25,7 +26,7 @@ export interface SearchBoxProps extends HTMLAttributes<HTMLInputElement> {
   /** **(Optional)** Specify placeholder text for the search field. Do not in place of a form label. */
   placeholder?: string
   /** **(Optional)** Specify the SearchBox size. */
-  size?: string
+  size?: StandardSizes
   /** **(Optional)** Specify the SearchBox variant. */
   variant?:
     | "green"

package/src/types/index.ts

@@ -0,0 +1 @@
+export type StandardSizes = "sm" | "md" | "lg"