feat: copy package name button (#473)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Daniel Roe <daniel@roe.dev>

Author: 3 people

app/components/AnnounceTooltip.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const props = defineProps<{
+  /** Tooltip text */
+  text: string
+  /** Position: 'top' | 'bottom' | 'left' | 'right' */
+  position?: 'top' | 'bottom' | 'left' | 'right'
+  /** is tooltip visible */
+  isVisible: boolean
+}>()
+</script>
+
+<template>
+  <BaseTooltip :text :isVisible :position :tooltip-attr="{ 'aria-live': 'polite' }"
+    ><slot
+  /></BaseTooltip>
+</template>

app/components/AppTooltip.vue

@@ -9,15 +9,6 @@ const props = defineProps<{
 const isVisible = shallowRef(false)
 const tooltipId = useId()
 
-const positionClasses: Record<string, string> = {
-  top: 'bottom-full inset-is-1/2 -translate-x-1/2 mb-1',
-  bottom: 'top-full inset-is-0 mt-1',
-  left: 'inset-ie-full top-1/2 -translate-y-1/2 me-2',
-  right: 'inset-is-full top-1/2 -translate-y-1/2 ms-2',
-}
-
-const tooltipPosition = computed(() => positionClasses[props.position || 'bottom'])
-
 function show() {
   isVisible.value = true
 }
@@ -28,31 +19,16 @@ function hide() {
 </script>
 
 <template>
-  <div
-    class="relative inline-flex"
-    :aria-describedby="isVisible ? tooltipId : undefined"
+  <BaseTooltip
+    :text
+    :isVisible
+    :position
+    :tooltip-attr="{ role: 'tooltip', id: tooltipId }"
     @mouseenter="show"
     @mouseleave="hide"
     @focusin="show"
     @focusout="hide"
-  >
-    <slot />
-
-    <Transition
-      enter-active-class="transition-opacity duration-150 motion-reduce:transition-none"
-      leave-active-class="transition-opacity duration-100 motion-reduce:transition-none"
-      enter-from-class="opacity-0"
-      leave-to-class="opacity-0"
-    >
-      <div
-        v-if="isVisible"
-        :id="tooltipId"
-        role="tooltip"
-        class="absolute px-2 py-1 font-mono text-xs text-fg bg-bg-elevated border border-border rounded shadow-lg whitespace-nowrap z-[100] pointer-events-none"
-        :class="tooltipPosition"
-      >
-        {{ text }}
-      </div>
-    </Transition>
-  </div>
+    :aria-describedby="isVisible ? tooltipId : undefined"
+    ><slot
+  /></BaseTooltip>
 </template>

app/components/BaseTooltip.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  /** Tooltip text */
+  text: string
+  /** Position: 'top' | 'bottom' | 'left' | 'right' */
+  position?: 'top' | 'bottom' | 'left' | 'right'
+  /** is tooltip visible */
+  isVisible: boolean
+  /** attributes for tooltip element */
+  tooltipAttr?: HTMLAttributes
+}>()
+
+const positionClasses: Record<string, string> = {
+  top: 'bottom-full inset-is-1/2 -translate-x-1/2 mb-1',
+  bottom: 'top-full inset-is-0 mt-1',
+  left: 'inset-ie-full top-1/2 -translate-y-1/2 me-2',
+  right: 'inset-is-full top-1/2 -translate-y-1/2 ms-2',
+}
+
+const tooltipPosition = computed(() => positionClasses[props.position || 'bottom'])
+</script>
+
+<template>
+  <div class="relative inline-flex">
+    <slot />
+
+    <Transition
+      enter-active-class="transition-opacity duration-150 motion-reduce:transition-none"
+      leave-active-class="transition-opacity duration-100 motion-reduce:transition-none"
+      enter-from-class="opacity-0"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="props.isVisible"
+        class="absolute px-2 py-1 font-mono text-xs text-fg bg-bg-elevated border border-border rounded shadow-lg whitespace-nowrap z-[100] pointer-events-none"
+        :class="tooltipPosition"
+        v-bind="tooltipAttr"
+      >
+        {{ text }}
+      </div>
+    </Transition>
+  </div>
+</template>

app/pages/[...package].vue

@@ -86,6 +86,12 @@ const displayVersion = computed(() => {
   return pkg.value.versions[latestTag] ?? null
 })
 
+//copy package name
+const { copied: copiedPkgName, copy: copyPkgName } = useClipboard({
+  source: packageName,
+  copiedDuring: 2000,
+})
+
 // Fetch dependency analysis (lazy, client-side)
 // This is the same composable used by PackageVulnerabilityTree and PackageDeprecatedTree
 const {
@@ -388,9 +394,19 @@ function handleClick(event: MouseEvent) {
                 :to="{ name: 'org', params: { org: orgName } }"
                 class="text-fg-muted hover:text-fg transition-colors duration-200"
                 >@{{ orgName }}</NuxtLink
-              ><span v-if="orgName">/</span
-              >{{ orgName ? pkg.name.replace(`@${orgName}/`, '') : pkg.name }}
+              ><span v-if="orgName">/</span>
+              <AnnounceTooltip :text="$t('common.copied')" :isVisible="copiedPkgName">
+                <button
+                  @click="copyPkgName()"
+                  aria-describedby="copy-pkg-name"
+                  class="cursor-copy ms-1 mt-1 active:scale-95 transition-transform"
+                >
+                  {{ orgName ? pkg.name.replace(`@${orgName}/`, '') : pkg.name }}
+                </button>
+              </AnnounceTooltip>
             </h1>
+
+            <span id="copy-pkg-name" class="sr-only">{{ $t('package.copy_name') }}</span>
             <span
               v-if="displayVersion"
               class="inline-flex items-baseline gap-1.5 font-mono text-base sm:text-lg text-fg-muted shrink-0"

app/pages/code/[...path].vue

@@ -418,7 +418,7 @@ defineOgImageComponent('Default', {
               <button
                 v-if="selectedLines"
                 type="button"
-                class="px-2 py-1 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded hover:text-fg hover:border-border-hover transition-colors"
+                class="px-2 py-1 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded hover:text-fg hover:border-border-hover transition-colors active:scale-95"
                 @click="copyPermalinkUrl"
               >
                 {{ permalinkCopied ? $t('common.copied') : $t('code.copy_link') }}

i18n/locales/en.json

@@ -111,6 +111,7 @@
     "verified_provenance": "Verified provenance",
     "view_permalink": "View permalink for this version",
     "navigation": "Package",
+    "copy_name": "Copy package name",
     "deprecation": {
       "package": "This package has been deprecated.",
       "version": "This version has been deprecated.",

lunaria/files/en-US.json

@@ -111,6 +111,7 @@
     "verified_provenance": "Verified provenance",
     "view_permalink": "View permalink for this version",
     "navigation": "Package",
+    "copy_name": "Copy package name",
     "deprecation": {
       "package": "This package has been deprecated.",
       "version": "This version has been deprecated.",

test/nuxt/components.spec.ts

@@ -56,6 +56,7 @@ import DateTime from '~/components/DateTime.vue'
 import AppHeader from '~/components/AppHeader.vue'
 import AppFooter from '~/components/AppFooter.vue'
 import AppTooltip from '~/components/AppTooltip.vue'
+import AnnounceTooltip from '~/components/AnnounceTooltip.vue'
 import LoadingSpinner from '~/components/LoadingSpinner.vue'
 import JsrBadge from '~/components/JsrBadge.vue'
 import ProvenanceBadge from '~/components/ProvenanceBadge.vue'
@@ -194,6 +195,17 @@ describe('component accessibility audits', () => {
     })
   })
 
+  describe('AnnounceTooltip', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(AnnounceTooltip, {
+        props: { text: 'Tooltip content', isVisible: true },
+        slots: { default: '<button>Trigger</button>' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
   describe('LoadingSpinner', () => {
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(LoadingSpinner)