@coopdigital/react 0.5.3 → 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 { ReactNode } from "react";
+import type { JSX, ReactNode } from "react";
 export interface AlertBannerProps {
     /** **(Optional)** Specifies a custom aria-label. */
     ariaLabel?: string;
@@ -21,5 +21,5 @@ export interface AlertBannerProps {
  * <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) => import("react/jsx-runtime").JSX.Element;
+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("h2", { id: "coop-alert-banner--headline", children: title }), children] }) })));
+};
+
+export { AlertBanner, AlertBanner as default };

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

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

package/dist/components/EditorialCard/EditorialCard.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Image } from '../Image/Image.js';
+
+function getCardLinkElement(as, href) {
+    let element = href ? "a" : "div";
+    if (as) {
+        element = as;
+    }
+    return {
+        element,
+        props: {
+            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,
+    };
+    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/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;
+    /** **(Optional)** Specifies the Image crop mode */
+    crop?: "square" | "wide" | "none";
+    /** **(Optional)** Specifies height of the Image */
+    height?: string;
+    /** Specifies the Image URL */
+    src: string;
+    /** **(Optional)** Specifies width of the Image */
+    width?: string;
+}
+export declare const Image: ({ alt, crop, height, src, width }: 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 {
+        height: (_a = url.searchParams.get("h")) !== null && _a !== void 0 ? _a : height,
+        src: url.toString(),
+        width: (_b = url.searchParams.get("w")) !== null && _b !== void 0 ? _b : width,
+    };
+};
+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 = {
+        "data-crop": crop,
+        height: params.height,
+        width: params.width,
+    };
+    return (jsx("picture", { children: jsx("img", Object.assign({ alt: alt, loading: "lazy", 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,9 +1,10 @@
-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;
     /** **(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. */
@@ -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", { "aria-label": ariaLabel, className: "coop-skip-nav", children: jsx("ul", { children: navLinks.map((link) => {
+                const linkProps = {
+                    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));
+            }) }) }));
+};
+
+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.3",
+  "version": "0.6.1",
   "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.6",
-    "@playwright/test": "^1.51.0",
+    "@coopdigital/styles": "^0.5.8",
+    "@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.35.0",
-    "storybook": "^8.6.4"
+    "rollup": "^4.36.0",
+    "storybook": "^8.6.6"
   },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
-  "gitHead": "a275fea237a8e1f918e9fd4bd0f18ba114e7ab34"
+  "gitHead": "60cbbc73c648be7d728d36a700bcf2761579548f"
 }

package/src/components/AlertBanner/AlertBanner.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react"
+import type { JSX, ReactNode } from "react"
 
 export interface AlertBannerProps {
   /** **(Optional)** Specifies a custom aria-label. */
@@ -29,7 +29,7 @@ export const AlertBanner = ({
   className = "",
   title,
   variant = "default",
-}: AlertBannerProps) => {
+}: AlertBannerProps): JSX.Element => {
   const componentProps = {
     "aria-label": ariaLabel,
     className: `coop-alert-banner ${className}`,
@@ -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

@@ -0,0 +1,80 @@
+import type { AnchorHTMLAttributes, ForwardRefExoticComponent, JSX } from "react"
+
+import React from "react"
+
+import { Image, ImageProps } from "../Image"
+
+export interface EditorialCardProps {
+  /** **(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 EditorialCard component. It can be any valid JSX or string. */
+  children?: React.ReactNode
+  /** **(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 EditorialCard */
+  image: ImageProps
+  /** **(Optional)** Specifies the label of the EditorialCard */
+  label?: string
+  /** **(Optional)** Specifies the layout of the EditorialCard */
+  layout?: "vertical" | "horizontal"
+  /** Specifies the title of the EditorialCard */
+  title: string
+}
+
+function getCardLinkElement(as: EditorialCardProps["as"], href?: string) {
+  let element: EditorialCardProps["as"] = href ? "a" : "div"
+
+  if (as) {
+    element = as
+  }
+
+  return {
+    element,
+    props: {
+      href,
+    },
+  }
+}
+
+export const EditorialCard = ({
+  as,
+  children,
+  headingLevel = "h3",
+  href,
+  image,
+  label = "",
+  layout = "vertical",
+  title,
+}: EditorialCardProps): JSX.Element => {
+  const linkElement = getCardLinkElement(as, href)
+
+  const imageProps: ImageProps = {
+    crop: "wide",
+    ...image,
+  }
+
+  const componentProps = {
+    className: "coop-editorial-card",
+    "data-layout": layout,
+  }
+
+  return (
+    <article {...componentProps}>
+      <Image {...imageProps} />
+      <div className="coop-editorial-card--content">
+        {label && <span>{label}</span>}
+        {React.createElement(
+          linkElement.element,
+          linkElement.props,
+          React.createElement(headingLevel, {}, title)
+        )}
+        {children}
+      </div>
+    </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
+  /** **(Optional)** Specifies the Image crop mode */
+  crop?: "square" | "wide" | "none"
+  /** **(Optional)** Specifies height of the Image */
+  height?: string
+  /** Specifies the Image URL */
+  src: string
+  /** **(Optional)** Specifies width of the Image */
+  width?: string
+}
+
+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 {
+    height: url.searchParams.get("h") ?? height,
+    src: url.toString(),
+    width: url.searchParams.get("w") ?? width,
+  }
+}
+
+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 = {
+    "data-crop": crop,
+    height: params.height,
+    width: params.width,
+  }
+
+  return (
+    <picture>
+      <img alt={alt} loading="lazy" 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,11 +1,13 @@
-import React, { AnchorHTMLAttributes, ForwardRefExoticComponent } from "react"
+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. */
@@ -32,7 +34,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,17 +43,17 @@ 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}>
+    <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}>

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"