From 1085a6de4ecfb6a59d574025f177dc4dc1394195 Mon Sep 17 00:00:00 2001
From: u7146335 <u7146335@anu.edu.au>
Date: Sun, 20 Oct 2024 01:57:46 +1100
Subject: [PATCH 1/2] Implemented fix and added testing code

---
 src/components/button/Primary.vue | 14 ++++++--
 src/stories/Button.story.vue      | 59 +++++++++++++++++++++++++++++--
 2 files changed, 69 insertions(+), 4 deletions(-)

diff --git a/src/components/button/Primary.vue b/src/components/button/Primary.vue
index 7ca3b98..dcb6604 100644
--- a/src/components/button/Primary.vue
+++ b/src/components/button/Primary.vue
@@ -26,6 +26,7 @@
     :disabled="disabled"
     :tabindex="loading ? '-1' : '0'"
     role="button"
+    @keydown="handleKeypress"
   >
     <span
       class="inline-flex items-center justify-center whitespace-nowrap"
@@ -85,7 +86,7 @@ interface Props {
   shortcut?: string[]
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   to: "",
   exact: true,
   blank: false,
@@ -103,4 +104,13 @@ withDefaults(defineProps<Props>(), {
   outline: false,
   shortcut: () => [],
 })
-</script>
+
+const handleKeypress = (event: KeyboardEvent) => {
+  // Check if the button is in a loading state
+  if (props.loading && (event.key === "Enter" || event.key === " ")){
+    event.preventDefault(); // Prevent keypresses when loading
+  } else {
+    console.log('Enter succeeds as normal')
+  }
+};
+</script>
\ No newline at end of file
diff --git a/src/stories/Button.story.vue b/src/stories/Button.story.vue
index e1dbead..5410fce 100644
--- a/src/stories/Button.story.vue
+++ b/src/stories/Button.story.vue
@@ -1,14 +1,69 @@
 <template>
   <Story title="Button">
     <Variant title="Primary">
-      <HoppButtonPrimary label="Button" />
+      <HoppButtonPrimary 
+        ref="primaryButton"
+        label="Button" 
+        @click="handleClick('Primary button clicked')" 
+      />
     </Variant>
     <Variant title="Secondary">
-      <HoppButtonSecondary label="Button" />
+      <HoppButtonSecondary 
+        label="Button" 
+        :loading="isLoading"
+        @click="handleClick('Secondary button clicked')" 
+      />
     </Variant>
   </Story>
 </template>
 
 <script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue'
 import { HoppButtonPrimary, HoppButtonSecondary } from "../components/button"
+
+const primaryButton = ref<InstanceType<typeof HoppButtonPrimary> | null>(null);
+const isLoading = ref(false);
+
+// Function to handle click event, log message, and trigger an Enter keypress event
+function handleClick(message: string) {
+  console.log(message)
+
+    // Set loading state to true
+  isLoading.value = true;
+
+  // Simulate loading by resetting the loading state after 3 seconds
+  setTimeout(() => {
+  isLoading.value = false;
+}, 3000); // 3 seconds delay
+}
+
+function handleKeyPress(event: KeyboardEvent) {
+
+  const enterEvent = new KeyboardEvent('keydown', {
+    key: ' ',
+    code: ' ',
+    keyCode: 32, 
+    charCode: 32,
+    which: 32,
+    bubbles: true, 
+  });
+
+  // Dispatch the Enter keypress event on the HoppButtonPrimary element
+  if (primaryButton.value) {
+    primaryButton.value.$el.dispatchEvent(enterEvent); // Trigger the event on the button
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', (event: KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      handleKeyPress(event);
+    }
+  });
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('keydown', handleKeyPress)
+})
+
 </script>

From 3fc0759e84d6414a1060170f6f4b43c75136b495 Mon Sep 17 00:00:00 2001
From: u7146335 <u7146335@anu.edu.au>
Date: Sun, 20 Oct 2024 14:46:48 +1100
Subject: [PATCH 2/2] Seperated story and restored original

---
 src/components/button/Primary.vue |  4 +-
 src/stories/Button.story.vue      | 61 ++-------------------------
 src/stories/Keypress.story.vue    | 70 +++++++++++++++++++++++++++++++
 3 files changed, 74 insertions(+), 61 deletions(-)
 create mode 100644 src/stories/Keypress.story.vue

