@coopdigital/react 0.19.2 → 0.19.4

package/README.md

@@ -6,15 +6,11 @@
 
 # Experience Kit for React
 
-<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[all_contributors_badge]: https://img.shields.io/badge/all_contributors-17-C08A00.svg '' 
-<!-- ALL-CONTRIBUTORS-BADGE:END -->
-
 <a href="https://www.npmjs.com/package/@coopdigital/react"><img src="https://img.shields.io/npm/v/%40coopdigital%2Freact?color=E85A00" alt="npm version" /></a>
 <img alt="NPM Last Update" src="https://img.shields.io/npm/last-update/%40coopdigital%2Freact?label=published&color=6762F9">
 <img alt="NPM Downloads" src="https://img.shields.io/npm/d18m/%40coopdigital%2Freact?color=819C00">
 <a href="https://static.coop.co.uk/experience-kit-storybook-react"><img src="https://img.shields.io/badge/storybook-react-F85792" alt="storybook" /></a>
-[![All Contributors][all_contributors_badge]](#contributors)
+
 
 > React components for the Experience Library design system. 
 
@@ -43,115 +39,6 @@ Alternatively if your project uses SASS you can import the source stylesheets:
 @use "@coopdigital/styles/src/components/Pill.scss"
 ```
 
-## Contributors ✨
-
-Thanks goes to these wonderful people:
-<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-<!-- prettier-ignore-start -->
-<!-- markdownlint-disable -->
-<table>
-<tbody>
-    <tr>
-      <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/aaronrleslie">
-<div><img src="https://ca.slack-edge.com/T0C9E3ZF0-UKMP0F917-34a22da610d8-150" width="200px;" alt=""/></div>
-<small>Aaron Leslie</small>
-<div><a href="#infra-aaronrleslie" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></div>
-</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/catia.costa1">
-<div><img src="https://gitlab.com/uploads/-/system/user/avatar/25728410/avatar.png" width="200px;" alt=""/></div>
-<small>Catia Costa</small>
-<div><a href="#a11y-catia.costa1" title="Accessibility">️️️️♿️</a> <a href="#code-catia.costa1" title="Code">💻</a> <a href="#doc-catia.costa1" title="Documentation">📖</a> <a href="#test-catia.costa1" title="Tests">⚠️</a></div>
-</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/chris.latimer">
-<div><img src="https://gitlab.com/uploads/-/system/user/avatar/10570471/avatar.png" width="200px;" alt=""/></div>
-<small>Chris Latimer</small>
-<div><a href="#infra-chris.latimer" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#code-chris.latimer" title="Code">💻</a></div>
-</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/craig.mckay">
-<div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/blank.jpg" width="200px;" alt=""/></div>
-<small>Craig Mckay</small>
-<div><a href="#projectManagement-craig.mckay" title="Project Management">📆</a></div>
-</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/daniel.lippross">
-<div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/blank.jpg" width="200px;" alt=""/></div>
-<small>Daniel Lippross</small>
-<div><a href="#platform-daniel.lippross" title="Packaging/porting to new platform">📦</a></div>
-</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/emalin.matthews">
-<div><img src="https://ca.slack-edge.com/T0C9E3ZF0-UMGDXU8JH-ade541a7f09e-150" width="200px;" alt=""/></div>
-<small>Emalin Matthews</small>
-<div><a href="#a11y-emalin.matthews" title="Accessibility">️️️️♿️</a> <a href="#code-emalin.matthews" title="Code">💻</a> <a href="#doc-emalin.matthews" title="Documentation">📖</a> <a href="#test-emalin.matthews" title="Tests">⚠️</a></div>
-</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/jelena.milosevic">
-<div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/blank.jpg" width="200px;" alt=""/></div>
-<small>Jelena Milosevic</small>
-<div><a href="#infra-jelena.milosevic" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></div>
-</a></td>
-    </tr><br />
-    <tr>
-      <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/kamini.pagare">
-<div><img src="https://gitlab.com/uploads/-/system/user/avatar/23337489/avatar.png" width="200px;" alt=""/></div>
-<small>Kamini Pagare</small>
-<div><a href="#a11y-kamini.pagare" title="Accessibility">️️️️♿️</a> <a href="#code-kamini.pagare" title="Code">💻</a> <a href="#doc-kamini.pagare" title="Documentation">📖</a> <a href="#test-kamini.pagare" title="Tests">⚠️</a></div>
-</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="">
-<div><img src="https://ca.slack-edge.com/T0C9E3ZF0-U3AJ40BGS-ec515dc443cb-150" width="200px;" alt=""/></div>
-<small>Lee Connolly</small>
-<div><a href="#projectManagement-lee.connolly" title="Project Management">📆</a></div>
-</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="">
-<div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/blank.jpg" width="200px;" alt=""/></div>
-<small>Liam Hall</small>
-<div><a href="#projectManagement-liam.hall" title="Project Management">📆</a></div>
-</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="">
-<div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/meg.jpg" width="200px;" alt=""/></div>
-<small>Meg White</small>
-<div><a href="#projectManagement-meg.white" title="Project Management">📆</a></div>
-</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/omid.kashan">
-<div><img src="https://secure.gravatar.com/avatar/faf90b70d749cf9460eb603fa1700add94fd7d3a32645b4be6fa12eb45c4ffa3?s=80&d=identicon" width="200px;" alt=""/></div>
-<small>Omid Kashan</small>
-<div><a href="#a11y-omid.kashan" title="Accessibility">️️️️♿️</a> <a href="#code-omid.kashan" title="Code">💻</a> <a href="#doc-omid.kashan" title="Documentation">📖</a> <a href="#test-omid.kashan" title="Tests">⚠️</a></div>
-</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/phil.wolstenholme">
-<div><img src="https://gitlab.com/uploads/-/system/user/avatar/25900363/avatar.png" width="200px;" alt=""/></div>
-<small>Phil Wolstenholme</small>
-<div><a href="#a11y-phil.wolstenholme" title="Accessibility">️️️️♿️</a></div>
-</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/romain.chen">
-<div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/blank.jpg" width="200px;" alt=""/></div>
-<small>Romain Chen</small>
-<div><a href="#design-romain.chen" title="Design">🎨</a></div>
-</a></td>
-    </tr><br />
-    <tr>
-      <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/sam.harden">
-<div><img src="https://ca.slack-edge.com/T0C9E3ZF0-U03NT7D39L6-2fc82e7f7c6e-150" width="200px;" alt=""/></div>
-<small>Sam Harden</small>
-<div><a href="#a11y-sam.harden" title="Accessibility">️️️️♿️</a> <a href="#code-sam.harden" title="Code">💻</a> <a href="#doc-sam.harden" title="Documentation">📖</a> <a href="#test-sam.harden" title="Tests">⚠️</a></div>
-</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="">
-<div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/blank.jpg" width="200px;" alt=""/></div>
-<small>Shweta Jaju</small>
-<div><a href="#userTesting-shweta.jaju" title="User Testing">📓</a></div>
-</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/theodore.kouzelis">
-<div><img src="https://secure.gravatar.com/avatar/3988f940029d9053174ac68e7f5bfa8fd61f184872d46281f44e2e698711d37d?s=80&d=identicon" width="200px;" alt=""/></div>
-<small>Theo Kouzelis</small>
-<div><a href="#a11y-theodore.kouzelis" title="Accessibility">️️️️♿️</a> <a href="#code-theodore.kouzelis" title="Code">💻</a> <a href="#doc-theodore.kouzelis" title="Documentation">📖</a> <a href="#test-theodore.kouzelis" title="Tests">⚠️</a></div>
-</a></td>
-    </tr>
-</tbody></table>
-
-
-<!-- markdownlint-restore -->
-<!-- prettier-ignore-end -->
-
-<!-- ALL-CONTRIBUTORS-LIST:END -->
-
-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. 
-
 ## License
 
 MIT License

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

@@ -1,23 +1,13 @@
 import type { HTMLAttributes, JSX, ReactNode } from "react";
 export interface AlertBannerProps extends HTMLAttributes<HTMLDivElement> {
-    /** **(Optional)** Represents the content inside the AlertBanner component. It can be any valid JSX or string. */
+    /** **(Optional)** Main content inside the banner. It can be any valid JSX or string. */
     children?: string | ReactNode;
-    /** **(Optional)** Receives any className to be applied to AlertBanner component. */
+    /** **(Optional)** Additional CSS classes to be applied to the component. */
     className?: string;
-    /** Specifies the AlertBanner heading. */
+    /** Main title of the banner, rendered as a `h2`. */
     heading: string;
-    /** **(Optional)** Specifies the AlertBanner variant. */
+    /** **(Optional)** Specify which banner variant to use. */
     variant?: "black" | "default";
 }
-/**
- * The Alert Banner component is used to highlight events that might limit availability of a service we provide.
- * <br />
- * - the service the user is trying to access is experiencing problems
- * - planned system maintenance is coming soon
- * - the user’s login session is about to expire
- * <br />
- * <p>Only use alert notifications when absolutely necessary. Using them too often could make the problem worse.<p/>
- *
- */
 export declare const AlertBanner: ({ children, className, heading, variant, ...props }: AlertBannerProps) => JSX.Element;
 export default AlertBanner;

package/dist/components/AlertBanner/AlertBanner.js

@@ -1,16 +1,6 @@
 import { __rest } from '../../node_modules/tslib/tslib.es6.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-/**
- * The Alert Banner component is used to highlight events that might limit availability of a service we provide.
- * <br />
- * - the service the user is trying to access is experiencing problems
- * - planned system maintenance is coming soon
- * - the user’s login session is about to expire
- * <br />
- * <p>Only use alert notifications when absolutely necessary. Using them too often could make the problem worse.<p/>
- *
- */
 const AlertBanner = (_a) => {
     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);

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

@@ -1,19 +1,16 @@
 import type { HTMLAttributes, JSX } from "react";
 import { ImageProps } from "../Image";
 export interface AuthorProps extends HTMLAttributes<HTMLDivElement> {
-    /** **(Optional)** Specifies the content author */
+    /** **(Optional)** Specify the content author. */
     author?: string;
-    /** **(Optional)** Receives any className to be applied to Author component. */
+    /** **(Optional)** Additional CSS classes to be applied to the 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.   */
+    /** **(Optional)** Specify the date. Refer to Experience Library guidance on date formats. We advise using the following format (dd mmmm yyyy) eg: 1 January 2000.   */
     date?: string;
-    /** **(Optional)** Specifies the text that will prefix the date, e.g. "Published" */
+    /** **(Optional)** Specify the text that will prefix the date, e.g. "Published". */
     datePrefix?: string;
-    /** **(Optional)** Specifies the image properties of Author */
+    /** **(Optional)** Specify Image properties of the Author avatar. */
     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, className, date, datePrefix, image, ...props }: AuthorProps) => JSX.Element;
 export default Author;

package/dist/components/Author/Author.js

@@ -2,9 +2,6 @@ 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", className = "", date, datePrefix = "", image = {
         alt: "",

package/dist/components/Button/Button.d.ts

@@ -24,8 +24,5 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** **(Optional)** Specifies the Button variant. */
     variant?: "green" | "blue" | "white" | "grey" | "green-ghost" | "blue-ghost" | "white-ghost" | "grey-ghost" | "text";
 }
-/**
- * The Button component is an interactive element that people can use to take an action.
- */
 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

@@ -3,9 +3,6 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import React, { useState, useCallback } from 'react';
 import { LoadingIcon } from '../Icon/LoadingIcon.js';
 
-/**
- * The Button component is an interactive element that people can use to take an action.
- */
 const Button = (_a) => {
     var { as, children, className = "", href, isDisabled = false, isFullWidth = false, isLoading = false, loadingText = "Loading", onClick, size = "md", variant = "green" } = _a, props = __rest(_a, ["as", "children", "className", "href", "isDisabled", "isFullWidth", "isLoading", "loadingText", "onClick", "size", "variant"]);
     let element = href ? "a" : "button";

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

@@ -34,8 +34,5 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
     /** **(Optional)** Specifies the layout of the Card */
     layout?: "vertical" | "horizontal";
 }
-/**
- * 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, className, heading, headingLevel, href, image, imagePosition, label, labelBackground, layout, ...props }: CardProps) => JSX.Element;
 export default Card;

package/dist/components/Card/Card.js

@@ -18,9 +18,6 @@ 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, 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);

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

@@ -10,9 +10,5 @@ export interface ExpandableProps extends DetailsHTMLAttributes<HTMLDetailsElemen
     /** Specifies summary for this component. It can be any valid JSX or string. */
     summary: React.ReactNode;
 }
-/**
- * The Expandable component wraps content in an expandable block using the details/summary HTML elements.
- * It can be used to reveal more context for a specific issue or action.
- */
 export declare const Expandable: ({ background, children, className, summary, ...props }: ExpandableProps) => JSX.Element;
 export default Expandable;

package/dist/components/Expandable/Expandable.js

@@ -3,10 +3,6 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 import { bgPropToClass } from '../../utils/index.js';
 
-/**
- * The Expandable component wraps content in an expandable block using the details/summary HTML elements.
- * It can be used to reveal more context for a specific issue or action.
- */
 const Expandable = (_a) => {
     var { background = "tint-grey", children, className = "", summary } = _a, props = __rest(_a, ["background", "children", "className", "summary"]);
     const componentProps = Object.assign({ className: clsx("coop-expandable", bgPropToClass(background, className), className) }, props);

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

@@ -11,8 +11,5 @@ export interface ImageProps extends HTMLAttributes<HTMLImageElement> {
     /** **(Optional)** Specifies width of the Image */
     width?: string;
 }
-/**
- * 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, ...props }: ImageProps) => JSX.Element;
 export default Image;

package/dist/components/Image/Image.js

@@ -21,9 +21,6 @@ const getContentfulParams = (src, width, height) => {
         width: (_b = url.searchParams.get("w")) !== null && _b !== void 0 ? _b : width,
     };
 };
-/**
- * A wrapper around the image HTML tag, to help implement best practices like lazy loading, and assist with cropping and sizing images.
- */
 const Image = (_a) => {
     var { alt, crop, height, src, width = "640" } = _a, props = __rest(_a, ["alt", "crop", "height", "src", "width"]);
     let params = { height, src, width };

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

@@ -19,8 +19,5 @@ export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
     /** **(Optional)** Specifies what should be the Pill size. */
     size?: "sm" | "md" | "lg" | "xl";
 }
-/**
- * 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: ({ as, background, badge, badgeBackground, children, className, href, size, ...props }: PillProps) => JSX.Element;
 export default Pill;

package/dist/components/Pill/Pill.js

@@ -4,9 +4,6 @@ import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 import React from 'react';
 import { bgPropToClass } from '../../utils/index.js';
 
-/**
- * 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 { as, background = "tint-grey", badge, badgeBackground = "offers-red", children, className = "", href, size = "md" } = _a, props = __rest(_a, ["as", "background", "badge", "badgeBackground", "children", "className", "href", "size"]);
     let element = href ? "a" : "span";

package/dist/components/SearchBox/SearchBox.d.ts

@@ -27,22 +27,5 @@ export interface SearchBoxProps extends HTMLAttributes<HTMLInputElement> {
     /** **(Optional)** Receives the variant to be applied to SearchBox component. */
     variant?: "green" | "blue" | "white" | "grey" | "green-ghost" | "blue-ghost" | "white-ghost" | "grey-ghost";
 }
-/**
- * SearchBox component allows a person to enter a word or a phrase to find relevant content.
- *
- * The `label` prop is mandatory but not visible by default (it is visible for screen readers). You can make it visible to humans by setting `labelVisible` to true.
- *
- * If you are using a single icon with no text for `button.label`, ensure you pass an `alt` property to the icon for accessibility purposes.
- *
- * You can provide an `action` to submit input like a normal HTML form, or an `onSubmit` callback to handle submissions client-side.
- *
- * **Good to know:** SearchBox requires both `SearchBox` and `Button` css/scss files.
- *
- * ```
- * import "@coopdigital/styles/components/Searchbox.css"
- * import "@coopdigital/styles/components/Button.css"
- *
- * ```
- */
 export declare const SearchBox: ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize, autoComplete, button, className, label, labelVisible, name, onSubmit, placeholder, size, variant, ...props }: SearchBoxProps) => JSX.Element;
 export default SearchBox;

package/dist/components/SearchBox/SearchBox.js

@@ -8,23 +8,6 @@ const defaultButtonProps = {
     label: React.createElement(SearchIcon, { alt: "Search", stroke: "currentColor", strokeWidth: 2 }),
     loadingText: "",
 };
-/**
- * SearchBox component allows a person to enter a word or a phrase to find relevant content.
- *
- * The `label` prop is mandatory but not visible by default (it is visible for screen readers). You can make it visible to humans by setting `labelVisible` to true.
- *
- * If you are using a single icon with no text for `button.label`, ensure you pass an `alt` property to the icon for accessibility purposes.
- *
- * You can provide an `action` to submit input like a normal HTML form, or an `onSubmit` callback to handle submissions client-side.
- *
- * **Good to know:** SearchBox requires both `SearchBox` and `Button` css/scss files.
- *
- * ```
- * import "@coopdigital/styles/components/Searchbox.css"
- * import "@coopdigital/styles/components/Button.css"
- *
- * ```
- */
 const SearchBox = (_a) => {
     var _b, _c;
     var { action, "aria-placeholder": ariaPlaceholder, autoCapitalize = "off", autoComplete = "off", button = defaultButtonProps, className, label, labelVisible = false, name = "query", onSubmit, placeholder, size = "md", variant = "green" } = _a, props = __rest(_a, ["action", "aria-placeholder", "autoCapitalize", "autoComplete", "button", "className", "label", "labelVisible", "name", "onSubmit", "placeholder", "size", "variant"]);

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

@@ -15,8 +15,5 @@ export interface SignpostProps extends HTMLAttributes<HTMLDivElement> {
     /** **(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, className, headingLevel, href, image, ...props }: SignpostProps) => JSX.Element;
 export default Signpost;

package/dist/components/Signpost/Signpost.js

@@ -3,9 +3,6 @@ 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 = (_a) => {
     var { as, children, className = "", headingLevel = "h3", href, image } = _a, props = __rest(_a, ["as", "children", "className", "headingLevel", "href", "image"]);
     let element = "a";

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

@@ -14,22 +14,5 @@ export interface SkipNavProps extends HTMLAttributes<HTMLDivElement> {
      * Defaults to a single link anchored to `#main` */
     links?: SkipNavLink[];
 }
