@coopdigital/react 0.5.0 → 0.5.2

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-15-C08A00.svg '' 
+[all_contributors_badge]: https://img.shields.io/badge/all_contributors-16-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>
@@ -90,7 +90,7 @@ Thanks goes to these wonderful people:
     </tr><br />
     <tr>
       <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/kamini.pagare">
-<div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/blank.jpg" width="200px;" alt=""/></div>
+<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>
@@ -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/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>
       <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>
 <div><a href="#userTesting-shweta.jaju" title="User Testing">📓</a></div>
 </a></td>
-    </tr><br />
-    <tr>
       <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>

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.0",
+  "version": "0.5.2",
   "main": "dist/index.js",
   "private": false,
   "publishConfig": {
@@ -38,31 +38,31 @@
   "description": "",
   "devDependencies": {
     "@axe-core/playwright": "^4.10.1",
-    "@coopdigital/styles": "^0.5.3",
+    "@coopdigital/styles": "^0.5.5",
     "@playwright/test": "^1.50.1",
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-typescript": "^12.1.2",
     "@storybook/addon-a11y": "^8.6.4",
-    "@storybook/addon-essentials": "^8.6.3",
-    "@storybook/addon-interactions": "^8.6.3",
-    "@storybook/addon-mdx-gfm": "^8.6.3",
-    "@storybook/addon-onboarding": "^8.6.3",
-    "@storybook/blocks": "^8.6.3",
-    "@storybook/manager-api": "^8.6.3",
-    "@storybook/react": "^8.6.3",
-    "@storybook/react-vite": "^8.6.3",
-    "@storybook/test": "^8.6.3",
-    "@storybook/theming": "^8.6.3",
+    "@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",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
     "rollup": "^4.34.8",
-    "storybook": "^8.6.3"
+    "storybook": "^8.6.4"
   },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
-  "gitHead": "fdc3cd6c04f66f5b1240f615951d337ac0669eac"
+  "gitHead": "f292a4bba122b73db52ff17fa53eb90e7420c651"
 }

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 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>
+    </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>