@coopdigital/react 0.15.0 → 0.17.0

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

@@ -1,7 +1,5 @@
 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. */
     children?: string | ReactNode;
     /** **(Optional)** Receives any className to be applied to AlertBanner component. */
@@ -21,5 +19,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, heading, variant, ...props }: AlertBannerProps) => JSX.Element;
+export declare const AlertBanner: ({ children, className, heading, variant, ...props }: AlertBannerProps) => JSX.Element;
 export default AlertBanner;

package/dist/components/AlertBanner/AlertBanner.js

@@ -12,8 +12,8 @@ import { jsx, jsxs } from 'react/jsx-runtime';
  *
  */
 const AlertBanner = (_a) => {
-    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);
+    var { children, className = "", heading, variant = "default" } = _a, props = __rest(_a, ["children", "className", "heading", "variant"]);
+    const componentProps = Object.assign({ 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: heading }), children] }) })));
 };
 

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

@@ -3,6 +3,8 @@ import { ImageProps } from "../Image";
 export interface AuthorProps extends HTMLAttributes<HTMLDivElement> {
     /** **(Optional)** Specifies the content author */
     author?: string;
+    /** **(Optional)** Receives any className to be applied to Author component. */
+    className?: 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" */
@@ -13,5 +15,5 @@ export interface AuthorProps extends HTMLAttributes<HTMLDivElement> {
 /**
  * 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 declare const Author: ({ author, className, date, datePrefix, image, ...props }: AuthorProps) => JSX.Element;
 export default Author;

package/dist/components/Author/Author.js

@@ -6,12 +6,13 @@ 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 = {
+    var { 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",
-    } } = _a, props = __rest(_a, ["author", "date", "datePrefix", "image"]);
+    } } = _a, props = __rest(_a, ["author", "className", "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] })] })] })));
+    const componentProps = Object.assign({ className: `coop-author ${className}` }, props);
+    return (jsxs("div", Object.assign({}, componentProps, { 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/Button/Button.d.ts

@@ -1,8 +1,6 @@
 import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ForwardRefExoticComponent, JSX } from "react";
 import React from "react";
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    /** **(Optional)** Specifies a custom aria-label. */
-    ariaLabel?: string;
     /** **(Optional)** Specifies the custom element to override default `a` or `button`. */
     as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string;
     /** **(Optional)** Represents the content inside the Button component. It can be any valid JSX or string. */
@@ -29,5 +27,5 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 /**
  * The Button component is an interactive element that people can use to take an action.
  */
-export declare const Button: ({ ariaLabel, as, children, className, href, isDisabled, isFullWidth, isLoading, loadingText, onClick, size, variant, ...props }: ButtonProps) => JSX.Element;
+export declare const Button: ({ as, children, className, href, isDisabled, isFullWidth, isLoading, loadingText, onClick, size, variant, ...props }: ButtonProps) => JSX.Element;
 export default Button;

package/dist/components/Button/Button.js

@@ -9,7 +9,7 @@ const LoadingIcon = () => {
  * The Button component is an interactive element that people can use to take an action.
  */
 const Button = (_a) => {
-    var { ariaLabel, as, children, className = "", href, isDisabled = false, isFullWidth = false, isLoading = false, loadingText = "Loading", onClick, size = "md", variant = "primary" } = _a, props = __rest(_a, ["ariaLabel", "as", "children", "className", "href", "isDisabled", "isFullWidth", "isLoading", "loadingText", "onClick", "size", "variant"]);
+    var { as, children, className = "", href, isDisabled = false, isFullWidth = false, isLoading = false, loadingText = "Loading", onClick, size = "md", variant = "primary" } = _a, props = __rest(_a, ["as", "children", "className", "href", "isDisabled", "isFullWidth", "isLoading", "loadingText", "onClick", "size", "variant"]);
     let element = href ? "a" : "button";
     if (as) {
         element = as;
@@ -26,7 +26,7 @@ const Button = (_a) => {
             setIsPending(false);
         }
     }), [onClick, isPending]);
-    const componentProps = Object.assign({ "aria-disabled": isDisabled ? true : undefined, "aria-label": ariaLabel, "aria-live": "assertive", className: `${variant == "text" ? "coop-link" : "coop-button"} ${className}`, "data-loading": isLoading || isPending ? true : undefined, "data-size": size.length && size !== "md" ? size : undefined, "data-variant": variant !== "text" ? variant : undefined, "data-width": isFullWidth ? "full" : undefined, href, onClick: handleClick }, props);
+    const componentProps = Object.assign({ "aria-disabled": isDisabled ? true : undefined, "aria-live": "assertive", className: `${variant == "text" ? "coop-link" : "coop-button"} ${className}`, "data-loading": isLoading || isPending ? true : undefined, "data-size": size.length && size !== "md" ? size : undefined, "data-variant": variant !== "text" ? variant : undefined, "data-width": isFullWidth ? "full" : undefined, href, onClick: handleClick }, props);
     const finalChildren = isPending || isLoading ? (jsxs(Fragment, { children: [loadingText, jsx(LoadingIcon, {})] })) : (children);
     return React.createElement(element, Object.assign({}, componentProps), finalChildren);
 };

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

@@ -14,6 +14,8 @@ 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)** Receives any className to be applied to Card component. */
+    className?: string;
     /** Specifies the heading of the Card */
     heading: string;
     /** **(Optional)** Specifies the heading level of the card's heading. */