-/**
- * The Skip Nav component allows screen reader and keyboard users to go directly to the main content.
- *
- * ### Links
- * Links within the skip navigation component should take the user directly to the main areas of the page. These are usually the:
- * - navigation
- * - main content
- * - footer
- * - search (if applicable)
- *
- *
- * ### Using skip navigation on a page
- * - The skip navigation function should be the first thing that appears on a page when it has loaded and a user presses the tab key.
- * - Pressing the tab key again should then cycle through 'skip to main content', 'skip to navigation' and 'skip to footer' links.
- * - 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: ({ className, isVisible, links, ...props }: SkipNavProps) => JSX.Element;
 export default SkipNav;

package/dist/components/SkipNav/SkipNav.js

@@ -2,23 +2,6 @@ import { __rest } from '../../node_modules/tslib/tslib.es6.js';
 import { jsx } from 'react/jsx-runtime';
 
 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.
- *
- * ### Links
- * Links within the skip navigation component should take the user directly to the main areas of the page. These are usually the:
- * - navigation
- * - main content
- * - footer
- * - search (if applicable)
- *
- *
- * ### Using skip navigation on a page
- * - The skip navigation function should be the first thing that appears on a page when it has loaded and a user presses the tab key.
- * - Pressing the tab key again should then cycle through 'skip to main content', 'skip to navigation' and 'skip to footer' links.
- * - 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 = (_a) => {
     var { className = "", isVisible = false, links = defaultLinks } = _a, props = __rest(_a, ["className", "isVisible", "links"]);
     const componentProps = Object.assign({ className: `coop-skip-nav ${className}` }, props);

package/dist/components/Squircle/Squircle.d.ts

@@ -1,6 +1,6 @@
-import type { JSX } from "react";
+import type { HTMLAttributes, JSX } from "react";
 import { CoopBlue, Green, OffersRed } from "../../types/colors";
-export interface SquircleProps {
+export interface SquircleProps extends HTMLAttributes<HTMLDivElement> {
     /** **(Optional)** Specifies the background color of the Squircle. */
     background?: OffersRed | CoopBlue | Green;
     /** **(Optional)** Represents the content inside the Squircle component. It can be any valid JSX or string. */
