@coopdigital/react 0.40.1 → 0.41.0

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

@@ -1,38 +1,77 @@
-import type { AnchorHTMLAttributes, ForwardRefExoticComponent, HTMLAttributes, JSX } from "react";
+import type { ForwardRefExoticComponent, HTMLAttributes, JSX } from "react";
 import React from "react";
 import { Lights, Tints, White } from "../../types/colors";
 import { ImageProps } from "../Image";
 export interface CardProps extends HTMLAttributes<HTMLDivElement> {
-    /** **(Optional)** Specify a custom element to override default `a`. */
-    as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string;
     /** **(Optional)** Specify the Card background color. */
     background?: Tints | White;
-    /** **(Optional)** Specify text to display inside the badge. */
-    badge?: React.ReactNode;
-    /** **(Optional)** Specify badge position relative to top right corner. */
-    badgePosition?: "inset" | "popout";
     /** **(Optional)** Specify whether chevron is visible. */
     chevron?: boolean;
-    /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
+    /** **(Optional)** Content inside the component. Children that are not assigned to a slot will be grouped together and rendered under the main Card content. */
     children?: React.ReactNode;
     /** **(Optional)** Specify additional CSS classes to be applied to the component. */
     className?: string;
-    /** Specify the Card heading. */
-    heading: string;
-    /** **(Optional)** Specify the level of the Card heading. */
-    headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6";
-    /** **(Optional)** Specify the URL that the Card component will link to when clicked. */
+    /** **(Optional)** Specify the URL that the Card will link to. */
     href?: string;
-    /** Specify properties of the Card Image. */
-    image: ImageProps;
+    /** **(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 Card label. */
-    label?: string;
-    /** **(Optional)** Specify the background color of the Card label. */
-    labelBackground?: Lights;
     /** **(Optional)** Specify the orientation of the Card. */
     orientation?: "vertical" | "horizontal";
 }
