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,7 @@
 'use client';
-
 import { List, ListItem } from '@westpac/ui';
-import { MouseEventHandler, useCallback } from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
 
 import { ArrowDownRightIcon } from '@/components/icons';
 
@@ -10,7 +10,7 @@ import { type TableOfContentsProps } from './table-of-contents.types';
 export function TableOfContents({ contents = [] }: TableOfContentsProps) {
   return (
     <nav>
-      <h2 className="typography-body-9 border-b border-border pb-2 font-medium">Page content</h2>
+      <h2 className="typography-body-9 border-border border-b pb-2 font-medium">Page content</h2>
       <List icon={ArrowDownRightIcon} type="icon" look="primary" className="mt-3 [&_li]:my-1.5">
         {contents.map(({ title }) => {
           const id = title
@@ -20,7 +20,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>
           );
         })}
@@ -29,30 +29,12 @@ export function TableOfContents({ contents = [] }: TableOfContentsProps) {
   );
 }
 
-const HEADER_HEIGHT = {
-  sm: 150,
-  lg: 200,
-};
-
-const BREAKPOINT_MD = 768;
-
-function Link({ href, children }: { children?: React.ReactNode; href?: string }) {
-  const handleClick: MouseEventHandler<HTMLAnchorElement> = useCallback(
-    ev => {
-      ev.preventDefault();
-      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];
-
-      window?.scrollTo({ top: offset, behavior: 'smooth' });
-    },
-    [href],
-  );
+function NavLink({ href, children }: { children?: React.ReactNode; href: string }) {
+  const pathname = usePathname();
 
   return (
-    <a href={href} className="ml-1 block hover:underline focus-visible:focus-outline" onClick={handleClick}>
+    <Link className="focus-visible:focus-outline ml-1 block hover:underline" href={`${pathname}${href}`} replace scroll>
       {children}
-    </a>
+    </Link>
   );
 }

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { HamburgerMenuIcon } from '@westpac/ui/icon';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useLayoutEffect, useRef, useState } from 'react';
 
 import { useSidebar } from '@/app/design-system/components/sidebar/sidebar.context';
 import { BrandKey } from '@/app/types/brand.types';
@@ -11,41 +11,26 @@ 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();
 
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      const handleScroll = () => {
-        const isFixed = window.scrollY >= FIXED_HEADER;
-        setFixed(isFixed);
-      };
-      window.addEventListener('scroll', handleScroll);
-      return () => window.removeEventListener('scroll', handleScroll);
-    }
+  useLayoutEffect(() => {
+    const handleScroll = () => {
+      const isFixed = window.scrollY >= FIXED_HEADER;
+      setFixed(isFixed);
+    };
+
+    handleScroll();
+
+    window.addEventListener('scroll', handleScroll);
+
+    return () => window.addEventListener('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" />

apps/site/src/app/layout.tsx

@@ -16,13 +16,13 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   const { isEnabled } = draftMode();
   return (
-    <html lang="en">
+    <html lang="en" className="scroll-smooth">
       <FontPreloader />
       <meta name="google-site-verification" content="OqpMflvRwQAgK3Lbvov6fs-G37wjQy1hqAH7ECgCW7M" />
       <body>
         {children}
         {isEnabled && (
-          <div className="absolute right-15 top-3 z-[999]">
+          <div className="right-15 absolute top-3 z-[999]">
             <form method="post" action="/preview/end">
               <button className="text-white">End preview</button>
             </form>

apps/site/src/components/document-renderer/heading/heading.style.ts

@@ -1,7 +1,8 @@
 import { tv } from 'tailwind-variants';
 
+// scroll margin top = header height + 24px
 export const styles = tv({
-  base: 'mt-5 font-bold first:mt-0',
+  base: 'mt-5 scroll-mt-[9.125rem] font-bold first:mt-0 md:scroll-mt-[11.25rem]',
   variants: {
     textAlign: {
       left: 'text-left',
@@ -10,7 +11,7 @@ export const styles = tv({
     },
     level: {
       1: 'typography-body-5 mb-3',
-      2: 'typography-body-7 mb-4 sm:typography-body-6 sm:mb-7',
+      2: 'typography-body-7 sm:typography-body-6 mb-4 sm:mb-7',
       3: 'typography-body-8 mb-2',
       4: 'typography-body-10 mb-2 uppercase',
       5: 'typography-body-9 mb-2',