@@ -34,5 +36,5 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
 /**
  * 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, heading, headingLevel, href, image, imagePosition, label, labelBackground, layout, ...props }: CardProps) => JSX.Element;
+export declare const Card: ({ as, background, badge, badgePosition, chevron, children, className, heading, headingLevel, href, image, imagePosition, label, labelBackground, layout, ...props }: CardProps) => JSX.Element;
 export default Card;

package/dist/components/Card/Card.js

@@ -20,10 +20,10 @@ function getCardLinkElement(as, href) {
  * 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, 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"]);
+    var { as, background, badge, badgePosition = "inset", chevron = false, children, className = "", heading, headingLevel = "h3", href, image, imagePosition = "left", label = "", labelBackground, layout = "vertical" } = _a, props = __rest(_a, ["as", "background", "badge", "badgePosition", "chevron", "children", "className", "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 !== "vertical" ? layout : undefined }, props);
+    const componentProps = Object.assign({ className: `coop-card ${className}`, "data-badge-pos": badgePosition, "data-bg": background, "data-image-pos": imagePosition, "data-label-bg": labelBackground, "data-layout": layout !== "vertical" ? layout : undefined }, 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" }, 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" }) }) }))] })] })));
 };
 

package/dist/components/Expandable/Expandable.d.ts

@@ -4,6 +4,8 @@ export interface ExpandableProps extends DetailsHTMLAttributes<HTMLDetailsElemen
     background?: "grey" | "purple" | "pink" | "green" | "orange" | "red" | "yellow" | "lilac" | "blue";
     /** Represents the content inside the Expandable component, only visible when expanded. It can be any valid JSX or string. */
     children: React.ReactNode;
+    /** **(Optional)** Receives any className to be applied to Expandable component. */
+    className?: string;
     /** Specifies summary for this component. It can be any valid JSX or string. */
     summary: React.ReactNode;
 }

package/dist/components/Expandable/Expandable.js

@@ -6,7 +6,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
  * It can be used to reveal more context for a specific issue or action.
  */
 const Expandable = (_a) => {
-    var { background, children, className, summary } = _a, props = __rest(_a, ["background", "children", "className", "summary"]);
+    var { background, children, className = "", summary } = _a, props = __rest(_a, ["background", "children", "className", "summary"]);
     const componentProps = Object.assign({ className: `coop-expandable ${className}`, "data-bg": background }, props);
     return (jsxs("details", Object.assign({}, componentProps, { children: [jsxs("summary", { children: [summary, jsx("svg", { fill: "none", height: "24", width: "24", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "m20.25 9.75-6.22 6.22a.75.75 0 0 1-1.06 0L6.75 9.75", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })] }), jsx("div", { className: "coop-expandable--content", children: children })] })));
 };

package/dist/components/Icon/AddIcon.d.ts

@@ -0,0 +1 @@
+export declare const AddIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/ArrowDownIcon.d.ts

@@ -0,0 +1 @@
+export declare const ArrowDownIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/ArrowLeftIcon.d.ts

@@ -0,0 +1 @@
+export declare const ArrowLeftIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/ArrowRightIcon.d.ts

@@ -0,0 +1 @@
+export declare const ArrowRightIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/ArrowUpIcon.d.ts

@@ -0,0 +1 @@
+export declare const ArrowUpIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/AvatarAltIcon.d.ts

@@ -0,0 +1 @@
+export declare const AvatarAltIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/AvatarIcon.d.ts

@@ -0,0 +1 @@
+export declare const AvatarIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/BasketIcon.d.ts

@@ -0,0 +1 @@
+export declare const BasketIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/CalendarIcon.d.ts

