Merge pull request #896 from WestpacGEL/fix/badge-buttons

Updates for components: Badge, button group, footer stories
WestpacGEL · Sep 28, 2024 · 43ca1a8 · 43ca1a8
2 parents 22ce461 + 19df272
commit 43ca1a8
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 17 deletions.
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(
-      '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
@@ -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/.../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
@@ -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/.../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
@@ -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
@@ -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>
       </>