@coopdigital/react 0.5.1 → 0.5.2

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.2",
   "main": "dist/index.js",
   "private": false,
   "publishConfig": {
@@ -38,7 +38,7 @@
   "description": "",
   "devDependencies": {
     "@axe-core/playwright": "^4.10.1",
-    "@coopdigital/styles": "^0.5.4",
+    "@coopdigital/styles": "^0.5.5",
     "@playwright/test": "^1.50.1",
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-typescript": "^12.1.2",
@@ -64,5 +64,5 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
-  "gitHead": "634e2f73ada33fd85e9adef7b6ef8d84ae506afd"
+  "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>