@coopdigital/react 0.5.2 → 0.6.0

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

@@ -0,0 +1,25 @@
+import type { ReactNode, JSX } from "react";
+export interface AlertBannerProps {
+    /** **(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. */
+    className?: string;
+    /** Specifies the AlertBanner title. */
+    title: string;
+    /** **(Optional)** Specifies the AlertBanner variant. */
+    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: ({ ariaLabel, children, className, title, variant, }: AlertBannerProps) => JSX.Element;
+export default AlertBanner;

package/dist/components/AlertBanner/AlertBanner.js

@@ -0,0 +1,22 @@
+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 = ({ ariaLabel, children, className = "", title, variant = "default", }) => {
+    const componentProps = {
+        "aria-label": ariaLabel,
+        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] }) })));
+};
+
+export { AlertBanner, AlertBanner as default };

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

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

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

@@ -0,0 +1,21 @@
+import { ImageProps } from "../Image";
+import type { AnchorHTMLAttributes, ForwardRefExoticComponent, JSX } from "react";
+import React from "react";
+export interface EditorialCardProps {
+    /** Specifies the custom element to override default `a` or `span` */
+    as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string;
+    /** **(Optional)** Represents the content inside the Pill component. It can be any valid JSX or string. */
+    children?: React.ReactNode;
+    /** 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 */
+    image: ImageProps;
+    /** Specifies the label of the editorial card */
+    label?: string;
+    /** Specifies the layout of the editorial card */
+    layout?: string;
+    /** Specifies the title of the editorial card */
+    title: string;
+}
+export declare const EditorialCard: ({ as, children, href, label, layout, image, title, }: EditorialCardProps) => JSX.Element;
+export default EditorialCard;

package/dist/components/EditorialCard/EditorialCard.js

@@ -0,0 +1,29 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Image } from '../Image/Image.js';
+import React from 'react';
+
+function getCardContainer(as, href) {
+    let element = href ? "a" : "div";
+    if (as) {
+        element = as;
+    }
+    return {
+        element,
+        props: {
+            href,
+            className: "coop-editorial-card--inner",
+        },
+    };
+}
+const EditorialCard = ({ as, children, href, label = "", layout, image, title, }) => {
+    const container = getCardContainer(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) })));
+};
+
+export { EditorialCard, EditorialCard as default };

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

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

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

@@ -0,0 +1,15 @@
+import type { JSX } from "react";
+export interface ImageProps {
+    /** Specifies text that can replace the image in the page */
+    alt: string;
+    /** Specifies the image URL */
+    src: string;
+    /** 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 default Image;

package/dist/components/Image/Image.js

@@ -0,0 +1,36 @@
+import { jsx } from 'react/jsx-runtime';
+
+const getContentfulParams = (src, width, height) => {
+    var _a, _b;
+    const url = !src.startsWith("http") ? new URL("https://" + src) : new URL(src);
+    const params = [
+        ["fm", "webp"],
+        ["q", "70"],
+        ["fit", "fill"],
+        ["w", width],
+        ...(height ? [["h", height]] : []),
+    ];
+    params.forEach(([k, v]) => {
+        var _a;
+        (_a = url.searchParams.get(k)) !== null && _a !== void 0 ? _a : url.searchParams.set(k, v);
+    });
+    return {
+        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,
+    };
+};
+const Image = ({ src, alt, width = "640", height, crop }) => {
+    let params = { src, width, height };
+    if (src.includes("images.ctfassets.net")) {
+        params = getContentfulParams(src, width, height);
+    }
+    const dimensions = {
+        width: params.width,
+        height: params.height,
+        "data-crop": crop,
+    };
+    return (jsx("picture", { children: jsx("img", Object.assign({ loading: "lazy", alt: alt, src: params.src }, dimensions)) }));
+};
+
+export { Image, Image as default };

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

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

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

@@ -1,4 +1,5 @@
-import React, { AnchorHTMLAttributes, ForwardRefExoticComponent } from "react";
+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;
@@ -19,5 +20,5 @@ export interface PillProps {
     /** **(Optional)** Specifies what should be the Pill size. */
     size?: "sm" | "md" | "lg" | "xl";
 }
-export declare const Pill: ({ ariaLabel, as, badge, badgeColor, children, className, href, pillColor, size, }: PillProps) => React.ReactElement<React.AnchorHTMLAttributes<HTMLElement>, string | React.JSXElementConstructor<any>>;
+export declare const Pill: ({ ariaLabel, as, badge, badgeColor, children, className, href, pillColor, size, }: PillProps) => JSX.Element;
 export default Pill;

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

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 interface SkipNavLink {
     href: string;
     title: string;
@@ -32,5 +33,5 @@ export interface SkipNavProps {
  * - 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, }: SkipNavProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SkipNav: ({ ariaLabel, className, isVisible, links, }: SkipNavProps) => JSX.Element;
 export default SkipNav;

package/dist/components/SkipNav/SkipNav.js

@@ -0,0 +1,34 @@
+import { jsx } from 'react/jsx-runtime';
+
+const defaultLinks = [{ href: "#main", title: "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 = ({ 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) => {
+                const linkProps = {
+                    href: link.href,
+                    title: link.title,
+                    className: `${className}`,
+                    "data-visible": isVisible,
+                };
+                return (jsx("li", { children: jsx("a", Object.assign({}, linkProps, { children: link.title })) }, link.href));
+            }) }) }));
+};
+
+export { SkipNav, SkipNav as default };

