@coopdigital/react 1.26.0 → 1.27.0

package/dist/components/Author/Author.d.ts

@@ -3,25 +3,35 @@ import "../Image/index.js";
 import { HTMLAttributes, JSX, Ref } from "react";
 //#region src/components/Author/Author.d.ts
 export interface AuthorProps extends HTMLAttributes<HTMLDivElement> {
-  /** Specify the Author name. */
-  author?: string;
+  /** Content inside the component.
+   *
+   * This should be a set of `<Author.Image>` and `<Author.Meta>`. */
+  children?: React.ReactNode;
   /** Specify additional CSS classes. */
   className?: string;
+  /** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLDivElement>;
+  /** Specify the component size. */
+  size?: "sm" | "md";
+}
+export interface AuthorMetaProps extends HTMLAttributes<HTMLDivElement> {
   /** Specify the date.
    *
    * Recommended format `dd mmmm yyyy` eg: 1 January 2000.  */
   date?: string;
   /** Specify the text that will prefix the date, e.g. "Updated". */
   datePrefix?: string;
-  /** Specify properties of the Author Image. */
-  image?: ImageProps;
-  /** Specify a custom React ref for this component. */
-  ref?: Ref<HTMLDivElement>;
-  /** Specify the component size. */
-  size?: "sm" | "md";
+  /** Specify the Author name. */
+  name?: string;
+}
+export interface AuthorImageProps extends Partial<ImageProps> {
+  alt?: string;
+  src?: string;
 }
 declare const Author: {
-  ({ author, className, date, datePrefix, image, ref, size, ...props }: AuthorProps): JSX.Element;
+  ({ children, className, ref, size, ...props }: AuthorProps): JSX.Element;
+  Image: ({ alt, src, ...props }: AuthorImageProps) => JSX.Element;
+  Meta: ({ date, datePrefix, name, ...props }: AuthorMetaProps) => JSX.Element;
   slot: {
     name: string;
   };

package/dist/components/Author/Author.js

@@ -2,31 +2,44 @@ import { Image } from "../Image/Image.js";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Author/Author.tsx
-const Author = ({ author = "Co-op team", className, date, datePrefix = "", image = {
-	alt: "",
-	src: "https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/coop-logo-inverted.svg"
-}, ref, size, ...props }) => {
-	const imageProps = {
+const Author = ({ children, className, ref, size, ...props }) => {
+	const componentProps = {
+		className: clsx("coop-author", className),
+		"data-size": size ?? void 0,
+		...props
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...componentProps,
+		ref,
+		children
+	});
+};
+const COOP_LOGO_SRC = "https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/coop-logo-inverted.svg";
+const AuthorImage = ({ alt = "", src = COOP_LOGO_SRC, ...props }) => {
+	const componentProps = {
+		alt,
+		src,
 		width: "56px",
-		...image
+		...props
 	};
+	return /* @__PURE__ */ jsx(Image, { ...componentProps });
+};
+const AuthorMeta = ({ date, datePrefix, name = "Co-op team", ...props }) => {
 	const componentProps = {
-		className: clsx("coop-author", className),
-		"data-size": size?.length ? size : void 0,
+		name,
 		...props
 	};
 	return /* @__PURE__ */ jsxs("div", {
+		className: "coop-author--content",
 		...componentProps,
-		ref,
-		children: [image && /* @__PURE__ */ jsx(Image, { ...imageProps }), /* @__PURE__ */ jsxs("div", {
-			className: "coop-author--content",
-			children: [/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("span", { children: datePrefix ? datePrefix + " " : "" }), /* @__PURE__ */ jsx("span", {
-				className: "coop-author--date",
-				children: date
-			})] }), /* @__PURE__ */ jsxs("span", { children: ["by ", author] })]
-		})]
+		children: [/* @__PURE__ */ jsxs("span", { children: [datePrefix && /* @__PURE__ */ jsx("span", { children: datePrefix + " " }), /* @__PURE__ */ jsx("span", {
+			className: "coop-author--date",
+			children: date
+		})] }), /* @__PURE__ */ jsxs("span", { children: ["by ", name] })]
 	});
 };
