@coopdigital/react 1.19.0 → 1.20.0

package/src/components/Card/Card.tsx

@@ -1,154 +1,153 @@
-import type { ForwardRefExoticComponent, HTMLAttributes, JSX, Ref } from "react"
+import type {
+  AnchorHTMLAttributes,
+  ForwardRefExoticComponent,
+  HTMLAttributes,
+  JSX,
+  Ref,
+} from "react"
 
 import clsx from "clsx"
 import React from "react"
 
-import { useSlots } from "../../hooks/useSlots"
-import { hasUserBg } from "../../utils"
-import { ChevronRightIcon } from "../icons/ChevronRightIcon"
-import { Image, ImageProps } from "../Image"
+import { Image, ImageProps } from "@/components/Image"
+import Picture, { PictureProps } from "@/components/Picture"
+import { useSlots } from "@/hooks/useSlots"
+import { StandardSizes } from "@/types"
+import { hasUserBg } from "@/utils"
 
 export interface CardProps extends HTMLAttributes<HTMLDivElement> {
-  /**  **(Optional)** Specify how the card behaves across screen sizes.
+  /**  **(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.
+   * For finer control, use utility classes or custom CSS to control flex-direction. */
+  adaptive?: "sm" | "md"
+  /** **(Optional)** Specify an element to use for the container.
    *
-   * Default: false
+   * Default: `article`
    */
-  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. */
+  as?: "article" | "section" | "figure" | "div"
+  /** **(Optional)** Content inside the component. */
   children?: React.ReactNode
-  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  /** **(Optional)** Specify additional CSS classes. */
   className?: string
-  /** **(Optional)** Specify the URL that the Card will link to. */
-  href?: string
-  /** **(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 orientation of the Card.
-   *
-   * Default: vertical
-   */
+  /** **(Optional)** Specify the Card orientation. */
   orientation?: "vertical" | "horizontal"
+  /** **(Optional)** Specify the Card padding. */
+  padding?: StandardSizes
+  /** **(Optional)** Specify the Card border radius. */
+  radius?: StandardSizes
   /** **(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. */
+   * Text is vertically aligned centrally and the Icon is enlarged. */
   signpost?: boolean
 }
 
-interface CardLabelProps extends HTMLAttributes<HTMLSpanElement> {
-  /** **(Optional)** Content inside the Label. */
+interface CardHeadingProps extends HTMLAttributes<HTMLDivElement> {
+  /** **(Optional)** Specify an element to use for the heading.
+   *
+   * Default: `h3`
+   */
+  as?: "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "strong" | "figcaption"
+  /** **(Optional)** Content inside the component. */
   children?: React.ReactNode
-  /** **(Optional)** Specify additional CSS classes to be applied to the Label. */
+  /** **(Optional)** Specify additional CSS classes. */
   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. */
+// interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {
+//   /** **(Optional)** Content inside the Body. */
+//   children?: React.ReactNode
+// }
+
+interface CardIconProps extends HTMLAttributes<HTMLDivElement> {
+  /** **(Optional)** Content inside the component. */
   children?: React.ReactNode
-  /** **(Optional)** Specify additional CSS classes to be applied to the Heading. */
+  /** **(Optional)** Specify additional CSS classes. */
   className?: string
 }
 
-interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Content inside the Body. */
+interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
+  /** **(Optional)** Content inside the component. */
   children?: React.ReactNode
+  /** **(Optional)** Specify additional CSS classes. */
+  className?: string
+}
+
+interface CardLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  /** **(Optional)** Specify an element to use instead of native `a`. */
+  // oxlint-disable-next-line typescript/no-explicit-any
+  as?: React.FC<any> | ForwardRefExoticComponent<any> | string
+  /** **(Optional)** Content inside the component. */
+  children?: React.ReactNode
+  /** **(Optional)** Specify additional CSS classes. */
+  className?: string
 }
 
 interface CardBadgeProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Specify on which side the Badge should appear. */
+  /** **(Optional)** Specify alignment relative to container.
+   *
+   * Default: `right`
+   */
   align?: "left" | "right"
-  /** **(Optional)** Content inside the Badge. */
+  /** **(Optional)** Content inside the component. */
   children?: React.ReactNode
-  /** **(Optional)** Specify additional CSS classes to be applied to the Badge. */
+  /** **(Optional)** Specify additional CSS classes. */
   className?: string
-  /** **(Optional)** Specify badge position relative to top right corner. */
+  /** **(Optional)** Specify position relative to top corner.
+   *
+   * Default: `popout`
+   */
   position?: "inset" | "popout"
 }
 
