Merge branch 'develop' into fix/style-fixes

WestpacGEL · Nov 15, 2024 · 6da8266 · 6da8266
2 parents 5ef2790 + b50cf34
commit 6da8266
Show file tree

Hide file tree

Showing 74 changed files with 855 additions and 175 deletions.
diff --git a/...ontent-tabs/components/intro/components/table-of-contents/table-of-contents.component.tsx b/...ontent-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>
   );
 }
diff --git a/.../site/src/app/design-system/[brand]/[...component]/components/header/header.component.tsx b/.../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" />

diff --git a/apps/site/src/app/layout.tsx b/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>

diff --git a/apps/site/src/components/document-renderer/heading/heading.style.ts b/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',

diff --git a/...content/design-system/components/autocomplete/design/where-is-this-available/content.mdoc b/...content/design-system/components/autocomplete/design/where-is-this-available/content.mdoc
@@ -1,8 +1,8 @@
 {% shortCode name="where-is-this-available" /%}
 
 {% availabilityContent
-  availableGel="available"
-  availableMesh="in-progress"
-  availableLegacyWdp="older-version-available"
-  alternativeMesh="Typeahead"
-  alternativeLegacyWdp="Typeahead" /%}
+   availableGel="available"
+   availableMesh="older-version-available"
+   availableLegacyWdp="older-version-available"
+   alternativeMesh="Typeahead"
+   alternativeLegacyWdp="Typeahead" /%}
diff --git a/...te/src/content/design-system/components/badge/design/where-is-this-available/content.mdoc b/...te/src/content/design-system/components/badge/design/where-is-this-available/content.mdoc
@@ -2,5 +2,5 @@
 
 {% availabilityContent
    availableGel="available"
-   availableMesh="in-progress"
+   availableMesh="older-version-available"
    availableLegacyWdp="older-version-available" /%}
diff --git a/...content/design-system/components/bottom-sheet/design/where-is-this-available/content.mdoc b/...content/design-system/components/bottom-sheet/design/where-is-this-available/content.mdoc
@@ -2,5 +2,5 @@
 
 {% availabilityContent
    availableGel="available"
-   availableMesh="in-progress"
-   availableLegacyWdp="older-version-available" /%}
+   availableMesh="unavailable"
+   availableLegacyWdp="unavailable" /%}
diff --git a/...src/content/design-system/components/compacta/design/where-is-this-available/content.mdoc b/...src/content/design-system/components/compacta/design/where-is-this-available/content.mdoc
@@ -2,5 +2,5 @@
 
 {% availabilityContent
    availableGel="available"
-   availableMesh="in-progress"
+   availableMesh="older-version-available"
    availableLegacyWdp="older-version-available" /%}
diff --git a/...c/content/design-system/components/flexi-cell/design/where-is-this-available/content.mdoc b/...c/content/design-system/components/flexi-cell/design/where-is-this-available/content.mdoc
@@ -2,5 +2,5 @@
 
 {% availabilityContent
    availableGel="available"
-   availableMesh="in-progress"
-   availableLegacyWdp="older-version-available" /%}
+   availableMesh="unavailable"
+   availableLegacyWdp="unavailable" /%}
diff --git a/apps/site/src/content/design-system/components/footer/code/development-examples/content.mdoc b/apps/site/src/content/design-system/components/footer/code/development-examples/content.mdoc
@@ -6,18 +6,19 @@
     brand="wbc"
     hideLogo
   >
-    <div>
-      <SecurityIcon
-        className="float-left shrink-0 max-md:mr-1 md:mr-2"
-        color="muted"
-        size={{
-          initial: 'small',
-          md: 'medium'
-        }}
-      />
-      <p className="text-muted">
-        Footer content
-      </p>
+    <div className="relative">
+      <div className="float-left flex-none">
+        <SecurityIcon
+          className="float-left shrink-0 mr-1 mt-0.5"
+          color="muted"
+          size="small"
+        />
+      </div>
+      <div className="flex">
+        <p className="text-muted relative flex-1">
+          Footer content goes here.
+        </p>
+      </div>
     </div>
   </Footer>
 </>

diff --git a/apps/site/src/content/design-system/components/footer/design/footer/content.mdoc b/apps/site/src/content/design-system/components/footer/design/footer/content.mdoc
@@ -6,25 +6,19 @@ This is the basic footer component, the content should be project specific.
     brand="wbc"
     hideLogo
   >
