Develop

apps/protoform/CHANGELOG.md

@@ -1,5 +1,14 @@
 # protoform
 
+## 0.2.4
+
+### Patch Changes
+
+- Updated dependencies [6f96072]
+- Updated dependencies [23dad1b]
+- Updated dependencies [94d6345]
+  - @westpac/ui@0.28.0
+
 ## 0.2.3
 
 ### Patch Changes

apps/protoform/package.json

@@ -1,6 +1,6 @@
 {
   "name": "protoform",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "private": true,
   "scripts": {
     "dev": "next dev",

apps/protoform/src/components/cta/cta.tsx

@@ -19,7 +19,7 @@ export function Cta({
   tertiaryOnClick?: () => void;
 }) {
   return (
-    <div className="flex gap-2 py-5 max-md:flex-col">
+    <div className="flex gap-2 pt-5 pb-9 max-md:flex-col">
       <Button size="large" look="primary" className="md:px-2.5" onClick={primaryOnClick} type={primaryType}>
         {children}
       </Button>

apps/protoform/src/components/sidebar/sidebar.tsx

@@ -84,7 +84,7 @@ export function Sidebar({ children }: { children?: ReactNode }) {
       <>
         <div
           className={clsx(
-            'sticky top-0 flex h-9 justify-between bg-white px-2 py-3 after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:z-10 after:block after:h-1 after:bg-gradient-to-b after:from-black/[.2] after:from-0% after:opacity-0 after:transition-all after:duration-200 after:will-change-[opacity] xsl:px-4 sm:px-5 md:hidden',
+            'sticky items-center top-0 flex h-9 justify-between bg-white px-2 py-3 after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:z-10 after:block after:h-1 after:bg-gradient-to-b after:from-black/[.2] after:from-0% after:opacity-0 after:transition-all after:duration-200 after:will-change-[opacity] xsl:px-4 sm:px-5 md:hidden',
             { 'after:opacity-100': scrolled },
           )}
         >

apps/site/CHANGELOG.md

@@ -1,5 +1,14 @@
 # site
 
+## 0.3.4
+
+### Patch Changes
+
+- Updated dependencies [6f96072]
+- Updated dependencies [23dad1b]
+- Updated dependencies [94d6345]
+  - @westpac/ui@0.28.0
+
 ## 0.3.3
 
 ### Patch Changes

apps/site/package.json

@@ -1,6 +1,6 @@
 {
   "name": "site",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "private": true,
   "scripts": {
     "build": "next build",

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/design-system/components/sidebar/sidebar.component.tsx

@@ -28,18 +28,18 @@ export function Sidebar({ items, brand }: SidebarProps) {
   });
 
   useEffect(() => {
-    if (!listRef.current) {
+    if (!outsideRef.current) {
       return;
     }
     const listener = () => {
-      const y = listRef.current?.scrollTop || 0;
+      const y = outsideRef.current?.scrollTop || 0;
       setScrolled(y > 0);
     };
-    listRef.current.addEventListener('scroll', listener);
+    outsideRef.current.addEventListener('scroll', listener);
     return () => {
-      listRef.current?.removeEventListener('scroll', listener);
+      outsideRef.current?.removeEventListener('scroll', listener);
     };
-  }, [listRef]);
+  }, []);
 
   useEffect(() => {
     if (open) {
@@ -81,8 +81,8 @@ export function Sidebar({ items, brand }: SidebarProps) {
           })}
         >
           <div
-            className={clsx({
-              'shadow-[rgba(0,0,0,0.26)_0_2px_5px]': scrolled,
+            className={clsx('sticky top-0 bg-white transition-shadow delay-0 duration-200 ease-[ease]', {
+              'shadow-[0_2px_5px_rgba(0,0,0,0.3)]': scrolled,
             })}
           >
             <button

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',

apps/site/src/content/design-system/components/badge/accessibilityDemo.mdoc

@@ -35,9 +35,11 @@
                 <span>Label</span>
               </div>
             </Button>
-            <a className="text-link underline" href="#">
-                Messages 
-                <Badge color="muted" type="pill" className="ml-1">
+            <a className="text-link flex items-center" href="#">
+                <div className="underline">
+                  Product feature
+                </div>
+                <Badge color="muted" type="pill" className="ml-1 no-underline">
                   12
                 </Badge>
               </a>
@@ -65,12 +67,11 @@
 
             <a className="text-link underline" href="#">
                 Product feature
-                <Badge color="muted"  className="ml-1">
+                <Badge color="muted" className="ml-1">
                   NEW
                 </Badge>
               </a>
 
-
           </div>
         </div>
       </div>