From fe6d2d70b2903b40ce93521b2da17f61ad716a1c Mon Sep 17 00:00:00 2001
From: shon-button <shon@button.is>
Date: Thu, 3 Aug 2023 10:04:25 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix:=20Resolve=20issue=20with=20?=
 =?UTF-8?q?button=20variant=20detection?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

📝 Problem:
The previous code did not handle the case where 'args.variant' was undefined, leading to a 'Cannot read properties of undefined' error.

🛠️ Solution:
Added a check to ensure 'args.variant' is defined before using it in the conditional logic. If 'args.variant' is undefined, it defaults to an empty string, preventing the error and allowing proper detection of the variant.

🚀 Impact:
This fix ensures that the button variant detection works correctly, providing a smoother user experience and preventing potential errors.
---
 .../stories/button/Button.stories.tsx         | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/bcgov-theme/stories/button/Button.stories.tsx b/packages/bcgov-theme/stories/button/Button.stories.tsx
index 70541269..b1df4f2d 100644
--- a/packages/bcgov-theme/stories/button/Button.stories.tsx
+++ b/packages/bcgov-theme/stories/button/Button.stories.tsx
@@ -10,17 +10,21 @@ export default {
   argTypes,
 } as Meta;
 
-export const Template: Story = args => (
-  <>
-    {args.variant.endsWith('-inverse') ? (
-      <div style={{ backgroundColor: '#003366', padding: '15px' }}>
+export const Template: Story = args => {
+  const variant = args.variant || ''; // Default to an empty string if args.variant is undefined
+
+  return (
+    <>
+      {variant.endsWith('-inverse') ? (
+        <div style={{ backgroundColor: '#003366', padding: '15px' }}>
+          <Button {...args}>Click Me!</Button>
+        </div>
+      ) : (
         <Button {...args}>Click Me!</Button>
-      </div>
-    ) : (
-      <Button {...args}>Click Me!</Button>
-    )}
-  </>
-);
+      )}
+    </>
+  );
+};
 
 const HTMLTemplate: Story = args => (
   <>