+Author.Image = AuthorImage;
+Author.Meta = AuthorMeta;
 Author.slot = { name: "Author" };
 //#endregion
 export { Author, Author as default };

package/dist/components/Author/index.d.ts

@@ -1,2 +1,2 @@
-import { Author, AuthorProps } from "./Author.js";
-export { Author, Author as default, AuthorProps };
+import { Author, AuthorImageProps, AuthorMetaProps, AuthorProps } from "./Author.js";
+export { Author, Author as default, AuthorImageProps, AuthorMetaProps, AuthorProps };

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

@@ -1,3 +1,4 @@
+import { StandardSizes } from "../../types/index.js";
 import React, { ButtonHTMLAttributes, ForwardRefExoticComponent, JSX, Ref } from "react";
 //#region src/components/Button/Button.d.ts
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -25,7 +26,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLElement>;
   /** Specify the component size. */
-  size?: "sm" | "md" | "lg";
+  size?: StandardSizes;
   /** Specify the component variant. */
   variant?: "solid" | "ghost" | "text";
 }

package/dist/components/Combobox/Combobox.d.ts

@@ -1,3 +1,4 @@
+import { StandardSizes } from "../../types/index.js";
 import { ComboboxItem, ComboboxOption } from "./combobox-utils.js";
 import { TextInputProps } from "../TextInput/TextInput.js";
 import "../TextInput/index.js";
@@ -75,7 +76,7 @@ export interface ComboboxProps extends Omit<HTMLAttributes<HTMLDivElement>, "onC
   /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>;
   /** Specify the component size. */
-  size?: "sm" | "md" | "lg";
+  size?: StandardSizes;
 }
 export interface ComboboxControlsProps extends HTMLAttributes<HTMLDivElement> {
   /** Content inside the component.

package/dist/components/Pill/Pill.js

@@ -13,7 +13,7 @@ const Pill = ({ as, children, className, href, ref, size, ...props }) => {
 	const slots = useSlots(componentSlots, children);
 	const componentProps = {
 		className: clsx("coop-pill", !hasUserBg(className) && "bg-tint-grey", className),
-		"data-size": size?.length ? size : void 0,
+		"data-size": size ?? void 0,
 		href,
 		...props
 	};

package/dist/components/Section/Section.d.ts

@@ -6,11 +6,11 @@ export interface SectionProps extends HTMLAttributes<HTMLDivElement> {
    * Default: `<section>`
    */
   as?: React.FC<any> | string;
-  /** **(Optional)** Content inside the component. */
+  /** Content inside the component. */
   children?: ReactNode;
-  /** **(Optional)** Specify additional CSS classes. */
+  /** Specify additional CSS classes. */
   className?: string;
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>;
 }
 export declare const Section: ({ as, children, className, ref, ...props }: SectionProps) => JSX.Element;

package/dist/components/Tag/Tag.js

