From 19df272fd83770a37282cc18fbe1e95676bb70f1 Mon Sep 17 00:00:00 2001
From: HZ991 <hzha991@aucklanduni.ac.nz>
Date: Fri, 27 Sep 2024 10:31:49 +1000
Subject: [PATCH] fix: changes to style in badge buttons, footer, and button
 group

---
 .../ui/src/components/badge/badge.spec.tsx    |  2 +-
 .../ui/src/components/badge/badge.styles.ts   |  2 +-
 .../button-group-button.component.tsx         |  2 +-
 .../button-group-button.styles.ts             |  7 ++++-
 .../src/components/footer/footer.stories.tsx  | 26 +++++++++----------
 5 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/packages/ui/src/components/badge/badge.spec.tsx b/packages/ui/src/components/badge/badge.spec.tsx
index 2247ff57c..aec4a2e2e 100644
--- 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(
-      'inline-block whitespace-nowrap border text-center border-primary bg-primary text-white typography-body-10 h-4 rounded-xl px-[0.4375rem] py-[0.25rem] font-medium leading-none',
+      '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',
     );
   });
 });
diff --git a/packages/ui/src/components/badge/badge.styles.ts b/packages/ui/src/components/badge/badge.styles.ts
index c640d872c..b4ef4f672 100644
--- 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] py-[0.25rem] font-medium leading-none',
+        pill: 'typography-body-10 h-4 rounded-xl px-[0.4375rem] font-medium leading-none flex items-center',
         default: 'h-[1.25rem] rounded-sm px-1 text-[0.75rem] leading-[1.125rem]',
       },
       soft: {
diff --git a/packages/ui/src/components/button-group/components/button-group-button/button-group-button.component.tsx b/packages/ui/src/components/button-group/components/button-group-button/button-group-button.component.tsx
index 03b8ed48d..4c1356370 100644
--- a/packages/ui/src/components/button-group/components/button-group-button/button-group-button.component.tsx
+++ b/packages/ui/src/components/button-group/components/button-group-button/button-group-button.component.tsx
@@ -28,7 +28,7 @@ export function ButtonGroupButton({ className, label, ...props }: ButtonGroupBut
         disabled={isDisabled}
         look={look}
         size={size}
-        className={styles.button()}
+        className={styles.button({ hasTransition: !isSelected })}
       >
         {label}
       </GELButton>
diff --git a/packages/ui/src/components/button-group/components/button-group-button/button-group-button.styles.ts b/packages/ui/src/components/button-group/components/button-group-button/button-group-button.styles.ts
index a92431689..16a9b2e15 100644
--- a/packages/ui/src/components/button-group/components/button-group-button/button-group-button.styles.ts
+++ b/packages/ui/src/components/button-group/components/button-group-button/button-group-button.styles.ts
@@ -5,7 +5,7 @@ export const styles = tv(
     slots: {
       base: '',
       button:
-        'rounded-none hover:cursor-pointer group-first/buttons:rounded-l group-last/buttons:rounded-r group-[:not(:first-child)]/buttons:border-l-0 active-theme-rams:border-b-primary active-theme-rams:before:hidden',
+        'pointer-events-none rounded-none hover:cursor-pointer group-first/buttons:rounded-l group-last/buttons:rounded-r group-[:not(:first-child)]/buttons:border-l-0 active-theme-rams:border-b-primary active-theme-rams:before:hidden',
     },
     variants: {
       isDisabled: {
@@ -24,6 +24,11 @@ export const styles = tv(
         },
         false: { base: 'w-auto' },
       },
+      hasTransition: {
+        true: {
+          button: 'pointer-events-auto',
+        },
+      },
     },
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
diff --git a/packages/ui/src/components/footer/footer.stories.tsx b/packages/ui/src/components/footer/footer.stories.tsx
index 939f8de37..2c6d1323b 100644
--- a/packages/ui/src/components/footer/footer.stories.tsx
+++ b/packages/ui/src/components/footer/footer.stories.tsx
@@ -36,19 +36,19 @@ export const DefaultStory: Story = {
     return (
       <>
         <Footer brand={brand === 'btfg' ? 'wbc' : brand} hideLogo {...rest}>
-          <div>
-            <SecurityIcon
-              size={{ initial: 'small', md: 'medium' }}
-              className="float-left shrink-0 max-md:mr-1 md:mr-2"
-              color="muted"
-            />
-            <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 size="small" className="float-left shrink-0 mr-1 mt-0.5" color="muted" />
+            </div>
+            <div className="flex">
+              <p className="text-muted relative flex-1">
+                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>
           </div>
         </Footer>
       </>