@@ -0,0 +1 @@
+export declare const CalendarIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/ChevronDownIcon.d.ts

@@ -0,0 +1 @@
+export declare const ChevronDownIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/ChevronLeftIcon.d.ts

@@ -0,0 +1 @@
+export declare const ChevronLeftIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/ChevronRightIcon.d.ts

@@ -0,0 +1 @@
+export declare const ChevronRightIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/ChevronUpIcon.d.ts

@@ -0,0 +1 @@
+export declare const ChevronUpIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/ClockIcon.d.ts

@@ -0,0 +1 @@
+export declare const ClockIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/CloseAltIcon.d.ts

@@ -0,0 +1 @@
+export declare const CloseAltIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/CloseIcon.d.ts

@@ -0,0 +1 @@
+export declare const CloseIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/CoopCardIcon.d.ts

@@ -0,0 +1 @@
+export declare const CoopCardIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/CoopIcon.d.ts

@@ -0,0 +1 @@
+export declare const CoopIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/CoopLocationIcon.d.ts

@@ -0,0 +1 @@
+export declare const CoopLocationIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/DownloadIcon.d.ts

@@ -0,0 +1 @@
+export declare const DownloadIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/HomeIcon.d.ts

@@ -0,0 +1 @@
+export declare const HomeIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/InformationIcon.d.ts

@@ -0,0 +1 @@
+export declare const InformationIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/LocationIcon.d.ts

@@ -0,0 +1 @@
+export declare const LocationIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/MailIcon.d.ts

@@ -0,0 +1 @@
+export declare const MailIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/MenuIcon.d.ts

@@ -0,0 +1 @@
+export declare const MenuIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/MessageIcon.d.ts

@@ -0,0 +1 @@
+export declare const MessageIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/MinusIcon.d.ts

@@ -0,0 +1 @@
+export declare const MinusIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/OpenNewIcon.d.ts

@@ -0,0 +1 @@
+export declare const OpenNewIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/PencilIcon.d.ts

@@ -0,0 +1 @@
+export declare const PencilIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/PhoneIcon.d.ts

@@ -0,0 +1 @@
+export declare const PhoneIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/QuestionIcon.d.ts

@@ -0,0 +1 @@
+export declare const QuestionIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/ScooterIcon.d.ts

@@ -0,0 +1 @@
+export declare const ScooterIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/SearchIcon.d.ts

@@ -0,0 +1 @@
+export declare const SearchIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/SettingsIcon.d.ts

@@ -0,0 +1 @@
+export declare const SettingsIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/TickAltIcon.d.ts

@@ -0,0 +1 @@
+export declare const TickAltIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/TickIcon.d.ts

@@ -0,0 +1 @@
+export declare const TickIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/VanIcon.d.ts

@@ -0,0 +1 @@
+export declare const VanIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/WarningIcon.d.ts

@@ -0,0 +1 @@
+export declare const WarningIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/WriteIcon.d.ts

@@ -0,0 +1 @@
+export declare const WriteIcon: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,39 @@
+export { AddIcon } from "./AddIcon";
+export { ArrowDownIcon } from "./ArrowDownIcon";
+export { ArrowLeftIcon } from "./ArrowLeftIcon";
+export { ArrowRightIcon } from "./ArrowRightIcon";
+export { ArrowUpIcon } from "./ArrowUpIcon";
+export { AvatarAltIcon } from "./AvatarAltIcon";
+export { AvatarIcon } from "./AvatarIcon";
+export { BasketIcon } from "./BasketIcon";
+export { CalendarIcon } from "./CalendarIcon";
+export { ChevronDownIcon } from "./ChevronDownIcon";
+export { ChevronLeftIcon } from "./ChevronLeftIcon";
+export { ChevronRightIcon } from "./ChevronRightIcon";
+export { ChevronUpIcon } from "./ChevronUpIcon";
+export { ClockIcon } from "./ClockIcon";
+export { CloseAltIcon } from "./CloseAltIcon";
+export { CloseIcon } from "./CloseIcon";
+export { CoopCardIcon } from "./CoopCardIcon";
+export { CoopIcon } from "./CoopIcon";
+export { CoopLocationIcon } from "./CoopLocationIcon";
+export { DownloadIcon } from "./DownloadIcon";
+export { HomeIcon } from "./HomeIcon";
+export { InformationIcon } from "./InformationIcon";
+export { LocationIcon } from "./LocationIcon";
+export { MailIcon } from "./MailIcon";
+export { MenuIcon } from "./MenuIcon";
+export { MessageIcon } from "./MessageIcon";
+export { MinusIcon } from "./MinusIcon";
+export { OpenNewIcon } from "./OpenNewIcon";
+export { PencilIcon } from "./PencilIcon";
+export { PhoneIcon } from "./PhoneIcon";
+export { QuestionIcon } from "./QuestionIcon";
+export { ScooterIcon } from "./ScooterIcon";
+export { SearchIcon } from "./SearchIcon";
+export { SettingsIcon } from "./SettingsIcon";
+export { TickAltIcon } from "./TickAltIcon";
+export { TickIcon } from "./TickIcon";
+export { VanIcon } from "./VanIcon";
+export { WarningIcon } from "./WarningIcon";
+export { WriteIcon } from "./WriteIcon";

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

