feat(ui): add subheading to weekly downloads to clarify scope (#1752)

Author: serhalp

app/components/CollapsibleSection.vue

@@ -4,6 +4,7 @@ import { LinkBase } from '#components'
 
 interface Props {
   title: string
+  subtitle?: string
   isLoading?: boolean
   headingLevel?: `h${number}`
   id: string
@@ -81,7 +82,8 @@ useHead({
     <div class="flex items-center justify-between mb-3 px-1">
       <component
         :is="headingLevel"
-        class="group text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-2"
+        class="group text-xs text-fg-subtle uppercase tracking-wider flex gap-2"
+        :class="subtitle ? 'items-start' : 'items-center'"
       >
         <button
           :id="buttonId"
@@ -101,9 +103,14 @@ useHead({
           />
         </button>
 
-        <LinkBase :to="`#${id}`">
-          {{ title }}
-        </LinkBase>
+        <span>
+          <LinkBase :to="`#${id}`">
+            {{ title }}
+          </LinkBase>
+          <span v-if="subtitle" class="block text-2xs normal-case tracking-normal">{{
+            subtitle
+          }}</span>
+        </span>
       </component>
 
       <!-- Actions slot for buttons or other elements -->

app/components/Modal.client.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const props = defineProps<{
   modalTitle: string
+  modalSubtitle?: string
 }>()
 
 const dialogRef = useTemplateRef('dialogRef')
@@ -14,6 +15,12 @@ const modalTitleId = computed(() => {
   return id ? `${id}-title` : undefined
 })
 
+const modalSubtitleId = computed(() => {
+  if (!props.modalSubtitle) return undefined
+  const id = getCurrentInstance()?.attrs.id
+  return id ? `${id}-subtitle` : undefined
+})
+
 function handleModalClose() {
   dialogRef.value?.close()
 }
@@ -45,14 +52,20 @@ defineExpose({
       closedby="any"
       class="w-[calc(100%-2rem)] bg-bg border border-border rounded-lg shadow-xl max-h-[90vh] overflow-y-auto overscroll-contain m-0 m-auto p-6 text-fg focus-visible:outline focus-visible:outline-accent/70"
       :aria-labelledby="modalTitleId"
+      :aria-describedby="modalSubtitleId"
       v-bind="$attrs"
       @transitionend="onDialogTransitionEnd"
     >
       <!-- Modal top header section -->
       <div class="flex items-center justify-between mb-6">
-        <h2 :id="modalTitleId" class="font-mono text-lg font-medium">
-          {{ modalTitle }}
-        </h2>
+        <div>
+          <h2 :id="modalTitleId" class="font-mono text-lg font-medium">
+            {{ modalTitle }}
+          </h2>
+          <p v-if="modalSubtitle" :id="modalSubtitleId" class="text-xs text-fg-subtle">
+            {{ modalSubtitle }}
+          </p>
+        </div>
         <ButtonBase
           type="button"
           :aria-label="$t('common.close')"

app/components/Package/ChartModal.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const props = defineProps<{
   modalTitle?: string
+  modalSubtitle?: string
 }>()
 
 const emit = defineEmits<{
@@ -11,6 +12,7 @@ const emit = defineEmits<{
 <template>
   <Modal
     :modalTitle="modalTitle ?? $t('package.trends.title')"
+    :modalSubtitle="modalSubtitle"
     id="chart-modal"
     class="h-full sm:h-min sm:border sm:border-border sm:rounded-lg shadow-xl sm:max-h-[90vh] sm:max-w-3xl"
     @transitioned="emit('transitioned')"

app/components/Package/WeeklyDownloadStats.vue

@@ -28,6 +28,12 @@ const modalTitle = computed(() => {
   return $t('package.trends.items.downloads')
 })
 
+const modalSubtitle = computed(() => {
+  const facet = route.query.facet as string | undefined
+  if (facet === 'likes' || facet === 'contributors') return undefined
+  return $t('package.downloads.subtitle')
+})
+
 const isChartModalOpen = shallowRef<boolean>(false)
 
 function handleModalClose() {
@@ -281,7 +287,11 @@ const config = computed<VueUiSparklineConfig>(() => {
 
 <template>
   <div class="space-y-8">
-    <CollapsibleSection id="downloads" :title="$t('package.downloads.title')">
+    <CollapsibleSection
+      id="downloads"
+      :title="$t('package.downloads.title')"
+      :subtitle="$t('package.downloads.subtitle')"
+    >
       <template #actions>
         <ButtonBase
           v-if="hasWeeklyDownloads"
@@ -351,6 +361,7 @@ const config = computed<VueUiSparklineConfig>(() => {
   <PackageChartModal
     v-if="isChartModalOpen && hasWeeklyDownloads"
     :modal-title="modalTitle"
+    :modal-subtitle="modalSubtitle"
     @close="handleModalClose"
     @transitioned="handleModalTransitioned"
   >

i18n/locales/en.json

@@ -440,7 +440,8 @@
     },
     "downloads": {
       "title": "Weekly Downloads",
-      "community_distribution": "View community adoption distribution"
+      "community_distribution": "View community adoption distribution",
+      "subtitle": "Across all versions"
     },
     "install_scripts": {
       "title": "Install Scripts",

i18n/locales/fr-FR.json

@@ -415,7 +415,8 @@
     },
     "downloads": {
       "title": "Téléchargements hebdo.",
-      "community_distribution": "Voir la distribution des versions téléchargées par la communauté"
+      "community_distribution": "Voir la distribution des versions téléchargées par la communauté",
+      "subtitle": "Toutes versions confondues"
     },
     "install_scripts": {
       "title": "Scripts d'installation",

i18n/schema.json

@@ -1326,6 +1326,9 @@
             },
             "community_distribution": {
               "type": "string"
+            },
+            "subtitle": {
+              "type": "string"
             }
           },
           "additionalProperties": false

lunaria/files/en-GB.json

@@ -439,7 +439,8 @@
     },
     "downloads": {
       "title": "Weekly Downloads",
-      "community_distribution": "View community adoption distribution"
+      "community_distribution": "View community adoption distribution",
+      "subtitle": "Across all versions"
     },
     "install_scripts": {
       "title": "Install Scripts",

lunaria/files/en-US.json

@@ -439,7 +439,8 @@
     },
     "downloads": {
       "title": "Weekly Downloads",
-      "community_distribution": "View community adoption distribution"
+      "community_distribution": "View community adoption distribution",
+      "subtitle": "Across all versions"
     },
     "install_scripts": {
       "title": "Install Scripts",

lunaria/files/fr-FR.json

@@ -414,7 +414,8 @@
     },
     "downloads": {
       "title": "Téléchargements hebdo.",
-      "community_distribution": "Voir la distribution des versions téléchargées par la communauté"
+      "community_distribution": "Voir la distribution des versions téléchargées par la communauté",
+      "subtitle": "Toutes versions confondues"
     },
     "install_scripts": {
       "title": "Scripts d'installation",