feat(githubStar): add tooltipText prop to GitHub Star component [KHCP-6183]

packages/core/misc-widgets/sandbox/App.vue

@@ -3,7 +3,9 @@
     <main>
       <div>
         <h3>Awesome GitHub Star ⭐</h3>
-        <GithubStar :url="url" />
+        <GithubStar
+          :url="url"
+        />
       </div>
     </main>
   </div>

packages/core/misc-widgets/sandbox/index.ts

@@ -1,7 +1,10 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import { GithubStar } from '../src'
+import Kongponents from '@kong/kongponents'
+import '@kong/kongponents/dist/style.css'
 
 const app = createApp(App)
+app.use(Kongponents)
 app.component('GithubStar', GithubStar)
 app.mount('#app')

packages/core/misc-widgets/src/components/github-star/GithubStar.cy.ts

@@ -23,4 +23,15 @@ describe('<GithubStar />', () => {
     cy.getTestId('github-star').find('a').should('be.visible')
     cy.getTestId('github-star').find('.github-button').should('be.visible')
   })
+
+  it('renders default tooltip text on mouseenter', () => {
+    cy.mount(GithubStar, {
+      props: {
+        url: 'http://github.com/kong/kong',
+      },
+    })
+    cy.get('.github-button').trigger('mouseenter')
+    cy.get('.k-popover').should('be.visible')
+    cy.get('.k-popover').contains('Star this repository on Github')
+  })
 })

packages/core/misc-widgets/src/components/github-star/GithubStar.vue

@@ -4,29 +4,43 @@
     class="kong-ui-public-misc-widgets-github-star"
     data-testid="github-star"
   >
-    <a
-      aria-label="i18n.t('githubStar.ariaLabel')"
-      class="github-button"
-      data-color-scheme="no-preference: light; light: light; dark: light;"
-      data-show-count="true"
-      :href="url"
-      target="_blank"
-    >{{ i18n.t('githubStar.title') }}</a>
+    <KTooltip :label="tooltipLabel">
+      <span>
+        <a
+          :aria-label="i18n.t('githubStar.ariaLabel')"
+          class="github-button"
+          data-color-scheme="no-preference: light; light: light; dark: light;"
+          data-show-count="true"
+          :href="url"
+          target="_blank"
+        >
+          {{ i18n.t('githubStar.title') }}
+        </a>
+      </span>
+    </KTooltip>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import composables from '../../composables'
+import { KTooltip } from '@kong/kongponents'
 
-defineProps({
+const { i18n } = composables.useI18n()
+
+const props = defineProps({
   url: {
     type: String,
     required: true,
   },
+  tooltipText: {
+    type: String,
+    required: false,
+    default: '',
+  },
 })
 
-const { i18n } = composables.useI18n()
+const tooltipLabel = computed((): string => props.tooltipText || i18n.t('githubStar.tooltipLabel'))
 
 const scriptLoaded = ref<boolean>(false)
 

packages/core/misc-widgets/src/components/github-star/README.md

@@ -21,3 +21,11 @@ A Github Star component for displaying number of stars received by the repo on G
 - required: `true`
 
 Full URL to the GitHub repository.
+
+#### `tooltipText`
+
+- type: `String`
+- required: `false`
+- default: `Star this repository on Github`
+
+String to display a tooltip when hovered.

packages/core/misc-widgets/src/locales/en.json

@@ -1,6 +1,7 @@
 {
   "githubStar": {
     "title": "Star",
-    "ariaLabel": "Star buttons/github-buttons on GitHub"
+    "ariaLabel": "Star buttons/github-buttons on GitHub",
+    "tooltipLabel": "Star this repository on Github"
   }
 }