@@ -10,8 +10,5 @@ export interface SquircleProps {
     /** **(Optional)** Specifies what should be the Squircle size */
     size?: "sm" | "md" | "lg";
 }
-/**
- * Squircle to use on components like Cards, etc.
- */
 export declare const Squircle: ({ background, children, className, size, ...props }: SquircleProps) => JSX.Element;
 export default Squircle;

package/dist/components/Squircle/Squircle.js

@@ -2,9 +2,6 @@ import { __rest } from '../../node_modules/tslib/tslib.es6.js';
 import { jsx } from 'react/jsx-runtime';
 import { bgPropToClass } from '../../utils/index.js';
 
-/**
- * Squircle to use on components like Cards, etc.
- */
 const Squircle = (_a) => {
     var { background = "offers-red", children, className, size = "lg" } = _a, props = __rest(_a, ["background", "children", "className", "size"]);
     const componentProps = Object.assign({ className: `coop-squircle ${bgPropToClass(background, className)} ${className !== null && className !== void 0 ? className : ""}`, "data-size": size.length && size !== "lg" ? size : undefined }, props);

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

@@ -13,15 +13,5 @@ export interface TagProps extends HTMLAttributes<HTMLAnchorElement> {
     /** **(Optional)** Specifies the URL that the Tag component will link to when clicked. */
     href?: string;
 }
-/**
- * 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, background, children, className, href, ...props }: TagProps) => JSX.Element;
 export default Tag;

package/dist/components/Tag/Tag.js

@@ -3,16 +3,6 @@ import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 import React from 'react';
 import { bgPropToClass } from '../../utils/index.js';
 
-/**
- * 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, background = "tint-grey", children, className = "", href } = _a, props = __rest(_a, ["as", "background", "children", "className", "href"]);
     let element = href ? "a" : "span";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.19.2",
+  "version": "0.19.4",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -38,6 +38,7 @@
     "test:e2e:ui": "npx playwright test --ui",
     "test:e2e:ci": "npx playwright test --shard=$CI_NODE_INDEX/$CI_NODE_TOTAL",
     "build": "tsx scripts build",
+    "build:docs": "tsx scripts build-docs",
     "build:icons": "tsx scripts build-icons",
     "build:storybook": "storybook build --disable-telemetry && npm run storybook:fix-paths",
     "storybook": "storybook dev -p 6006",
@@ -49,7 +50,7 @@
   "description": "",
   "devDependencies": {
     "@axe-core/playwright": "^4.10.1",
-    "@coopdigital/styles": "^0.16.2",
+    "@coopdigital/styles": "^0.16.4",
     "@playwright/test": "^1.52.0",
     "@storybook/addon-a11y": "^8.6.12",
     "@storybook/addon-essentials": "^8.6.12",
@@ -74,5 +75,5 @@
   "dependencies": {
     "clsx": "^2.1.1"
   },
-  "gitHead": "b4d3393b2a29e9bffb2b80ee443266106e8f91db"
+  "gitHead": "7d7bc474a5da58c536c9579eec660106366f73ee"
 }

package/src/components/AlertBanner/AlertBanner.tsx

@@ -1,26 +1,16 @@
 import type { HTMLAttributes, JSX, ReactNode } from "react"
 
 export interface AlertBannerProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Represents the content inside the AlertBanner component. It can be any valid JSX or string. */
+  /** **(Optional)** Main content inside the banner. It can be any valid JSX or string. */
   children?: string | ReactNode
-  /** **(Optional)** Receives any className to be applied to AlertBanner component. */
+  /** **(Optional)** Additional CSS classes to be applied to the component. */
   className?: string
-  /** Specifies the AlertBanner heading. */
+  /** Main title of the banner, rendered as a `h2`. */
   heading: string
-  /** **(Optional)** Specifies the AlertBanner variant. */
+  /** **(Optional)** Specify which banner variant to use. */
   variant?: "black" | "default"
 }
 
