@coopdigital/react 1.0.1 → 1.1.0

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/Squircle/Squircle.js

@@ -2,10 +2,10 @@ import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { hasUserBg } from '../../utils/index.js';
 
-const Squircle = ({ children, className, ref, size = "lg", ...props }) => {
+const Squircle = ({ children, className, ref, size = "md", ...props }) => {
     const componentProps = {
         className: clsx("coop-squircle", !hasUserBg(className) && "bg-offer", className),
-        "data-size": size.length && size !== "lg" ? size : undefined,
+        "data-size": size.length && size !== "md" ? size : undefined,
         ...props,
     };
     return (jsx("figure", { ...componentProps, ref: ref, children: jsx("figcaption", { children: children }) }));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -60,10 +60,10 @@
   "devDependencies": {
     "@axe-core/playwright": "^4.11.1",
     "@playwright/test": "^1.58.2",
-    "@storybook/addon-a11y": "^10.3.1",
-    "@storybook/addon-docs": "^10.3.1",
-    "@storybook/addon-onboarding": "^10.3.1",
-    "@storybook/react-vite": "^10.3.1",
+    "@storybook/addon-a11y": "^10.3.3",
+    "@storybook/addon-docs": "^10.3.3",
+    "@storybook/addon-onboarding": "^10.3.3",
+    "@storybook/react-vite": "^10.3.3",
     "@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.1",
+    "storybook": "^10.3.3",
     "storybook-addon-tag-badges": "^3.1.0"
   },
   "peerDependencies": {
@@ -83,10 +83,10 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^1.0.0",
+    "@coopdigital/styles": "^1.1.0",
     "@radix-ui/react-popover": "^1.1.15",
     "clsx": "^2.1.1",
     "react-day-picker": "^9.12.0"
   },
-  "gitHead": "77ac845f6c5c2da659feaeabbd40f0bf717892f5"
+  "gitHead": "2a6a622f990720478906f047340836affc49cd32"
 }

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/Squircle/Squircle.tsx

@@ -18,12 +18,12 @@ export const Squircle = ({
   children,
   className,
   ref,
-  size = "lg",
+  size = "md",
   ...props
 }: SquircleProps): JSX.Element => {
   const componentProps = {
     className: clsx("coop-squircle", !hasUserBg(className) && "bg-offer", className),
-    "data-size": size.length && size !== "lg" ? size : undefined,
+    "data-size": size.length && size !== "md" ? size : undefined,
     ...props,
   }