Merge remote-tracking branch 'origin/develop'

WestpacGEL · Feb 17, 2024 · 51e1153 · 51e1153
2 parents 3be15c7 + 6fcad98
commit 51e1153
Show file tree

Hide file tree

Showing 9 changed files with 101 additions and 43 deletions.
diff --git a/apps/protoform/src/app/layout.tsx b/apps/protoform/src/app/layout.tsx
@@ -20,7 +20,7 @@ export default function RootLayout({
   return (
     <html lang="en" data-theme="wbc">
       <body>
-        <main className="">
+        <main>
           <CustomHeader />
           <SidebarContextProvider>
             <Sidebar />

diff --git a/apps/protoform/src/app/page.tsx b/apps/protoform/src/app/page.tsx
@@ -9,10 +9,10 @@ import { RopeDataSetter } from '@/components/rope-data-setter/rope-data-setter';
 import { useSidebar } from '@/components/sidebar/context';
 
 export default function Home() {
-  const { setOpen } = useSidebar();
+  const { open, setOpen } = useSidebar();
   useEffect(() => {
-    setOpen(false);
-  }, [setOpen]);
+    open && setOpen(false);
+  }, [open, setOpen]);
   return (
     <section>
       <RopeDataSetter data={undefined} />

diff --git a/apps/protoform/src/components/content-wrapper/content-wrapper.tsx b/apps/protoform/src/components/content-wrapper/content-wrapper.tsx
@@ -2,18 +2,41 @@
 
 import { Grid, GridContainer, GridItem } from '@westpac/ui';
 import { clsx } from 'clsx';
-import { ReactNode } from 'react';
+import throttle from 'lodash.throttle';
+import { ReactNode, useEffect, useState } from 'react';
 
 import { useSidebar } from '../sidebar/context';
 
 export function ContentWrapper({ children }: { children: ReactNode }) {
   const { open } = useSidebar();
+  const [scrolled, setScrolled] = useState(false);
+
+  const handleScroll = throttle(() => {
+    let hasScrolled = false;
+    if (window.scrollY > 5) {
+      hasScrolled = true;
+    }
+    setScrolled(hasScrolled);
+  }, 10);
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [handleScroll]);
 
   return (
     <section
-      className={clsx('min-h-screen md:mt-11', {
-        'md:mr-[300px]': open,
-      })}
+      className={clsx(
+        'min-h-screen after:pointer-events-none after:fixed after:inset-x-0 after:top-[66px] 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] md:mt-11',
+        {
+          'md:mr-[300px]': open,
+          'md:after:opacity-100': scrolled,
+          'after:left-0 after:right-[300px]': scrolled && open,
+        },
+      )}
     >
       <GridContainer>
         <Grid>

diff --git a/apps/protoform/src/components/custom-footer/custom-footer.tsx b/apps/protoform/src/components/custom-footer/custom-footer.tsx
@@ -11,7 +11,7 @@ export function CustomFooter() {
   return (
     <Footer
       brand="wbc"
-      className={clsx('sticky bottom-0 z-[58] w-full border-t-border bg-white pb-0', {
+      className={clsx('relative bottom-0 z-[58] w-full border-t-border bg-white pb-0', {
         'md:w-[calc(100%-300px)]': open,
       })}
       hideLogo
@@ -22,12 +22,12 @@ export function CustomFooter() {
           className="float-left shrink-0 max-md:mr-1 md:mr-2"
           color="borderDark"
         />
-        <p className="text-muted">
+        <p className="typography-body-10 text-muted">
           Our site and your transactions are secure. You can read our{' '}
           <Link href="#" type="inline">
             security information
           </Link>
-          . © 2024 Westpac Banking Corporation ABN 33 007 457 141 AFSL and Australian credit licence 233714.
+          . <br /> © 2024 Westpac Banking Corporation ABN 33 007 457 141 AFSL and Australian credit licence 233714.
         </p>
       </div>
     </Footer>

diff --git a/apps/protoform/src/components/custom-header/custom-header.tsx b/apps/protoform/src/components/custom-header/custom-header.tsx
@@ -26,7 +26,6 @@ export function CustomHeader() {
       leftIcon={isMobile ? 'arrow' : undefined}
       leftOnClick={() => router.back()}
       logoLink="/"
-      className=""
     >
       <Button look="faint" size={{ initial: 'small', sm: 'medium' }} soft>
         Sign Out

diff --git a/apps/protoform/src/components/custom-heading/custom-heading.tsx b/apps/protoform/src/components/custom-heading/custom-heading.tsx
@@ -20,7 +20,11 @@ export function CustomHeading({
         'pt-0 pb-5': Tag === 'h3' || Tag === 'h4' || Tag === 'h5' || Tag === 'h6',
       })}
     >
-      {groupHeading && <h3 className="typography-body-10 pb-1 text-[11px] font-bold text-muted">{groupHeading}</h3>}
+      {groupHeading && (
+        <h3 className=" typography-body-10 pb-1 text-[11px] font-medium uppercase text-muted md:hidden">
+          {groupHeading}
+        </h3>
+      )}
       <Tag
         className={clsx('font-bold text-heading', {
           'max-md:typography-body-6 typography-body-5': Tag === 'h1',
@@ -33,7 +37,7 @@ export function CustomHeading({
       </Tag>
       {leadText && (
         <p
-          className={clsx('typography-body-9 text-text', {
+          className={clsx('typography-body-9 text-heading', {
             'max-md:pt-3 pt-4': Tag === 'h1' || Tag === 'h2',
             'pt-2': Tag === 'h3',
             'max-md:pt-1 pt-2': Tag === 'h4' || Tag === 'h5' || Tag === 'h6',

diff --git a/apps/protoform/src/components/sidebar/sidebar.tsx b/apps/protoform/src/components/sidebar/sidebar.tsx
@@ -6,14 +6,16 @@ import { BREAKPOINTS } from '@westpac/ui/themes-constants';
 import { clsx } from 'clsx';
 import throttle from 'lodash.throttle';
 import { usePathname } from 'next/navigation';
-import { ReactNode, useCallback, useEffect, useState } from 'react';
+import { ReactNode, useCallback, useEffect, useLayoutEffect, useState } from 'react';
 
 import { useSidebar } from './context';
 
 export function Sidebar({ children }: { children?: ReactNode }) {
   const { open, setOpen, ropeData, ropeStep } = useSidebar();
   const [scrolled, setScrolled] = useState(false);
+  const [sidebarScrolled, setSidebarScrolled] = useState(false);
   const [totalSteps, setTotalSteps] = useState(0);
+  const [sidebarContent, setSidebarContent] = useState<HTMLElement | null>(null);
 
   const handleScroll = throttle(() => {
     let hasScrolled = false;
@@ -23,17 +25,31 @@ export function Sidebar({ children }: { children?: ReactNode }) {
     setScrolled(hasScrolled);
   }, 10);
 
+  const handleSidebarScroll = throttle(() => {
+    let hasScrolled = false;
+    if (sidebarContent && sidebarContent.scrollTop > 5) {
+      hasScrolled = true;
+    }
+    setSidebarScrolled(hasScrolled);
+  }, 10);
+
   const pathName = usePathname();
   const isDashboard = pathName === '/';
   const currStep = ropeStep + 1;
 
+  useLayoutEffect(() => {
+    setSidebarContent(document.getElementById('sidebar-content'));
+  }, []);
+
   useEffect(() => {
     window.addEventListener('scroll', handleScroll);
+    sidebarContent?.addEventListener('scroll', handleSidebarScroll);
 
     return () => {
       window.removeEventListener('scroll', handleScroll);
+      sidebarContent?.removeEventListener('scroll', handleSidebarScroll);
     };
-  }, [handleScroll]);
+  }, [handleScroll, handleSidebarScroll, sidebarContent]);
 
   const updateOpen = useCallback(() => {
     setOpen(window.innerWidth >= parseInt(BREAKPOINTS.md));
@@ -68,13 +84,18 @@ export function Sidebar({ children }: { children?: ReactNode }) {
       <>
         <div
           className={clsx(
-            'sticky top-0 z-10 flex 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 top-0 z-10 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 },
           )}
         >
-          <p className="font-medium">{`Step ${currStep} of ${totalSteps}`}</p>
+          <p className="typography-body-10 font-medium">{`Step ${currStep} of ${totalSteps}`}</p>
           {!open && (
-            <Button look="link" iconAfter={MoreVertIcon} className="no-underline" onClick={() => setOpen(true)}>
+            <Button
+              look="link"
+              iconAfter={MoreVertIcon}
+              className="typography-body-10 no-underline"
+              onClick={() => setOpen(true)}
+            >
               Show all steps
             </Button>
           )}
@@ -84,19 +105,21 @@ export function Sidebar({ children }: { children?: ReactNode }) {
           <>
             <div
               className={clsx(
-                'fixed inset-y-0 left-auto right-0 w-[300px] overflow-auto border-l-[1px] border-l-border bg-white transition-transform duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] max-md:z-[100] md:mt-11',
+                'fixed inset-y-0 left-auto right-0 w-[300px] overflow-auto border-l-[1px] border-l-border bg-white transition-transform duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] after:pointer-events-none after:fixed after:left-[calc(100%-300px)] after:right-0 after:top-[66px] 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] max-md:z-[100] md:mt-11',
                 {
+                  'after:opacity-100': sidebarScrolled,
                   'translate-x-full': !open,
                 },
               )}
+              id="sidebar-content"
             >
               <div
                 className={clsx({
                   'max-md:hidden': !open,
                 })}
               >
-                <div className="flex flex-row justify-between border-b-[1px] border-b-border px-2 py-2.5 md:hidden">
-                  <p className="font-medium">{`Step ${currStep} of ${totalSteps}`}</p>
+                <div className="flex flex-row justify-between px-2 py-2.5 md:hidden">
+                  <p className="typography-body-10 py-[5px] font-medium">{`Step ${currStep} of ${totalSteps}`}</p>
                   <Button
                     look="link"
                     iconBefore={CloseIcon}
@@ -123,7 +146,7 @@ export function Sidebar({ children }: { children?: ReactNode }) {
           <div
             aria-hidden="true"
             className={clsx({
-              ' md:hidden max-md:before:bg-black/70 before:z-[59] before:top-0 before:left-0 before:right-0 before:bottom-0 before:fixed':
+              'h-auto md:hidden max-md:before:bg-black/70 before:z-[59] before:top-0 before:left-0 before:right-0 before:bottom-0 before:fixed':
                 open,
             })}
           />

diff --git a/apps/site/src/content/design-system/design-tokens/design/main/content.mdoc b/apps/site/src/content/design-system/design-tokens/design/main/content.mdoc
@@ -1,9 +1,9 @@
 This basic information includes things like:
 
-- Colours
-- Fonts and font sizes
-- Spacing
-- Breakpoints
+- [Colours](/foundation/colour)
+- [Fonts and font sizes](/foundation/font)
+- [Spacing](/foundation/layout/spacing)
+- [Breakpoints](/foundation/layout/breakpoints)
 
 More complex features such as animation can also be shared once a common design is reached.
 

diff --git a/...e/src/content/design-system/development/guides/usage/design/using-components/content.mdoc b/...e/src/content/design-system/development/guides/usage/design/using-components/content.mdoc
@@ -1,18 +1,22 @@
-After setting up the [brand](/wbc/development/guides/brand) you can start using the GEL components in your [React](https://react.dev/) application.
+After setting up the [brand](/development/guides/brand) you can start using the GEL components in your [React](https://react.dev/) application.
 
 ### Individual package import
 
 We recommended the individual package import approach if you have issues with [Tree shaking](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking).
 
 ```html
-<StaticCode language="tsx" code={` import { Button } from '@westpac/ui/button'; export default function SampleApp() {
-return (
-<section>
-  <div className="space-x-4 mb-2">
-    <Button look="primary">Pay here</Button>
-  </div>
-</section>
-); } `} />
+<StaticCode language="tsx" code={`
+import { Button } from "@westpac/ui/button";
+export default function SampleApp() {
+  return (
+    <section>
+      <div className="space-x-4 mb-2">
+        <Button look="primary">Pay here</Button>
+      </div>
+    </section>
+  );
+}
+`} />
 ```
 
 ### Mono package import
@@ -22,11 +26,16 @@ Modern bundlers like [Vite](https://vitejs.dev/) will automatically detect the i
 However, use this approach with caution as it may cause issues with [Tree shaking](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking) since not all bundlers have this advanced capability.
 
 ```html
-<StaticCode language="tsx" code={` import { Button } from '@westpac/ui'; export default function SampleApp() { return (
-<section>
-  <div className="space-x-4 mb-2">
-    <Button look="primary">Pay here</Button>
-  </div>
-</section>
-); } `} />
+<StaticCode language="tsx" code={`
+import { Button } from "@westpac/ui";
+export default function SampleApp() {
+  return (
+    <section>
+      <div className="space-x-4 mb-2">
+        <Button look="primary">Pay here</Button>
+      </div>
+    </section>
+  );
+}
+`} />
 ```