@coopdigital/react 0.5.1 → 0.5.3

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

@@ -0,0 +1,25 @@
+import { ReactNode } 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) => import("react/jsx-runtime").JSX.Element;
+export default AlertBanner;

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/Pill/Pill.d.ts

@@ -1,22 +1,22 @@
 import React, { AnchorHTMLAttributes, ForwardRefExoticComponent } from "react";
 export interface PillProps {
-    /** Specifies the custom element to override default `a` or `span` */
+    /** **(Optional)** Specifies the custom element to override default `a` or `span`. */
     as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string;
-    /** Specifies a custom aria-label */
+    /** **(Optional)** Specifies a custom aria-label. */
     ariaLabel?: string;
-    /** Specifies what text Pill should display on the badge. */
+    /** **(Optional)** Specifies what text Pill should display on the badge. */
     badge?: string;
-    /** Specifies the badge background color from the available options. */
+    /** **(Optional)** Specifies the badge background color from the available options. */
     badgeColor?: "green" | "orange" | "red" | "pink";
-    /** Represents the content inside the Pill component. It can be any valid JSX or string. */
+    /** **(Optional)** Represents the content inside the Pill component. It can be any valid JSX or string. */
     children?: React.ReactNode;
-    /** Receives any optional className to be applied to Pill component. */
+    /** **(Optional)** Receives any className to be applied to Pill component. */
     className?: string;
-    /** Specifies the URL that the Pill component will link to when clicked. */
+    /** **(Optional)** Specifies the URL that the Pill component will link to when clicked. */
     href?: string;
-    /** Specifies the Pill background color from the available options. */
+    /** **(Optional)** Specifies the Pill background color from the available options. */
     pillColor?: "blue" | "pink";
-    /** Specifies what should be the Pill size. */
+    /** **(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>>;

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

@@ -0,0 +1,36 @@
+interface SkipNavLink {
+    href: string;
+    title: string;
+}
+export interface SkipNavProps {
+    /** **(Optional)** Specifies a custom aria-label. */
+    ariaLabel?: string;
+    /** **(Optional)** Receives any className to be applied to Skip Nav component. */
+    className?: string;
+    /** **(Optional)** Specifies if the component is visible straight away or only when pressing 'Tab'. */
+    isVisible?: boolean;
+    /** **(Optional)** Specifies the links that are going to be shown on the Skip Nav.
+     * It is an `array` of items and each item should have `href` and `title` information.
+     *
+     * 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: ({ ariaLabel, className, isVisible, links, }: SkipNavProps) => import("react/jsx-runtime").JSX.Element;
+export default SkipNav;

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

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "main": "dist/index.js",
   "private": false,
   "publishConfig": {
@@ -38,9 +38,9 @@
   "description": "",
   "devDependencies": {
     "@axe-core/playwright": "^4.10.1",
-    "@coopdigital/styles": "^0.5.4",
-    "@playwright/test": "^1.50.1",
-    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@coopdigital/styles": "^0.5.6",
+    "@playwright/test": "^1.51.0",
+    "@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",
@@ -57,12 +57,12 @@
     "@testing-library/react": "^16.2.0",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
-    "rollup": "^4.34.8",
+    "rollup": "^4.35.0",
     "storybook": "^8.6.4"
   },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
-  "gitHead": "634e2f73ada33fd85e9adef7b6ef8d84ae506afd"
+  "gitHead": "a275fea237a8e1f918e9fd4bd0f18ba114e7ab34"
 }

package/src/components/AlertBanner/AlertBanner.tsx

@@ -0,0 +1,48 @@
+import { ReactNode } 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) => {
+  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/Pill/Pill.tsx

@@ -1,24 +1,24 @@
 import React, { AnchorHTMLAttributes, ForwardRefExoticComponent } from "react"
 
 export interface PillProps {
-  /** Specifies the custom element to override default `a` or `span` */
+  /** **(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
-  /** Specifies a custom aria-label */
+  /** **(Optional)** Specifies a custom aria-label. */
   ariaLabel?: string
-  /** Specifies what text Pill should display on the badge. */
+  /** **(Optional)** Specifies what text Pill should display on the badge. */
   badge?: string
-  /** Specifies the badge background color from the available options. */
+  /** **(Optional)** Specifies the badge background color from the available options. */
   badgeColor?: "green" | "orange" | "red" | "pink"
-  /** Represents the content inside the Pill component. It can be any valid JSX or string. */
+  /** **(Optional)** Represents the content inside the Pill component. It can be any valid JSX or string. */
   children?: React.ReactNode
-  /** Receives any optional className to be applied to Pill component. */
+  /** **(Optional)** Receives any className to be applied to Pill component. */
   className?: string
-  /** Specifies the URL that the Pill component will link to when clicked. */
+  /** **(Optional)** Specifies the URL that the Pill component will link to when clicked. */
   href?: string
-  /** Specifies the Pill background color from the available options. */
+  /** **(Optional)** Specifies the Pill background color from the available options. */
   pillColor?: "blue" | "pink"
-  /** Specifies what should be the Pill size. */
+  /** **(Optional)** Specifies what should be the Pill size. */
   size?: "sm" | "md" | "lg" | "xl"
 }
 

package/src/components/SkipNav/SkipNav.tsx

