Feature/deep linking built in

apps/site/src/app/design-system/[brand]/[...component]/components/content-tabs/components/intro/components/table-of-contents/table-of-contents.component.tsx

@@ -1,7 +1,8 @@
 'use client';
-
 import { List, ListItem } from '@westpac/ui';
-import { MouseEventHandler, useCallback } from 'react';
+import Link from 'next/link';
+import { usePathname, useRouter } from 'next/navigation';
+import { MouseEventHandler, useCallback, useEffect, useState } from 'react';
 
 import { ArrowDownRightIcon } from '@/components/icons';
 
@@ -20,7 +21,7 @@ export function TableOfContents({ contents = [] }: TableOfContentsProps) {
             .join('-');
           return (
             <ListItem key={id} className="pl-[1.075rem]">
-              <Link href={`#${id}`}>{title}</Link>
+              <NavLink href={`#${id}`}>{title}</NavLink>
             </ListItem>
           );
         })}
@@ -36,23 +37,25 @@ const HEADER_HEIGHT = {
 
 const BREAKPOINT_MD = 768;
 
-function Link({ href, children }: { children?: React.ReactNode; href?: string }) {
-  const handleClick: MouseEventHandler<HTMLAnchorElement> = useCallback(
-    ev => {
-      ev.preventDefault();
+function NavLink({ href, children }: { children?: React.ReactNode; href: string }) {
+  const [path, hash] = href.split('#');
+  const DELAY_TIME_TO_SCROLL = 100;
+
+  const handleClick: MouseEventHandler<HTMLAnchorElement> = () => {
+    setTimeout(() => {
       const viewport = window.innerWidth < BREAKPOINT_MD ? 'sm' : 'lg';
-      const bodyRect = document.body.getBoundingClientRect(),
-        elemRect = document?.querySelector(href || '')?.getBoundingClientRect(),
-        offset = (elemRect?.top || 0) - bodyRect.top - HEADER_HEIGHT[viewport];
+      const bodyRect = document.body.getBoundingClientRect();
+      const elemRect = document?.querySelector(`#${hash}`)?.getBoundingClientRect();
+      const offset = (elemRect?.top || 0) - bodyRect.top - HEADER_HEIGHT[viewport];
 
       window?.scrollTo({ top: offset, behavior: 'smooth' });
-    },
-    [href],
-  );
+      window.history.pushState(null, '', `#${hash}`);
+    }, DELAY_TIME_TO_SCROLL);
+  };
 
   return (
-    <a href={href} className="ml-1 block hover:underline focus-visible:focus-outline" onClick={handleClick}>
+    <Link className="ml-1 block hover:underline focus-visible:focus-outline" href={path} onClick={handleClick}>
       {children}
-    </a>
+    </Link>
   );
 }

apps/site/src/app/design-system/[brand]/[...component]/components/header/header.component.tsx

@@ -11,7 +11,7 @@ import { styles as headerStyles } from './header.styles';
 const FIXED_HEADER = 162; // 228 - 66 = height to stick
 
 export function Header({ className, title, brand }: { brand: string; className?: string; title?: string }) {
-  const [fixed, setFixed] = useState(typeof window !== 'undefined' ? window.scrollY >= FIXED_HEADER : false);
+  const [fixed, setFixed] = useState(false);
   const styles = headerStyles({ brand: brand.toLowerCase() as BrandKey, fixed, className });
   const headerRef = useRef<HTMLHeadingElement>(null);
   const { setOpen } = useSidebar();
@@ -22,30 +22,16 @@ export function Header({ className, title, brand }: { brand: string; className?:
         const isFixed = window.scrollY >= FIXED_HEADER;
         setFixed(isFixed);
       };
+      handleScroll();
       window.addEventListener('scroll', handleScroll);
+      window.addEventListener('load', handleScroll);
+
       return () => window.removeEventListener('scroll', handleScroll);
     }
   }, []);
 
   return (
     <header className={styles.base()}>
-      <div className={styles.gridButtonWrapper()}>
-        <span className="sr-only">Active breakpoint:</span>
-        <span className="hidden font-bold sm:block md:hidden">SM</span>
-        <span className="hidden font-bold md:block lg:hidden">MD</span>
-        <span className="hidden font-bold lg:block">LG</span>
-        <button
-          aria-hidden="true"
-          className={styles.gridButton()}
-          onClick={() => {
-            return;
-          }}
-        >
-          {new Array(4).fill(null).map((_, index) => {
-            return <span className="w-[0.25rem] items-stretch bg-white/30" key={index} />;
-          })}
-        </button>
-      </div>
       {/* The tab order on the original site was the grid button before wrapper when coming from the browser bar */}
       <button className={styles.hamburgerButton()} onClick={() => setOpen(open => !open)}>
         <HamburgerMenuIcon color="white" className="mx-auto" />