@coopdigital/react 1.26.1 → 1.27.1

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 = {
-		width: "56px",
-		...image
-	};
+const Author = ({ children, className, ref, size, ...props }) => {
 	const componentProps = {
 		className: clsx("coop-author", className),
 		"data-size": size ?? void 0,
 		...props
 	};
-	return /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsx("div", {
 		...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
+	});
+};
+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",
+		...props
+	};
+	return /* @__PURE__ */ jsx(Image, { ...componentProps });
+};
+const AuthorMeta = ({ date, datePrefix, name = "Co-op team", ...props }) => {
+	const componentProps = {
+		name,
+		...props
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "coop-author--content",
+		...componentProps,
+		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/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.1",
+  "version": "1.27.1",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -69,11 +69,11 @@
   "devDependencies": {
     "@axe-core/playwright": "^4.13.0",
     "@playwright/test": "^1.63.0",
-    "@storybook/addon-a11y": "^10.6.0",
-    "@storybook/addon-docs": "^10.6.0",
-    "@storybook/addon-links": "^10.6.0",
-    "@storybook/addon-onboarding": "^10.6.0",
-    "@storybook/react-vite": "^10.6.0",
+    "@storybook/addon-a11y": "^10.6.1",
+    "@storybook/addon-docs": "^10.6.1",
+    "@storybook/addon-links": "^10.6.1",
+    "@storybook/addon-onboarding": "^10.6.1",
+    "@storybook/react-vite": "^10.6.1",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
     "@types/react": "^19.3.0",
@@ -83,7 +83,7 @@
     "react-dom": "^19.3.0",
     "resize-observer-polyfill": "^1.5.1",
     "serve": "^14.2.6",
-    "storybook": "^10.6.0",
+    "storybook": "^10.6.1",
     "storybook-addon-tag-badges": "^3.1.0"
   },
   "peerDependencies": {
@@ -114,7 +114,7 @@
     "downshift": "^9.4.0",
     "match-sorter": "^8.3.0",
     "merge-refs": "^2.0.0",
-    "react-day-picker": "^10.0.1"
+    "react-day-picker": "^10.0.2"
   },
-  "gitHead": "d973a1436fe2245a6af205621b69762c3d7f7d09"
+  "gitHead": "9e3d7cf5e1e32c946117d5be84ed2a11d022f2f1"
 }

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 ?? 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