@coopdigital/react 1.14.0 → 1.15.1

package/dist/components/Card/Card.d.ts

@@ -3,6 +3,13 @@ import "../Image/index.js";
 import React, { ForwardRefExoticComponent, HTMLAttributes, JSX, Ref } from "react";
 //#region src/components/Card/Card.d.ts
 interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  /**  **(Optional)** Specify how the card behaves across screen sizes.
+   *
+   * When this is true, horizontal cards will switch to vertical on small screens, and vertical cards will switch to horizontal on small screens.
+   *
+   * Default: false
+   */
+  adaptive?: boolean;
   /** **(Optional)** Specify whether chevron is visible. */
   chevron?: boolean;
   /** **(Optional)** Content inside the component. Children that are not assigned to a slot will be grouped together and rendered under the main Card content. */
@@ -13,12 +20,17 @@ interface CardProps extends HTMLAttributes<HTMLDivElement> {
   href?: string;
   /** **(Optional)** Specify a custom element to use instead of `a`. */
   hrefAs?: React.FC<any> | ForwardRefExoticComponent<any> | string;
-  /** **(Optional)** Specify the position of the image in the Card. */
-  imagePosition?: "left" | "right";
-  /** **(Optional)** Specify the orientation of the Card. */
+  /** **(Optional)** Specify the orientation of the Card.
+   *
+   * Default: vertical
+   */
   orientation?: "vertical" | "horizontal";
   /** **(Optional)** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>;
+  /** **(Optional)** Enable additional styles to use the Card as a signpost.
+   *
+   * Text is vertically aligned centrally and the chevron is enlarged. */
+  signpost?: boolean;
 }
 interface CardLabelProps extends HTMLAttributes<HTMLSpanElement> {
   /** **(Optional)** Content inside the Label. */
@@ -48,20 +60,23 @@ interface CardBadgeProps extends HTMLAttributes<HTMLDivElement> {
   /** **(Optional)** Specify badge position relative to top right corner. */
   position?: "inset" | "popout";
 }
-type CardImageProps = ImageProps;
+type CardImageProps = ImageProps & {
+  /** **(Optional)** Specify on which side the Image should appear. */
+  align?: "left" | "right";
+};
 declare const Card: {
-  ({ chevron, children, className, href, hrefAs, imagePosition, orientation, ref, ...props }: CardProps): JSX.Element;
+  ({ adaptive, chevron, children, className, href, hrefAs, orientation, ref, signpost, ...props }: CardProps): JSX.Element;
   slot: {
     name: string;
   };
   Label: {
-    ({ children, className }: CardLabelProps): JSX.Element;
+    ({ children, className, ...props }: CardLabelProps): JSX.Element;
     slot: {
       name: string;
     };
   };
   Heading: {
-    ({ as, children, className }: CardHeadingProps): JSX.Element;
+    ({ as, children, className, ...props }: CardHeadingProps): JSX.Element;
     slot: {
       name: string;
     };
@@ -79,20 +94,20 @@ declare const Card: {
     };
   };
   Image: {
-    (props: CardImageProps): JSX.Element;
+    ({ align, crop, ...props }: CardImageProps): JSX.Element;
     slot: {
       name: string;
     };
   };
 };
 declare const CardHeading: {
-  ({ as, children, className }: CardHeadingProps): JSX.Element;
+  ({ as, children, className, ...props }: CardHeadingProps): JSX.Element;
   slot: {
     name: string;
   };
 };
 declare const CardLabel: {
-  ({ children, className }: CardLabelProps): JSX.Element;
+  ({ children, className, ...props }: CardLabelProps): JSX.Element;
   slot: {
     name: string;
   };
@@ -110,7 +125,7 @@ declare const CardBody: {
   };
 };
 declare const CardImage: {
-  (props: CardImageProps): JSX.Element;
+  ({ align, crop, ...props }: CardImageProps): JSX.Element;
   slot: {
     name: string;
   };

package/dist/components/Card/Card.js

@@ -23,21 +23,22 @@ function getCardLinkElement(as, href) {
 		}
 	};
 }