-export declare const Card: ({ as, background, badge, badgePosition, chevron, children, className, heading, headingLevel, href, image, imagePosition, label, labelBackground, orientation, ...props }: CardProps) => JSX.Element;
+interface CardLabelProps extends HTMLAttributes<HTMLSpanElement> {
+    /** **(Optional)** Specify the Label background color. */
+    background?: Lights;
+    /** **(Optional)** Content inside the Label. */
+    children?: React.ReactNode;
+    /** **(Optional)** Specify additional CSS classes to be applied to the Label. */
+    className?: string;
+}
+interface CardHeadingProps extends HTMLAttributes<HTMLDivElement> {
+    /** **(Optional)** Specify a custom element to use instead of `h3`. */
+    as?: "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div";
+    /** **(Optional)** Content inside the Heading. */
+    children?: React.ReactNode;
+    /** **(Optional)** Specify additional CSS classes to be applied to the Heading. */
+    className?: string;
+}
+interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {
+    /** **(Optional)** Content inside the Body. */
+    children?: React.ReactNode;
+}
+interface CardBadgeProps extends HTMLAttributes<HTMLDivElement> {
+    /** **(Optional)** Specify on which side the Badge should appear. */
+    align?: "left" | "right";
+    /** **(Optional)** Content inside the Badge. */
+    children?: React.ReactNode;
+    /** **(Optional)** Specify additional CSS classes to be applied to the Badge. */
+    className?: string;
+    /** **(Optional)** Specify badge position relative to top right corner. */
+    position?: "inset" | "popout";
+}
+type CardImageProps = ImageProps;
+export declare const Card: {
+    ({ background, chevron, children, className, href, hrefAs, imagePosition, orientation, ...props }: CardProps): JSX.Element;
+    Label: {
+        ({ background, children, className }: CardLabelProps): JSX.Element;
+        displayName: string;
+    };
+    Heading: {
+        ({ as, children, className }: CardHeadingProps): JSX.Element;
+        displayName: string;
+    };
+    Badge: {
+        ({ align, children, position, ...props }: CardBadgeProps): JSX.Element;
+        displayName: string;
+    };
+    Body: {
+        ({ children }: CardBodyProps): JSX.Element;
+        displayName: string;
+    };
+    Image: {
+        (props: CardImageProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
 export default Card;

package/dist/components/Card/Card.js

@@ -1,37 +1,69 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import React from 'react';
 import { bgPropToClass } from '../../utils/index.js';
+import { getSlots } from '../../utils/slots.js';
 import { ChevronRightIcon } from '../Icon/ChevronRightIcon.js';
 import { Image } from '../Image/Image.js';
 
+const componentSlots = {
+    CardBadge: null,
+    CardBody: null,
+    CardHeading: null,
+    CardImage: null,
+    CardLabel: null,
+    Children: null,
+};
 function getCardLinkElement(as, href) {
-    let element = href ? "a" : "div";
-    if (as) {
-        element = as;
-    }
     return {
-        element,
+        element: as !== null && as !== void 0 ? as : "a",
         props: {
             className: "coop-card--link",
             href,
         },
     };
 }
-const Card = ({ as, background = "white", badge, badgePosition = "inset", chevron = false, children, className, heading, headingLevel = "h3", href, image, imagePosition = "left", label = "", labelBackground, orientation = "vertical", ...props }) => {
-    const linkElement = getCardLinkElement(as, href);
-    const imageProps = {
-        crop: "wide",
-        ...image,
-    };
+const Card = ({ background = "white", chevron = false, children, className, href, hrefAs, imagePosition = "left", orientation = "vertical", ...props }) => {
+    const { element: linkElement, props: linkProps } = getCardLinkElement(hrefAs, href);
+    const slots = getSlots(componentSlots, children);
+    const innerProps = { className: "coop-card--inner" };
+    const hasLinkWrapper = href && !slots.CardHeading;
     const componentProps = {
         className: clsx("coop-card", background && bgPropToClass(background, className), className),
-        "data-badge-pos": badgePosition,
         "data-image-pos": imagePosition,
         "data-orientation": orientation !== "vertical" ? orientation : undefined,
         ...props,
     };
-    return (jsxs("article", { ...componentProps, children: [image && jsx(Image, { ...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, {}) }))] })] }));
+    if (href && slots.CardHeading) {
+        slots.CardHeading = React.createElement(linkElement, linkProps, slots.CardHeading);
+    }
+    return (jsxs("article", { ...componentProps, children: [slots.CardImage, slots.CardBadge, React.createElement(hasLinkWrapper ? linkElement : "div", hasLinkWrapper ? { href, ...innerProps } : innerProps, jsxs("div", { className: "coop-card--content", children: [slots.CardLabel, slots.CardHeading, slots.CardBody, slots.Children] }), chevron && (jsx("span", { "aria-hidden": "true", className: "coop-card--icon", role: "presentation", children: jsx(ChevronRightIcon, {}) })))] }));
+};
+const CardHeading = ({ as = "h3", children, className }) => {
+    return React.createElement(as, { className: clsx("coop-card--heading", className) }, children);
+};
+CardHeading.displayName = "Card.Heading";
+const CardLabel = ({ background, children, className }) => {
+    return (jsx("span", { className: clsx("coop-card--label", className, background && bgPropToClass(background, className)), children: children }));
+};
+CardLabel.displayName = "Card.Label";
+const CardBadge = ({ align = "right", children, position = "popout", ...props }) => {
+    return (jsx("div", { className: "coop-card--badge", "data-align": align, "data-position": position, ...props, children: children }));
+};
+CardBadge.displayName = "Card.Badge";
+const CardBody = ({ children }) => {
+    return jsx(Fragment, { children: children });
+};
+CardBody.displayName = "Card.Body";
+const CardImage = (props) => {
+    var _a;
+    return jsx(Image, { ...props, crop: (_a = props.crop) !== null && _a !== void 0 ? _a : "wide" });
 };
+CardImage.displayName = "Card.Image";
+Card.Label = CardLabel;
+Card.Heading = CardHeading;
+Card.Badge = CardBadge;
+Card.Body = CardBody;
+Card.Image = CardImage;
 
 export { Card, Card as default };

