From 75e9dc55a822b5d12f1ed7233aa9794e6661a47e Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 9 Jul 2025 14:26:43 +0000
Subject: [PATCH] Refactor HelpButton and HelpTooltip to use shared HelpIcon
 component

Created a new `HelpIcon.vue` component to encapsulate the common icon display logic and styling previously duplicated in `HelpButton.vue` and `HelpTooltip.vue`.

- `HelpIcon.vue` now handles the rendering of outline and full icons and their hover transition.
- `HelpButton.vue` and `HelpTooltip.vue` have been refactored to use `HelpIcon.vue`, reducing code duplication.
- Ensured that existing functionalities, including hover effects, click handling, tooltip display, and ARIA attributes, are preserved.
---
 .../frontend/shared/views/HelpButton.vue      | 60 +++++------------
 .../frontend/shared/views/HelpIcon.vue        | 67 +++++++++++++++++++
 .../frontend/shared/views/HelpTooltip.vue     | 54 +++++----------
 3 files changed, 99 insertions(+), 82 deletions(-)
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/HelpIcon.vue

diff --git a/contentcuration/contentcuration/frontend/shared/views/HelpButton.vue b/contentcuration/contentcuration/frontend/shared/views/HelpButton.vue
index 3768b44efb..3e48ab5ca6 100644
--- a/contentcuration/contentcuration/frontend/shared/views/HelpButton.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/HelpButton.vue
@@ -4,18 +4,10 @@
     :class="$computedClass(buttonStyle)"
     :aria-label="ariaLabel"
     @click.stop.prevent="$emit('click')"
-    @mouseenter="hovered = true"
-    @mouseleave="hovered = false"
   >
-    <KIcon
-      icon="helpOutline"
-      :color="$themePalette.blue.v_500"
-      class="icon-outline"
-    />
-    <KIcon
-      icon="help"
-      :color="$themePalette.blue.v_500"
-      class="icon-full"
+    <HelpIcon
+      iconOutlineName="helpOutline"
+      iconFullName="help"
     />
   </button>
 
@@ -24,19 +16,19 @@
 
 <script>
 
+  import HelpIcon from './HelpIcon.vue';
+
   export default {
     name: 'HelpButton',
+    components: {
+      HelpIcon,
+    },
     props: {
       ariaLabel: {
         type: String,
         required: true,
       },
     },
-    data() {
-      return {
-        hovered: false,
-      };
-    },
     computed: {
       buttonStyle() {
         return {
@@ -59,35 +51,15 @@
     width: $toucharea-min-width;
     height: $toucharea-min-width;
     cursor: pointer;
-  }
-
-  button:hover {
-    .icon-full {
-      opacity: 1;
+    /* Ensure HelpIcon inherits button's hover state for its own hover effects */
+    &:hover .help-icon-wrapper {
+      .icon-full {
+        opacity: 1;
+      }
+      .icon-outline {
+        opacity: 0;
+      }
     }
-
-    .icon-outline {
-      opacity: 0;
-    }
-  }
-
-  .icon-outline,
-  .icon-full {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-
-    /* few extra pixels needed to achieve 16px icon size
-    due to extra padding in source svg */
-    width: 19.2px;
-    height: 19.2px;
-    transition: opacity 0.4s ease;
-    transform: translate(-50%, -50%);
-  }
-
-  .icon-full {
-    z-index: 1;
-    opacity: 0;
   }
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/HelpIcon.vue b/contentcuration/contentcuration/frontend/shared/views/HelpIcon.vue
new file mode 100644
index 0000000000..f1dbc1e9ed
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/HelpIcon.vue
@@ -0,0 +1,67 @@
+<template>
+  <span class="help-icon-wrapper">
+    <KIcon
+      :icon="iconOutlineName"
+      :color="$themePalette.blue.v_500"
+      class="icon-outline"
+    />
+    <KIcon
+      :icon="iconFullName"
+      :color="$themePalette.blue.v_500"
+      class="icon-full"
+    />
+  </span>
+</template>
+
+<script>
+  export default {
+    name: 'HelpIcon',
+    props: {
+      iconOutlineName: {
+        type: String,
+        required: true,
+      },
+      iconFullName: {
+        type: String,
+        required: true,
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .help-icon-wrapper {
+    position: relative;
+    display: inline-block;
+    width: 100%; /* Take width from parent */
+    height: 100%; /* Take height from parent */
+  }
+
+  .help-icon-wrapper:hover {
+    .icon-full {
+      opacity: 1;
+    }
+
+    .icon-outline {
+      opacity: 0;
+    }
+  }
+
+  .icon-outline,
+  .icon-full {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    /* few extra pixels needed to achieve 16px icon size
+    due to extra padding in source svg */
+    width: 19.2px;
+    height: 19.2px;
+    transition: opacity 0.4s ease;
+    transform: translate(-50%, -50%);
+  }
+
+  .icon-full {
+    z-index: 1;
+    opacity: 0;
+  }
+</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/HelpTooltip.vue b/contentcuration/contentcuration/frontend/shared/views/HelpTooltip.vue
index 0883a22454..0ca37ab584 100644
--- a/contentcuration/contentcuration/frontend/shared/views/HelpTooltip.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/HelpTooltip.vue
@@ -8,15 +8,9 @@
       class="icons-wrapper"
       :aria-label="text"
     >
-      <KIcon
-        icon="infoOutline"
-        :color="$themePalette.blue.v_500"
-        class="icon-outline"
-      />
-      <KIcon
-        icon="info"
-        :color="$themePalette.blue.v_500"
-        class="icon-full"
+      <HelpIcon
+        iconOutlineName="infoOutline"
+        iconFullName="info"
       />
     </span>
     <KTooltip
@@ -34,9 +28,13 @@
 
 <script>
 
+  import HelpIcon from './HelpIcon.vue';
+
   export default {
     name: 'HelpTooltip',
-
+    components: {
+      HelpIcon,
+    },
     props: {
       text: {
         type: String,
@@ -64,35 +62,15 @@
     display: inline-block;
     width: 100%;
     height: 100%;
-  }
-
-  .icons-wrapper:hover {
-    .icon-full {
-      opacity: 1;
+    /* Ensure HelpIcon inherits hover state for its own hover effects */
+    &:hover .help-icon-wrapper {
+      .icon-full {
+        opacity: 1;
+      }
+      .icon-outline {
+        opacity: 0;
+      }
     }
-
-    .icon-outline {
-      opacity: 0;
-    }
-  }
-
-  .icon-outline,
-  .icon-full {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-
-    /* few extra pixels needed to achieve 16px icon size
-    due to extra padding in source svg */
-    width: 19.2px;
-    height: 19.2px;
-    transition: opacity 0.4s ease;
-    transform: translate(-50%, -50%);
-  }
-
-  .icon-full {
-    z-index: 1;
-    opacity: 0;
   }
 
 </style>