Add VCollectionHeader component

frontend/src/components/VCollectionHeader/VCollectionHeader.vue

@@ -8,16 +8,17 @@
         </h1>
       </div>
       <VButton
-        v-if="collection.by !== 'tag' && collection.url"
+        v-if="collection !== 'tag' && url"
         as="VLink"
         variant="filled-dark"
         size="medium"
         class="label-bold"
         has-icon-end
         show-external-icon
         :external-icon-size="6"
-        :href="collection.url"
-        >{{ $t(`collection.link.${collection.by}`) }}</VButton
+        :href="url"
+        @click="sendAnalyticsEvent"
+        >{{ $t(`collection.link.${collection}`) }}</VButton
       >
     </div>
     <p class="caption-regular lg:label-regular text-dark-charcoal-70">
@@ -29,45 +30,77 @@
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue"
 
+import { useRoute } from "@nuxtjs/composition-api"
+
 import { useUiStore } from "~/stores/ui"
+import type { Collection } from "~/types/search"
+import { useAnalytics } from "~/composables/use-analytics"
 
-type CollectionData =
-  | { by: "tag"; title: string }
-  | { by: "source"; title: string; url: string }
-  | { by: "creator"; title: string; url: string }
+import VButton from "~/components/VButton.vue"
+import VIcon from "~/components/VIcon/VIcon.vue"
 
 const icons = {
   tag: "tag",
   source: "institution",
   creator: "person",
 }
 
+/**
+ * Renders the header of a tag/creator/source collection page.
+ */
 export default defineComponent({
   name: "VCollectionHeader",
+  components: { VIcon, VButton },
   props: {
     collection: {
-      type: Object as PropType<CollectionData>,
+      type: String as PropType<Collection>,
+      required: true,
+    },
+    /**
+     * The name of the tag/creator/source. The source name should be the display
+     * name, not the code.
+     */
+    title: {
+      type: String,
       required: true,
     },
+    url: {
+      type: String,
+    },
+    /**
+     * The label showing the result count, to display below the title.
+     */
     resultsLabel: {
       type: String,
-      // TODO: replace with real i18n strings
-      default: "251 audio files with the selected tag",
+      required: true,
     },
   },
   setup(props) {
+    const route = useRoute()
     const uiStore = useUiStore()
-    const title = computed(() => props.collection.title)
 
-    const iconName = computed(() => icons[props.collection.by])
+    const iconName = computed(() => icons[props.collection])
 
     const isDesktop = computed(() => uiStore.isDesktopLayout)
 
+    const { sendCustomEvent } = useAnalytics()
+
+    const sendAnalyticsEvent = () => {
+      if (!props.url) return
+      const eventName =
+        props.collection === "creator"
+          ? "VISIT_CREATOR_LINK"
+          : "VISIT_SOURCE_LINK"
+      sendCustomEvent(eventName, {
+        id: route.value.params.id,
+        url: props.url,
+      })
+    }
+
     return {
-      title,
       iconName,
-
       isDesktop,
+      sendAnalyticsEvent,
     }
   },
 })

frontend/src/components/VCollectionHeader/meta/VCollectionHeader.stories.mdx

@@ -1,24 +1,13 @@
-import { Canvas, Meta, Story } from "@storybook/addon-docs"
+import {
+  ArgsTable,
+  Canvas,
+  Description,
+  Meta,
+  Story,
+} from "@storybook/addon-docs"
 
 import VCollectionHeader from "~/components/VCollectionHeader/VCollectionHeader.vue"
 
-export const tagCollection = {
-  collection: "tag",
-  title: "cat",
-}
-
-export const sourceCollection = {
-  collection: "source",
-  title: "Metropolitan Museum of Art",
-  url: "https://www.metmuseum.org/",
-}
-
-export const creatorCollection = {
-  collection: "creator",
-  title: "iocyoungreporters",
-  url: "https://www.flickr.com/photos/126018610@N05",
-}
-
 export const Template = (args) => ({
   template: `<div class="wrapper w-full p-2"><VCollectionHeader v-bind="args"/></div>`,
   components: { VCollectionHeader },
@@ -27,32 +16,80 @@ export const Template = (args) => ({
   },
 })
 
+export const AllCollectionsTemplate = (args) => ({
+  template: `
+<div class="wrapper w-full p-2 gap-2">
+    <div v-for="collection in args.collections" :key="collection.collection" class="pb-6">
+    <h2 class="heading-3 pb-2">{{ collection.collection }}</h2>
+    <div class="p-10">
+        <VCollectionHeader v-bind="collection" class="bg-white"/>
+     </div>
+    </div>
+</div>`,
+  components: { VCollectionHeader },
+  setup() {
+    return { args }
+  },
+})
+
 <Meta
   title="Components/VCollectionHeader"
   component={VCollectionHeader}
   argTypes={{
     collection: {
       options: ["tag", "source", "creator"],
-      mapping: {
-        tag: tagCollection,
-        source: sourceCollection,
-        creator: creatorCollection,
-      },
+      control: { type: "select" },
+    },
+    title: {
+      control: { type: "text" },
+    },
+    url: {
+      control: { type: "text" },
     },
     resultsLabel: {
       control: { type: "text" },
     },
   }}
+  args={{
+    collection: "source",
+    title: "Metropolitan Museum of Art",
+    url: "https://www.metmuseum.org/",
+    resultsLabel: "10000 images from the Metropolitan Museum of Art",
+  }}
 />
 
+export const collections = [
+  {
+    collection: "tag",
+    title: "cat",
+    resultsLabel: "10000 audio files with the selected tag",
+  },
+  {
+    collection: "source",
+    title: "Metropolitan Museum of Art",
+    url: "https://www.metmuseum.org/",
+    resultsLabel: "10000 images from the Metropolitan Museum of Art",
+  },
+  {
+    collection: "creator",
+    title: "iocyoungreporters",
+    url: "https://www.flickr.com/photos/126018610@N05",
+    resultsLabel: "10000 images from iocyoungreporters",
+  },
+]
+
+# VCollectionHeader
+
+<Description of={VCollectionHeader} />
+
+<ArgsTable of={VCollectionHeader} />
+
 <Canvas>
-  <Story
-    name="default"
-    args={{
-      collection: sourceCollection,
-      resultsLabel: "251 audio files with the selected tag",
-    }}
-  >
-    {Template.bind({})}
-  </Story>
+  <Story name="default">{Template.bind({})}</Story>
 </Canvas>
+
+## All collections
+
+<Story name="All collections" args={{ collections }}>
+  {AllCollectionsTemplate.bind({})}
+</Story>

frontend/src/types/analytics.ts

@@ -216,6 +216,18 @@ export type Events = {
     /** The permalink to the creator's profile */
     url: string
   }
+  /**
+   * Description: The user visits a source's link in the single result UI
+   * Questions:
+   *   - Are source links clicked much? Does Openverse increase visibility
+   *     of included sources?
+   */
+  VISIT_SOURCE_LINK: {
+    /** The unique ID of the media */
+    id: string
+    /** The permalink to the source's homepage */
+    url: string
+  }
   /**
    * Description: The user visits a CC license description page on CC.org
    * Questions:

frontend/src/types/search.ts

@@ -0,0 +1 @@
+export type Collection = "tag" | "creator" | "source"