-type CardImageProps = ImageProps & {
-  /** **(Optional)** Specify on which side the Image should appear. */
+interface CardPictureProps extends PictureProps {
+  /** **(Optional)** Specify on which side the Picture should appear. */
   align?: "left" | "right"
+  /** **(Optional)** Content inside the component. */
+  children?: React.ReactNode
+  /** **(Optional)** Specify additional CSS classes. */
+  className?: string
 }
 
 const componentSlots = {
   CardBadge: null,
-  CardBody: null,
-  CardHeading: null,
-  CardImage: null,
-  CardLabel: null,
   Children: null,
 }
 
-function getCardLinkElement(as: CardProps["hrefAs"], href?: string) {
-  return {
-    element: as ?? "a",
-    props: {
-      className: "coop-card--link",
-      href,
-    },
-  }
-}
-
 const Card = ({
   adaptive,
-  // behaviour,
-  chevron = false,
+  as = "article",
   children,
   className,
-  href,
-  hrefAs,
   orientation,
+  padding,
+  radius,
   ref,
   signpost,
   ...props
 }: CardProps): JSX.Element => {
-  const { element: linkElement, props: linkProps } = getCardLinkElement(hrefAs, href)
-
   const slots = { ...useSlots(componentSlots, children) }
-  const hasLinkWrapper = href && !slots.CardHeading
 
   const componentProps = {
     className: clsx("coop-card", !hasUserBg(className) && "bg-white", className),
-    // "data-behaviour": behaviour ?? undefined,
     "data-adaptive": adaptive ?? undefined,
     "data-orientation": orientation ?? undefined,
+    "data-padding": padding ?? undefined,
+    "data-radius": radius ?? undefined,
     "data-signpost": signpost ?? undefined,
     ...props,
   }
 
-  if (href && slots.CardHeading) {
-    slots.CardHeading = React.createElement(linkElement, linkProps, slots.CardHeading)
-  }
+  const cardContent = React.createElement(as, { ref, ...componentProps }, slots.Children)
 
-  return (
-    <article ref={ref} {...componentProps}>
-      {slots.CardImage}
+  return slots.CardBadge ? (
+    <div className="coop-card-wrapper">
+      {cardContent}
       {slots.CardBadge}
-      {React.createElement(
-        hasLinkWrapper ? linkElement : "div",
-        hasLinkWrapper
-          ? { className: "coop-card--content", href }
-          : { className: "coop-card--content" },
-        <>
-          {slots.CardLabel}
-          {slots.CardHeading}
-          {slots.CardBody}
-          {slots.Children}
-        </>
-      )}
-      {(chevron || signpost) && (
-        <span aria-hidden="true" className="coop-card--icon" role="presentation">
-          <ChevronRightIcon />
-        </span>
-      )}
-    </article>
+    </div>
+  ) : (
+    cardContent
   )
 }
 
@@ -165,47 +164,92 @@ const CardHeading = ({
   )
 }
 
-const CardLabel = ({ children, className, ...props }: CardLabelProps): JSX.Element => {
-  return (
-    <span className={clsx("coop-card--label", className)} {...props}>
-      {children}
-    </span>
-  )
+const CardIcon = ({ children, className, ...props }: CardIconProps): JSX.Element => {
+  const componentProps = {
+    className: clsx("coop-card--icon", className),
+    ...props,
+  }
+  return <span {...componentProps}>{children}</span>
 }
 
 const CardBadge = ({
   align = "right",
   children,
+  className,
   position = "popout",
   ...props
 }: CardBadgeProps): JSX.Element => {
-  return (
-    <div className="coop-card--badge" data-align={align} data-position={position} {...props}>
-      {children}
-    </div>
-  )
+  const componentProps = {
+    className: clsx("coop-card--badge", className),
+    "data-align": align,
+    "data-position": position,
+    ...props,
+  }
+  return <div {...componentProps}>{children}</div>
+}
+
+// const CardBody = ({ children }: CardBodyProps): JSX.Element => {
+//   return <>{children}</>
+// }
+
+const CardPicture = ({
+  align,
+  children,
+  className,
+  crop,
+  ...props
+}: CardPictureProps): JSX.Element => {
+  const componentProps = {
+    className: clsx("coop-card--picture", className),
+    "data-align": align ?? undefined,
+    "data-crop": crop ?? "wide",
+    ...props,
+  }
+  return <Picture {...componentProps}>{children}</Picture>
 }
 
-const CardBody = ({ children }: CardBodyProps): JSX.Element => {
-  return <>{children}</>
+const CardImage = (props: ImageProps): JSX.Element => <Image {...props} />
+
+const CardContent = ({ children, className, ...props }: CardContentProps): JSX.Element => {
+  const componentProps = {
+    className: clsx("coop-card--content", className),
+    ...props,
+  }
+  return <div {...componentProps}>{children}</div>
 }
 
-const CardImage = ({ align, crop, ...props }: CardImageProps): JSX.Element => {
-  return <Image {...{ ...props, crop: crop ?? "wide", "data-align": align ?? undefined }} />
+const CardLink = ({
+  as = "a",
+  children,
+  className,
+  href,
+  ...props
+}: CardLinkProps): JSX.Element => {
+  return React.createElement(
+    as,
+    { className: clsx("coop-card--link", className), href, ...props },
+    children
+  )
 }
 
 Card.slot = { name: "Card" }
-CardLabel.slot = { name: "CardLabel" }
 CardHeading.slot = { name: "CardHeading" }
 CardBadge.slot = { name: "CardBadge" }
-CardBody.slot = { name: "CardBody" }
+CardIcon.slot = { name: "CardIcon" }
+CardContent.slot = { name: "CardContent" }
 CardImage.slot = { name: "CardImage" }
+CardLink.slot = { name: "CardLink" }
+
+CardPicture.slot = { name: "CardPicture" }
 
-Card.Label = CardLabel
+Card.Link = CardLink
 Card.Heading = CardHeading
 Card.Badge = CardBadge
-Card.Body = CardBody
+Card.Content = CardContent
+Card.Icon = CardIcon
 Card.Image = CardImage
 
+Card.Picture = CardPicture
+
 export default Card
-export { Card, CardBadge, CardBody, CardHeading, CardImage, CardLabel }
+export { Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture }

package/src/components/Checkbox/Checkbox.tsx

@@ -3,8 +3,8 @@ import type { InputHTMLAttributes, JSX, Ref } from "react"
 
 import clsx from "clsx"
 
-import { StandardSizes } from "../../../src/types"
-import { useField } from "../Field/Field.context"
+import { useField } from "@/components/Field/Field.context"
+import { StandardSizes } from "@/types"
 
 export interface CheckboxProps extends Omit<
   InputHTMLAttributes<HTMLInputElement>,

package/src/components/DatePicker/DatePicker.tsx

@@ -13,7 +13,14 @@ import clsx from "clsx"
 import { useCallback, useMemo, useReducer } from "react"
 import { DayPicker } from "react-day-picker"
 
-import type { StandardSizes } from "../../types"
+import type { StandardSizes } from "@/types"
+
+import { Button } from "@/components/Button"
+import { useField } from "@/components/Field/Field.context"
+import { CalendarIcon, CrossIcon, TickIcon } from "@/components/icons"
+import { Popover } from "@/components/Popover"
+import { TextInput } from "@/components/TextInput"
+
 import type {
   DateRange,
   DateRangeStr,
@@ -23,11 +30,6 @@ import type {
   TDateSingle,
 } from "./datepicker-utils"
 
-import { Button } from "../Button"
-import { useField } from "../Field/Field.context"
-import { CalendarIcon, CrossIcon, TickIcon } from "../icons"
-import { Popover } from "../Popover"
-import { TextInput } from "../TextInput"
 import {
   getDateValues,
   getDefaultMonth,

package/src/components/Dialog/Dialog.tsx

@@ -17,8 +17,8 @@ import React, {
   useRef,
 } from "react"
 
-import { hasUserBg } from "../../utils"
-import { CrossIcon } from "../icons"
+import { CrossIcon } from "@/components/icons"
+import { hasUserBg } from "@/utils"
 
 const DialogContext = createContext<{
   ref: RefObject<HTMLDialogElement | null> | null

package/src/components/Expandable/Expandable.tsx

@@ -2,9 +2,9 @@ import type { DetailsHTMLAttributes, HTMLAttributes, JSX, Ref } from "react"
 
 import clsx from "clsx"
 
-import { useSlots } from "../../hooks/useSlots"
-import { hasUserBg } from "../../utils"
-import { ChevronDownIcon } from "../icons"
+import { ChevronDownIcon } from "@/components/icons"
+import { useSlots } from "@/hooks/useSlots"
+import { hasUserBg } from "@/utils"
 
 export interface ExpandableProps extends DetailsHTMLAttributes<HTMLDetailsElement> {
   /** Main content inside the component. This should be an `Expandable.Summary` and `Expandable.Content`. */

package/src/components/Field/Field.tsx

@@ -4,12 +4,13 @@ import type { HTMLAttributes, JSX, Ref } from "react"
 import clsx from "clsx"
 import React from "react"
 
-import { useId } from "../../hooks/useId"
-import { SlotConfig } from "../../types"
-import { getSlotProp } from "../../utils"
-import { Error as BaseError, type ErrorProps } from "../FieldMarkers/Error"
-import { Hint as BaseHint, type HintProps } from "../FieldMarkers/Hint"
-import { Label as BaseLabel, type LabelProps } from "../FieldMarkers/Label"
+import { Error as BaseError, type ErrorProps } from "@/components/FieldMarkers/Error"
+import { Hint as BaseHint, type HintProps } from "@/components/FieldMarkers/Hint"
+import { Label as BaseLabel, type LabelProps } from "@/components/FieldMarkers/Label"
+import { useId } from "@/hooks/useId"
+import { SlotConfig } from "@/types"
+import { getSlotProp } from "@/utils"
+
 import { FieldConfig, FieldContext } from "./Field.context"
 
 interface FieldProps extends HTMLAttributes<HTMLDivElement> {

package/src/components/FieldMarkers/Label.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx"
 import { JSX, LabelHTMLAttributes, Ref } from "react"
 
-import { useField } from "../Field/Field.context"
+import { useField } from "@/components/Field/Field.context"
 
 export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
   /** **(Optional)** Main label for the form element. Accepts any valid JSX or string. */

package/src/components/Fieldset/Fieldset.tsx

@@ -1,10 +1,10 @@
 import clsx from "clsx"
 import { type FieldsetHTMLAttributes, HTMLAttributes, type JSX, Ref } from "react"
 
-import { StandardSizes } from "../../../src/types"
-import { Error as BaseError, type ErrorProps } from "../FieldMarkers/Error"
-import { Hint as BaseHint, type HintProps } from "../FieldMarkers/Hint"
-import { Legend as BaseLegend, type LegendProps } from "../FieldMarkers/Legend"
+import { Error as BaseError, type ErrorProps } from "@/components/FieldMarkers/Error"
+import { Hint as BaseHint, type HintProps } from "@/components/FieldMarkers/Hint"
+import { Legend as BaseLegend, type LegendProps } from "@/components/FieldMarkers/Legend"
+import { StandardSizes } from "@/types"
 
 export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
   /** Form elements inside the Fieldset.

package/src/components/Flourish/Flourish.tsx

@@ -2,7 +2,7 @@ import type { JSX, ReactNode, Ref, SVGProps } from "react"
 
 import clsx from "clsx"
 
-import { Black, BrandBlue, Darks, Lights, OfferRed, Tints, White } from "../../types/colors"
+import { Black, BrandBlue, Darks, Lights, OfferRed, Tints, White } from "@/types/colors"
 
 export interface FlourishProps extends SVGProps<SVGSVGElement> {
   /** Specify the text to be highlighted by the Flourish. */

package/src/components/Image/Image.tsx

@@ -1,10 +1,8 @@
-import type { HTMLAttributes, JSX, Ref } from "react"
+import type { ImgHTMLAttributes, JSX, Ref } from "react"
 
-export interface ImageProps extends HTMLAttributes<HTMLImageElement> {
+export interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
   /** Specify text to describe the image. Refer to Experience Library guidelines on writing good alt text. */
   alt: string
-  /** **(Optional)** Specify the image crop mode. */
-  crop?: "square" | "wide" | "none"
   /** **(Optional)** Specify the height of the image. */
   height?: string
   /** **(Optional)** Specify a custom React ref for this component. */
@@ -15,7 +13,15 @@ export interface ImageProps extends HTMLAttributes<HTMLImageElement> {
   width?: string
 }
 
-const getContentfulParams = (src: string, width: string, height: string | undefined) => {
+const getContentfulParams = ({
+  height,
+  src,
+  width,
+}: {
+  height?: string
+  src: string
+  width: string
+}) => {
   const url = !src.startsWith("http") ? new URL("https://" + src) : new URL(src)
   const params = [
     ["fm", "webp"],
@@ -26,7 +32,7 @@ const getContentfulParams = (src: string, width: string, height: string | undefi
   ]
 
   params.forEach(([k, v]) => {
-    if (!url.searchParams.has(k)) url.searchParams.set(k, v)
+    if (k && v && !url.searchParams.has(k)) url.searchParams.set(k, v)
   })
 
   return {
@@ -36,32 +42,19 @@ const getContentfulParams = (src: string, width: string, height: string | undefi
   }
 }
 
-const Image = ({
-  alt,
-  crop,
-  height,
-  ref,
-  src,
-  width = "640",
-  ...props
-}: ImageProps): JSX.Element => {
+const Image = ({ alt, height, ref, src, width = "640", ...props }: ImageProps): JSX.Element => {
   let params = { height, src, width }
 
   if (src.includes("images.ctfassets.net")) {
-    params = getContentfulParams(src, width, height)
+    params = getContentfulParams({ height, src, width })
   }
 
   const dimensions = {
-    "data-crop": crop,
     height: params.height,
     width: params.width,
   }
 
-  return (
-    <picture>
-      <img alt={alt} loading="lazy" src={params.src} {...dimensions} {...props} ref={ref} />
-    </picture>
-  )
+  return <img alt={alt} loading="lazy" src={params.src} {...dimensions} {...props} ref={ref} />
 }
 
 Image.slot = { name: "Image" }

package/src/components/LoadingSpinner/LoadingSpinner.tsx

@@ -2,7 +2,7 @@ import type { JSX, Ref, SVGProps } from "react"
 
 import clsx from "clsx"
 
-import { LoadingIcon } from "../icons"
+import { LoadingIcon } from "@/components/icons"
 
 export interface LoadingSpinnerProps extends SVGProps<SVGSVGElement> {
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */

package/src/components/PasswordInput/PasswordInput.tsx

@@ -3,9 +3,9 @@ import type { JSX } from "react"
 
 import { useCallback, useState } from "react"
 
-import { Button } from "../Button"
-import { useField } from "../Field/Field.context"
-import { TextInput, type TextInputProps } from "../TextInput"
+import { Button } from "@/components/Button"
+import { useField } from "@/components/Field/Field.context"
+import { TextInput, type TextInputProps } from "@/components/TextInput"
 
 export interface PasswordInputProps extends Omit<
   TextInputProps,

package/src/components/Picture/Picture.tsx

@@ -0,0 +1,36 @@
+import type { HTMLAttributes, JSX, ReactNode, Ref } from "react"
+
+import clsx from "clsx"
+
+export interface PictureProps extends HTMLAttributes<HTMLPictureElement> {
+  /** **(Optional)** Content inside the component. */
+  children?: string | ReactNode
+  /** **(Optional)** Specify additional CSS classes. */
+  className?: string
+  /** **(Optional)** Specify the image crop mode. */
+  crop?: "square" | "wide" | "thin" | "squircle" | "none"
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLPictureElement>
+}
+
+export const Picture = ({
+  children,
+  className,
+  crop,
+  ref,
+  ...props
+}: PictureProps): JSX.Element => {
+  const componentProps = {
+    className: clsx("coop-picture", className),
+    "data-crop": crop ?? undefined,
+    ...props,
+  }
+
+  return (
+    <picture {...componentProps} ref={ref}>
+      {children}
+    </picture>
+  )
+}
+
+export default Picture

package/src/components/Picture/index.ts

@@ -0,0 +1,5 @@
+import Picture from "./Picture"
+
+export default Picture
+export { Picture }
+export * from "./Picture"

package/src/components/Pill/Pill.tsx

@@ -3,9 +3,9 @@ import type { ForwardRefExoticComponent, HTMLAttributes, JSX, Ref } from "react"
 import clsx from "clsx"
 import React from "react"
 
-import { useSlots } from "../../hooks/useSlots"
-import { StandardSizes } from "../../types"
-import { hasUserBg } from "../../utils"
+import { useSlots } from "@/hooks/useSlots"
+import { StandardSizes } from "@/types"
+import { hasUserBg } from "@/utils"
 
 export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
   /** **(Optional)** Specify a custom element to override default `a` or `span`. */

package/src/components/Popover/Popover.tsx

@@ -10,8 +10,8 @@ import type { JSX, ReactNode, Ref } from "react"
 import * as RadixPopover from "@radix-ui/react-popover"
 import clsx from "clsx"
 
-import { useSlots } from "../../hooks/useSlots"
-import { bgClassToColor, hasUserBg } from "../../utils"
+import { useSlots } from "@/hooks/useSlots"
+import { bgClassToColor, hasUserBg } from "@/utils"
 
 export interface PopoverProps extends RadixPopoverProps {
   /** Content inside the Popover.

package/src/components/Prose/Prose.tsx

@@ -2,7 +2,7 @@ import type { HTMLAttributes, JSX, ReactNode, Ref } from "react"
 
 import clsx from "clsx"
 
-import { StandardSizes } from "../../types"
+import { StandardSizes } from "@/types"
 
 export interface ProseProps extends HTMLAttributes<HTMLDivElement> {
   /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */