Merge pull request #904 from WestpacGEL/fix/style-fixes

UI and Protoform changes
WestpacGEL · Oct 8, 2024 · b07a2b8 · b07a2b8
2 parents 7cba736 + 62098e4
commit b07a2b8
Show file tree

Hide file tree

Showing 26 changed files with 48 additions and 49 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/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="m-auto max-w-[1922px] border border-border">
+        <main className="m-auto max-w-[1922px] border border-white">
           <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
@@ -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"></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
@@ -12,7 +12,7 @@ export function CustomFooter() {
     <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,
+        'md:w-[calc(100%-301px)]': open,
       })}
       hideLogo
     >

diff --git a/apps/protoform/src/components/custom-header/custom-header.tsx b/apps/protoform/src/components/custom-header/custom-header.tsx
@@ -25,7 +25,7 @@ export function CustomHeader() {
       leftIcon={isMobile ? 'arrow' : undefined}
       leftOnClick={() => router.back()}
       logoLink="/"
-      className="z-[100] m-auto max-w-[1922px] md:sticky md:top-0"
+      className="z-[100] m-auto max-w-[1922px] 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
@@ -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',
+            'items-center 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 },
           )}
         >
@@ -100,6 +100,7 @@ export function Sidebar({ children }: { children?: ReactNode }) {
             </Button>
           )}
         </div>
+
         <>
           <>
             <div

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 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
@@ -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 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',
   },
 });
diff --git a/packages/ui/src/components/filter/components/filter-buttons/filter-buttons.styles.ts b/packages/ui/src/components/filter/components/filter-buttons/filter-buttons.styles.ts
@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv({
   slots: {
     base: 'relative flex justify-start',
-    buttonList: 'flex w-full touch-pan-x gap-1 overflow-y-visible overflow-x-auto whitespace-nowrap',
+    buttonList: 'flex w-full touch-pan-x gap-1 overflow-x-auto overflow-y-visible whitespace-nowrap',
     scrollButton: 'absolute rounded-none contrast-more:bg-black',
   },
   variants: {

diff --git a/packages/ui/src/components/flexi-cell/flexi-cell.patterns.stories.tsx b/packages/ui/src/components/flexi-cell/flexi-cell.patterns.stories.tsx
@@ -16,7 +16,6 @@ import { Badge, ErrorMessage } from '../index.js';
 import { FlexiCellAdornment } from './components/flexi-cell-adornment/flexi-cell-adornment.component.js';
 import { FlexiCellButton } from './components/flexi-cell-button/flexi-cell-button.component.js';
 import { FlexiCellCircle } from './components/flexi-cell-circle/flexi-cell-circle.component.js';
-import { FlexiCellFooter } from './components/flexi-cell-footer/flexi-cell-footer.component.js';
 import { FlexiCellHint } from './components/flexi-cell-hint/flexi-cell-hint.component.js';
 import { FlexiCellLabel } from './components/flexi-cell-label/flexi-cell-label.component.js';
 import { FlexiCell } from './flexi-cell.component.js';

diff --git a/packages/ui/src/components/flexi-cell/flexi-cell.stories.tsx b/packages/ui/src/components/flexi-cell/flexi-cell.stories.tsx
@@ -101,7 +101,7 @@ export const SymbolVertical = () => {
               size={{ initial: 'default', md: 'large' }}
             >
               <div>
-                <div className="flex justify-start mb-2 md:mb-3">
+                <div className="mb-2 flex justify-start md:mb-3">
                   <GiftIcon look="outlined" color="hero" />
                 </div>
                 <div className="flex flex-col">

diff --git a/packages/ui/src/components/footer/footer.stories.tsx b/packages/ui/src/components/footer/footer.stories.tsx
@@ -38,10 +38,10 @@ export const DefaultStory: Story = {
         <Footer brand={brand === 'btfg' ? 'wbc' : brand} hideLogo {...rest}>
           <div className="relative">
             <div className="float-left flex-none">
-              <SecurityIcon size="small" className="float-left shrink-0 mr-1 mt-0.5" color="muted" />
+              <SecurityIcon size="small" className="float-left mr-1 shrink-0" color="muted" />
             </div>
             <div className="flex">
-              <p className="text-muted relative flex-1">
+              <p className="relative flex-1 text-muted">
                 Our site and your transactions are secure. You can read our{' '}
                 <Link href="#" type="inline">
                   security information

diff --git a/packages/ui/src/components/progress-indicator/progress-indicator.scenarios.stories.tsx b/packages/ui/src/components/progress-indicator/progress-indicator.scenarios.stories.tsx
@@ -2,7 +2,7 @@ import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 import { useCallback, useState } from 'react';
 
 import { Button } from '../button/button.component.js';
-import { ClearIcon, DropDownIcon, SearchIcon } from '../icon/index.js';
+import { ClearIcon, DropDownIcon } from '../icon/index.js';
 import { Input } from '../input/input.component.js';
 import { InputGroup } from '../input-group/input-group.component.js';
 

diff --git a/packages/ui/src/components/progress-indicator/progress-indicator.styles.ts b/packages/ui/src/components/progress-indicator/progress-indicator.styles.ts
@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'box-border inline-block animate-[spin_0.7s_linear_infinite] rounded-full border border-r-0 border-t-transparent',
+    base: 'box-border inline-block animate-[spin_0.7s_linear_infinite] rounded-full border border-r-0',
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
 );
-Original file line number
+Diff line change
@@ Expand Up / @@ -28,6 +28,9 @@ export const styles = tv( @@
             true: {
               button: 'pointer-events-auto',
             },
+            false: {
+              button: 'pointer-events-none',
+            },
           },
         },
       },
@@ Expand Down @@