@@ -0,0 +1,66 @@
+interface SkipNavLink {
+  href: string
+  title: string
+}
+export interface SkipNavProps {
+  /** **(Optional)** Specifies a custom aria-label. */
+  ariaLabel?: string
+  /** **(Optional)** Receives any className to be applied to Skip Nav component. */
+  className?: string
+  /** **(Optional)** Specifies if the component is visible straight away or only when pressing 'Tab'. */
+  isVisible?: boolean
+  /** **(Optional)** Specifies the links that are going to be shown on the Skip Nav.
+   * It is an `array` of items and each item should have `href` and `title` information.
+   *
+   * Defaults to a single link anchored to `#main` */
+  links?: SkipNavLink[]
+}
+
+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.
+ */
+export const SkipNav = ({
+  ariaLabel = "",
+  className = "",
+  isVisible = false,
+  links = defaultLinks,
+}: SkipNavProps) => {
+  const navLinks = links.length > 0 ? links : defaultLinks
+  return (
+    <nav className="coop-skip-nav" aria-label={ariaLabel}>
+      <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>
+  )
+}
+
+export default SkipNav

package/src/components/SkipNav/index.ts

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

package/src/styles/Text.mdx

@@ -21,6 +21,15 @@ export const SampleText = "Lorem ipsum dolor..."
 > <h5 className="coop-t-headline coop-t-headline-upper coop-t-headline-blue">h5: {SampleText}</h5>
 > <h6 className="coop-t-headline coop-t-headline-upper coop-t-headline-blue">h6: {SampleText}</h6>
 
+> ```jsx
+> <h1 className="coop-t-headline coop-t-headline-upper">h1: {SampleText}</h1>
+> <h2 className="coop-t-headline coop-t-headline-upper coop-t-headline-blue">h2: {SampleText}</h2>
+> <h3 className="coop-t-headline coop-t-headline-upper coop-t-headline-blue">h3: {SampleText}</h3>
+> <h4 className="coop-t-headline coop-t-headline-upper coop-t-headline-blue">h4: {SampleText}</h4>
+> <h5 className="coop-t-headline coop-t-headline-upper coop-t-headline-blue">h5: {SampleText}</h5>
+> <h6 className="coop-t-headline coop-t-headline-upper coop-t-headline-blue">h6: {SampleText}</h6>
+> ```
+
 <br />
 
 > <h1 className="coop-t-headline coop-t-headline-blue">h1: {SampleText}</h1>
@@ -30,6 +39,15 @@ export const SampleText = "Lorem ipsum dolor..."
 > <h5 className="coop-t-headline coop-t-headline-blue">h5: {SampleText}</h5>
 > <h6 className="coop-t-headline coop-t-headline-blue">h6: {SampleText}</h6>
 
+> ```jsx
+> <h1 className="coop-t-headline coop-t-headline-blue">h1: {SampleText}</h1>
+> <h2 className="coop-t-headline coop-t-headline-blue">h2: {SampleText}</h2>
+> <h3 className="coop-t-headline coop-t-headline-blue">h3: {SampleText}</h3>
+> <h4 className="coop-t-headline coop-t-headline-blue">h4: {SampleText}</h4>
+> <h5 className="coop-t-headline coop-t-headline-blue">h5: {SampleText}</h5>
+> <h6 className="coop-t-headline coop-t-headline-blue">h6: {SampleText}</h6>
+> ```
+
 <br />
 <br />
 <br />
@@ -42,15 +60,39 @@ export const SampleText = "Lorem ipsum dolor..."
 > <h4>h4: {SampleText}</h4>
 > <h5>h5: {SampleText}</h5>
 > <h6>h6: {SampleText}</h6>
->
+
+> ```jsx
+> <h1>h1: {SampleText}</h1>
+> <h2>h2: {SampleText}</h2>
+> <h3>h3: {SampleText}</h3>
+> <h4>h4: {SampleText}</h4>
+> <h5>h5: {SampleText}</h5>
+> <h6>h6: {SampleText}</h6>
+> ```
+
+> <p class="coop-t-lead-p">Lead paragraph</p>
 > <hr />
->
+> <p>Paragraph text: {SampleText}</p>
+> <a href="">Link</a>
+
+> ```jsx
 > <p class="coop-t-lead-p">Lead paragraph</p>
->
+> <hr />
 > <p>Paragraph text: {SampleText}</p>
 > <a href="">Link</a>
-> <br />
-> <br />
+> ```
+
+> <p>Lists:</p>
+> <ul>
+>   <li>Option 1</li>
+>   <li>Option 1</li>
+> </ul>
+> <ol>
+>   <li>Option 1</li>
+>   <li>Option 1</li>
+> </ol>
+
+> ```jsx
 > <p>Lists:</p>
 > <ul>
 >   <li>Option 1</li>
@@ -60,6 +102,7 @@ export const SampleText = "Lorem ipsum dolor..."
 >   <li>Option 1</li>
 >   <li>Option 1</li>
 > </ol>
+> ```
 
 </Unstyled>
 
@@ -70,3 +113,7 @@ export const SampleText = "Lorem ipsum dolor..."
   }
   `}
 </style>
+
+```
+
+```

package/src/styles/Typography.mdx

@@ -22,7 +22,7 @@ export const SampleTextUppercase = SampleText.toUpperCase()
 
 # Typography
 
-**Font:** Avenir Next<br />
+**Font:** Avenir Next ( as `--font-family`)<br />
 **Weights:** 400 (regular), 500 (medium), 600 (demi)
 
 <Typeset
@@ -32,7 +32,7 @@ export const SampleTextUppercase = SampleText.toUpperCase()
   fontFamily={typography.type.primary}
 />
 
-**Font:** Co-op Headline <br />
+**Font:** Co-op Headline ( as `--font-family-headline`)<br />
 **Weights:** 700 (bold)
 
 <Typeset
@@ -41,3 +41,9 @@ export const SampleTextUppercase = SampleText.toUpperCase()
   sampleText={SampleTextUppercase}
   fontFamily={typography.type.headline}
 />
+
+<p>
+  <b>Note:</b>
+  The type sizes shown above have been chosen as our standard type sizes.
+  <br /> They are available as CSS variables, e.g. `--type-size-10`, `--type-size-12`, etc.
+</p>