package/dist/components/TextInput/TextInput.d.ts

@@ -27,12 +27,12 @@ export interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElemen
     name: string;
     /** **(Optional)** Specify the TextInput placeholder text. Do not use in place of a form label. */
     placeholder?: string;
-    /** **(Optional)** Specify the prefix. */
-    prefix?: string;
+    /** **(Optional)** Specify the prefix. It can be any valid JSX or string. */
+    prefix?: React.ReactNode;
     /** **(Optional)** Specify the TextInput size. */
     size?: StandardSizes;
-    /** **(Optional)** Specify the suffix. */
-    suffix?: string;
+    /** **(Optional)** Specify the suffix. It can be any valid JSX or string. */
+    suffix?: React.ReactNode;
     /** **(Optional)** Specify the TextInput type. */
     type?: "text" | "email" | "number" | "password" | "search" | "tel" | "url";
 }

package/dist/utils/slots.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+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 getSlots<T>(componentSlots: Slots<T>, children: React.ReactNode): Slots<T>;
+export {};

package/dist/utils/slots.js

@@ -0,0 +1,24 @@
+import React from 'react';
+
+function isKey(x, k) {
+    return k in x;
+}
+function getSlotName(node) {
+    return React.isValidElement(node) && node.type && typeof node.type !== "string"
+        ? node.type.name
+        : false;
+}
+function getSlots(componentSlots, children) {
+    return React.Children.toArray(children).reduce((slots, child) => {
+        const slotName = getSlotName(child);
+        if (child && slotName && isKey(componentSlots, slotName)) {
+            slots[slotName] = child;
+        }
+        else if ("Children" in slots) {
+            slots.Children = slots.Children ? [...[slots.Children].flat(), child] : [child];
+        }
+        return slots;
+    }, { ...componentSlots });
+}
+
+export { getSlotName, getSlots, isKey };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.40.1",
+  "version": "0.41.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -78,8 +78,8 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^0.35.1",
+    "@coopdigital/styles": "^0.36.0",
     "clsx": "^2.1.1"
   },
-  "gitHead": "f37b74793a00f0bac49a02d9b3a3b6c1506c404f"
+  "gitHead": "b8ae0361154729b858c7c62e965cc188ca7f34eb"
 }

package/src/components/Card/Card.tsx

@@ -1,57 +1,83 @@
-import type { AnchorHTMLAttributes, ForwardRefExoticComponent, HTMLAttributes, JSX } from "react"
+import type { ForwardRefExoticComponent, HTMLAttributes, JSX } from "react"
 
 import clsx from "clsx"
 import React from "react"
 
 import { bgPropToClass } from "../../../src/utils"
 import { Lights, Tints, White } from "../../types/colors"
-import { ChevronRightIcon } from "../Icon"
+import { getSlots } from "../../utils/slots"
+import { ChevronRightIcon } from "../Icon/ChevronRightIcon"
 import { Image, ImageProps } from "../Image"
 
 export interface CardProps extends HTMLAttributes<HTMLDivElement> {
-  //export interface CardProps {
-  /** **(Optional)** Specify a custom element to override default `a`. */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string
   /** **(Optional)** Specify the Card background color. */
   background?: Tints | White
-  /** **(Optional)** Specify text to display inside the badge. */
-  badge?: React.ReactNode
-  /** **(Optional)** Specify badge position relative to top right corner. */
-  badgePosition?: "inset" | "popout"
   /** **(Optional)** Specify whether chevron is visible. */
   chevron?: boolean
-  /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
+  /** **(Optional)** Content inside the component. Children that are not assigned to a slot will be grouped together and rendered under the main Card content. */
   children?: React.ReactNode
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */
   className?: string
-  /** Specify the Card heading. */
-  heading: string
-  /** **(Optional)** Specify the level of the Card heading. */
-  headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6"
-  /** **(Optional)** Specify the URL that the Card component will link to when clicked. */
+  /** **(Optional)** Specify the URL that the Card will link to. */
   href?: string
-  /** Specify properties of the Card Image. */
-  image: ImageProps
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  /** **(Optional)** Specify a custom element to use instead of `a`. */
+  hrefAs?: React.FC<any> | ForwardRefExoticComponent<any> | string
+  /* eslint-enable */
   /** **(Optional)** Specify the position of the image in the Card. */
   imagePosition?: "left" | "right"
-  /** **(Optional)** Specify the Card label. */
-  label?: string
-  /** **(Optional)** Specify the background color of the Card label. */
-  labelBackground?: Lights
   /** **(Optional)** Specify the orientation of the Card. */
   orientation?: "vertical" | "horizontal"
 }
 
