@coopdigital/react 0.12.0 → 0.13.0

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/Pill/Pill.d.ts

@@ -21,7 +21,7 @@ export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
     size?: "sm" | "md" | "lg" | "xl";
 }
 /**
- * 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.
+ * The Pill component is a small, sligtly 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, ...props }: PillProps) => JSX.Element;
 export default Pill;

package/dist/components/Pill/Pill.js

@@ -2,7 +2,7 @@ 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.
+ * The Pill component is a small, sligtly 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 = (_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"]);

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/dist/components/Tag/Tag.d.ts

@@ -0,0 +1,26 @@
+import type { AnchorHTMLAttributes, ForwardRefExoticComponent, HTMLAttributes, JSX } from "react";
+import React from "react";
+export interface TagProps extends HTMLAttributes<HTMLAnchorElement> {
+    /** **(Optional)** Specifies the custom element to override default `a` or `span`. */
+    as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string;
+    /** **(Optional)** Represents the content inside the Tag component. It can be any valid JSX or string. */
+    children?: React.ReactNode;
+    /** **(Optional)** Receives any className to be applied to Tag component. */
+    className?: string;
+    /** **(Optional)** Specifies the URL that the Tag component will link to when clicked. */
+    href?: string;
+    /** **(Optional)** Specifies the Tag background color from the available options. */
+    tagColor?: "white" | "grey" | "purple" | "pink" | "green" | "orange" | "red" | "yellow" | "lilac" | "blue";
+}
+/**
+ * Tag is a simple component that is meant to communicate a brief message such as categories.
+ *
+ * It has similarities with Pill component but also has differences such as:
+ * - Tag doesn't accept a badge option
+ * - Tags have more rounded corners compared to Pill
+ * - Tags are more compact compared to Pill
+ * - Tag components should be used as tags to communicate brief message while Pill component is more versatile and has more styling options
+ *
+ */
+export declare const Tag: ({ as, children, className, href, tagColor, ...props }: TagProps) => JSX.Element;
+export default Tag;

package/dist/components/Tag/Tag.js

@@ -0,0 +1,24 @@
+import { __rest } from '../../node_modules/tslib/tslib.es6.js';
+import React from 'react';
+
+/**
+ * Tag is a simple component that is meant to communicate a brief message such as categories.
+ *
+ * It has similarities with Pill component but also has differences such as:
+ * - Tag doesn't accept a badge option
+ * - Tags have more rounded corners compared to Pill
+ * - Tags are more compact compared to Pill
+ * - Tag components should be used as tags to communicate brief message while Pill component is more versatile and has more styling options
+ *
+ */
+const Tag = (_a) => {
+    var { as, children, className = "", href, tagColor = "grey" } = _a, props = __rest(_a, ["as", "children", "className", "href", "tagColor"]);
+    let element = href ? "a" : "span";
+    const componentProps = Object.assign({ className: `coop-tag ${className}`, "data-tag-color": tagColor, href }, props);
+    if (as) {
+        element = as;
+    }
+    return React.createElement(element, Object.assign({}, componentProps), children);
+};
+
+export { Tag, Tag as default };

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

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

package/dist/index.d.ts

@@ -7,3 +7,4 @@ export * from "./components/Pill";
 export * from "./components/RootSVG";
 export * from "./components/Signpost";
 export * from "./components/SkipNav";
+export * from "./components/Tag";

package/dist/index.js

@@ -7,3 +7,4 @@ 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';
+export { Tag } from './components/Tag/Tag.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -44,7 +44,7 @@
   "description": "",
   "devDependencies": {
     "@axe-core/playwright": "^4.10.1",
-    "@coopdigital/styles": "^0.11.0",
+    "@coopdigital/styles": "^0.12.0",
     "@playwright/test": "^1.51.1",
     "@storybook/addon-a11y": "^8.6.12",
     "@storybook/addon-essentials": "^8.6.12",
@@ -66,5 +66,5 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
-  "gitHead": "02effb2492f1d3ee2c0772ee19e6c49bd057dab3"
+  "gitHead": "81b0f15eb07450a777497068be1422ebf01dc2fa"
 }

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

@@ -25,7 +25,7 @@ export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
 }
 
 /**
- * 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.
+ * The Pill component is a small, sligtly 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 const Pill = ({
   ariaLabel,

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>
           )
         })}

package/src/components/Tag/Tag.tsx

@@ -0,0 +1,61 @@
+import type { AnchorHTMLAttributes, ForwardRefExoticComponent, HTMLAttributes, JSX } from "react"
+
+import React from "react"
+
+export interface TagProps extends HTMLAttributes<HTMLAnchorElement> {
+  /** **(Optional)** Specifies the custom element to override default `a` or `span`. */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string
+  /** **(Optional)** Represents the content inside the Tag component. It can be any valid JSX or string. */
+  children?: React.ReactNode
+  /** **(Optional)** Receives any className to be applied to Tag component. */
+  className?: string
+  /** **(Optional)** Specifies the URL that the Tag component will link to when clicked. */
+  href?: string
+  /** **(Optional)** Specifies the Tag background color from the available options. */
+  tagColor?:
+    | "white"
+    | "grey"
+    | "purple"
+    | "pink"
+    | "green"
+    | "orange"
+    | "red"
+    | "yellow"
+    | "lilac"
+    | "blue"
+}
+
+/**
+ * Tag is a simple component that is meant to communicate a brief message such as categories.
+ *
+ * It has similarities with Pill component but also has differences such as:
+ * - Tag doesn't accept a badge option
+ * - Tags have more rounded corners compared to Pill
+ * - Tags are more compact compared to Pill
+ * - Tag components should be used as tags to communicate brief message while Pill component is more versatile and has more styling options
+ *
+ */
+
+export const Tag = ({
+  as,
+  children,
+  className = "",
+  href,
+  tagColor = "grey",
+  ...props
+}: TagProps): JSX.Element => {
+  let element: TagProps["as"] = href ? "a" : "span"
+  const componentProps = {
+    className: `coop-tag ${className}`,
+    "data-tag-color": tagColor,
+    href,
+    ...props,
+  }
+  if (as) {
+    element = as
+  }
+  return React.createElement(element, { ...componentProps }, children)
+}
+
+export default Tag

package/src/components/Tag/index.ts

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

package/src/index.ts

@@ -7,3 +7,4 @@ export * from "./components/Pill"
 export * from "./components/RootSVG"
 export * from "./components/Signpost"
 export * from "./components/SkipNav"
+export * from "./components/Tag"