diff --git a/src/components/button/Primary.vue b/src/components/button/Primary.vue
index dcb6604..40f7bc0 100644
--- a/src/components/button/Primary.vue
+++ b/src/components/button/Primary.vue
@@ -108,9 +108,7 @@ const props = withDefaults(defineProps<Props>(), {
 const handleKeypress = (event: KeyboardEvent) => {
   // Check if the button is in a loading state
   if (props.loading && (event.key === "Enter" || event.key === " ")){
-    event.preventDefault(); // Prevent keypresses when loading
-  } else {
-    console.log('Enter succeeds as normal')
+    event.preventDefault();
   }
 };
 </script>
\ No newline at end of file
diff --git a/src/stories/Button.story.vue b/src/stories/Button.story.vue
index 5410fce..c51e354 100644
--- a/src/stories/Button.story.vue
+++ b/src/stories/Button.story.vue
@@ -1,69 +1,14 @@
 <template>
   <Story title="Button">
     <Variant title="Primary">
-      <HoppButtonPrimary 
-        ref="primaryButton"
-        label="Button" 
-        @click="handleClick('Primary button clicked')" 
-      />
+      <HoppButtonPrimary label="Button" />
     </Variant>
     <Variant title="Secondary">
-      <HoppButtonSecondary 
-        label="Button" 
-        :loading="isLoading"
-        @click="handleClick('Secondary button clicked')" 
-      />
+      <HoppButtonSecondary label="Button" />
     </Variant>
   </Story>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
 import { HoppButtonPrimary, HoppButtonSecondary } from "../components/button"
-
-const primaryButton = ref<InstanceType<typeof HoppButtonPrimary> | null>(null);
-const isLoading = ref(false);
-
-// Function to handle click event, log message, and trigger an Enter keypress event
-function handleClick(message: string) {
-  console.log(message)
-
-    // Set loading state to true
-  isLoading.value = true;
-
-  // Simulate loading by resetting the loading state after 3 seconds
-  setTimeout(() => {
-  isLoading.value = false;
-}, 3000); // 3 seconds delay
-}
-
-function handleKeyPress(event: KeyboardEvent) {
-
-  const enterEvent = new KeyboardEvent('keydown', {
-    key: ' ',
-    code: ' ',
-    keyCode: 32, 
-    charCode: 32,
-    which: 32,
-    bubbles: true, 
-  });
-
-  // Dispatch the Enter keypress event on the HoppButtonPrimary element
-  if (primaryButton.value) {
-    primaryButton.value.$el.dispatchEvent(enterEvent); // Trigger the event on the button
-  }
-}
-
-onMounted(() => {
-  document.addEventListener('keydown', (event: KeyboardEvent) => {
-    if (event.key === 'Enter') {
-      handleKeyPress(event);
-    }
-  });
-})
-
-onBeforeUnmount(() => {
-  document.removeEventListener('keydown', handleKeyPress)
-})
-
-</script>
+</script>
\ No newline at end of file
diff --git a/src/stories/Keypress.story.vue b/src/stories/Keypress.story.vue
new file mode 100644
index 0000000..b56c674
--- /dev/null
+++ b/src/stories/Keypress.story.vue
@@ -0,0 +1,70 @@
+<template>
+    <Story title="Button">
+      <Variant title="Primary">
+        <HoppButtonPrimary 
+          ref="primaryButton"
+          label="Button" 
+          @click="handleClick('Primary button clicked')" 
+        />
+      </Variant>
+      <Variant title="Secondary">
+        <HoppButtonSecondary 
+          label="Button" 
+          :loading="isLoading"
+          @click="handleClick('Secondary button clicked')" 
+        />
+      </Variant>
+    </Story>
+  </template>
+  
+  <script setup lang="ts">
+  import { ref, onMounted, onBeforeUnmount } from 'vue'
+  import { HoppButtonPrimary, HoppButtonSecondary } from "../components/button"
+  
+  const primaryButton = ref<InstanceType<typeof HoppButtonPrimary> | null>(null);
+  const isLoading = ref(false);
+  
+  // Function to handle click event, log message, and trigger an Enter keypress event
+  function handleClick(message: string) {
+    console.log(message)
+  
+      // Set loading state to true
+    isLoading.value = true;
+  
+    // Simulate loading by resetting the loading state after 3 seconds
+    setTimeout(() => {
+    isLoading.value = false;
+  }, 3000); // 3 seconds delay
+  }
+  
+  function handleKeyPress(event: KeyboardEvent) {
+  
+    const enterEvent = new KeyboardEvent('keydown', {
+      key: ' ',
+      code: ' ',
+      keyCode: 32, 
+      charCode: 32,
+      which: 32,
+      bubbles: true, 
+    });
+  
+    // Dispatch the Enter keypress event on the HoppButtonPrimary element
+    if (primaryButton.value) {
+      primaryButton.value.$el.dispatchEvent(enterEvent); // Trigger the event on the button
+    }
+  }
+  
+  onMounted(() => {
+    document.addEventListener('keydown', (event: KeyboardEvent) => {
+      if (event.key === 'Enter') {
+        handleKeyPress(event);
+      }
+    });
+  })
+  
+  onBeforeUnmount(() => {
+    document.removeEventListener('keydown', handleKeyPress)
+  })
+  
+  </script>
+  
\ No newline at end of file