package/dist/index.d.ts

@@ -1 +1,5 @@
+export * from "./components/AlertBanner";
+export * from "./components/EditorialCard";
+export * from "./components/Image";
 export * from "./components/Pill";
+export * from "./components/SkipNav";

package/dist/index.js

@@ -1 +1,5 @@
+export { AlertBanner } from './components/AlertBanner/AlertBanner.js';
+export { EditorialCard } from './components/EditorialCard/EditorialCard.js';
+export { Image } from './components/Image/Image.js';
 export { Pill } from './components/Pill/Pill.js';
+export { SkipNav } from './components/SkipNav/SkipNav.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "main": "dist/index.js",
   "private": false,
   "publishConfig": {
@@ -25,10 +25,11 @@
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
-    "build": "tsx scripts build",
-    "build:storybook": "storybook build --disable-telemetry && npm run storybook:fix-paths",
     "test:e2e": "npx playwright test",
     "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:storybook": "storybook build --disable-telemetry && npm run storybook:fix-paths",
     "storybook": "storybook dev -p 6006",
     "storybook:playwright": "storybook dev -p 9000",
     "storybook:fix-paths": "tsx scripts/storybook-fix-paths.ts"
@@ -38,31 +39,31 @@
   "description": "",
   "devDependencies": {
     "@axe-core/playwright": "^4.10.1",
-    "@coopdigital/styles": "^0.5.5",
-    "@playwright/test": "^1.50.1",
-    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@coopdigital/styles": "^0.5.7",
+    "@playwright/test": "^1.51.1",
+    "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-typescript": "^12.1.2",
-    "@storybook/addon-a11y": "^8.6.4",
-    "@storybook/addon-essentials": "^8.6.4",
-    "@storybook/addon-interactions": "^8.6.4",
-    "@storybook/addon-mdx-gfm": "^8.6.4",
-    "@storybook/addon-onboarding": "^8.6.4",
-    "@storybook/blocks": "^8.6.4",
-    "@storybook/manager-api": "^8.6.4",
-    "@storybook/react": "^8.6.4",
-    "@storybook/react-vite": "^8.6.4",
-    "@storybook/test": "^8.6.4",
-    "@storybook/theming": "^8.6.4",
+    "@storybook/addon-a11y": "^8.6.6",
+    "@storybook/addon-essentials": "^8.6.6",
+    "@storybook/addon-interactions": "^8.6.6",
+    "@storybook/addon-mdx-gfm": "^8.6.6",
+    "@storybook/addon-onboarding": "^8.6.6",
+    "@storybook/blocks": "^8.6.6",
+    "@storybook/manager-api": "^8.6.6",
+    "@storybook/react": "^8.6.6",
+    "@storybook/react-vite": "^8.6.6",
+    "@storybook/test": "^8.6.6",
+    "@storybook/theming": "^8.6.6",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
-    "@types/react": "^19.0.10",
+    "@types/react": "^19.0.12",
     "@types/react-dom": "^19.0.4",
-    "rollup": "^4.34.8",
-    "storybook": "^8.6.4"
+    "rollup": "^4.36.0",
+    "storybook": "^8.6.6"
   },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
-  "gitHead": "f292a4bba122b73db52ff17fa53eb90e7420c651"
+  "gitHead": "618022f347d8099ec9aed4413057ed91cce96778"
 }

package/src/components/AlertBanner/AlertBanner.tsx