-const Card = ({ chevron = false, children, className, href, hrefAs, imagePosition = "left", orientation = "vertical", ref, ...props }) => {
+const Card = ({ adaptive, chevron = false, children, className, href, hrefAs, orientation, ref, signpost, ...props }) => {
 	const { element: linkElement, props: linkProps } = getCardLinkElement(hrefAs, href);
 	const slots = { ...useSlots(componentSlots, children) };
 	const innerProps = { className: "coop-card--inner" };
 	const hasLinkWrapper = href && !slots.CardHeading;
 	const componentProps = {
 		className: clsx("coop-card", !hasUserBg(className) && "bg-white", className),
-		"data-image-pos": imagePosition,
-		"data-orientation": orientation !== "vertical" ? orientation : void 0,
+		"data-adaptive": adaptive ?? void 0,
+		"data-orientation": orientation ?? void 0,
+		"data-signpost": signpost ?? void 0,
 		...props
 	};
 	if (href && slots.CardHeading) slots.CardHeading = React.createElement(linkElement, linkProps, slots.CardHeading);
 	return /* @__PURE__ */ jsxs("article", {
-		...componentProps,
 		ref,
+		...componentProps,
 		children: [
 			slots.CardImage,
 			slots.CardBadge,
@@ -52,7 +53,7 @@ const Card = ({ chevron = false, children, className, href, hrefAs, imagePositio
 					slots.CardBody,
 					slots.Children
 				]
-			}), chevron && /* @__PURE__ */ jsx("span", {
+			}), (chevron || signpost) && /* @__PURE__ */ jsx("span", {
 				"aria-hidden": "true",
 				className: "coop-card--icon",
 				role: "presentation",
@@ -61,12 +62,16 @@ const Card = ({ chevron = false, children, className, href, hrefAs, imagePositio
 		]
 	});
 };
-const CardHeading = ({ as = "h3", children, className }) => {
-	return React.createElement(as, { className: clsx("coop-card--heading", className) }, children);
+const CardHeading = ({ as = "h3", children, className, ...props }) => {
+	return React.createElement(as, {
+		className: clsx("coop-card--heading", className),
+		...props
+	}, children);
 };
-const CardLabel = ({ children, className }) => {
+const CardLabel = ({ children, className, ...props }) => {
 	return /* @__PURE__ */ jsx("span", {
 		className: clsx("coop-card--label", className),
+		...props,
 		children
 	});
 };
@@ -82,10 +87,11 @@ const CardBadge = ({ align = "right", children, position = "popout", ...props })
 const CardBody = ({ children }) => {
 	return /* @__PURE__ */ jsx(Fragment, { children });
 };
-const CardImage = (props) => {
+const CardImage = ({ align, crop, ...props }) => {
 	return /* @__PURE__ */ jsx(Image, {
 		...props,
-		crop: props.crop ?? "wide"
+		crop: crop ?? "wide",
+		"data-align": align ?? void 0
 	});
 };
 Card.slot = { name: "Card" };

package/dist/components/Signpost/Signpost.d.ts

@@ -18,6 +18,9 @@ interface SignpostProps extends HTMLAttributes<HTMLDivElement> {
   /** **(Optional)** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>;
 }
+/**
+ * @deprecated Use a Card with `signpost` prop instead
+ */
 declare const Signpost: {
   ({ as, children, className, headingLevel, href, image, ref, ...props }: SignpostProps): JSX.Element;
   slot: {

package/dist/components/Signpost/Signpost.js

@@ -4,6 +4,9 @@ import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 //#region src/components/Signpost/Signpost.tsx
+/**
+* @deprecated Use a Card with `signpost` prop instead
+*/
 const Signpost = ({ as, children, className, headingLevel = "h3", href, image, ref, ...props }) => {
 	const element = as ?? "a";
 	return /* @__PURE__ */ jsxs("div", {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "1.14.0",
+  "version": "1.15.1",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -64,21 +64,21 @@
   "description": "React components for the Experience Library design system",
   "devDependencies": {
     "@axe-core/playwright": "^4.12.1",
-    "@playwright/test": "^1.61.1",
-    "@storybook/addon-a11y": "^10.5.3",
-    "@storybook/addon-docs": "^10.5.3",
-    "@storybook/addon-onboarding": "^10.5.3",
-    "@storybook/react-vite": "^10.5.3",
+    "@playwright/test": "^1.62.1",
+    "@storybook/addon-a11y": "^10.5.5",
+    "@storybook/addon-docs": "^10.5.5",
+    "@storybook/addon-onboarding": "^10.5.5",
+    "@storybook/react-vite": "^10.5.5",
     "@testing-library/jest-dom": "^7.0.0",
     "@testing-library/react": "^16.3.2",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
     "@whitespace/storybook-addon-html": "^9.0.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "resize-observer-polyfill": "^1.5.1",
     "serve": "^14.2.6",
-    "storybook": "^10.5.3",
+    "storybook": "^10.5.5",
     "storybook-addon-tag-badges": "^3.1.0"
   },
   "peerDependencies": {
@@ -102,12 +102,12 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^1.10.0",
-    "@radix-ui/react-popover": "^1.1.17",
+    "@coopdigital/styles": "^1.11.1",
+    "@radix-ui/react-popover": "^1.1.23",
     "clsx": "^2.1.1",
     "date-fns": "^4.4.0",
     "merge-refs": "^2.0.0",
     "react-day-picker": "^10.0.1"
   },
-  "gitHead": "d235d78368beaf6987809b8c9a390b151942bdb9"
+  "gitHead": "ab7ccc5e48cd028be0e46645d0a8b942f690939b"
 }

package/src/components/Card/Card.tsx

@@ -9,6 +9,13 @@ import { ChevronRightIcon } from "../icons/ChevronRightIcon"
 import { Image, ImageProps } from "../Image"
 
 export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  /**  **(Optional)** Specify how the card behaves across screen sizes.
+   *
+   * When this is true, horizontal cards will switch to vertical on small screens, and vertical cards will switch to horizontal on small screens.
+   *
+   * Default: false
+   */
+  adaptive?: boolean
   /** **(Optional)** Specify whether chevron is visible. */
   chevron?: boolean
   /** **(Optional)** Content inside the component. Children that are not assigned to a slot will be grouped together and rendered under the main Card content. */
@@ -20,12 +27,17 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
   /** **(Optional)** Specify a custom element to use instead of `a`. */
   // oxlint-disable-next-line typescript/no-explicit-any
   hrefAs?: React.FC<any> | ForwardRefExoticComponent<any> | string
-  /** **(Optional)** Specify the position of the image in the Card. */
-  imagePosition?: "left" | "right"
-  /** **(Optional)** Specify the orientation of the Card. */
+  /** **(Optional)** Specify the orientation of the Card.
+   *
+   * Default: vertical
+   */
   orientation?: "vertical" | "horizontal"
   /** **(Optional)** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>
+  /** **(Optional)** Enable additional styles to use the Card as a signpost.
+   *
+   * Text is vertically aligned centrally and the chevron is enlarged. */
+  signpost?: boolean
 }
 
 interface CardLabelProps extends HTMLAttributes<HTMLSpanElement> {
@@ -60,7 +72,10 @@ interface CardBadgeProps extends HTMLAttributes<HTMLDivElement> {
   position?: "inset" | "popout"
 }
 
-type CardImageProps = ImageProps
+type CardImageProps = ImageProps & {
+  /** **(Optional)** Specify on which side the Image should appear. */
+  align?: "left" | "right"
+}
 
 const componentSlots = {
   CardBadge: null,
@@ -82,14 +97,16 @@ function getCardLinkElement(as: CardProps["hrefAs"], href?: string) {
 }
 
 const Card = ({
+  adaptive,
+  // behaviour,
   chevron = false,
   children,
   className,
   href,
   hrefAs,
-  imagePosition = "left",
-  orientation = "vertical",
+  orientation,
   ref,
+  signpost,
   ...props
 }: CardProps): JSX.Element => {
   const { element: linkElement, props: linkProps } = getCardLinkElement(hrefAs, href)
@@ -100,8 +117,10 @@ const Card = ({
 
   const componentProps = {
     className: clsx("coop-card", !hasUserBg(className) && "bg-white", className),
-    "data-image-pos": imagePosition,
-    "data-orientation": orientation !== "vertical" ? orientation : undefined,
+    // "data-behaviour": behaviour ?? undefined,
+    "data-adaptive": adaptive ?? undefined,
+    "data-orientation": orientation ?? undefined,
+    "data-signpost": signpost ?? undefined,
     ...props,
   }
 
@@ -110,7 +129,7 @@ const Card = ({
   }
 
   return (
-    <article {...componentProps} ref={ref}>
+    <article ref={ref} {...componentProps}>
       {slots.CardImage}
       {slots.CardBadge}
       {React.createElement(
@@ -122,7 +141,7 @@ const Card = ({
           {slots.CardBody}
           {slots.Children}
         </div>,
-        chevron && (
+        (chevron || signpost) && (
           <span aria-hidden="true" className="coop-card--icon" role="presentation">
             <ChevronRightIcon />
           </span>
@@ -132,12 +151,25 @@ const Card = ({
   )
 }
 
-const CardHeading = ({ as = "h3", children, className }: CardHeadingProps): JSX.Element => {
-  return React.createElement(as, { className: clsx("coop-card--heading", className) }, children)
+const CardHeading = ({
+  as = "h3",
+  children,
+  className,
+  ...props
+}: CardHeadingProps): JSX.Element => {
+  return React.createElement(
+    as,
+    { className: clsx("coop-card--heading", className), ...props },
+    children
+  )
 }
 
-const CardLabel = ({ children, className }: CardLabelProps): JSX.Element => {
-  return <span className={clsx("coop-card--label", className)}>{children}</span>
+const CardLabel = ({ children, className, ...props }: CardLabelProps): JSX.Element => {
+  return (
+    <span className={clsx("coop-card--label", className)} {...props}>
+      {children}
+    </span>
+  )
 }
 
 const CardBadge = ({
@@ -157,8 +189,8 @@ const CardBody = ({ children }: CardBodyProps): JSX.Element => {
   return <>{children}</>
 }
 
-const CardImage = (props: CardImageProps): JSX.Element => {
-  return <Image {...{ ...props, crop: props.crop ?? "wide" }} />
+const CardImage = ({ align, crop, ...props }: CardImageProps): JSX.Element => {
+  return <Image {...{ ...props, crop: crop ?? "wide", "data-align": align ?? undefined }} />
 }
 
 Card.slot = { name: "Card" }

package/src/components/Signpost/Signpost.tsx

@@ -24,6 +24,9 @@ export interface SignpostProps extends HTMLAttributes<HTMLDivElement> {
   ref?: Ref<HTMLDivElement>
 }
 
+/**
+ * @deprecated Use a Card with `signpost` prop instead
+ */
 const Signpost = ({
   as,
   children,