-    <div>
-      <SecurityIcon
-        className="float-left shrink-0 max-md:mr-1 md:mr-2"
-        color="muted"
-        size={{
-          initial: 'small',
-          md: 'medium'
-        }}
-      />
-      <p className="text-muted">
-        Our site and your transactions are secure. You can read our{' '}
-        <Link
-          href="#"
-          type="inline"
-        >
-          security information
-        </Link>
-        . © 2023 Westpac Banking Corporation ABN 33 007 457 141 AFSL and Australian credit licence 233714.
-      </p>
+    <div className="relative">
+      <div className="float-left flex-none">
+        <SecurityIcon
+          className="float-left shrink-0 mr-1 mt-0.5"
+          color="muted"
+          size="small"
+        />
+      </div>
+      <div className="flex">
+        <p className="text-muted relative flex-1">
+          Footer content goes here.
+        </p>
+      </div>
     </div>
   </Footer>
 </>

diff --git a/...e/src/content/design-system/components/footer/design/where-is-this-available/content.mdoc b/...e/src/content/design-system/components/footer/design/where-is-this-available/content.mdoc
@@ -2,5 +2,5 @@
 
 {% availabilityContent
    availableGel="available"
-   availableMesh="available"
-   availableLegacyWdp="available" /%}
+   availableMesh="older-version-available"
+   availableLegacyWdp="older-version-available" /%}
diff --git a/apps/site/src/content/design-system/components/footer/index.yaml b/apps/site/src/content/design-system/components/footer/index.yaml
@@ -5,7 +5,7 @@ description: >-
   they are in.
 namedExport:
   discriminant: false
-excludeFromNavbar: true
+excludeFromNavbar: false
 design:
   - title:
       name: Footer

diff --git a/apps/site/src/content/design-system/components/input-group/design/add-ons/content.mdoc b/apps/site/src/content/design-system/components/input-group/design/add-ons/content.mdoc
@@ -191,7 +191,7 @@ Add-on elements can be used either before or after an input, they can provide cl
         <Input />
       </InputGroup>
 
-      <InputGroup size="large" width={30} name="example-button" label="Search" after={<Button>Go</Button>}>
+      <InputGroup size="large" width={30} name="example-button" label="Search" after={<Button size="large" >Go</Button>}>
         <Input defaultValue="" />
       </InputGroup>
 

diff --git a/...site/src/content/design-system/components/input-group/design/supporting-text/content.mdoc b/...site/src/content/design-system/components/input-group/design/supporting-text/content.mdoc
@@ -47,7 +47,7 @@ Supporting text sits below the field, it can be a character count, or validated
     <InputGroup width="20"
       label="Enter ABA routing number"
       hint="For a valid response use: 647453, all other numbers will show the invalid response"
-      after={validating ? { icon: RefreshIcon } : <Button onClick={validate}>Check</Button>}
+      after={validating ? { icon: ProgressIndicator } : <Button onClick={validate}>Check</Button>}
       errorMessage={error}
     >
       <Input invalid={!!error} onChange={({ target: { value } }) => setInputValue(value)} value={inputValue} />

diff --git a/.../content/design-system/components/input-group/design/where-is-this-available/content.mdoc b/.../content/design-system/components/input-group/design/where-is-this-available/content.mdoc
@@ -2,5 +2,5 @@
 
 {% availabilityContent
    availableGel="available"
-   availableMesh="in-progress"
+   availableMesh="older-version-available"
    availableLegacyWdp="older-version-available" /%}
diff --git a/...te/src/content/design-system/components/modal/design/where-is-this-available/content.mdoc b/...te/src/content/design-system/components/modal/design/where-is-this-available/content.mdoc
@@ -2,5 +2,5 @@
 
 {% availabilityContent
    availableGel="available"
-   availableMesh="in-progress"
+   availableMesh="older-version-available"
    availableLegacyWdp="older-version-available" /%}
diff --git a/.../components/progress-indicator/accessibility/colour-impairment-demonstration/content.mdoc b/.../components/progress-indicator/accessibility/colour-impairment-demonstration/content.mdoc
diff --git a/...ontent/design-system/components/progress-indicator/code/development-examples/content.mdoc b/...ontent/design-system/components/progress-indicator/code/development-examples/content.mdoc
@@ -1,12 +1,12 @@
-### Progress Indicator
+### Progress indicator
 
 ```tsx
 () => {
   return <ProgressIndicator />;
 };
 ```
 
-### Progress Indicator Sizes
+### Sizes
 
 ```tsx
 () => {
@@ -20,14 +20,14 @@
 };
 ```
 
-### Inverted Progress Indicator
+### Dark background
 
 ```tsx
 () => {
   return (
     <div className="bg-black w-fit">
       {(['xsmall', 'small', 'medium', 'large', 'xlarge'] as const).map(size => (
-        <ProgressIndicator size={size} inverted className="mr-2" />
+        <ProgressIndicator size={size} color={'white'} className="mr-2" />
       ))}
     </div>
   );