@coopdigital/react 1.0.2 → 1.1.1

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

@@ -7,12 +7,14 @@ export interface AuthorProps extends HTMLAttributes<HTMLDivElement> {
     className?: string;
     /** **(Optional)** Specify the date. Refer to Experience Library guidance on date formats. We advise using the following format (dd mmmm yyyy) eg: 1 January 2000.  */
     date?: string;
-    /** **(Optional)** Specify the text that will prefix the date, e.g. "Published". */
+    /** **(Optional)** Specify the text that will prefix the date, e.g. "Updated". */
     datePrefix?: string;
     /** **(Optional)** Specify properties of the Author Image. */
     image?: ImageProps;
     /** **(Optional)** Specify a custom React ref for this component. */
     ref?: Ref<HTMLDivElement>;
+    /** **(Optional)** Specify the Author size. */
+    size?: "sm" | "md";
 }
-export declare const Author: ({ author, className, date, datePrefix, image, ref, ...props }: AuthorProps) => JSX.Element;
+export declare const Author: ({ author, className, date, datePrefix, image, ref, size, ...props }: AuthorProps) => JSX.Element;
 export default Author;

package/dist/components/Author/Author.js

@@ -5,16 +5,17 @@ import { Image } from '../Image/Image.js';
 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, ...props }) => {
+}, ref, size = "md", ...props }) => {
     const imageProps = {
         width: "56px",
         ...image,
     };
     const componentProps = {
         className: clsx("coop-author", className),
+        "data-size": size.length && size !== "md" ? size : undefined,
         ...props,
     };
-    return (jsxs("div", { ...componentProps, ref: ref, children: [image && jsx(Image, { ...imageProps }), jsxs("div", { className: "coop-author--content", children: [jsxs("span", { children: [datePrefix ? datePrefix + " " : "", date] }), jsxs("span", { children: ["by ", author] })] })] }));
+    return (jsxs("div", { ...componentProps, ref: ref, children: [image && jsx(Image, { ...imageProps }), jsxs("div", { className: "coop-author--content", children: [jsxs("span", { children: [jsx("span", { children: datePrefix ? datePrefix + " " : "" }), jsx("span", { className: "coop-author--date", children: date })] }), jsxs("span", { children: ["by ", author] })] })] }));
 };
 
 export { Author, Author as default };

package/dist/components/Pill/Pill.d.ts

@@ -1,6 +1,6 @@
 import type { ForwardRefExoticComponent, HTMLAttributes, JSX, Ref } from "react";
 import React from "react";
-import { StandardSizes } from "src/types";
+import { StandardSizes } from "../../types";
 export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
     /** **(Optional)** Specify a custom element to override default `a` or `span`. */
     as?: React.FC<any> | ForwardRefExoticComponent<any> | string;

package/dist/hooks/useSlots.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactNodeWithConfig } from "src/types";
+import { ReactNodeWithConfig } from "../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: ReactNodeWithConfig): string | false;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "1.0.2",
+  "version": "1.1.1",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -59,11 +59,11 @@
   "description": "React components for the Experience Library design system",
   "devDependencies": {
     "@axe-core/playwright": "^4.11.1",
-    "@playwright/test": "^1.58.2",
-    "@storybook/addon-a11y": "^10.3.3",
-    "@storybook/addon-docs": "^10.3.3",
-    "@storybook/addon-onboarding": "^10.3.3",
-    "@storybook/react-vite": "^10.3.3",
+    "@playwright/test": "^1.59.1",
+    "@storybook/addon-a11y": "^10.3.4",
+    "@storybook/addon-docs": "^10.3.4",
+    "@storybook/addon-onboarding": "^10.3.4",
+    "@storybook/react-vite": "^10.3.4",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.14",
@@ -72,7 +72,7 @@
     "react-dom": "^19.2.4",
     "resize-observer-polyfill": "^1.5.1",
     "serve": "^14.2.6",
-    "storybook": "^10.3.3",
+    "storybook": "^10.3.4",
     "storybook-addon-tag-badges": "^3.1.0"
   },
   "peerDependencies": {
@@ -83,10 +83,10 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^1.0.1",
+    "@coopdigital/styles": "^1.1.1",
     "@radix-ui/react-popover": "^1.1.15",
     "clsx": "^2.1.1",
     "react-day-picker": "^9.12.0"
   },
-  "gitHead": "056a9f8f720fb90e1dfe74720d81cc03703a88b5"
+  "gitHead": "9a04874735f6af3ec583dd6960c7d3ef5446965f"
 }

package/src/components/Author/Author.tsx

@@ -11,12 +11,14 @@ export interface AuthorProps extends HTMLAttributes<HTMLDivElement> {
   className?: string
   /** **(Optional)** Specify the date. Refer to Experience Library guidance on date formats. We advise using the following format (dd mmmm yyyy) eg: 1 January 2000.  */
   date?: string
-  /** **(Optional)** Specify the text that will prefix the date, e.g. "Published". */
+  /** **(Optional)** Specify the text that will prefix the date, e.g. "Updated". */
   datePrefix?: string
   /** **(Optional)** Specify properties of the Author Image. */
   image?: ImageProps
   /** **(Optional)** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>
+  /** **(Optional)** Specify the Author size. */
+  size?: "sm" | "md"
 }
 
 export const Author = ({
@@ -29,6 +31,7 @@ export const Author = ({
     src: "https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/coop-logo-inverted.svg",
   },
   ref,
+  size = "md",
   ...props
 }: AuthorProps): JSX.Element => {
   const imageProps: ImageProps = {
@@ -38,6 +41,7 @@ export const Author = ({
 
   const componentProps = {
     className: clsx("coop-author", className),
+    "data-size": size.length && size !== "md" ? size : undefined,
     ...props,
   }
   return (
@@ -45,8 +49,8 @@ export const Author = ({
       {image && <Image {...imageProps} />}
       <div className="coop-author--content">
         <span>
-          {datePrefix ? datePrefix + " " : ""}
-          {date}
+          <span>{datePrefix ? datePrefix + " " : ""}</span>
+          <span className="coop-author--date">{date}</span>
         </span>
         <span>by {author}</span>
       </div>

package/src/components/Pill/Pill.tsx

@@ -2,9 +2,9 @@ import type { ForwardRefExoticComponent, HTMLAttributes, JSX, Ref } from "react"
 
 import clsx from "clsx"
 import React from "react"
-import { StandardSizes } from "src/types"
 
 import { useSlots } from "../../hooks/useSlots"
+import { StandardSizes } from "../../types"
 import { hasUserBg } from "../../utils"
 
 export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {

package/src/hooks/useSlots.ts

@@ -1,5 +1,6 @@
 import React from "react"
-import { ReactNodeWithConfig } from "src/types"
+
+import { ReactNodeWithConfig } from "../types"
 
 type Slots<T> = Record<keyof T, React.ReactNode>