-function getCardLinkElement(as: CardProps["as"], href?: string) {
-  let element: CardProps["as"] = href ? "a" : "div"
+interface CardLabelProps extends HTMLAttributes<HTMLSpanElement> {
+  /** **(Optional)** Specify the Label background color. */
+  background?: Lights
+  /** **(Optional)** Content inside the Label. */
+  children?: React.ReactNode
+  /** **(Optional)** Specify additional CSS classes to be applied to the Label. */
+  className?: string
+}
 
-  if (as) {
-    element = as
-  }
+interface CardHeadingProps extends HTMLAttributes<HTMLDivElement> {
+  /** **(Optional)** Specify a custom element to use instead of `h3`. */
+  as?: "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div"
+  /** **(Optional)** Content inside the Heading. */
+  children?: React.ReactNode
+  /** **(Optional)** Specify additional CSS classes to be applied to the Heading. */
+  className?: string
+}
+
+interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {
+  /** **(Optional)** Content inside the Body. */
+  children?: React.ReactNode
+}
 
+interface CardBadgeProps extends HTMLAttributes<HTMLDivElement> {
+  /** **(Optional)** Specify on which side the Badge should appear. */
+  align?: "left" | "right"
+  /** **(Optional)** Content inside the Badge. */
+  children?: React.ReactNode
+  /** **(Optional)** Specify additional CSS classes to be applied to the Badge. */
+  className?: string
+  /** **(Optional)** Specify badge position relative to top right corner. */
+  position?: "inset" | "popout"
+}
+
+type CardImageProps = ImageProps
+
+const componentSlots = {
+  CardBadge: null,
+  CardBody: null,
+  CardHeading: null,
+  CardImage: null,
+  CardLabel: null,
+  Children: null,
+}
+
+function getCardLinkElement(as: CardProps["hrefAs"], href?: string) {
   return {
-    element,
+    element: as ?? "a",
     props: {
       className: "coop-card--link",
       href,
@@ -60,69 +86,110 @@ function getCardLinkElement(as: CardProps["as"], href?: string) {
 }
 
 export const Card = ({
-  as,
   background = "white",
-  badge,
-  badgePosition = "inset",
   chevron = false,
   children,
   className,
-  heading,
-  headingLevel = "h3",
   href,
-  image,
+  hrefAs,
   imagePosition = "left",
-  label = "",
-  labelBackground,
   orientation = "vertical",
   ...props
 }: CardProps): JSX.Element => {
-  const linkElement = getCardLinkElement(as, href)
+  const { element: linkElement, props: linkProps } = getCardLinkElement(hrefAs, href)
 
-  const imageProps: ImageProps = {
-    crop: "wide",
-    ...image,
-  }
+  const slots = getSlots(componentSlots, children)
+
+  const innerProps = { className: "coop-card--inner" }
+  const hasLinkWrapper = href && !slots.CardHeading
 
   const componentProps = {
     className: clsx("coop-card", background && bgPropToClass(background, className), className),
-    "data-badge-pos": badgePosition,
     "data-image-pos": imagePosition,
     "data-orientation": orientation !== "vertical" ? orientation : undefined,
     ...props,
   }
 
+  if (href && slots.CardHeading) {
+    slots.CardHeading = React.createElement(linkElement, linkProps, slots.CardHeading)
+  }
+
   return (
     <article {...componentProps}>
-      {image && <Image {...imageProps} />}
-      {badge && <div className="coop-card--badge">{badge}</div>}
-      <div className="coop-card--inner">
+      {slots.CardImage}
+      {slots.CardBadge}
+      {React.createElement(
+        hasLinkWrapper ? linkElement : "div",
+        hasLinkWrapper ? { href, ...innerProps } : innerProps,
         <div className="coop-card--content">
-          {label && (
-            <span
-              className={clsx(
-                "coop-card--label",
-                labelBackground && bgPropToClass(labelBackground, className)
-              )}
-            >
-              {label}
-            </span>
-          )}
-          {React.createElement(
-            linkElement.element,
-            linkElement.props,
-            React.createElement(headingLevel, { className: "coop-card--heading" }, heading)
-          )}
-          {children}
-        </div>
-        {chevron && (
+          {slots.CardLabel}
+          {slots.CardHeading}
+          {slots.CardBody}
+          {slots.Children}
+        </div>,
+        chevron && (
           <span aria-hidden="true" className="coop-card--icon" role="presentation">
             <ChevronRightIcon />
           </span>
-        )}
-      </div>
+        )
+      )}
     </article>
   )
 }
 
+const CardHeading = ({ as = "h3", children, className }: CardHeadingProps): JSX.Element => {
+  return React.createElement(as, { className: clsx("coop-card--heading", className) }, children)
+}
+
+CardHeading.displayName = "Card.Heading"
+
+const CardLabel = ({ background, children, className }: CardLabelProps): JSX.Element => {
+  return (
+    <span
+      className={clsx(
+        "coop-card--label",
+        className,
+        background && bgPropToClass(background, className)
+      )}
+    >
+      {children}
+    </span>
+  )
+}
+
+CardLabel.displayName = "Card.Label"
+
+const CardBadge = ({
+  align = "right",
+  children,
+  position = "popout",
+  ...props
+}: CardBadgeProps): JSX.Element => {
+  return (
+    <div className="coop-card--badge" data-align={align} data-position={position} {...props}>
+      {children}
+    </div>
+  )
+}
+
+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"
+
+Card.Label = CardLabel
+Card.Heading = CardHeading
+Card.Badge = CardBadge
+Card.Body = CardBody
+Card.Image = CardImage
+
 export default Card

package/src/components/TextInput/TextInput.tsx

@@ -36,12 +36,12 @@ export interface TextInputProps
   name: string
   /** **(Optional)** Specify the TextInput placeholder text. Do not use in place of a form label. */
   placeholder?: string
-  /** **(Optional)** Specify the prefix. */
-  prefix?: string
+  /** **(Optional)** Specify the prefix. It can be any valid JSX or string. */
+  prefix?: React.ReactNode
   /** **(Optional)** Specify the TextInput size. */
   size?: StandardSizes
-  /** **(Optional)** Specify the suffix. */
-  suffix?: string
+  /** **(Optional)** Specify the suffix. It can be any valid JSX or string. */
+  suffix?: React.ReactNode
   /** **(Optional)** Specify the TextInput type. */
   type?: "text" | "email" | "number" | "password" | "search" | "tel" | "url"
 }

package/src/utils/slots.ts

@@ -0,0 +1,30 @@
+import React from "react"
+
+type Slots<T> = Record<keyof T, React.ReactNode>
+
+export function isKey<T extends object>(x: T, k: PropertyKey): k is keyof T {
+  return k in x
+}
+
+export function getSlotName(node: React.ReactNode): string | false {
+  return React.isValidElement(node) && node.type && typeof node.type !== "string"
+    ? node.type.name
+    : false
+}
+
+export function getSlots<T>(componentSlots: Slots<T>, children: React.ReactNode): Slots<T> {
+  return React.Children.toArray(children).reduce(
+    (slots, child: React.ReactNode) => {
+      const slotName = getSlotName(child)
+
+      if (child && slotName && isKey(componentSlots, slotName)) {
+        slots[slotName] = child
+      } else if ("Children" in slots) {
+        slots.Children = slots.Children ? [...[slots.Children].flat(), child] : [child]
+      }
+
+      return slots
+    },
+    { ...componentSlots }
+  )
+}