@coopdigital/react 0.10.0 → 0.12.0

package/dist/components/AlertBanner/AlertBanner.d.ts

@@ -1,5 +1,5 @@
-import type { JSX, ReactNode } from "react";
-export interface AlertBannerProps {
+import type { HTMLAttributes, JSX, ReactNode } from "react";
+export interface AlertBannerProps extends HTMLAttributes<HTMLDivElement> {
     /** **(Optional)** Specifies a custom aria-label. */
     ariaLabel?: string;
     /** **(Optional)** Represents the content inside the AlertBanner component. It can be any valid JSX or string. */
@@ -21,5 +21,5 @@ export interface AlertBannerProps {
  * <p>Only use alert notifications when absolutely necessary. Using them too often could make the problem worse.<p/>
  *
  */
-export declare const AlertBanner: ({ ariaLabel, children, className, title, variant, }: AlertBannerProps) => JSX.Element;
+export declare const AlertBanner: ({ ariaLabel, children, className, title, variant, ...props }: AlertBannerProps) => JSX.Element;
 export default AlertBanner;

package/dist/components/AlertBanner/AlertBanner.js

@@ -1,3 +1,4 @@
+import { __rest } from '../../node_modules/tslib/tslib.es6.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 /**
@@ -10,12 +11,9 @@ import { jsx, jsxs } from 'react/jsx-runtime';
  * <p>Only use alert notifications when absolutely necessary. Using them too often could make the problem worse.<p/>
  *
  */
-const AlertBanner = ({ ariaLabel, children, className = "", title, variant = "default", }) => {
-    const componentProps = {
-        "aria-label": ariaLabel,
-        className: `coop-alert-banner ${className}`,
-        "data-variant": variant,
-    };
+const AlertBanner = (_a) => {
+    var { ariaLabel, children, className = "", title, variant = "default" } = _a, props = __rest(_a, ["ariaLabel", "children", "className", "title", "variant"]);
+    const componentProps = Object.assign({ "aria-label": ariaLabel, className: `coop-alert-banner ${className}`, "data-variant": variant }, props);
     return (jsx("aside", Object.assign({}, componentProps, { children: jsxs("div", { className: "coop-alert-banner--inner", children: [jsx("h2", { id: "coop-alert-banner--headline", children: title }), children] }) })));
 };
 

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

@@ -0,0 +1,17 @@
+import type { HTMLAttributes, JSX } from "react";
+import { ImageProps } from "../Image";
+export interface AuthorProps extends HTMLAttributes<HTMLDivElement> {
+    /** **(Optional)** Specifies the content author */
+    author?: string;
+    /** **(Optional)** Specifies 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)** Specifies the text that will prefix the date, e.g. "Published" */
+    datePrefix?: string;
+    /** **(Optional)** Specifies the image properties of Author */
+    image?: ImageProps;
+}
+/**
+ * Author is a component that can be used inside any article or Card component to communicate respective author and date of publication.
+ */
+export declare const Author: ({ author, date, datePrefix, image, ...props }: AuthorProps) => JSX.Element;
+export default Author;

package/dist/components/Author/Author.js

@@ -0,0 +1,17 @@
+import { __rest } from '../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Image } from '../Image/Image.js';
+
+/**
+ * Author is a component that can be used inside any article or Card component to communicate respective author and date of publication.
+ */
+const Author = (_a) => {
+    var { author = "Co-op team", date, datePrefix = "", image = {
+        alt: "",
+        src: "https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/coop-logo-inverted.svg",
+    } } = _a, props = __rest(_a, ["author", "date", "datePrefix", "image"]);
+    const imageProps = Object.assign({ width: "56px" }, image);
+    return (jsxs("div", Object.assign({ className: "coop-author" }, props, { children: [image && jsx(Image, Object.assign({}, imageProps)), jsxs("div", { className: "coop-author--content", children: [jsxs("span", { children: [datePrefix ? datePrefix + " " : "", date] }), jsxs("span", { children: ["by ", author] })] })] })));
+};
+
+export { Author, Author as default };

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

@@ -0,0 +1,4 @@
+import Author from "./Author";
+export default Author;
+export { Author };
+export * from "./Author";

package/dist/components/Card/Card.d.ts

@@ -18,7 +18,7 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
     headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6";
     /** **(Optional)** Specifies the URL that the Card component will link to when clicked. */
     href?: string;
-    /** Specifies the image URL and alt text of the Card */
+    /** Specifies the image properties of the Card */
     image: ImageProps;
     /** **(Optional)** Specifies the position of the image in the Card */
     imagePosition?: "left" | "right";

package/dist/components/Card/Card.js

@@ -23,7 +23,7 @@ const Card = (_a) => {
     const linkElement = getCardLinkElement(as, href);
     const imageProps = Object.assign({ crop: "wide" }, image);
     const componentProps = Object.assign({ className: "coop-card", "data-badge-pos": badgePosition, "data-bg": background, "data-image-pos": imagePosition, "data-label-bg": labelBackground, "data-layout": layout }, props);
-    return (jsxs("article", Object.assign({}, componentProps, { children: [image && jsx(Image, Object.assign({}, imageProps)), badge && jsx("div", { className: "coop-card--badge", children: badge }), jsxs("div", { className: "coop-card--inner", children: [jsxs("div", { className: "coop-card--content", children: [label && jsx("span", { className: "coop-card--label", children: label }), React.createElement(linkElement.element, linkElement.props, React.createElement(headingLevel, {}, title)), children] }), chevron && (jsx("span", { "aria-hidden": "true", className: "coop-card--icon", role: "presentation", children: jsx("svg", { viewBox: "0 0 16 29", children: jsx("path", { d: "M2 28.1a1.6 1.6 0 0 1-1.2-2.7l11-10.9-11-11A1.6 1.6 0 1 1 3 1.5l12 12a1.6 1.6 0 0 1 0 2.2l-12 12c-.3.4-.7.5-1 .5z" }) }) }))] })] })));
+    return (jsxs("article", Object.assign({}, componentProps, { children: [image && jsx(Image, Object.assign({}, imageProps)), badge && jsx("div", { className: "coop-card--badge", children: badge }), jsxs("div", { className: "coop-card--inner", children: [jsxs("div", { className: "coop-card--content", children: [label && jsx("span", { className: "coop-card--label", children: label }), React.createElement(linkElement.element, linkElement.props, React.createElement(headingLevel, { className: "coop-card--heading" }, title)), children] }), chevron && (jsx("span", { "aria-hidden": "true", className: "coop-card--icon", role: "presentation", children: jsx("svg", { viewBox: "0 0 16 29", children: jsx("path", { d: "M2 28.1a1.6 1.6 0 0 1-1.2-2.7l11-10.9-11-11A1.6 1.6 0 1 1 3 1.5l12 12a1.6 1.6 0 0 1 0 2.2l-12 12c-.3.4-.7.5-1 .5z" }) }) }))] })] })));
 };
 
 export { Card, Card as default };

package/dist/components/Image/Image.d.ts

@@ -1,5 +1,5 @@
-import type { JSX } from "react";
-export interface ImageProps {
+import type { HTMLAttributes, JSX } from "react";
+export interface ImageProps extends HTMLAttributes<HTMLImageElement> {
     /** Specifies text that can replace the Image in the page */
     alt: string;
     /** **(Optional)** Specifies the Image crop mode */
@@ -14,5 +14,5 @@ export interface ImageProps {
 /**
  * A wrapper around the image HTML tag, to help implement best practices like lazy loading, and assist with cropping and sizing images.
  */
-export declare const Image: ({ alt, crop, height, src, width }: ImageProps) => JSX.Element;
+export declare const Image: ({ alt, crop, height, src, width, ...props }: ImageProps) => JSX.Element;
 export default Image;

package/dist/components/Image/Image.js

@@ -1,3 +1,4 @@
+import { __rest } from '../../node_modules/tslib/tslib.es6.js';
 import { jsx } from 'react/jsx-runtime';
 
 const getContentfulParams = (src, width, height) => {
@@ -23,7 +24,8 @@ const getContentfulParams = (src, width, height) => {
 /**
  * A wrapper around the image HTML tag, to help implement best practices like lazy loading, and assist with cropping and sizing images.
  */
-const Image = ({ alt, crop, height, src, width = "640" }) => {
+const Image = (_a) => {
+    var { alt, crop, height, src, width = "640" } = _a, props = __rest(_a, ["alt", "crop", "height", "src", "width"]);
     let params = { height, src, width };
     if (src.includes("images.ctfassets.net")) {
         params = getContentfulParams(src, width, height);
@@ -33,7 +35,7 @@ const Image = ({ alt, crop, height, src, width = "640" }) => {
         height: params.height,
         width: params.width,
     };
-    return (jsx("picture", { children: jsx("img", Object.assign({ alt: alt, loading: "lazy", src: params.src }, dimensions)) }));
+    return (jsx("picture", { children: jsx("img", Object.assign({ alt: alt, loading: "lazy", src: params.src }, dimensions, props)) }));
 };
 
 export { Image, Image as default };

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

@@ -1,6 +1,6 @@
-import type { AnchorHTMLAttributes, ForwardRefExoticComponent, JSX } from "react";
+import type { AnchorHTMLAttributes, ForwardRefExoticComponent, HTMLAttributes, JSX } from "react";
 import React from "react";
-export interface PillProps {
+export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
     /** **(Optional)** Specifies a custom aria-label. */
     ariaLabel?: string;
     /** **(Optional)** Specifies the custom element to override default `a` or `span`. */
@@ -23,5 +23,5 @@ export interface PillProps {
 /**
  * The Pill component is a small, rounded label used to link and highlight information such as categories or articles. It can be customised with different content and styles to suit various use cases.
  */
-export declare const Pill: ({ ariaLabel, as, badge, badgeColor, children, className, href, pillColor, size, }: PillProps) => JSX.Element;
+export declare const Pill: ({ ariaLabel, as, badge, badgeColor, children, className, href, pillColor, size, ...props }: PillProps) => JSX.Element;
 export default Pill;

package/dist/components/Pill/Pill.js

@@ -1,22 +1,16 @@
+import { __rest } from '../../node_modules/tslib/tslib.es6.js';
 import React from 'react';
 
 /**
  * The Pill component is a small, rounded label used to link and highlight information such as categories or articles. It can be customised with different content and styles to suit various use cases.
  */
-const Pill = ({ ariaLabel, as, badge, badgeColor = "red", children, className = "", href, pillColor = "blue", size = "md", }) => {
+const Pill = (_a) => {
+    var { ariaLabel, as, badge, badgeColor = "red", children, className = "", href, pillColor = "blue", size = "md" } = _a, props = __rest(_a, ["ariaLabel", "as", "badge", "badgeColor", "children", "className", "href", "pillColor", "size"]);
     let element = href ? "a" : "span";
     if (as) {
         element = as;
     }
-    const componentProps = {
-        "aria-label": ariaLabel,
-        className: `coop-pill ${className}`,
-        "data-badge": (badge === null || badge === void 0 ? void 0 : badge.length) ? badge : undefined,
-        "data-badge-color": badgeColor,
-        "data-pill-color": pillColor,
-        "data-size": size.length && size != "md" ? size : undefined,
-        href,
-    };
+    const componentProps = Object.assign({ "aria-label": ariaLabel, className: `coop-pill ${className}`, "data-badge": (badge === null || badge === void 0 ? void 0 : badge.length) ? badge : undefined, "data-badge-color": badgeColor, "data-pill-color": pillColor, "data-size": size.length && size != "md" ? size : undefined, href }, props);
     return React.createElement(element, Object.assign({}, componentProps), children);
 };
 

package/dist/components/RootSVG/RootSVG.d.ts

@@ -0,0 +1 @@
+export default function RootSVG(): import("react/jsx-runtime").JSX.Element;

package/dist/components/RootSVG/RootSVG.js

@@ -0,0 +1,7 @@
+import { jsx } from 'react/jsx-runtime';
+
+function RootSVG() {
+    return (jsx("svg", { height: "0", width: "0", xmlns: "http://www.w3.org/2000/svg", children: jsx("defs", { children: jsx("clipPath", { clipPathUnits: "objectBoundingBox", id: "squircle", children: jsx("path", { d: "M0,0.5 C0,0.165,0.165,0,0.5,0 S1,0.165,1,0.5 S0.835,1,0.5,1 S0,0.835,0,0.5" }) }) }) }));
+}
+
+export { RootSVG as default };

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

@@ -0,0 +1,4 @@
+import RootSVG from "./RootSVG";
+export default RootSVG;
+export { RootSVG };
+export * from "./RootSVG";

package/dist/components/Signpost/Signpost.d.ts

@@ -0,0 +1,20 @@
+import type { AnchorHTMLAttributes, ForwardRefExoticComponent, JSX } from "react";
+import React from "react";
+import { ImageProps } from "../Image";
+export interface SignpostProps {
+    /** **(Optional)** Specifies the custom element to override default `a` */
+    as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string;
+    /** Represents the title inside the Signpost component. It can be any valid JSX or string. */
+    children: React.ReactNode;
+    /** **(Optional)** Specifies the heading level of the signpost's title. */
+    headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6";
+    /** Specifies the URL that the Signpost component will link to when clicked. */
+    href: string;
+    /** **(Optional)** Specifies the image URL and alt text of the Signpost */
+    image?: ImageProps;
+}
+/**
+ * Signposts allow you to create links to permanent content you think people are looking for.
+ */
+export declare const Signpost: ({ as, children, headingLevel, href, image, }: SignpostProps) => JSX.Element;
+export default Signpost;

package/dist/components/Signpost/Signpost.js

@@ -0,0 +1,16 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Image } from '../Image/Image.js';
+
+/**
+ * Signposts allow you to create links to permanent content you think people are looking for.
+ */
+const Signpost = ({ as, children, headingLevel = "h3", href, image, }) => {
+    let element = "a";
+    if (as) {
+        element = as;
+    }
+    return (jsxs("div", { className: "coop-signpost", children: [image && jsx(Image, Object.assign({ crop: "wide" }, image)), React.createElement(element, { href }, jsxs("div", { className: "coop-signpost--content", children: [React.createElement(headingLevel, { className: "coop-signpost--heading" }, children), jsx("span", { "aria-hidden": "true", className: "coop-signpost--icon", role: "presentation", children: jsx("svg", { viewBox: "0 0 16 29", children: jsx("path", { d: "M2 28.1a1.6 1.6 0 0 1-1.2-2.7l11-10.9-11-11A1.6 1.6 0 1 1 3 1.5l12 12a1.6 1.6 0 0 1 0 2.2l-12 12c-.3.4-.7.5-1 .5z" }) }) })] }))] }));
+};
+
+export { Signpost, Signpost as default };

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

@@ -0,0 +1,4 @@
+import Signpost from "./Signpost";
+export default Signpost;
+export { Signpost };
+export * from "./Signpost";

package/dist/components/SkipNav/SkipNav.d.ts

@@ -1,9 +1,9 @@
-import type { JSX } from "react";
+import type { AnchorHTMLAttributes, JSX } from "react";
 interface SkipNavLink {
     href: string;
     title: string;
 }
-export interface SkipNavProps {
+export interface SkipNavProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     /** **(Optional)** Specifies a custom aria-label. */
     ariaLabel?: string;
     /** **(Optional)** Receives any className to be applied to Skip Nav component. */
@@ -33,5 +33,5 @@ export interface SkipNavProps {
  * - Pressing enter will take the user to the correct part of the page and apply the focus ring to the first interactive element in that section.
  * - If the user tabs through the skip navigation without selecting an option the Co‑op logo should be the next element that has the focus ring applied.
  */
-export declare const SkipNav: ({ ariaLabel, className, isVisible, links, }: SkipNavProps) => JSX.Element;
+export declare const SkipNav: ({ ariaLabel, className, isVisible, links, ...props }: SkipNavProps) => JSX.Element;
 export default SkipNav;

package/dist/components/SkipNav/SkipNav.js

@@ -1,3 +1,4 @@
+import { __rest } from '../../node_modules/tslib/tslib.es6.js';
 import { jsx } from 'react/jsx-runtime';
 
 const defaultLinks = [{ href: "#main", title: "Skip to main content" }];
@@ -18,9 +19,10 @@ const defaultLinks = [{ href: "#main", title: "Skip to main content" }];
  * - Pressing enter will take the user to the correct part of the page and apply the focus ring to the first interactive element in that section.
  * - If the user tabs through the skip navigation without selecting an option the Co‑op logo should be the next element that has the focus ring applied.
  */
-const SkipNav = ({ ariaLabel = "", className = "", isVisible = false, links = defaultLinks, }) => {
+const SkipNav = (_a) => {
+    var { ariaLabel = "", className = "", isVisible = false, links = defaultLinks } = _a, props = __rest(_a, ["ariaLabel", "className", "isVisible", "links"]);
     const navLinks = links.length > 0 ? links : defaultLinks;
-    return (jsx("nav", { "aria-label": ariaLabel, className: "coop-skip-nav", children: jsx("ul", { children: navLinks.map((link) => {
+    return (jsx("nav", Object.assign({ "aria-label": ariaLabel, className: "coop-skip-nav" }, props, { children: jsx("ul", { children: navLinks.map((link) => {
                 const linkProps = {
                     className: `${className}`,
                     "data-visible": isVisible,
@@ -28,7 +30,7 @@ const SkipNav = ({ ariaLabel = "", className = "", isVisible = false, links = de
                     title: link.title,
                 };
                 return (jsx("li", { children: jsx("a", Object.assign({}, linkProps, { children: link.title })) }, link.href));
-            }) }) }));
+            }) }) })));
 };
 
 export { SkipNav, SkipNav as default };

package/dist/index.d.ts

@@ -1,6 +1,9 @@
 export * from "./components/AlertBanner";
+export * from "./components/Author";
 export * from "./components/Button";
 export * from "./components/Card";
 export * from "./components/Image";
 export * from "./components/Pill";
+export * from "./components/RootSVG";
+export * from "./components/Signpost";
 export * from "./components/SkipNav";

package/dist/index.js

@@ -1,6 +1,9 @@
 export { AlertBanner } from './components/AlertBanner/AlertBanner.js';
+export { Author } from './components/Author/Author.js';
 export { Button } from './components/Button/Button.js';
 export { Card } from './components/Card/Card.js';
 export { Image } from './components/Image/Image.js';
 export { Pill } from './components/Pill/Pill.js';
+export { default as RootSVG } from './components/RootSVG/RootSVG.js';
+export { Signpost } from './components/Signpost/Signpost.js';
 export { SkipNav } from './components/SkipNav/SkipNav.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -44,28 +44,27 @@
   "description": "",
   "devDependencies": {
     "@axe-core/playwright": "^4.10.1",
-    "@coopdigital/styles": "^0.10.0",
+    "@coopdigital/styles": "^0.11.0",
     "@playwright/test": "^1.51.1",
-    "@storybook/addon-a11y": "^8.6.11",
-    "@storybook/addon-essentials": "^8.6.11",
-    "@storybook/addon-interactions": "^8.6.11",
-    "@storybook/addon-mdx-gfm": "^8.6.11",
-    "@storybook/addon-onboarding": "^8.6.11",
-    "@storybook/blocks": "^8.6.11",
-    "@storybook/manager-api": "^8.6.11",
-    "@storybook/react": "^8.6.11",
-    "@storybook/react-vite": "^8.6.11",
-    "@storybook/test": "^8.6.11",
-    "@storybook/theming": "^8.6.11",
+    "@storybook/addon-a11y": "^8.6.12",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/addon-onboarding": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/manager-api": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-vite": "^8.6.12",
+    "@storybook/test": "^8.6.12",
+    "@storybook/theming": "^8.6.12",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@types/react": "^19.0.12",
     "@types/react-dom": "^19.0.4",
-    "storybook": "^8.6.11"
+    "storybook": "^8.6.12"
   },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
-  "gitHead": "a5c63ef95571bbc32cf93d44b561f7050866dbce"
+  "gitHead": "02effb2492f1d3ee2c0772ee19e6c49bd057dab3"
 }

package/src/components/AlertBanner/AlertBanner.tsx

@@ -1,6 +1,6 @@
-import type { JSX, ReactNode } from "react"
+import type { HTMLAttributes, JSX, ReactNode } from "react"
 
-export interface AlertBannerProps {
+export interface AlertBannerProps extends HTMLAttributes<HTMLDivElement> {
   /** **(Optional)** Specifies a custom aria-label. */
   ariaLabel?: string
   /** **(Optional)** Represents the content inside the AlertBanner component. It can be any valid JSX or string. */
@@ -29,11 +29,13 @@ export const AlertBanner = ({
   className = "",
   title,
   variant = "default",
+  ...props
 }: AlertBannerProps): JSX.Element => {
   const componentProps = {
     "aria-label": ariaLabel,
     className: `coop-alert-banner ${className}`,
     "data-variant": variant,
+    ...props,
   }
   return (
     <aside {...componentProps}>

package/src/components/Author/Author.tsx

@@ -0,0 +1,49 @@
+import type { HTMLAttributes, JSX } from "react"
+
+import { Image, ImageProps } from "../Image"
+
+export interface AuthorProps extends HTMLAttributes<HTMLDivElement> {
+  /** **(Optional)** Specifies the content author */
+  author?: string
+  /** **(Optional)** Specifies 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)** Specifies the text that will prefix the date, e.g. "Published" */
+  datePrefix?: string
+  /** **(Optional)** Specifies the image properties of Author */
+  image?: ImageProps
+}
+
+/**
+ * Author is a component that can be used inside any article or Card component to communicate respective author and date of publication.
+ */
+
+export const Author = ({
+  author = "Co-op team",
+  date,
+  datePrefix = "",
+  image = {
+    alt: "",
+    src: "https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/coop-logo-inverted.svg",
+  },
+  ...props
+}: AuthorProps): JSX.Element => {
+  const imageProps: ImageProps = {
+    width: "56px",
+    ...image,
+  }
+
+  return (
+    <div className="coop-author" {...props}>
+      {image && <Image {...imageProps} />}
+      <div className="coop-author--content">
+        <span>
+          {datePrefix ? datePrefix + " " : ""}
+          {date}
+        </span>
+        <span>by {author}</span>
+      </div>
+    </div>
+  )
+}
+
+export default Author

package/src/components/Author/index.ts

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

package/src/components/Card/Card.tsx

@@ -23,7 +23,7 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
   headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6"
   /** **(Optional)** Specifies the URL that the Card component will link to when clicked. */
   href?: string
-  /** Specifies the image URL and alt text of the Card */
+  /** Specifies the image properties of the Card */
   image: ImageProps
   /** **(Optional)** Specifies the position of the image in the Card */
   imagePosition?: "left" | "right"
@@ -99,7 +99,7 @@ export const Card = ({
           {React.createElement(
             linkElement.element,
             linkElement.props,
-            React.createElement(headingLevel, {}, title)
+            React.createElement(headingLevel, { className: "coop-card--heading" }, title)
           )}
           {children}
         </div>

package/src/components/Image/Image.tsx

@@ -1,6 +1,6 @@
-import type { JSX } from "react"
+import type { HTMLAttributes, JSX } from "react"
 
-export interface ImageProps {
+export interface ImageProps extends HTMLAttributes<HTMLImageElement> {
   /** Specifies text that can replace the Image in the page */
   alt: string
   /** **(Optional)** Specifies the Image crop mode */
@@ -37,7 +37,14 @@ const getContentfulParams = (src: string, width: string, height: string | undefi
 /**
  * A wrapper around the image HTML tag, to help implement best practices like lazy loading, and assist with cropping and sizing images.
  */
-export const Image = ({ alt, crop, height, src, width = "640" }: ImageProps): JSX.Element => {
+export const Image = ({
+  alt,
+  crop,
+  height,
+  src,
+  width = "640",
+  ...props
+}: ImageProps): JSX.Element => {
   let params = { height, src, width }
 
   if (src.includes("images.ctfassets.net")) {
@@ -52,7 +59,7 @@ export const Image = ({ alt, crop, height, src, width = "640" }: ImageProps): JS
 
   return (
     <picture>
-      <img alt={alt} loading="lazy" src={params.src} {...dimensions} />
+      <img alt={alt} loading="lazy" src={params.src} {...dimensions} {...props} />
     </picture>
   )
 }

package/src/components/Pill/Pill.tsx

@@ -1,8 +1,8 @@
-import type { AnchorHTMLAttributes, ForwardRefExoticComponent, JSX } from "react"
+import type { AnchorHTMLAttributes, ForwardRefExoticComponent, HTMLAttributes, JSX } from "react"
 
 import React from "react"
 
-export interface PillProps {
+export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
   /** **(Optional)** Specifies a custom aria-label. */
   ariaLabel?: string
   /** **(Optional)** Specifies the custom element to override default `a` or `span`. */
@@ -37,6 +37,7 @@ export const Pill = ({
   href,
   pillColor = "blue",
   size = "md",
+  ...props
 }: PillProps): JSX.Element => {
   let element: PillProps["as"] = href ? "a" : "span"
 
@@ -52,6 +53,7 @@ export const Pill = ({
     "data-pill-color": pillColor,
     "data-size": size.length && size != "md" ? size : undefined,
     href,
+    ...props,
   }
 
   return React.createElement(element, { ...componentProps }, children)

package/src/components/RootSVG/RootSVG.tsx

@@ -0,0 +1,11 @@
+export default function RootSVG() {
+  return (
+    <svg height="0" width="0" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <clipPath clipPathUnits="objectBoundingBox" id="squircle">
+          <path d="M0,0.5 C0,0.165,0.165,0,0.5,0 S1,0.165,1,0.5 S0.835,1,0.5,1 S0,0.835,0,0.5"></path>
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}

package/src/components/RootSVG/index.ts

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

package/src/components/Signpost/Signpost.tsx

@@ -0,0 +1,56 @@
+import type { AnchorHTMLAttributes, ForwardRefExoticComponent, JSX } from "react"
+
+import React from "react"
+
+import { Image, ImageProps } from "../Image"
+
+export interface SignpostProps {
+  /** **(Optional)** Specifies the custom element to override default `a` */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string
+  /** Represents the title inside the Signpost component. It can be any valid JSX or string. */
+  children: React.ReactNode
+  /** **(Optional)** Specifies the heading level of the signpost's title. */
+  headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6"
+  /** Specifies the URL that the Signpost component will link to when clicked. */
+  href: string
+  /** **(Optional)** Specifies the image URL and alt text of the Signpost */
+  image?: ImageProps
+}
+
+/**
+ * Signposts allow you to create links to permanent content you think people are looking for.
+ */
+
+export const Signpost = ({
+  as,
+  children,
+  headingLevel = "h3",
+  href,
+  image,
+}: SignpostProps): JSX.Element => {
+  let element: SignpostProps["as"] = "a"
+  if (as) {
+    element = as
+  }
+
+  return (
+    <div className="coop-signpost">
+      {image && <Image crop="wide" {...image} />}
+      {React.createElement(
+        element,
+        { href },
+        <div className="coop-signpost--content">
+          {React.createElement(headingLevel, { className: "coop-signpost--heading" }, children)}
+          <span aria-hidden="true" className="coop-signpost--icon" role="presentation">
+            <svg viewBox="0 0 16 29">
+              <path d="M2 28.1a1.6 1.6 0 0 1-1.2-2.7l11-10.9-11-11A1.6 1.6 0 1 1 3 1.5l12 12a1.6 1.6 0 0 1 0 2.2l-12 12c-.3.4-.7.5-1 .5z" />
+            </svg>
+          </span>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Signpost

package/src/components/Signpost/index.ts

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

package/src/components/SkipNav/SkipNav.tsx

@@ -1,11 +1,11 @@
-import type { JSX } from "react"
+import type { AnchorHTMLAttributes, JSX } from "react"
 
 interface SkipNavLink {
   href: string
   title: string
 }
 
-export interface SkipNavProps {
+export interface SkipNavProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   /** **(Optional)** Specifies a custom aria-label. */
   ariaLabel?: string
   /** **(Optional)** Receives any className to be applied to Skip Nav component. */
@@ -43,10 +43,11 @@ export const SkipNav = ({
   className = "",
   isVisible = false,
   links = defaultLinks,
+  ...props
 }: SkipNavProps): JSX.Element => {
   const navLinks = links.length > 0 ? links : defaultLinks
   return (
-    <nav aria-label={ariaLabel} className="coop-skip-nav">
+    <nav aria-label={ariaLabel} className="coop-skip-nav" {...props}>
       <ul>
         {navLinks.map((link) => {
           const linkProps = {

package/src/index.ts

@@ -1,6 +1,9 @@
 export * from "./components/AlertBanner"
+export * from "./components/Author"
 export * from "./components/Button"
 export * from "./components/Card"
 export * from "./components/Image"
 export * from "./components/Pill"
+export * from "./components/RootSVG"
+export * from "./components/Signpost"
 export * from "./components/SkipNav"