@coopdigital/react 0.6.0 → 0.6.1

package/README.md

@@ -7,7 +7,7 @@
 # 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-16-C08A00.svg '' 
+[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>
@@ -113,19 +113,24 @@ Thanks goes to these wonderful people:
 <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>
-    </tr><br />
-    <tr>
       <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>

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

@@ -1,4 +1,4 @@
-import type { ReactNode, JSX } from "react";
+import type { JSX, ReactNode } from "react";
 export interface AlertBannerProps {
     /** **(Optional)** Specifies a custom aria-label. */
     ariaLabel?: string;

package/dist/components/AlertBanner/AlertBanner.js

@@ -16,7 +16,7 @@ const AlertBanner = ({ ariaLabel, children, className = "", title, variant = "de
         className: `coop-alert-banner ${className}`,
         "data-variant": variant,
     };
-    return (jsx("aside", Object.assign({}, componentProps, { children: jsxs("div", { className: "coop-alert-banner--inner", children: [jsx("h3", { 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: title }), children] }) })));
 };
 
 export { AlertBanner, AlertBanner as default };

package/dist/components/EditorialCard/EditorialCard.d.ts

@@ -1,21 +1,23 @@
-import { ImageProps } from "../Image";
 import type { AnchorHTMLAttributes, ForwardRefExoticComponent, JSX } from "react";
 import React from "react";
+import { ImageProps } from "../Image";
 export interface EditorialCardProps {
-    /** Specifies the custom element to override default `a` or `span` */
+    /** **(Optional)** Specifies the custom element to override default `a` */
     as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string;
-    /** **(Optional)** Represents the content inside the Pill component. It can be any valid JSX or string. */
+    /** **(Optional)** Represents the content inside the EditorialCard component. It can be any valid JSX or string. */
     children?: React.ReactNode;
-    /** Specifies the URL that the EditorialCard component will link to when clicked. */
+    /** **(Optional)** Specifies the heading level of the card's title. */
+    headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6";
+    /** **(Optional)** Specifies the URL that the EditorialCard component will link to when clicked. */
     href?: string;
-    /** Specifies the image URL and alt text of the editorial card */
+    /** Specifies the image URL and alt text of the EditorialCard */
     image: ImageProps;
-    /** Specifies the label of the editorial card */
+    /** **(Optional)** Specifies the label of the EditorialCard */
     label?: string;
-    /** Specifies the layout of the editorial card */
-    layout?: string;
-    /** Specifies the title of the editorial card */
+    /** **(Optional)** Specifies the layout of the EditorialCard */
+    layout?: "vertical" | "horizontal";
+    /** Specifies the title of the EditorialCard */
     title: string;
 }
-export declare const EditorialCard: ({ as, children, href, label, layout, image, title, }: EditorialCardProps) => JSX.Element;
+export declare const EditorialCard: ({ as, children, headingLevel, href, image, label, layout, title, }: EditorialCardProps) => JSX.Element;
 export default EditorialCard;

package/dist/components/EditorialCard/EditorialCard.js

@@ -1,8 +1,8 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Image } from '../Image/Image.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
+import { Image } from '../Image/Image.js';
 
-function getCardContainer(as, href) {
+function getCardLinkElement(as, href) {
     let element = href ? "a" : "div";
     if (as) {
         element = as;
@@ -11,19 +11,17 @@ function getCardContainer(as, href) {
         element,
         props: {
             href,
-            className: "coop-editorial-card--inner",
         },
     };
 }
-const EditorialCard = ({ as, children, href, label = "", layout, image, title, }) => {
-    const container = getCardContainer(as, href);
+const EditorialCard = ({ as, children, headingLevel = "h3", href, image, label = "", layout = "vertical", title, }) => {
+    const linkElement = getCardLinkElement(as, href);
     const imageProps = Object.assign({ crop: "wide" }, image);
     const componentProps = {
         className: "coop-editorial-card",
         "data-layout": layout,
     };
-    const cardInner = (jsxs(Fragment, { children: [jsx(Image, Object.assign({}, imageProps)), jsxs("div", { className: "coop-editorial-card--content", children: [label && jsx("span", { children: label }), jsx("h3", { children: title }), children] })] }));
-    return (jsx("article", Object.assign({}, componentProps, { children: React.createElement(container.element, container.props, cardInner) })));
+    return (jsxs("article", Object.assign({}, componentProps, { children: [jsx(Image, Object.assign({}, imageProps)), jsxs("div", { className: "coop-editorial-card--content", children: [label && jsx("span", { children: label }), React.createElement(linkElement.element, linkElement.props, React.createElement(headingLevel, {}, title)), children] })] })));
 };
 
 export { EditorialCard, EditorialCard as default };

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

@@ -1,15 +1,15 @@
 import type { JSX } from "react";
 export interface ImageProps {
-    /** Specifies text that can replace the image in the page */
+    /** Specifies text that can replace the Image in the page */
     alt: string;
-    /** Specifies the image URL */
+    /** **(Optional)** Specifies the Image crop mode */
+    crop?: "square" | "wide" | "none";
+    /** **(Optional)** Specifies height of the Image */
+    height?: string;
+    /** Specifies the Image URL */
     src: string;
-    /** Specifies width of the image */
+    /** **(Optional)** Specifies width of the Image */
     width?: string;
-    /** Specifies height of the image */
-    height?: string;
-    /** Specifies the image crop mode */
-    crop?: "square" | "wide" | "none";
 }
-export declare const Image: ({ src, alt, width, height, crop }: ImageProps) => JSX.Element;
+export declare const Image: ({ alt, crop, height, src, width }: ImageProps) => JSX.Element;
 export default Image;

package/dist/components/Image/Image.js

@@ -15,22 +15,22 @@ const getContentfulParams = (src, width, height) => {
         (_a = url.searchParams.get(k)) !== null && _a !== void 0 ? _a : url.searchParams.set(k, v);
     });
     return {
+        height: (_a = url.searchParams.get("h")) !== null && _a !== void 0 ? _a : height,
         src: url.toString(),
-        width: (_a = url.searchParams.get("w")) !== null && _a !== void 0 ? _a : width,
-        height: (_b = url.searchParams.get("h")) !== null && _b !== void 0 ? _b : height,
+        width: (_b = url.searchParams.get("w")) !== null && _b !== void 0 ? _b : width,
     };
 };
-const Image = ({ src, alt, width = "640", height, crop }) => {
-    let params = { src, width, height };
+const Image = ({ alt, crop, height, src, width = "640" }) => {
+    let params = { height, src, width };
     if (src.includes("images.ctfassets.net")) {
         params = getContentfulParams(src, width, height);
     }
     const dimensions = {
-        width: params.width,
-        height: params.height,
         "data-crop": crop,
+        height: params.height,
+        width: params.width,
     };
-    return (jsx("picture", { children: jsx("img", Object.assign({ loading: "lazy", alt: alt, src: params.src }, dimensions)) }));
+    return (jsx("picture", { children: jsx("img", Object.assign({ alt: alt, loading: "lazy", src: params.src }, dimensions)) }));
 };
 
 export { Image, Image as default };

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

@@ -1,10 +1,10 @@
 import type { AnchorHTMLAttributes, ForwardRefExoticComponent, JSX } from "react";
 import React from "react";
 export interface PillProps {
-    /** **(Optional)** Specifies the custom element to override default `a` or `span`. */
-    as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string;
     /** **(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. */
     badge?: string;
     /** **(Optional)** Specifies the badge background color from the available options. */

package/dist/components/SkipNav/SkipNav.js

@@ -20,12 +20,12 @@ const defaultLinks = [{ href: "#main", title: "Skip to main content" }];
  */
 const SkipNav = ({ ariaLabel = "", className = "", isVisible = false, links = defaultLinks, }) => {
     const navLinks = links.length > 0 ? links : defaultLinks;
-    return (jsx("nav", { className: "coop-skip-nav", "aria-label": ariaLabel, children: jsx("ul", { children: navLinks.map((link) => {
+    return (jsx("nav", { "aria-label": ariaLabel, className: "coop-skip-nav", children: jsx("ul", { children: navLinks.map((link) => {
                 const linkProps = {
-                    href: link.href,
-                    title: link.title,
                     className: `${className}`,
                     "data-visible": isVisible,
+                    href: link.href,
+                    title: link.title,
                 };
                 return (jsx("li", { children: jsx("a", Object.assign({}, linkProps, { children: link.title })) }, link.href));
             }) }) }));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "main": "dist/index.js",
   "private": false,
   "publishConfig": {
@@ -39,7 +39,7 @@
   "description": "",
   "devDependencies": {
     "@axe-core/playwright": "^4.10.1",
-    "@coopdigital/styles": "^0.5.7",
+    "@coopdigital/styles": "^0.5.8",
     "@playwright/test": "^1.51.1",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-typescript": "^12.1.2",
@@ -65,5 +65,5 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
-  "gitHead": "618022f347d8099ec9aed4413057ed91cce96778"
+  "gitHead": "60cbbc73c648be7d728d36a700bcf2761579548f"
 }

package/src/components/AlertBanner/AlertBanner.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode, JSX } from "react"
+import type { JSX, ReactNode } from "react"
 
 export interface AlertBannerProps {
   /** **(Optional)** Specifies a custom aria-label. */
@@ -38,7 +38,7 @@ export const AlertBanner = ({
   return (
     <aside {...componentProps}>
       <div className="coop-alert-banner--inner">
-        <h3 id="coop-alert-banner--headline">{title}</h3>
+        <h2 id="coop-alert-banner--headline">{title}</h2>
         {children}
       </div>
     </aside>

package/src/components/EditorialCard/EditorialCard.tsx

@@ -1,26 +1,30 @@
-import { Image, ImageProps } from "../Image"
 import type { AnchorHTMLAttributes, ForwardRefExoticComponent, JSX } from "react"
+
 import React from "react"
 
+import { Image, ImageProps } from "../Image"
+
 export interface EditorialCardProps {
-  /** Specifies the custom element to override default `a` or `span` */
+  /** **(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
-  /** **(Optional)** Represents the content inside the Pill component. It can be any valid JSX or string. */
+  /** **(Optional)** Represents the content inside the EditorialCard component. It can be any valid JSX or string. */
   children?: React.ReactNode
-  /** Specifies the URL that the EditorialCard component will link to when clicked. */
+  /** **(Optional)** Specifies the heading level of the card's title. */
+  headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6"
+  /** **(Optional)** Specifies the URL that the EditorialCard component will link to when clicked. */
   href?: string
-  /** Specifies the image URL and alt text of the editorial card */
+  /** Specifies the image URL and alt text of the EditorialCard */
   image: ImageProps
-  /** Specifies the label of the editorial card */
+  /** **(Optional)** Specifies the label of the EditorialCard */
   label?: string
-  /** Specifies the layout of the editorial card */
-  layout?: string
-  /** Specifies the title of the editorial card */
+  /** **(Optional)** Specifies the layout of the EditorialCard */
+  layout?: "vertical" | "horizontal"
+  /** Specifies the title of the EditorialCard */
   title: string
 }
 
-function getCardContainer(as: EditorialCardProps["as"], href?: string) {
+function getCardLinkElement(as: EditorialCardProps["as"], href?: string) {
   let element: EditorialCardProps["as"] = href ? "a" : "div"
 
   if (as) {
@@ -31,7 +35,6 @@ function getCardContainer(as: EditorialCardProps["as"], href?: string) {
     element,
     props: {
       href,
-      className: "coop-editorial-card--inner",
     },
   }
 }
@@ -39,13 +42,14 @@ function getCardContainer(as: EditorialCardProps["as"], href?: string) {
 export const EditorialCard = ({
   as,
   children,
+  headingLevel = "h3",
   href,
-  label = "",
-  layout,
   image,
+  label = "",
+  layout = "vertical",
   title,
 }: EditorialCardProps): JSX.Element => {
-  const container = getCardContainer(as, href)
+  const linkElement = getCardLinkElement(as, href)
 
   const imageProps: ImageProps = {
     crop: "wide",
@@ -57,20 +61,18 @@ export const EditorialCard = ({
     "data-layout": layout,
   }
 
-  const cardInner = (
-    <>
+  return (
+    <article {...componentProps}>
       <Image {...imageProps} />
       <div className="coop-editorial-card--content">
         {label && <span>{label}</span>}
-        <h3>{title}</h3>
+        {React.createElement(
+          linkElement.element,
+          linkElement.props,
+          React.createElement(headingLevel, {}, title)
+        )}
         {children}
       </div>
-    </>
-  )
-
-  return (
-    <article {...componentProps}>
-      {React.createElement(container.element, container.props, cardInner)}
     </article>
   )
 }

package/src/components/Image/Image.tsx

@@ -1,16 +1,16 @@
 import type { JSX } from "react"
 
 export interface ImageProps {
-  /** Specifies text that can replace the image in the page */
+  /** Specifies text that can replace the Image in the page */
   alt: string
-  /** Specifies the image URL */
+  /** **(Optional)** Specifies the Image crop mode */
+  crop?: "square" | "wide" | "none"
+  /** **(Optional)** Specifies height of the Image */
+  height?: string
+  /** Specifies the Image URL */
   src: string
-  /** Specifies width of the image */
+  /** **(Optional)** Specifies width of the Image */
   width?: string
-  /** Specifies height of the image */
-  height?: string
-  /** Specifies the image crop mode */
-  crop?: "square" | "wide" | "none"
 }
 
 const getContentfulParams = (src: string, width: string, height: string | undefined) => {
@@ -28,28 +28,28 @@ const getContentfulParams = (src: string, width: string, height: string | undefi
   })
 
   return {
+    height: url.searchParams.get("h") ?? height,
     src: url.toString(),
     width: url.searchParams.get("w") ?? width,
-    height: url.searchParams.get("h") ?? height,
   }
 }
 
-export const Image = ({ src, alt, width = "640", height, crop }: ImageProps): JSX.Element => {
-  let params = { src, width, height }
+export const Image = ({ alt, crop, height, src, width = "640" }: ImageProps): JSX.Element => {
+  let params = { height, src, width }
 
   if (src.includes("images.ctfassets.net")) {
     params = getContentfulParams(src, width, height)
   }
 
   const dimensions = {
-    width: params.width,
-    height: params.height,
     "data-crop": crop,
+    height: params.height,
+    width: params.width,
   }
 
   return (
     <picture>
-      <img loading="lazy" alt={alt} src={params.src} {...dimensions} />
+      <img alt={alt} loading="lazy" src={params.src} {...dimensions} />
     </picture>
   )
 }

package/src/components/Pill/Pill.tsx

@@ -1,12 +1,13 @@
 import type { AnchorHTMLAttributes, ForwardRefExoticComponent, JSX } from "react"
+
 import React from "react"
 
 export interface PillProps {
+  /** **(Optional)** Specifies a custom aria-label. */
+  ariaLabel?: string
   /** **(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)** Specifies a custom aria-label. */
-  ariaLabel?: string
   /** **(Optional)** Specifies what text Pill should display on the badge. */
   badge?: string
   /** **(Optional)** Specifies the badge background color from the available options. */

package/src/components/SkipNav/SkipNav.tsx

@@ -46,14 +46,14 @@ export const SkipNav = ({
 }: SkipNavProps): JSX.Element => {
   const navLinks = links.length > 0 ? links : defaultLinks
   return (
-    <nav className="coop-skip-nav" aria-label={ariaLabel}>
+    <nav aria-label={ariaLabel} className="coop-skip-nav">
       <ul>
         {navLinks.map((link) => {
           const linkProps = {
-            href: link.href,
-            title: link.title,
             className: `${className}`,
             "data-visible": isVisible,
+            href: link.href,
+            title: link.title,
           }
           return (
             <li key={link.href}>