@coopdigital/react 0.52.3 → 0.54.0

package/dist/components/Select/Select.d.ts

@@ -36,11 +36,15 @@ export declare const Select: {
     ({ children, className, disabled, error, id, name, ref, size, ...props }: SelectProps): JSX.Element;
     OptionGroup: {
         ({ children, ...props }: SelectOptionGroupProps): JSX.Element;
-        displayName: string;
+        config: {
+            name: string;
+        };
     };
     Option: {
         ({ children, className, ...props }: SelectOptionProps): JSX.Element;
-        displayName: string;
+        config: {
+            name: string;
+        };
     };
     config: {
         isField: true;

package/dist/components/Select/Select.js

@@ -18,11 +18,11 @@ const Select = ({ children, className, disabled, error, id, name, ref, size = "m
 const SelectOptionGroup = ({ children, ...props }) => {
     return jsx("optgroup", { ...props, children: children });
 };
-SelectOptionGroup.displayName = "Select.OptionGroup";
 const SelectOption = ({ children, className, ...props }) => {
     return (jsx("option", { className: clsx("coop-select--option", className), ...props, children: children }));
 };
-SelectOption.displayName = "Select.Option";
+SelectOption.config = { name: "SelectOption" };
+SelectOptionGroup.config = { name: "SelectOptionGroup" };
 Select.OptionGroup = SelectOptionGroup;
 Select.Option = SelectOption;
 Select.config = {

package/dist/components/Signpost/Signpost.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import React__default from 'react';
-import { ChevronRightIcon } from '../Icon/ChevronRightIcon.js';
+import { ChevronRightIcon } from '../icons/ChevronRightIcon.js';
 import { Image } from '../Image/Image.js';
 
 const Signpost = ({ as, children, className, headingLevel = "h3", href, image, ref, ...props }) => {

package/dist/components/Squircle/Squircle.js

@@ -4,7 +4,7 @@ import { hasUserBg } from '../../utils/index.js';
 
 const Squircle = ({ children, className, ref, size = "lg", ...props }) => {
     const componentProps = {
-        className: clsx("coop-squircle", !hasUserBg(className) && "bg-offer-red", className),
+        className: clsx("coop-squircle", !hasUserBg(className) && "bg-offer", className),
         "data-size": size.length && size !== "lg" ? size : undefined,
         ...props,
     };

package/dist/hooks/useSlots.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
+import { ReactNodeWithConfig } from "src/types";
 type Slots<T> = Record<keyof T, React.ReactNode>;
 export declare function isKey<T extends object>(x: T, k: PropertyKey): k is keyof T;
-export declare function getSlotName(node: React.ReactNode): string | false;
+export declare function getSlotName(node: ReactNodeWithConfig): string | false;
 export declare function useSlots<T>(componentSlots: Slots<T>, children: React.ReactNode, options?: {
     collect?: string[];
 }): Slots<T>;

package/dist/hooks/useSlots.js

@@ -4,9 +4,14 @@ function isKey(x, k) {
     return k in x;
 }
 function getSlotName(node) {
-    return React__default.isValidElement(node) && node.type && typeof node.type !== "string"
-        ? node.type.name
-        : false;
+    var _a, _b, _c;
+    if (React__default.isValidElement(node) &&
+        node.type &&
+        typeof node.type !== "string" &&
+        typeof node.type !== "symbol") {
+        return (_c = (_b = (_a = node.type) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : node.type.name;
+    }
+    return false;
 }
 function useSlots(componentSlots, children, options) {
     return React__default.Children.toArray(children).reduce((slots, child) => {

package/dist/types/colors.d.ts

@@ -1,11 +1,10 @@
 export type Darks = "dark-blue" | "dark-yellow" | "dark-green" | "dark-lilac" | "dark-orange" | "dark-pink" | "dark-purple" | "dark-red";
 export type Tints = "tint-blue" | "tint-brown" | "tint-yellow" | "tint-green" | "tint-grey" | "tint-lilac" | "tint-orange" | "tint-pink" | "tint-purple" | "tint-red";
 export type Lights = "light-blue" | "light-yellow" | "light-green" | "light-lilac" | "light-orange" | "light-pink" | "light-purple" | "light-red";
-export type Greys = "dark-grey" | "mid-dark-grey" | "mid-grey" | "mid-light-grey" | "light-grey";
 export type White = "white";
 export type Black = "black";
 export type None = "none";
 export type BrandBlue = "brand-blue";
-export type OfferRed = "offer-red";
+export type OfferRed = "offer";
 export type Green = "green";
 export type Blue = "blue";

package/dist/types/index.d.ts

@@ -12,4 +12,5 @@ export interface ComponentConfig {
     fieldSuffix?: string;
     isField?: boolean;
     isInline?: boolean;
+    name?: string;
 }

package/dist/utils/index.d.ts

@@ -1,3 +1,4 @@
 export declare const bgPropToClass: (color: string, userClasses?: string) => string;
 export declare const hasUserBg: (userClasses?: string) => boolean;
+export declare const hasUserBorder: (userClasses?: string) => boolean;
 export declare const bgClassToColor: (userClasses: string) => string | null;

package/dist/utils/index.js

@@ -1,6 +1,9 @@
 const hasUserBg = (userClasses) => {
     return typeof userClasses === "string" && (userClasses === null || userClasses === void 0 ? void 0 : userClasses.includes("bg-")) ? true : false;
 };
+const hasUserBorder = (userClasses) => {
+    return typeof userClasses === "string" && (userClasses === null || userClasses === void 0 ? void 0 : userClasses.includes("border-")) ? true : false;
+};
 const bgClassToColor = (userClasses) => {
     var _a, _b;
     return (_b = (_a = /bg-([^\s]+)/.exec(userClasses)) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : null;
@@ -12,4 +15,4 @@ const bgClassToColor = (userClasses) => {
     // )
 };
 
-export { bgClassToColor, hasUserBg };
+export { bgClassToColor, hasUserBg, hasUserBorder };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.52.3",
+  "version": "0.54.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -11,9 +11,13 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
-    "./Icon": {
-      "types": "./dist/components/Icon/index.d.ts",
-      "default": "./dist/components/Icon/index.js"
+    "./components/*": {
+      "types": "./dist/components/*/*.d.ts",
+      "default": "./dist/components/*/*.js"
+    },
+    "./icons": {
+      "types": "./dist/components/icons/index.d.ts",
+      "default": "./dist/components/icons/index.js"
     }
   },
   "files": [
@@ -43,34 +47,33 @@
     "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": "storybook build --disable-telemetry",
     "build:storybook:test": "storybook build --test --disable-telemetry --output-dir storybook-test",
     "serve:storybook:test": "serve -p 9000 ./storybook-test",
     "build:storybook:local": "storybook build --disable-telemetry",
     "serve:storybook:local": "serve -p 9000 ./storybook-static",
-    "storybook": "storybook dev -p 6006",
-    "storybook:fix-paths": "tsx scripts/storybook-fix-paths.ts"
+    "storybook": "storybook dev -p 6006"
   },
   "author": "",
   "license": "MIT",
   "description": "React components for the Experience Library design system",
   "devDependencies": {
-    "@axe-core/playwright": "^4.11.0",
+    "@axe-core/playwright": "^4.11.1",
     "@playwright/test": "^1.58.1",
-    "@storybook/addon-a11y": "^10.2.6",
-    "@storybook/addon-docs": "^10.2.6",
-    "@storybook/addon-onboarding": "^10.2.6",
-    "@storybook/react-vite": "^10.2.6",
+    "@storybook/addon-a11y": "^10.2.7",
+    "@storybook/addon-docs": "^10.2.7",
+    "@storybook/addon-onboarding": "^10.2.7",
+    "@storybook/react-vite": "^10.2.7",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@types/react": "^19.2.10",
+    "@types/react": "^19.2.13",
     "@types/react-dom": "^19.2.3",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "resize-observer-polyfill": "^1.5.1",
     "serve": "^14.2.5",
-    "storybook": "^10.2.6",
-    "storybook-addon-tag-badges": "^3.0.5"
+    "storybook": "^10.2.7",
+    "storybook-addon-tag-badges": "^3.0.6"
   },
   "peerDependencies": {
     "react": "^19.1.0",
@@ -80,10 +83,10 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^0.44.0",
+    "@coopdigital/styles": "^0.45.0",
     "@radix-ui/react-popover": "^1.1.15",
     "clsx": "^2.1.1",
     "react-day-picker": "^9.12.0"
   },
-  "gitHead": "a849b75352f0be4f4db1c66c104f013db571c887"
+  "gitHead": "d15d7ae0d231bf28986a18a9e097537802f845db"
 }

package/src/components/AlertBanner/AlertBanner.tsx

@@ -44,7 +44,7 @@ const AlertBannerHeading = ({ children, className }: AlertBannerHeadingProps): J
   return <h2 className={className}>{children}</h2>
 }
 
-AlertBannerHeading.displayName = "AlertBanner.Heading"
+AlertBannerHeading.config = { name: "AlertBannerHeading" }
 
 AlertBanner.Heading = AlertBannerHeading
 

package/src/components/Button/Button.tsx

@@ -5,7 +5,8 @@ import type { ButtonHTMLAttributes, ForwardRefExoticComponent, JSX, Ref } from "
 import clsx from "clsx"
 import React, { useCallback, useState } from "react"
 
-import { LoadingIcon } from "../Icon"
+import { hasUserBg } from "../../utils"
+import { LoadingIcon } from "../icons"
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** **(Optional)** Specify a custom element to override default `a` or `button`. */
@@ -32,16 +33,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** **(Optional)** Specify the Button size. */
   size?: "sm" | "md" | "lg"
   /** **(Optional)** Specify the Button variant. */
-  variant?:
-    | "green"
-    | "blue"
-    | "white"
-    | "grey"
-    | "green-ghost"
-    | "blue-ghost"
-    | "white-ghost"
-    | "grey-ghost"
-    | "text"
+  variant?: "solid" | "ghost" | "text"
 }
 
 type OnClickHandler =
@@ -60,7 +52,7 @@ export const Button = ({
   onClick,
   ref,
   size = "md",
-  variant = "green",
+  variant = "solid",
   ...props
 }: ButtonProps): JSX.Element => {
   const element: ButtonProps["as"] = as ?? (href ? "a" : "button")
@@ -85,7 +77,11 @@ export const Button = ({
   const componentProps = {
     "aria-disabled": isDisabled ? true : undefined,
     "aria-live": "assertive" as keyof ButtonHTMLAttributes<HTMLButtonElement>["aria-live"],
-    className: clsx(variant == "text" ? "coop-link" : "coop-button", className),
+    className: clsx(
+      variant == "text" ? "coop-link" : "coop-button",
+      !hasUserBg(className) && variant === "solid" && "bg-teal",
+      className
+    ),
     "data-loading": isLoading || isPending ? true : undefined,
     "data-size": size.length && size !== "md" ? size : undefined,
     "data-variant": variant !== "text" ? variant : undefined,

package/src/components/Card/Card.tsx

@@ -4,7 +4,8 @@ import clsx from "clsx"
 import React from "react"
 
 import { useSlots } from "../../hooks/useSlots"
-import { ChevronRightIcon } from "../Icon/ChevronRightIcon"
+import { hasUserBg } from "../../utils"
+import { ChevronRightIcon } from "../icons/ChevronRightIcon"
 import { Image, ImageProps } from "../Image"
 
 export interface CardProps extends HTMLAttributes<HTMLDivElement> {
@@ -99,7 +100,7 @@ export const Card = ({
   const hasLinkWrapper = href && !slots.CardHeading
 
   const componentProps = {
-    className: clsx("coop-card", className),
+    className: clsx("coop-card", !hasUserBg(className) && "bg-white", className),
     "data-image-pos": imagePosition,
     "data-orientation": orientation !== "vertical" ? orientation : undefined,
     ...props,
@@ -136,14 +137,10 @@ const CardHeading = ({ as = "h3", children, className }: CardHeadingProps): JSX.
   return React.createElement(as, { className: clsx("coop-card--heading", className) }, children)
 }
 
-CardHeading.displayName = "Card.Heading"
-
 const CardLabel = ({ children, className }: CardLabelProps): JSX.Element => {
   return <span className={clsx("coop-card--label", className)}>{children}</span>
 }
 
-CardLabel.displayName = "Card.Label"
-
 const CardBadge = ({
   align = "right",
   children,
@@ -157,19 +154,19 @@ const CardBadge = ({
   )
 }
 
-CardBadge.displayName = "Card.Badge"
-
 const CardBody = ({ children }: CardBodyProps): JSX.Element => {
   return <>{children}</>
 }
 
-CardBody.displayName = "Card.Body"
-
 const CardImage = (props: CardImageProps) => {
   return <Image {...{ ...props, crop: props.crop ?? "wide" }} />
 }
 
-CardImage.displayName = "Card.Image"
+CardLabel.config = { name: "CardLabel" }
+CardHeading.config = { name: "CardHeading" }
+CardBadge.config = { name: "CardBadge" }
+CardBody.config = { name: "CardBody" }
+CardImage.config = { name: "CardImage" }
 
 Card.Label = CardLabel
 Card.Heading = CardHeading

package/src/components/DatePicker/DatePicker.tsx

@@ -24,7 +24,7 @@ import type {
 
 import { useId } from "../../hooks/useId"
 import Button from "../Button"
-import { CloseIcon, TickIcon } from "../Icon"
+import { CloseIcon, TickIcon } from "../icons"
 import Popover from "../Popover"
 import TextInput from "../TextInput"
 import {
@@ -330,7 +330,7 @@ export const DatePicker = ({
             {...calendarProps[mode]}
           />
           <div className="coop-datepicker-actions">
-            <Button aria-label="Cancel" onClick={resetState} size="sm" variant="grey">
+            <Button aria-label="Cancel" className="bg-tint-grey" onClick={resetState} size="sm">
               Clear <CloseIcon stroke="black" strokeWidth={1} />
             </Button>
             <Popover.Close asChild>

package/src/components/Expandable/Expandable.tsx

@@ -3,11 +3,11 @@ import type { DetailsHTMLAttributes, HTMLAttributes, JSX, Ref } from "react"
 import { clsx } from "clsx"
 
 import { useSlots } from "../../hooks/useSlots"
-import { bgClassToColor, hasUserBg } from "../../utils"
-import { ChevronDownIcon } from "../Icon"
+import { hasUserBg } from "../../utils"
+import { ChevronDownIcon } from "../icons"
 
 export interface ExpandableProps extends DetailsHTMLAttributes<HTMLDetailsElement> {
-  /** Main content inside the component, only visible when it is open. It can be any valid JSX or string. */
+  /** Main content inside the component. This should be an `Expandable.Summary` and `Expandable.Content`. */
   children: React.ReactNode
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */
   className?: string
@@ -22,8 +22,15 @@ interface ExpandableSummaryProps extends HTMLAttributes<HTMLElement> {
   className?: string
 }
 
+interface ExpandableContentProps extends HTMLAttributes<HTMLElement> {
+  /** **(Optional)** Content inside the Expandable. */
+  children?: React.ReactNode
+  /** **(Optional)** Specify additional CSS classes to be applied to the content wrapper. */
+  className?: string
+}
+
 const componentSlots = {
-  Children: null,
+  ExpandableContent: null,
   ExpandableSummary: null,
 }
 
@@ -40,14 +47,14 @@ export const Expandable = ({
     ...props,
   }
 
-  componentProps.style = {
-    "--bg": `var(--color-${bgClassToColor(componentProps.className)})`,
-  }
+  // componentProps.style = {
+  //   "--bg": `var(--color-${bgClassToColor(componentProps.className)})`,
+  // }
 
   return (
     <details {...componentProps} ref={ref}>
       {slots.ExpandableSummary}
-      <div className="coop-expandable--content">{slots.Children}</div>
+      {slots.ExpandableContent}
     </details>
   )
 }
@@ -66,8 +73,18 @@ const ExpandableSummary = ({ children, className, ...props }: ExpandableSummaryP
   )
 }
 
-ExpandableSummary.displayName = "Expandable.Summary"
+const ExpandableContent = ({ children, className, ...props }: ExpandableContentProps) => {
+  return (
+    <div className={clsx("coop-expandable--content", className)} {...props}>
+      {children}
+    </div>
+  )
+}
+
+ExpandableSummary.config = { name: "ExpandableSummary" }
+ExpandableContent.config = { name: "ExpandableContent" }
 
 Expandable.Summary = ExpandableSummary
+Expandable.Content = ExpandableContent
 
 export default Expandable

package/src/components/Field/Field.tsx

@@ -132,19 +132,14 @@ export const FieldControl = ({ children, className, ...props }: ControlProps): J
   )
 }
 
-FieldControl.displayName = "Field.Control"
-
 const FieldLabel = (props: LabelProps) => <BaseLabel {...props} />
-
-FieldLabel.displayName = "Field.Label"
-
 const FieldHint = (props: HintProps) => <BaseHint {...props} />
-
-FieldHint.displayName = "Field.Hint"
-
 const FieldError = (props: ErrorProps) => <BaseError {...props} />
 
-FieldError.displayName = "Field.Error"
+FieldControl.config = { name: "FieldControl" }
+FieldLabel.config = { name: "FieldLabel" }
+FieldHint.config = { name: "FieldHint" }
+FieldError.config = { name: "FieldError" }
 
 export const Field = Object.assign(Root, {
   Control: FieldControl,

package/src/components/Fieldset/Fieldset.tsx

@@ -79,19 +79,14 @@ export const FieldsetFields = ({
   return <div {...componentProps}>{children}</div>
 }
 
-FieldsetFields.displayName = "Fieldset.Fields"
-
 const FieldsetLegend = (props: LegendProps) => <BaseLegend {...props} />
-
-FieldsetLegend.displayName = "Fieldset.Legend"
-
 const FieldsetHint = (props: HintProps) => <BaseHint {...props} />
-
-FieldsetHint.displayName = "Fieldset.Hint"
-
 const FieldsetError = (props: ErrorProps) => <BaseError {...props} />
 
-FieldsetError.displayName = "Fieldset.Error"
+FieldsetFields.config = { name: "FieldsetField" }
+FieldsetLegend.config = { name: "FieldsetLegend" }
+FieldsetHint.config = { name: "FieldsetHint" }
+FieldsetError.config = { name: "FieldsetError" }
 
 export const Fieldset = Object.assign(Root, {
   Error: FieldsetError,

package/src/components/Pill/Pill.tsx

@@ -62,13 +62,13 @@ export const Pill = ({
 
 const PillBadge = ({ children, className }: PillBadgeProps) => {
   return (
-    <span className={clsx("coop-pill--badge", !hasUserBg(className) && "bg-offer-red", className)}>
+    <span className={clsx("coop-pill--badge", !hasUserBg(className) && "bg-red", className)}>
       {children}
     </span>
   )
 }
 
-PillBadge.displayName = "Pill.Badge"
+PillBadge.config = { name: "PillBadge" }
 
 Pill.Badge = PillBadge
 

package/src/components/Popover/Popover.tsx

@@ -127,8 +127,6 @@ const PopoverContent = ({
   )
 }
 
-PopoverContent.displayName = "Popover.Content"
-
 const PopoverTrigger = ({
   asChild = false,
   children,
@@ -152,8 +150,6 @@ const PopoverTrigger = ({
   return <RadixPopover.Trigger {...componentProps}>{children}</RadixPopover.Trigger>
 }
 
-PopoverTrigger.displayName = "Popover.Trigger"
-
 const PopoverClose = ({
   asChild = false,
   children,
@@ -173,8 +169,6 @@ const PopoverClose = ({
   )
 }
 
-PopoverClose.displayName = "Popover.Close"
-
 const PopoverAnchor = ({
   asChild = false,
   children,
@@ -188,7 +182,10 @@ const PopoverAnchor = ({
   return <RadixPopover.Anchor {...componentProps}>{children}</RadixPopover.Anchor>
 }
 
-PopoverAnchor.displayName = "Popover.Anchor"
+PopoverTrigger.config = { name: "PopoverTrigger" }
+PopoverContent.config = { name: "PopoverContent" }
+PopoverClose.config = { name: "PopoverClose" }
+PopoverAnchor.config = { name: "PopoverAnchor" }
 
 Popover.Trigger = PopoverTrigger
 Popover.Content = PopoverContent