@@ -0,0 +1,48 @@
+import type { ReactNode, JSX } from "react"
+
+export interface AlertBannerProps {
+  /** **(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. */
+  className?: string
+  /** Specifies the AlertBanner title. */
+  title: string
+  /** **(Optional)** Specifies the AlertBanner variant. */
+  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 = ({
+  ariaLabel,
+  children,
+  className = "",
+  title,
+  variant = "default",
+}: AlertBannerProps): JSX.Element => {
+  const componentProps = {
+    "aria-label": ariaLabel,
+    className: `coop-alert-banner ${className}`,
+    "data-variant": variant,
+  }
+  return (
+    <aside {...componentProps}>
+      <div className="coop-alert-banner--inner">
+        <h3 id="coop-alert-banner--headline">{title}</h3>
+        {children}
+      </div>
+    </aside>
+  )
+}
+
+export default AlertBanner

package/src/components/AlertBanner/index.ts

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

package/src/components/EditorialCard/EditorialCard.tsx

@@ -0,0 +1,78 @@
+import { Image, ImageProps } from "../Image"
+import type { AnchorHTMLAttributes, ForwardRefExoticComponent, JSX } from "react"
+import React from "react"
+
+export interface EditorialCardProps {
+  /** Specifies the custom element to override default `a` or `span` */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string
+  /** **(Optional)** Represents the content inside the Pill component. It can be any valid JSX or string. */
+  children?: React.ReactNode
+  /** 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 */
+  image: ImageProps
+  /** Specifies the label of the editorial card */
+  label?: string
+  /** Specifies the layout of the editorial card */
+  layout?: string
+  /** Specifies the title of the editorial card */
+  title: string
+}
+
+function getCardContainer(as: EditorialCardProps["as"], href?: string) {
+  let element: EditorialCardProps["as"] = href ? "a" : "div"
+
+  if (as) {
+    element = as
+  }
+
+  return {
+    element,
+    props: {
+      href,
+      className: "coop-editorial-card--inner",
+    },
+  }
+}
+
+export const EditorialCard = ({
+  as,
+  children,
+  href,
+  label = "",
+  layout,
+  image,
+  title,
+}: EditorialCardProps): JSX.Element => {
+  const container = getCardContainer(as, href)
+
+  const imageProps: ImageProps = {
+    crop: "wide",
+    ...image,
+  }
+
+  const componentProps = {
+    className: "coop-editorial-card",
+    "data-layout": layout,
+  }
+
+  const cardInner = (
+    <>
+      <Image {...imageProps} />
+      <div className="coop-editorial-card--content">
+        {label && <span>{label}</span>}
+        <h3>{title}</h3>
+        {children}
+      </div>
+    </>
+  )
+
+  return (
+    <article {...componentProps}>
+      {React.createElement(container.element, container.props, cardInner)}
+    </article>
+  )
+}
+
+export default EditorialCard

package/src/components/EditorialCard/index.ts

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

package/src/components/Image/Image.tsx

@@ -0,0 +1,57 @@
+import type { JSX } from "react"
+
+export interface ImageProps {
+  /** Specifies text that can replace the image in the page */
+  alt: string
+  /** Specifies the image URL */
+  src: string
+  /** 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) => {
+  const url = !src.startsWith("http") ? new URL("https://" + src) : new URL(src)
+  const params = [
+    ["fm", "webp"],
+    ["q", "70"],
+    ["fit", "fill"],
+    ["w", width],
+    ...(height ? [["h", height]] : []),
+  ]
+
+  params.forEach(([k, v]) => {
+    url.searchParams.get(k) ?? url.searchParams.set(k, v)
+  })
+
+  return {
+    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 }
+
+  if (src.includes("images.ctfassets.net")) {
+    params = getContentfulParams(src, width, height)
+  }
+
+  const dimensions = {
+    width: params.width,
+    height: params.height,
+    "data-crop": crop,
+  }
+
+  return (
+    <picture>
+      <img loading="lazy" alt={alt} src={params.src} {...dimensions} />
+    </picture>
+  )
+}
+
+export default Image

package/src/components/Image/index.ts

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

package/src/components/Pill/Pill.tsx

@@ -1,4 +1,5 @@
-import React, { AnchorHTMLAttributes, ForwardRefExoticComponent } from "react"
+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`. */
@@ -32,7 +33,7 @@ export const Pill = ({
   href,
   pillColor = "blue",
   size = "md",
-}: PillProps) => {
+}: PillProps): JSX.Element => {
   let element: PillProps["as"] = href ? "a" : "span"
 
   if (as) {

package/src/components/SkipNav/SkipNav.tsx

@@ -1,7 +1,10 @@
+import type { JSX } from "react"
+
 interface SkipNavLink {
   href: string
   title: string
 }
+
 export interface SkipNavProps {
   /** **(Optional)** Specifies a custom aria-label. */
   ariaLabel?: string
@@ -40,24 +43,24 @@ export const SkipNav = ({
   className = "",
   isVisible = false,
   links = defaultLinks,
-}: SkipNavProps) => {
+}: SkipNavProps): JSX.Element => {
   const navLinks = links.length > 0 ? links : defaultLinks
-
   return (
     <nav className="coop-skip-nav" aria-label={ariaLabel}>
-      <ul className="coop-skip-nav__list">
-        {navLinks.map((link) => (
-          <li key={link.href}>
-            <a
-              href={link.href}
-              title={link.title}
-              className={`coop-skip-nav__link ${className}`}
-              data-visible={isVisible}
-            >
-              {link.title}
-            </a>
-          </li>
-        ))}
+      <ul>
+        {navLinks.map((link) => {
+          const linkProps = {
+            href: link.href,
+            title: link.title,
+            className: `${className}`,
+            "data-visible": isVisible,
+          }
+          return (
+            <li key={link.href}>
+              <a {...linkProps}>{link.title}</a>
+            </li>
+          )
+        })}
       </ul>
     </nav>
   )

package/src/index.ts

@@ -1 +1,5 @@
+export * from "./components/AlertBanner"
+export * from "./components/EditorialCard"
+export * from "./components/Image"
 export * from "./components/Pill"
+export * from "./components/SkipNav"