@coopdigital/react 0.12.0 → 0.12.1

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

@@ -6,8 +6,8 @@ export interface AlertBannerProps extends HTMLAttributes<HTMLDivElement> {
     children?: string | ReactNode;
     /** **(Optional)** Receives any className to be applied to AlertBanner component. */
     className?: string;
-    /** Specifies the AlertBanner title. */
-    title: string;
+    /** Specifies the AlertBanner heading. */
+    heading: string;
     /** **(Optional)** Specifies the AlertBanner variant. */
     variant?: "black" | "default";
 }
@@ -21,5 +21,5 @@ export interface AlertBannerProps extends HTMLAttributes<HTMLDivElement> {
  * <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, ...props }: AlertBannerProps) => JSX.Element;
+export declare const AlertBanner: ({ ariaLabel, children, className, heading, variant, ...props }: AlertBannerProps) => JSX.Element;
 export default AlertBanner;

package/dist/components/AlertBanner/AlertBanner.js

@@ -12,9 +12,9 @@ import { jsx, jsxs } from 'react/jsx-runtime';
  *
  */
 const AlertBanner = (_a) => {
-    var { ariaLabel, children, className = "", title, variant = "default" } = _a, props = __rest(_a, ["ariaLabel", "children", "className", "title", "variant"]);
+    var { ariaLabel, children, className = "", heading, variant = "default" } = _a, props = __rest(_a, ["ariaLabel", "children", "className", "heading", "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] }) })));
+    return (jsx("aside", Object.assign({}, componentProps, { children: jsxs("div", { className: "coop-alert-banner--inner", children: [jsx("h2", { id: "coop-alert-banner--headline", children: heading }), children] }) })));
 };
 
 export { AlertBanner, AlertBanner as default };

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

@@ -14,7 +14,9 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
     chevron?: boolean;
     /** **(Optional)** Represents the content inside the Card component. It can be any valid JSX or string. */
     children?: React.ReactNode;
-    /** **(Optional)** Specifies the heading level of the card's title. */
+    /** Specifies the heading of the Card */
+    heading: string;
+    /** **(Optional)** Specifies the heading level of the card's heading. */
     headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6";
     /** **(Optional)** Specifies the URL that the Card component will link to when clicked. */
     href?: string;
@@ -28,11 +30,9 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
     labelBackground?: "yellow" | "green" | "pink" | "purple" | "orange" | "red" | "lilac" | "blue";
     /** **(Optional)** Specifies the layout of the Card */
     layout?: "vertical" | "horizontal";
-    /** Specifies the title of the Card */
-    title: string;
 }
 /**
- * A Card lets you highlight and link to more in-depth content on another page. The component typically includes a title, image, and an optional description.
+ * A Card lets you highlight and link to more in-depth content on another page. The component typically includes a heading, image, and an optional description.
  */
-export declare const Card: ({ as, background, badge, badgePosition, chevron, children, headingLevel, href, image, imagePosition, label, labelBackground, layout, title, ...props }: CardProps) => JSX.Element;
+export declare const Card: ({ as, background, badge, badgePosition, chevron, children, heading, headingLevel, href, image, imagePosition, label, labelBackground, layout, ...props }: CardProps) => JSX.Element;
 export default Card;

package/dist/components/Card/Card.js

@@ -16,14 +16,14 @@ function getCardLinkElement(as, href) {
     };
 }
 /**
- * A Card lets you highlight and link to more in-depth content on another page. The component typically includes a title, image, and an optional description.
+ * A Card lets you highlight and link to more in-depth content on another page. The component typically includes a heading, image, and an optional description.
  */
 const Card = (_a) => {
-    var { as, background, badge, badgePosition = "inset", chevron = false, children, headingLevel = "h3", href, image, imagePosition = "left", label = "", labelBackground, layout = "vertical", title } = _a, props = __rest(_a, ["as", "background", "badge", "badgePosition", "chevron", "children", "headingLevel", "href", "image", "imagePosition", "label", "labelBackground", "layout", "title"]);
+    var { as, background, badge, badgePosition = "inset", chevron = false, children, heading, headingLevel = "h3", href, image, imagePosition = "left", label = "", labelBackground, layout = "vertical" } = _a, props = __rest(_a, ["as", "background", "badge", "badgePosition", "chevron", "children", "heading", "headingLevel", "href", "image", "imagePosition", "label", "labelBackground", "layout"]);
     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, { 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" }) }) }))] })] })));
+    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" }, heading)), 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/Signpost/Signpost.d.ts

@@ -4,9 +4,9 @@ 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. */
+    /** Represents the heading 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. */
+    /** **(Optional)** Specifies the heading level of the signpost's heading. */
     headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6";
     /** Specifies the URL that the Signpost component will link to when clicked. */
     href: string;

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

@@ -1,7 +1,7 @@
 import type { AnchorHTMLAttributes, JSX } from "react";
 interface SkipNavLink {
     href: string;
-    title: string;
+    label: string;
 }
 export interface SkipNavProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     /** **(Optional)** Specifies a custom aria-label. */
@@ -11,7 +11,7 @@ export interface SkipNavProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     /** **(Optional)** Specifies if the component is visible straight away or only when pressing 'Tab'. */
     isVisible?: boolean;
     /** **(Optional)** Specifies the links that are going to be shown on the Skip Nav.
-     * It is an `array` of items and each item should have `href` and `title` information.
+     * It is an `array` of items and each item should have `href` and `label` information.
      *
      * Defaults to a single link anchored to `#main` */
     links?: SkipNavLink[];

package/dist/components/SkipNav/SkipNav.js

@@ -1,7 +1,7 @@
 import { __rest } from '../../node_modules/tslib/tslib.es6.js';
 import { jsx } from 'react/jsx-runtime';
 
-const defaultLinks = [{ href: "#main", title: "Skip to main content" }];
+const defaultLinks = [{ href: "#main", label: "Skip to main content" }];
 /**
  * The Skip Nav component allows screen reader and keyboard users to go directly to the main content.
  *
@@ -27,9 +27,9 @@ const SkipNav = (_a) => {
                     className: `${className}`,
                     "data-visible": isVisible,
                     href: link.href,
-                    title: link.title,
+                    label: link.label,
                 };
-                return (jsx("li", { children: jsx("a", Object.assign({}, linkProps, { children: link.title })) }, link.href));
+                return (jsx("li", { children: jsx("a", Object.assign({}, linkProps, { children: link.label })) }, link.href));
             }) }) })));
 };
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -66,5 +66,5 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
-  "gitHead": "02effb2492f1d3ee2c0772ee19e6c49bd057dab3"
+  "gitHead": "c4995d875a4e9d54ef3c23c8652902fe6f1068cc"
 }

package/src/components/AlertBanner/AlertBanner.tsx

@@ -7,8 +7,8 @@ export interface AlertBannerProps extends HTMLAttributes<HTMLDivElement> {
   children?: string | ReactNode
   /** **(Optional)** Receives any className to be applied to AlertBanner component. */
   className?: string
-  /** Specifies the AlertBanner title. */
-  title: string
+  /** Specifies the AlertBanner heading. */
+  heading: string
   /** **(Optional)** Specifies the AlertBanner variant. */
   variant?: "black" | "default"
 }
@@ -27,7 +27,7 @@ export const AlertBanner = ({
   ariaLabel,
   children,
   className = "",
-  title,
+  heading,
   variant = "default",
   ...props
 }: AlertBannerProps): JSX.Element => {
@@ -40,7 +40,7 @@ export const AlertBanner = ({
   return (
     <aside {...componentProps}>
       <div className="coop-alert-banner--inner">
-        <h2 id="coop-alert-banner--headline">{title}</h2>
+        <h2 id="coop-alert-banner--headline">{heading}</h2>
         {children}
       </div>
     </aside>

package/src/components/Card/Card.tsx

@@ -19,7 +19,9 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
   chevron?: boolean
   /** **(Optional)** Represents the content inside the Card component. It can be any valid JSX or string. */
   children?: React.ReactNode
-  /** **(Optional)** Specifies the heading level of the card's title. */
+  /** Specifies the heading of the Card */
+  heading: string
+  /** **(Optional)** Specifies the heading level of the card's heading. */
   headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6"
   /** **(Optional)** Specifies the URL that the Card component will link to when clicked. */
   href?: string
@@ -33,8 +35,6 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
   labelBackground?: "yellow" | "green" | "pink" | "purple" | "orange" | "red" | "lilac" | "blue"
   /** **(Optional)** Specifies the layout of the Card */
   layout?: "vertical" | "horizontal"
-  /** Specifies the title of the Card */
-  title: string
 }
 
 function getCardLinkElement(as: CardProps["as"], href?: string) {
@@ -53,7 +53,7 @@ function getCardLinkElement(as: CardProps["as"], href?: string) {
 }
 
 /**
- * A Card lets you highlight and link to more in-depth content on another page. The component typically includes a title, image, and an optional description.
+ * A Card lets you highlight and link to more in-depth content on another page. The component typically includes a heading, image, and an optional description.
  */
 export const Card = ({
   as,
@@ -62,6 +62,7 @@ export const Card = ({
   badgePosition = "inset",
   chevron = false,
   children,
+  heading,
   headingLevel = "h3",
   href,
   image,
@@ -69,7 +70,6 @@ export const Card = ({
   label = "",
   labelBackground,
   layout = "vertical",
-  title,
   ...props
 }: CardProps): JSX.Element => {
   const linkElement = getCardLinkElement(as, href)
@@ -99,7 +99,7 @@ export const Card = ({
           {React.createElement(
             linkElement.element,
             linkElement.props,
-            React.createElement(headingLevel, { className: "coop-card--heading" }, title)
+            React.createElement(headingLevel, { className: "coop-card--heading" }, heading)
           )}
           {children}
         </div>

package/src/components/Signpost/Signpost.tsx

@@ -8,9 +8,9 @@ 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. */
+  /** Represents the heading 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. */
+  /** **(Optional)** Specifies the heading level of the signpost's heading. */
   headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6"
   /** Specifies the URL that the Signpost component will link to when clicked. */
   href: string

package/src/components/SkipNav/SkipNav.tsx

@@ -2,7 +2,7 @@ import type { AnchorHTMLAttributes, JSX } from "react"
 
 interface SkipNavLink {
   href: string
-  title: string
+  label: string
 }
 
 export interface SkipNavProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
@@ -13,13 +13,13 @@ export interface SkipNavProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   /** **(Optional)** Specifies if the component is visible straight away or only when pressing 'Tab'. */
   isVisible?: boolean
   /** **(Optional)** Specifies the links that are going to be shown on the Skip Nav.
-   * It is an `array` of items and each item should have `href` and `title` information.
+   * It is an `array` of items and each item should have `href` and `label` information.
    *
    * Defaults to a single link anchored to `#main` */
   links?: SkipNavLink[]
 }
 
-const defaultLinks = [{ href: "#main", title: "Skip to main content" }]
+const defaultLinks = [{ href: "#main", label: "Skip to main content" }]
 
 /**
  * The Skip Nav component allows screen reader and keyboard users to go directly to the main content.
@@ -54,11 +54,11 @@ export const SkipNav = ({
             className: `${className}`,
             "data-visible": isVisible,
             href: link.href,
-            title: link.title,
+            label: link.label,
           }
           return (
             <li key={link.href}>
-              <a {...linkProps}>{link.title}</a>
+              <a {...linkProps}>{link.label}</a>
             </li>
           )
         })}