OI-224 Add in-page-nav variants (no scroll, two cols) (#313)

Co-authored-by: Chris Barker <chris.barker@nice.org.uk>

Author: barkertron

components/nds-in-page-nav/scss/in-page-nav.scss

@@ -50,12 +50,21 @@
       position: sticky;
       top: 0;
 
+      &--no-scroll {
+        max-height: none;
+        position: relative;
+      }
+
       &__list {
         flex-grow: 1;
         overflow: auto;
         padding-top: utils.rem(spacing.$x-small);
         scrollbar-width: thin;
 
+        .in-page-nav--two-columns & {
+          columns: 2;
+        }
+
         .in-page-nav__list {
           height: 0;
           overflow: hidden;

components/nds-in-page-nav/src/InPageNav.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-mixed-spaces-and-tabs */
 /* eslint-disable indent */
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useId } from "react";
 import throttle from "lodash.throttle";
 
 import { buildLinkTree, getActiveHeadingId, type LinkTreeItem } from "./utils";
@@ -16,6 +16,8 @@ export interface InPageNavProps {
 	headingsExcludeSelector?: string;
 	headingsExcludeContainer?: string;
 	scrollTolerance?: number;
+	noScroll?: boolean;
+	twoColumns?: boolean;
 }
 
 export const InPageNav = ({
@@ -25,12 +27,15 @@ export const InPageNav = ({
 	headingsExcludeSelector = "", // Exclude any matched elements
 	headingsExcludeContainer = "", // Exclude all headings within this container
 	scrollTolerance = 50, // In pixels
+	noScroll = false,
+	twoColumns = false,
 	...rest
 }: InPageNavProps) => {
 	const [activeHeadingId, setActiveHeadingId] = useState<null | string>(null);
 	const [linkTree, setlinkTree] = useState<LinkTreeItem[]>([]);
+	const titleId = useId();
 
-	// Build the tree if links to use in the nav, from the headings found on the page
+	// Build the tree of links from the headings on the page
 	useEffect(() => {
 		const headingsContainerElement = document.querySelector(
 			headingsContainerSelector
@@ -72,6 +77,8 @@ export const InPageNav = ({
 
 	// Now that we've built the tree of links, work out which is active based on scroll position
 	useEffect(() => {
+		if (noScroll) return; // No point highlighting links in the no scroll variant
+
 		const scrollHandler = throttle(() => {
 			setActiveHeadingId(getActiveHeadingId(linkTree, scrollTolerance));
 		}, 100);
@@ -87,14 +94,27 @@ export const InPageNav = ({
 
 	if (linkTree.length === 0) return null;
 
+	const classNames = ["in-page-nav"];
+	if (className) {
+		classNames.push(className);
+	}
+	if (noScroll) {
+		classNames.push("in-page-nav--no-scroll");
+
+		// We're only allowing two columns within the noScroll variant
+		if (twoColumns) {
+			classNames.push("in-page-nav--two-columns");
+		}
+	}
+
 	return (
 		<nav
-			className={["in-page-nav", className].join(" ")}
-			aria-labelledby="inpagenav-title"
+			className={classNames.join(" ")}
+			aria-labelledby={titleId}
 			data-component="in-page-nav"
 			{...rest}
 		>
-			<h2 id="inpagenav-title" className="in-page-nav__title">
+			<h2 id={titleId} className="in-page-nav__title">
 				On this page
 			</h2>
 			<ol

components/nds-in-page-nav/src/__snapshots__/InPageNav.test.tsx.snap

@@ -5,14 +5,14 @@ exports[`InPageNav should match snapshot 1`] = `
   "asFragment": [Function],
   "baseElement": <div>
     <nav
-      aria-labelledby="inpagenav-title"
-      class="in-page-nav "
+      aria-labelledby=":r0:"
+      class="in-page-nav"
       data-component="in-page-nav"
       data-track="false"
     >
       <h2
         class="in-page-nav__title"
-        id="inpagenav-title"
+        id=":r0:"
       >
         On this page
       </h2>
@@ -52,14 +52,14 @@ exports[`InPageNav should match snapshot 1`] = `
   </div>,
   "container": <div>
     <nav
-      aria-labelledby="inpagenav-title"
-      class="in-page-nav "
+      aria-labelledby=":r0:"
+      class="in-page-nav"
       data-component="in-page-nav"
       data-track="false"
     >
       <h2
         class="in-page-nav__title"
-        id="inpagenav-title"
+        id=":r0:"
       >
         On this page
       </h2>

docs/pages/testpage.tsx

@@ -21,7 +21,18 @@ export default function Test() {
 				sometimes be hard to debug components using MDX alone.
 			</p>
 
-			<h2>Full bleed (default)</h2>
+			<h2>In-page nav (no scroll)</h2>
+
+			<InPageNav noScroll />
+
+			<h2>In-page nav (no scroll, two cols)</h2>
+
+			<InPageNav noScroll twoColumns />
+
+			<h2>
+				Full bleed (default) with a really massive title that should hopefully
+				run onto the next line and maybe beyond
+			</h2>
 			<FullBleed>
 				<h3>Full bleed heading</h3>
 				<p>
@@ -90,9 +101,6 @@ export default function Test() {
 
 			<h2>Hero</h2>
 			<Hero title="Hello!" header={<p>Here is a header</p>} />
-
-			<h2>In-page nav</h2>
-			<InPageNav />
 		</>
 	);
 }