@@ -6,7 +6,7 @@ const Tag = ({ as, children, className, href, ref, size, ...props }) => {
 	const element = as ?? (href ? "a" : "span");
 	const componentProps = {
 		className: clsx("coop-tag", !hasUserBg(className) && "bg-tint-grey", className),
-		"data-size": size?.length ? size : void 0,
+		"data-size": size ?? void 0,
 		href,
 		...props
 	};

package/dist/components/TextInput/TextInput.js

@@ -9,7 +9,7 @@ const TextInput = ({ className, disabled, error = false, fit = false, id, name,
 		className: clsx("coop-text-input", className),
 		"data-error": error || void 0,
 		"data-fit": fit || void 0,
-		"data-size": size?.length ? size : void 0,
+		"data-size": size ?? void 0,
 		disabled,
 		id: id ?? field?.id,
 		name,

package/dist/components/Wrapper/Wrapper.d.ts

@@ -6,11 +6,11 @@ export interface WrapperProps extends HTMLAttributes<HTMLDivElement> {
    * Default: `<div>`
    */
   as?: React.FC<any> | string;
-  /** **(Optional)** Content inside the component. */
+  /** Content inside the component. */
   children?: ReactNode;
-  /** **(Optional)** Specify additional CSS classes. */
+  /** Specify additional CSS classes. */
   className?: string;
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>;
 }
 export declare const Wrapper: ({ as, children, className, ref, ...props }: WrapperProps) => JSX.Element;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { AlertBanner, AlertBannerHeading, AlertBannerProps } from "./components/AlertBanner/AlertBanner.js";
 import { Image, ImageProps } from "./components/Image/Image.js";
-import { Author, AuthorProps } from "./components/Author/Author.js";
+import { Author, AuthorImageProps, AuthorMetaProps, AuthorProps } from "./components/Author/Author.js";
 import { Box, BoxProps } from "./components/Box/Box.js";
 import "./components/Box/index.js";
 import { Button, ButtonProps } from "./components/Button/Button.js";
@@ -38,4 +38,4 @@ import { Textarea, TextareaProps } from "./components/Textarea/Textarea.js";
 import { ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt, ValidationSummaryProps } from "./components/ValidationSummary/ValidationSummary.js";
 import { Wrapper, WrapperProps } from "./components/Wrapper/Wrapper.js";
 import "./components/Wrapper/index.js";
-export { AlertBanner, AlertBannerHeading, AlertBannerProps, Author, AuthorProps, Box, BoxProps, Button, ButtonProps, Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture, CardProps, Checkbox, CheckboxProps, Combobox, ComboboxControlsProps, ComboboxInputProps, ComboboxOptionsProps, ComboboxProps, DatePicker, DatePickerProps, type DateType, type DateTypeStr, Dialog, DialogBody, DialogHeader, DialogProps, Expandable, ExpandableContent, ExpandableProps, ExpandableSummary, Field, FieldError, FieldHint, FieldLabel, Fieldset, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend, FieldsetProps, Flourish, FlourishProps, Form, FormProps, Image, ImageProps, LoadingSpinner, LoadingSpinnerProps, Logo, LogoProps, PasswordInput, PasswordInputProps, Picture, PictureProps, Pill, PillBadge, PillProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverProps, PopoverTrigger, Radio, RadioProps, RootSVG, Searchbox, SearchboxButton, SearchboxInput, SearchboxProps, Section, SectionProps, Select, SelectOption, SelectOptionGroup, SelectProps, Signpost, SignpostProps, SkipNav, SkipNavProps, Squircle, SquircleProps, SquircleSvgProps, Tag, TagProps, TextInput, TextInputProps, Textarea, TextareaProps, ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt, ValidationSummaryProps, Wrapper, WrapperProps };
+export { AlertBanner, AlertBannerHeading, AlertBannerProps, Author, AuthorImageProps, AuthorMetaProps, AuthorProps, Box, BoxProps, Button, ButtonProps, Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture, CardProps, Checkbox, CheckboxProps, Combobox, ComboboxControlsProps, ComboboxInputProps, ComboboxOptionsProps, ComboboxProps, DatePicker, DatePickerProps, type DateType, type DateTypeStr, Dialog, DialogBody, DialogHeader, DialogProps, Expandable, ExpandableContent, ExpandableProps, ExpandableSummary, Field, FieldError, FieldHint, FieldLabel, Fieldset, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend, FieldsetProps, Flourish, FlourishProps, Form, FormProps, Image, ImageProps, LoadingSpinner, LoadingSpinnerProps, Logo, LogoProps, PasswordInput, PasswordInputProps, Picture, PictureProps, Pill, PillBadge, PillProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverProps, PopoverTrigger, Radio, RadioProps, RootSVG, Searchbox, SearchboxButton, SearchboxInput, SearchboxProps, Section, SectionProps, Select, SelectOption, SelectOptionGroup, SelectProps, Signpost, SignpostProps, SkipNav, SkipNavProps, Squircle, SquircleProps, SquircleSvgProps, Tag, TagProps, TextInput, TextInputProps, Textarea, TextareaProps, ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt, ValidationSummaryProps, Wrapper, WrapperProps };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "1.26.0",
+  "version": "1.27.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -116,5 +116,5 @@
     "merge-refs": "^2.0.0",
     "react-day-picker": "^10.0.1"
   },
-  "gitHead": "3835a0b5cd0562f01905240d8df20d4b042323db"
+  "gitHead": "be63994a207321f5f4f86ca4c8fd0c88c037be35"
 }

package/src/components/Author/Author.tsx

@@ -5,61 +5,86 @@ import clsx from "clsx"
 import { Image, ImageProps } from "@/components/Image"
 
 export interface AuthorProps extends HTMLAttributes<HTMLDivElement> {
-  /** Specify the Author name. */
-  author?: string
+  /** Content inside the component.
+   *
+   * This should be a set of `<Author.Image>` and `<Author.Meta>`. */
+  children?: React.ReactNode
   /** Specify additional CSS classes. */
   className?: string
+  /** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLDivElement>
+  /** Specify the component size. */
+  size?: "sm" | "md"
+}
+
+export interface AuthorMetaProps extends HTMLAttributes<HTMLDivElement> {
   /** Specify the date.
    *
    * Recommended format `dd mmmm yyyy` eg: 1 January 2000.  */
   date?: string
   /** Specify the text that will prefix the date, e.g. "Updated". */
   datePrefix?: string
-  /** Specify properties of the Author Image. */
-  image?: ImageProps
-  /** Specify a custom React ref for this component. */
-  ref?: Ref<HTMLDivElement>
-  /** Specify the component size. */
-  size?: "sm" | "md"
+  /** Specify the Author name. */
+  name?: string
+}
+export interface AuthorImageProps extends Partial<ImageProps> {
+  alt?: string
+  src?: string
 }
 
-const Author = ({
-  author = "Co-op team",
-  className,
-  date,
-  datePrefix = "",
-  image = {
-    alt: "",
-    src: "https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/coop-logo-inverted.svg",
-  },
-  ref,
-  size,
+const Author = ({ children, className, ref, size, ...props }: AuthorProps): JSX.Element => {
+  const componentProps = {
+    className: clsx("coop-author", className),
+    "data-size": size ?? undefined,
+    ...props,
+  }
+  return (
+    <div {...componentProps} ref={ref}>
+      {children}
+    </div>
+  )
+}
+
+const COOP_LOGO_SRC =
+  "https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/coop-logo-inverted.svg"
+
+const AuthorImage = ({
+  alt = "",
+  src = COOP_LOGO_SRC,
   ...props
-}: AuthorProps): JSX.Element => {
-  const imageProps: ImageProps = {
+}: AuthorImageProps): JSX.Element => {
+  const componentProps = {
+    alt,
+    src,
     width: "56px",
-    ...image,
+    ...props,
   }
+  return <Image {...componentProps} />
+}
 
+const AuthorMeta = ({
+  date,
+  datePrefix,
+  name = "Co-op team",
+  ...props
+}: AuthorMetaProps): JSX.Element => {
   const componentProps = {
-    className: clsx("coop-author", className),
-    "data-size": size?.length ? size : undefined,
+    name,
     ...props,
   }
   return (
-    <div {...componentProps} ref={ref}>
-      {image && <Image {...imageProps} />}
-      <div className="coop-author--content">
-        <span>
-          <span>{datePrefix ? datePrefix + " " : ""}</span>
-          <span className="coop-author--date">{date}</span>
-        </span>
-        <span>by {author}</span>
-      </div>
+    <div className="coop-author--content" {...componentProps}>
+      <span>
+        {datePrefix && <span>{datePrefix + " "}</span>}
+        <span className="coop-author--date">{date}</span>
+      </span>
+      <span>by {name}</span>
     </div>
   )
 }
 
+Author.Image = AuthorImage
+Author.Meta = AuthorMeta
 Author.slot = { name: "Author" }
 
 export default Author

package/src/components/Button/Button.tsx

@@ -6,6 +6,7 @@ import clsx from "clsx"
 import React, { useCallback, useState } from "react"
 
 import { LoadingSpinner } from "@/components/LoadingSpinner"
+import { StandardSizes } from "@/types"
 import { hasUserBg } from "@/utils"
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -34,7 +35,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLElement>
   /** Specify the component size. */
-  size?: "sm" | "md" | "lg"
+  size?: StandardSizes
   /** Specify the component variant. */
   variant?: "solid" | "ghost" | "text"
 }

package/src/components/Combobox/Combobox.tsx

@@ -25,6 +25,7 @@ import { useField } from "@/components/Field/Field.context"
 import { ChevronDownIcon } from "@/components/icons"
 import { TextInput, TextInputProps } from "@/components/TextInput"
 import { useSlots } from "@/hooks"
+import { StandardSizes } from "@/types"
 import { getSlotProp } from "@/utils"
 
 export interface ComboboxProps extends Omit<
@@ -101,7 +102,7 @@ export interface ComboboxProps extends Omit<
   /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>
   /** Specify the component size. */
-  size?: "sm" | "md" | "lg"
+  size?: StandardSizes
 }
 
 export interface ComboboxControlsProps extends HTMLAttributes<HTMLDivElement> {

package/src/components/Pill/Pill.tsx

@@ -47,7 +47,7 @@ const Pill = ({ as, children, className, href, ref, size, ...props }: PillProps)
 
   const componentProps = {
     className: clsx("coop-pill", !hasUserBg(className) && "bg-tint-grey", className),
-    "data-size": size?.length ? size : undefined,
+    "data-size": size ?? undefined,
     href,
     ...props,
   }

package/src/components/Section/Section.tsx

@@ -10,11 +10,11 @@ export interface SectionProps extends HTMLAttributes<HTMLDivElement> {
    */
   // oxlint-disable-next-line typescript/no-explicit-any
   as?: React.FC<any> | string
-  /** **(Optional)** Content inside the component. */
+  /** Content inside the component. */
   children?: ReactNode
-  /** **(Optional)** Specify additional CSS classes. */
+  /** Specify additional CSS classes. */
   className?: string
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>
 }
 

package/src/components/Tag/Tag.tsx

@@ -29,7 +29,7 @@ const Tag = ({ as, children, className, href, ref, size, ...props }: TagProps):
 
   const componentProps = {
     className: clsx("coop-tag", !hasUserBg(className) && "bg-tint-grey", className),
-    "data-size": size?.length ? size : undefined,
+    "data-size": size ?? undefined,
     href,
     ...props,
   }

package/src/components/TextInput/TextInput.tsx

@@ -80,7 +80,7 @@ const TextInput = ({
     className: clsx("coop-text-input", className),
     "data-error": error || undefined,
     "data-fit": fit || undefined,
-    "data-size": size?.length ? size : undefined,
+    "data-size": size ?? undefined,
     disabled,
     id: id ?? field?.id,
     name,

package/src/components/Wrapper/Wrapper.tsx

@@ -10,11 +10,11 @@ export interface WrapperProps extends HTMLAttributes<HTMLDivElement> {
    */
   // oxlint-disable-next-line typescript/no-explicit-any
   as?: React.FC<any> | string
-  /** **(Optional)** Content inside the component. */
+  /** Content inside the component. */
   children?: ReactNode
-  /** **(Optional)** Specify additional CSS classes. */
+  /** Specify additional CSS classes. */
   className?: string
-  /** **(Optional)** Specify a custom React ref for this component. */
+  /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>
 }