Merge pull request #909 from WestpacGEL/develop

Develop
WestpacGEL · Oct 18, 2024 · e6ae684 · e6ae684
2 parents f15c148 + a4750a9
commit e6ae684
Show file tree

Hide file tree

Showing 28 changed files with 72 additions and 72 deletions.
diff --git a/.changeset/beige-peaches-explain.md b/.changeset/beige-peaches-explain.md
@@ -0,0 +1,5 @@
+---
+'@westpac/ui': minor
+---
+
+fixed button groups hover glitch; updated footer story shield margin; updated space below alert title; updated search icon size in automcomplete
diff --git a/apps/protoform/src/app/credit-cards/address/page.tsx b/apps/protoform/src/app/credit-cards/address/page.tsx
@@ -60,7 +60,7 @@ export default function Address() {
               <Autocomplete
                 noOptionsMessage="No options found"
                 label="Search for you home address"
-                hintMessage="Not a PO Box <>"
+                hintMessage="Not a PO Box"
                 defaultInputValue={data.address}
                 invalid={!!addressError}
                 name="address"

diff --git a/apps/protoform/src/app/credit-cards/review-and-submit/page.tsx b/apps/protoform/src/app/credit-cards/review-and-submit/page.tsx
@@ -86,7 +86,7 @@ export default function Address() {
         Review and submit
       </CustomHeading>
       <ReviewSection baseEditRoute="/credit-cards" sections={SECTION_ITEMS} />
-      <div className="border-t-[1px] border-t-border pt-5">
+      <div className="border-t border-t-border pt-5">
         <PhoneIcon color="primary" size="large" className="mb-5" />
         <h3 className="typography-body-8 pb-5 font-bold text-heading">Help protect your application</h3>
         <p>Before continuing we’ll send you a one-time passcode to your mobile for added security.</p>

diff --git a/apps/protoform/src/app/layout.tsx b/apps/protoform/src/app/layout.tsx
@@ -8,7 +8,7 @@ import { SidebarContextProvider } from '@/components/sidebar/context';
 import { Sidebar } from '@/components/sidebar/sidebar';
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
+  title: 'Protoform',
   description: 'Generated by create next app',
 };
 
@@ -20,7 +20,7 @@ export default function RootLayout({
   return (
     <html lang="en" data-theme="wbc">
       <body>
-        <main className="m-auto max-w-[1922px] border border-border">
+        <main className="m-auto max-w-[1923px] border border-border border-y-0 overscroll-y-none">
           <CustomHeader />
           <SidebarContextProvider>
             <Sidebar />

diff --git a/apps/protoform/src/components/content-wrapper/content-wrapper.tsx b/apps/protoform/src/components/content-wrapper/content-wrapper.tsx
@@ -30,7 +30,7 @@ export function ContentWrapper({ children }: { children: ReactNode }) {
   return (
     <section
       className={clsx(
-        'min-h-screen before:pointer-events-none before:sticky before:inset-x-auto before:top-[66px] before:z-10 before:block before:h-1 before:bg-gradient-to-b before:from-black/[.2] before:from-0% before:opacity-0 before:transition-[opacity] before:duration-200 before:will-change-[opacity]',
+        'min-h-[90vh] before:pointer-events-none before:sticky before:inset-x-auto before:top-[66px] before:z-10 before:block before:h-1 before:bg-gradient-to-b before:from-black/[.2] before:from-0% before:opacity-0 before:transition-[opacity] before:duration-200 before:will-change-[opacity]',
         {
           'md:mr-[300px] before:right-[300px]': open,
           'md:before:opacity-100': scrolled,
@@ -42,6 +42,7 @@ export function ContentWrapper({ children }: { children: ReactNode }) {
       <GridContainer>
         <Grid>
           <GridItem span={{ initial: 12, sm: 8, md: 8, lg: 6 }} start={{ initial: 1, sm: 3, md: 3, lg: 4 }}>
+            <div className="md:h-10 overscroll-x-none"></div>
             {children}
           </GridItem>
         </Grid>

diff --git a/apps/protoform/src/components/cta/cta.tsx b/apps/protoform/src/components/cta/cta.tsx
@@ -19,7 +19,7 @@ export function Cta({
   tertiaryOnClick?: () => void;
 }) {
   return (
-    <div className="flex gap-2 pb-[120px] pt-6 max-md:flex-col max-md:pb-10">
+    <div className="flex gap-2 py-5 max-md:flex-col">
       <Button size="large" look="primary" className="md:px-2.5" onClick={primaryOnClick} type={primaryType}>
         {children}
       </Button>

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

diff --git a/apps/protoform/src/components/custom-header/custom-header.tsx b/apps/protoform/src/components/custom-header/custom-header.tsx
@@ -2,11 +2,12 @@
 
 import { Button, Header } from '@westpac/ui';
 import { BREAKPOINTS } from '@westpac/ui/themes-constants';
-import { useRouter } from 'next/navigation';
+import { usePathname, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 
 export function CustomHeader() {
   const router = useRouter();
+  const pathname = usePathname();
   const [isMobile, setIsMobile] = useState(true);
 
   const updateSize = () => {
@@ -22,10 +23,10 @@ export function CustomHeader() {
   return (
     <Header
       brand="wbc"
-      leftIcon={isMobile ? 'arrow' : undefined}
+      leftIcon={'arrow'}
       leftOnClick={() => router.back()}
       logoLink="/"
-      className="z-[100] m-auto max-w-[1922px] md:sticky md:top-0"
+      className="z-[100] m-auto max-w-[1921px] md:fixed md:top-0 w-full"
     >
       <Button look="faint" size={{ initial: 'small', sm: 'medium' }} soft>
         Sign Out

diff --git a/apps/protoform/src/components/sidebar/sidebar.tsx b/apps/protoform/src/components/sidebar/sidebar.tsx
@@ -1,11 +1,11 @@
 'use client';
-
 import { Button, ProgressRope } from '@westpac/ui';
 import { CloseIcon, MoreVertIcon } from '@westpac/ui/icon';
 import { BREAKPOINTS } from '@westpac/ui/themes-constants';
 import { clsx } from 'clsx';
 import throttle from 'lodash.throttle';
 import { usePathname } from 'next/navigation';
+import React from 'react';
 import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 
 import { useSidebar } from './context';
@@ -84,7 +84,7 @@ export function Sidebar({ children }: { children?: ReactNode }) {
       <>
         <div
           className={clsx(
-            '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',
+            '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',
             { 'after:opacity-100': scrolled },
           )}
         >
@@ -100,11 +100,12 @@ export function Sidebar({ children }: { children?: ReactNode }) {
             </Button>
           )}
         </div>
+
         <>
           <>
             <div
               className={clsx(
-                'fixed inset-y-0 w-[300px] overflow-auto border-l-[1px] border-t-[1px] border-border bg-white transition-transform duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] before:pointer-events-none before:sticky before:inset-x-0 before:top-0 before:z-50 before:block before:h-1 before:bg-gradient-to-b before:from-black/[.2] before:from-0% before:opacity-0 before:transition-all before:duration-200 before:will-change-[opacity] max-md:z-[100] md:mt-11',
+                'fixed inset-y-0 w-[300px] overflow-auto border-l-[1px] border-border bg-white transition-transform duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] before:pointer-events-none before:sticky before:inset-x-0 before:top-0 before:z-50 before:block before:h-1 before:bg-gradient-to-b before:from-black/[.2] before:from-0% before:opacity-0 before:transition-all before:duration-200 before:will-change-[opacity] max-md:z-[100] md:mt-11 overscroll-contain',
                 {
                   'before:opacity-100': sidebarScrolled,
                   'max-md:translate-x-full': !open,

diff --git a/apps/site/src/app/design-system/[brand]/layout.tsx b/apps/site/src/app/design-system/[brand]/layout.tsx
@@ -29,7 +29,7 @@ export default async function DesignSystemLayout({
       <SkipLink href="#content" className="z-[100]">
         Skip to content
       </SkipLink>
-      <div className="text-text active-theme-stg:text-heading flex min-h-screen flex-col">
+      <div className="flex min-h-screen flex-col text-text active-theme-stg:text-heading">
         <SidebarContextProvider>
           <Suspense>
             <Sidebar items={formattedItems} brand={brand} />

diff --git a/packages/ui/src/components/alert/alert.stories.tsx b/packages/ui/src/components/alert/alert.stories.tsx
@@ -63,37 +63,37 @@ export const TextMode: Story = {
   render: () => (
     <>
       <h2 className="typography-body-8 mb-2 font-bold">Default</h2>
-      <h3 className="font-bold pb-2">Info</h3>
+      <h3 className="pb-2 font-bold">Info</h3>
       <Alert look="info" mode="text">
         <strong>Heads up!</strong> This alert needs your attention, but it’s not super important. <a href="#">Link</a>
       </Alert>
-      <h3 className="font-bold pb-2">Success</h3>
+      <h3 className="pb-2 font-bold">Success</h3>
       <Alert look="success" mode="text">
         <strong>Well done!</strong> You successfully read this important alert message. <a href="#">Link</a>
       </Alert>
-      <h3 className="font-bold pb-2">Warning</h3>
+      <h3 className="pb-2 font-bold">Warning</h3>
       <Alert look="warning" mode="text">
         <strong>Warning!</strong> Better check yourself, you’re not looking too good. <a href="#">Link</a>
       </Alert>
-      <h3 className="font-bold pb-2">Danger</h3>
+      <h3 className="pb-2 font-bold">Danger</h3>
       <Alert look="danger" mode="text">
         <strong>Oh snap!</strong> Change a few things up and try submitting again. <a href="#">Link</a>
       </Alert>
-      <h3 className="font-bold pb-2">System</h3>
+      <h3 className="pb-2 font-bold">System</h3>
       <Alert look="system" mode="text">
         <strong>System Error 8942:</strong> The server is no responding. Please try again later. Sorry for the
         inconvenience. <a href="#">Link</a>
       </Alert>
-      <h2 className="typography-body-8 mb-2 font-bold pt-4">Custom Icon Sizes</h2>
-      <h3 className="font-bold pb-2">Medium</h3>
+      <h2 className="typography-body-8 mb-2 pt-4 font-bold">Custom Icon Sizes</h2>
+      <h3 className="pb-2 font-bold">Medium</h3>
       <Alert look="info" iconSize="medium" mode="text">
         <strong>Medium</strong> This alert has a medium icon. <a href="#">Link</a>
       </Alert>
-      <h3 className="font-bold pb-2">Small</h3>
+      <h3 className="pb-2 font-bold">Small</h3>
       <Alert look="info" iconSize="small" mode="text">
         <strong>Small</strong> This alert has a small icon. <a href="#">Link</a>
       </Alert>
-      <h3 className="font-bold pb-2">Extra Small</h3>
+      <h3 className="pb-2 font-bold">Extra Small</h3>
       <Alert look="info" iconSize="xsmall" mode="text">
         <strong>Extra Small</strong> This alert has an extra small icon. <a href="#">Link</a>
       </Alert>

diff --git a/packages/ui/src/components/alert/alert.styles.ts b/packages/ui/src/components/alert/alert.styles.ts
@@ -6,7 +6,7 @@ export const styles = tv(
       base: 'typography-body-10 relative mb-4 xsl:flex',
       icon: 'float-left flex-none',
       body: 'relative flex-1 overflow-hidden xsl:top-[0.125rem] [&_a]:underline',
-      heading: 'typography-body-9 mb-2 font-bold',
+      heading: 'typography-body-9 mb-1 font-bold',
       close: 'absolute right-0.5 top-0.5 p-1 hover:opacity-80',
     },
     variants: {

diff --git a/packages/ui/src/components/autocomplete/autocomplete.component.tsx b/packages/ui/src/components/autocomplete/autocomplete.component.tsx
@@ -101,16 +101,6 @@ export function Autocomplete<T extends object>({
     searchProps.value.length,
   ]);
 
-  const iconSize = useMemo(() => {
-    switch (size) {
-      case 'small':
-      case 'medium':
-        return 'small';
-      default:
-        return 'medium';
-    }
-  }, [size]);
-
   return (
     <div className={styles.base({ className })}>
       {props.label && <Label {...labelProps}>{props.label}</Label>}
@@ -120,9 +110,9 @@ export function Autocomplete<T extends object>({
       <div ref={outerRef} className={styles.outerWrapper()}>
         <div className={styles.iconWrapper()}>
           {loadingState ? (
-            <ProgressIndicator size={iconSize} color="muted" />
+            <ProgressIndicator size="small" color="muted" />
           ) : (
-            <SearchIcon aria-hidden size={iconSize} color="muted" />
+            <SearchIcon aria-hidden size="small" color="muted" />
           )}
         </div>
         <input

diff --git a/packages/ui/src/components/badge/badge.spec.tsx b/packages/ui/src/components/badge/badge.spec.tsx
@@ -12,7 +12,7 @@ describe('Badge', () => {
     const style = styles({ color: 'primary', type: 'pill' });
     // TODO: use some variants for test
     expect(style).toBe(
-      'whitespace-nowrap border text-center border-primary bg-primary text-white typography-body-10 h-4 rounded-xl px-[0.4375rem] font-medium leading-none flex items-center',
+      'whitespace-nowrap border text-center border-primary bg-primary text-white typography-body-10 flex h-4 w-fit items-center rounded-xl px-[0.4375rem] font-medium leading-none',
     );
   });
 });
diff --git a/packages/ui/src/components/badge/badge.stories.tsx b/packages/ui/src/components/badge/badge.stories.tsx
@@ -149,7 +149,7 @@ export const Buttons = () => (
     <div className="flex gap-2">
       {SIZES.map(size => (
         <Button key={size} color="primary" size={size}>
-          <div className="w-max flex items-center">
+          <div className="flex w-max items-center">
             Label
             <Badge type="default" color="faint" className="ml-1">
               NEW
@@ -161,7 +161,7 @@ export const Buttons = () => (
     <div className="flex gap-2">
       {SIZES.map(size => (
         <Button key={size} color="primary" size={size}>
-          <div className="w-max flex items-center">
+          <div className="flex w-max items-center">
             <Badge type="default" color="faint" className="mr-1">
               NEW
             </Badge>{' '}
@@ -174,7 +174,7 @@ export const Buttons = () => (
     <div className="flex gap-2">
       {SIZES.map(size => (
         <Button key={size} look="primary" size={size}>
-          <div className="w-max flex items-center">
+          <div className="flex w-max items-center">
             Label
             <Badge color="danger-inverted" type="pill" className="ml-1">
               88
@@ -186,7 +186,7 @@ export const Buttons = () => (
     <div className="flex gap-2">
       {SIZES.map(size => (
         <Button key={size} look="primary" size={size}>
-          <div className="w-max flex items-center">
+          <div className="flex w-max items-center">
             <Badge color="danger-inverted" type="pill" className="mr-1">
               88
             </Badge>

diff --git a/packages/ui/src/components/badge/badge.styles.ts b/packages/ui/src/components/badge/badge.styles.ts
@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'inline-block whitespace-nowrap border text-center',
+    base: 'inline-block w-fit whitespace-nowrap border text-center',
     variants: {
       color: {
         danger: 'border-danger bg-danger text-white',
@@ -24,7 +24,7 @@ export const styles = tv(
         'warning-inverted': 'border-none bg-white text-warning',
       },
       type: {
-        pill: 'typography-body-10 h-4 rounded-xl px-[0.4375rem] font-medium leading-none flex items-center',
+        pill: 'typography-body-10 flex h-4 w-fit items-center rounded-xl px-[0.4375rem] font-medium leading-none',
         default: 'h-[1.25rem] rounded-sm px-1 text-[0.75rem] leading-[1.125rem]',
       },
       soft: {

diff --git a/.../components/button-group/components/button-group-button/button-group-button.component.tsx b/.../components/button-group/components/button-group-button/button-group-button.component.tsx
@@ -15,9 +15,10 @@ export function ButtonGroupButton({ className, label, ...props }: ButtonGroupBut
   const { inputProps, isSelected, isDisabled } = useRadio({ ...props, children: label }, state, ref);
   const { isFocusVisible, focusProps } = useFocusRing();
   const styles = buttonStyles({ block, isDisabled, isFocusVisible });
+  const key = isSelected ? 'selected' : 'not-selected';
 
   return (
-    <label className={styles.base({ className })}>
+    <label className={styles.base({ className })} key={key}>
       <VisuallyHidden>
         <input {...inputProps} {...focusProps} ref={ref} />
       </VisuallyHidden>

diff --git a/.../src/components/button-group/components/button-group-button/button-group-button.styles.ts b/.../src/components/button-group/components/button-group-button/button-group-button.styles.ts
@@ -28,6 +28,9 @@ export const styles = tv(
         true: {
           button: 'pointer-events-auto',
         },
+        false: {
+          button: 'pointer-events-none',
+        },
       },
     },
   },

diff --git a/packages/ui/src/components/button/button.spec.tsx b/packages/ui/src/components/button/button.spec.tsx
@@ -17,7 +17,7 @@ describe('Button', () => {
   it('renders the style correctly', () => {
     const style = styles({ look: 'primary', size: 'medium' });
     expect(style.base()).toBe(
-      'items-center justify-center rounded transition-[background] disabled:pointer-events-none disabled:opacity-50 group-first/add-on-before:rounded-r-none group-last/add-on-after:rounded-l-none typography-body-9 px-2 active-theme-rams:before:h-0.5 h-6 relative border border-primary bg-primary text-white hover:bg-primary-70 active:bg-primary-50 active-theme-rams:border-b-pop active-theme-rams:before:absolute active-theme-rams:before:bottom-0 active-theme-rams:before:block active-theme-rams:before:w-full active-theme-rams:before:bg-pop inline-flex w-auto outline-none',
+      'items-center justify-center rounded transition-[background] disabled:pointer-events-none disabled:opacity-50 group-first/add-on-before:rounded-r-none group-last/add-on-after:rounded-l-none typography-body-9 h-6 px-2 active-theme-rams:before:h-0.5 relative border border-primary bg-primary text-white hover:bg-primary-70 active:bg-primary-50 active-theme-rams:border-b-pop active-theme-rams:before:absolute active-theme-rams:before:bottom-0 active-theme-rams:before:block active-theme-rams:before:w-full active-theme-rams:before:bg-pop inline-flex w-auto outline-none',
     );
   });
 

diff --git a/packages/ui/src/components/button/button.stories.tsx b/packages/ui/src/components/button/button.stories.tsx
@@ -1,7 +1,6 @@
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 
 import { ArrowLeftIcon, ArrowRightIcon, BurgerIcon } from '../icon/index.js';
-import { ProgressIndicator } from '../progress-indicator/progress-indicator.component.js';
 
 import { Button } from './button.component.js';
 

diff --git a/packages/ui/src/components/button/button.styles.ts b/packages/ui/src/components/button/button.styles.ts
@@ -15,16 +15,16 @@ export const styles = tv(
     variants: {
       size: {
         small: {
-          base: 'typography-body-10 px-1.5 active-theme-rams:before:h-[0.0625rem] h-5',
+          base: 'typography-body-10 h-5 px-1.5 active-theme-rams:before:h-[0.0625rem]',
         },
         medium: {
-          base: 'typography-body-9 px-2 active-theme-rams:before:h-0.5 h-6',
+          base: 'typography-body-9 h-6 px-2 active-theme-rams:before:h-0.5',
         },
         large: {
-          base: 'typography-body-9 px-2.5 active-theme-rams:before:h-0.5 h-7',
+          base: 'typography-body-9 h-7 px-2.5 active-theme-rams:before:h-0.5',
         },
         xlarge: {
-          base: 'typography-body-8 px-3 active-theme-rams:before:h-1 h-8',
+          base: 'typography-body-8 h-8 px-3 active-theme-rams:before:h-1',
         },
       },
       look: {

diff --git a/packages/ui/src/components/error-message/error-message.styles.ts b/packages/ui/src/components/error-message/error-message.styles.ts
@@ -5,6 +5,6 @@ export const styles = tv({
     base: 'typography-body-11 flex items-start text-danger',
     list: 'mb-2 flex flex-col gap-1',
     // below should be em rather than rem based on old GEL
-    icon: 'mr-[0.5em] align-top mt-[0.15rem]',
+    icon: 'mr-[0.5em] mt-[0.15rem] align-top',
   },
 });