@@ -1,8 +1,6 @@
 import type { AnchorHTMLAttributes, ForwardRefExoticComponent, HTMLAttributes, JSX } from "react";
 import React from "react";
 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`. */
     as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string;
     /** **(Optional)** Specifies what text Pill should display on the badge. */
@@ -23,5 +21,5 @@ export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
 /**
  * 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 declare const Pill: ({ as, badge, badgeColor, children, className, href, pillColor, size, ...props }: PillProps) => JSX.Element;
 export default Pill;

package/dist/components/Pill/Pill.js

@@ -5,12 +5,12 @@ import React from 'react';
  * 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"]);
+    var { as, badge, badgeColor = "red", children, className = "", href, pillColor = "blue", size = "md" } = _a, props = __rest(_a, ["as", "badge", "badgeColor", "children", "className", "href", "pillColor", "size"]);
     let element = href ? "a" : "span";
     if (as) {
         element = as;
     }
-    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);
+    const componentProps = Object.assign({ 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

@@ -1 +1,2 @@
-export default function RootSVG(): import("react/jsx-runtime").JSX.Element;
+export declare const RootSVG: () => import("react/jsx-runtime").JSX.Element;
+export default RootSVG;

package/dist/components/RootSVG/RootSVG.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 
-function RootSVG() {
+const 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 };
+export { RootSVG, RootSVG as default };

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

@@ -1,11 +1,13 @@
-import type { AnchorHTMLAttributes, ForwardRefExoticComponent, JSX } from "react";
+import type { AnchorHTMLAttributes, ForwardRefExoticComponent, HTMLAttributes, JSX } from "react";
 import React from "react";
 import { ImageProps } from "../Image";
-export interface SignpostProps {
+export interface SignpostProps extends HTMLAttributes<HTMLDivElement> {
     /** **(Optional)** Specifies the custom element to override default `a` */
     as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string;
     /** Represents the heading inside the Signpost component. It can be any valid JSX or string. */
     children: React.ReactNode;
+    /** **(Optional)** Receives any className to be applied to Signpost component. */
+    className?: string;
     /** **(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. */
@@ -16,5 +18,5 @@ export interface SignpostProps {
 /**
  * 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 declare const Signpost: ({ as, children, className, headingLevel, href, image, ...props }: SignpostProps) => JSX.Element;
 export default Signpost;

package/dist/components/Signpost/Signpost.js

@@ -1,3 +1,4 @@
+import { __rest } from '../../node_modules/tslib/tslib.es6.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { Image } from '../Image/Image.js';
@@ -5,12 +6,14 @@ 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, }) => {
+const Signpost = (_a) => {
+    var { as, children, className = "", headingLevel = "h3", href, image } = _a, props = __rest(_a, ["as", "children", "className", "headingLevel", "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" }) }) })] }))] }));
+    const componentProps = Object.assign({ className: `coop-signpost ${className}` }, props);
+    return (jsxs("div", Object.assign({}, componentProps, { 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/SkipNav/SkipNav.d.ts

@@ -1,11 +1,9 @@
-import type { AnchorHTMLAttributes, JSX } from "react";
+import type { HTMLAttributes, JSX } from "react";
 interface SkipNavLink {
     href: string;
     label: string;
 }
-export interface SkipNavProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-    /** **(Optional)** Specifies a custom aria-label. */
-    ariaLabel?: string;
+export interface SkipNavProps extends HTMLAttributes<HTMLDivElement> {
     /** **(Optional)** Receives any className to be applied to Skip Nav component. */
     className?: string;
     /** **(Optional)** Specifies if the component is visible straight away or only when pressing 'Tab'. */
@@ -33,5 +31,5 @@ export interface SkipNavProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
  * - 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, ...props }: SkipNavProps) => JSX.Element;
+export declare const SkipNav: ({ className, isVisible, links, ...props }: SkipNavProps) => JSX.Element;
 export default SkipNav;

package/dist/components/SkipNav/SkipNav.js

@@ -20,11 +20,11 @@ const defaultLinks = [{ href: "#main", label: "Skip to main content" }];
  * - 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 = (_a) => {
-    var { ariaLabel = "", className = "", isVisible = false, links = defaultLinks } = _a, props = __rest(_a, ["ariaLabel", "className", "isVisible", "links"]);
+    var { className = "", isVisible = false, links = defaultLinks } = _a, props = __rest(_a, ["className", "isVisible", "links"]);
+    const componentProps = Object.assign({ className: `coop-skip-nav ${className}` }, props);
     const navLinks = links.length > 0 ? links : defaultLinks;
-    return (jsx("nav", Object.assign({ "aria-label": ariaLabel, className: "coop-skip-nav" }, props, { children: jsx("ul", { children: navLinks.map((link) => {
+    return (jsx("nav", Object.assign({}, componentProps, { children: jsx("ul", { children: navLinks.map((link) => {
                 const linkProps = {
-                    className: `${className}`,
                     "data-visible": isVisible,
                     href: link.href,
                     label: link.label,

package/dist/index.js

@@ -5,7 +5,7 @@ export { Card } from './components/Card/Card.js';
 export { Expandable } from './components/Expandable/Expandable.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 { 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.15.0",
+  "version": "0.17.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -44,7 +44,7 @@
   "description": "",
   "devDependencies": {
     "@axe-core/playwright": "^4.10.1",
-    "@coopdigital/styles": "^0.14.0",
+    "@coopdigital/styles": "^0.15.1",
     "@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": "86b6861deb12d0f826dfd719fb28a754fda81cbd"
+  "gitHead": "4a24650f72c010d21c1fccac53e6de59ec7c3e6e"
 }

package/src/components/AlertBanner/AlertBanner.tsx

@@ -1,8 +1,6 @@
 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. */
   children?: string | ReactNode
   /** **(Optional)** Receives any className to be applied to AlertBanner component. */
@@ -24,7 +22,6 @@ export interface AlertBannerProps extends HTMLAttributes<HTMLDivElement> {
  *
  */
 export const AlertBanner = ({
-  ariaLabel,
   children,
   className = "",
   heading,
@@ -32,7 +29,6 @@ export const AlertBanner = ({
   ...props
 }: AlertBannerProps): JSX.Element => {
   const componentProps = {
-    "aria-label": ariaLabel,
     className: `coop-alert-banner ${className}`,
     "data-variant": variant,
     ...props,

package/src/components/Author/Author.tsx

@@ -5,6 +5,8 @@ import { Image, ImageProps } from "../Image"
 export interface AuthorProps extends HTMLAttributes<HTMLDivElement> {
   /** **(Optional)** Specifies the content author */
   author?: string
+  /** **(Optional)** Receives any className to be applied to Author component. */
+  className?: 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" */
@@ -19,6 +21,7 @@ export interface AuthorProps extends HTMLAttributes<HTMLDivElement> {
 
 export const Author = ({
   author = "Co-op team",
+  className = "",
   date,
   datePrefix = "",
   image = {
@@ -32,8 +35,12 @@ export const Author = ({
     ...image,
   }
 
+  const componentProps = {
+    className: `coop-author ${className}`,
+    ...props,
+  }
   return (
-    <div className="coop-author" {...props}>
+    <div {...componentProps}>
       {image && <Image {...imageProps} />}
       <div className="coop-author--content">
         <span>

package/src/components/Button/Button.tsx

@@ -8,8 +8,6 @@ import type {
 import React, { useCallback, useState } from "react"
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  /** **(Optional)** Specifies a custom aria-label. */
-  ariaLabel?: string
   /** **(Optional)** Specifies the custom element to override default `a` or `button`. */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string
@@ -59,7 +57,6 @@ const LoadingIcon = () => {
  * The Button component is an interactive element that people can use to take an action.
  */
 export const Button = ({
-  ariaLabel,
   as,
   children,
   className = "",
@@ -97,7 +94,6 @@ export const Button = ({
 
   const componentProps = {
     "aria-disabled": isDisabled ? true : undefined,
-    "aria-label": ariaLabel,
     "aria-live": "assertive" as keyof ButtonHTMLAttributes<HTMLButtonElement>["aria-live"],
     className: `${variant == "text" ? "coop-link" : "coop-button"} ${className}`,
     "data-loading": isLoading || isPending ? true : undefined,