-/**
- * The Alert Banner component is used to highlight events that might limit availability of a service we provide.
- * <br />
- * - the service the user is trying to access is experiencing problems
- * - planned system maintenance is coming soon
- * - the user’s login session is about to expire
- * <br />
- * <p>Only use alert notifications when absolutely necessary. Using them too often could make the problem worse.<p/>
- *
- */
 export const AlertBanner = ({
   children,
   className = "",

package/src/components/Author/Author.tsx

@@ -3,22 +3,18 @@ import type { HTMLAttributes, JSX } from "react"
 import { Image, ImageProps } from "../Image"
 
 export interface AuthorProps extends HTMLAttributes<HTMLDivElement> {
-  /** **(Optional)** Specifies the content author */
+  /** **(Optional)** Specify the content author. */
   author?: string
-  /** **(Optional)** Receives any className to be applied to Author component. */
+  /** **(Optional)** Additional CSS classes to be applied to the 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.   */
+  /** **(Optional)** Specify the date. Refer to Experience Library guidance on date formats. We advise using the following format (dd mmmm yyyy) eg: 1 January 2000.   */
   date?: string
-  /** **(Optional)** Specifies the text that will prefix the date, e.g. "Published" */
+  /** **(Optional)** Specify the text that will prefix the date, e.g. "Published". */
   datePrefix?: string
-  /** **(Optional)** Specifies the image properties of Author */
+  /** **(Optional)** Specify Image properties of the Author avatar. */
   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",
   className = "",

package/src/components/Button/Button.tsx

@@ -48,9 +48,6 @@ type OnClickHandler =
   | React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>
   | ((event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => Promise<void>)
 
-/**
- * The Button component is an interactive element that people can use to take an action.
- */
 export const Button = ({
   as,
   children,

package/src/components/Card/Card.tsx

@@ -58,9 +58,6 @@ 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 heading, image, and an optional description.
- */
 export const Card = ({
   as,
   background,

package/src/components/Expandable/Expandable.tsx

@@ -16,11 +16,6 @@ export interface ExpandableProps extends DetailsHTMLAttributes<HTMLDetailsElemen
   summary: React.ReactNode
 }
 
-/**
- * The Expandable component wraps content in an expandable block using the details/summary HTML elements.
- * It can be used to reveal more context for a specific issue or action.
- */
-
 export const Expandable = ({
   background = "tint-grey",
   children,

package/src/components/Image/Image.tsx

@@ -34,9 +34,6 @@ 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,

package/src/components/Pill/Pill.tsx

@@ -26,9 +26,6 @@ export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
   size?: "sm" | "md" | "lg" | "xl"
 }
 
-/**
- * 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 = ({
   as,
   background = "tint-grey",

package/src/components/SearchBox/SearchBox.tsx

@@ -42,23 +42,6 @@ const defaultButtonProps: SearchBoxProps["button"] = {
   loadingText: "",
 }
 
-/**
- * SearchBox component allows a person to enter a word or a phrase to find relevant content.
- *
- * The `label` prop is mandatory but not visible by default (it is visible for screen readers). You can make it visible to humans by setting `labelVisible` to true.
- *
- * If you are using a single icon with no text for `button.label`, ensure you pass an `alt` property to the icon for accessibility purposes.
- *
- * You can provide an `action` to submit input like a normal HTML form, or an `onSubmit` callback to handle submissions client-side.
- *
- * **Good to know:** SearchBox requires both `SearchBox` and `Button` css/scss files.
- *
- * ```
- * import "@coopdigital/styles/components/Searchbox.css"
- * import "@coopdigital/styles/components/Button.css"
- *
- * ```
- */
 export const SearchBox = ({
   action,
   "aria-placeholder": ariaPlaceholder,

package/src/components/Signpost/Signpost.tsx

@@ -20,10 +20,6 @@ export interface SignpostProps extends HTMLAttributes<HTMLDivElement> {
   image?: ImageProps
 }
 
-/**
- * Signposts allow you to create links to permanent content you think people are looking for.
- */
-
 export const Signpost = ({
   as,
   children,

package/src/components/SkipNav/SkipNav.tsx

@@ -19,23 +19,6 @@ export interface SkipNavProps extends HTMLAttributes<HTMLDivElement> {
 
 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.
- *
- * ### Links
- * Links within the skip navigation component should take the user directly to the main areas of the page. These are usually the:
- * - navigation
- * - main content
- * - footer
- * - search (if applicable)
- *
- *
- * ### Using skip navigation on a page
- * - The skip navigation function should be the first thing that appears on a page when it has loaded and a user presses the tab key.
- * - Pressing the tab key again should then cycle through 'skip to main content', 'skip to navigation' and 'skip to footer' links.
- * - 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 const SkipNav = ({
   className = "",
   isVisible = false,

package/src/components/Squircle/Squircle.tsx

@@ -1,9 +1,9 @@
-import type { JSX } from "react"
+import type { HTMLAttributes, JSX } from "react"
 
 import { bgPropToClass } from "../../../src/utils"
 import { CoopBlue, Green, OffersRed } from "../../types/colors"
 
-export interface SquircleProps {
+export interface SquircleProps extends HTMLAttributes<HTMLDivElement> {
   /** **(Optional)** Specifies the background color of the Squircle. */
   background?: OffersRed | CoopBlue | Green
   /** **(Optional)** Represents the content inside the Squircle component. It can be any valid JSX or string. */
@@ -14,10 +14,6 @@ export interface SquircleProps {
   size?: "sm" | "md" | "lg"
 }
 
-/**
- * Squircle to use on components like Cards, etc.
- */
-
 export const Squircle = ({
   background = "offers-red",
   children,

package/src/components/Tag/Tag.tsx

@@ -21,17 +21,6 @@ export interface TagProps extends HTMLAttributes<HTMLAnchorElement> {
   href?: string
 }
 
-/**
- * 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,
   background = "tint-grey",