Update license explanation tooltip (#850)

Co-authored-by: Zack Krida <zackkrida@pm.me>
Co-authored-by: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>

src/components/VFilters/VFilterChecklist.vue

@@ -1,5 +1,5 @@
 <template>
-  <fieldset class="mb-8" @click.stop="hideLicenseExplanationVisibility">
+  <fieldset class="mb-8">
     <legend v-if="title" class="text-sm font-semibold">
       {{ title }}
     </legend>
@@ -20,40 +20,56 @@
         <VLicense v-if="filterType === 'licenses'" :license="item.code" />
         <template v-else>{{ itemLabel(item) }}</template>
       </VCheckbox>
-      <button
-        v-if="filterType === 'licenses'"
-        :ref="`${item.code}licenseIcon`"
-        :aria-label="$t('browse-page.aria.license-explanation')"
-        class="text-dark-charcoal-70 appearance-none"
-        type="button"
-        @click.stop="toggleLicenseExplanationVisibility(item.code)"
-      >
-        <VIcon :icon-path="helpIcon" />
-      </button>
+
+      <!-- License explanation -->
+      <VPopover v-if="filterType === 'licenses'">
+        <template #trigger="{ a11yProps }">
+          <VButton
+            v-bind="a11yProps"
+            variant="plain"
+            size="disabled"
+            :aria-label="$t('browse-page.aria.license-explanation')"
+            class="text-dark-charcoal-70"
+            type="button"
+          >
+            <VIcon :icon-path="icons.help" />
+          </VButton>
+        </template>
+        <template #default="{ close }">
+          <div class="relative">
+            <VIconButton
+              :aria-label="$t('modal.close')"
+              class="absolute top-2 end-2 border-none"
+              size="small"
+              :icon-props="{ iconPath: icons.closeSmall }"
+              @click="close"
+            />
+            <VLicenseExplanation :license="item.code" />
+          </div>
+        </template>
+      </VPopover>
     </div>
-    <VLicenseExplanationTooltip
-      v-if="licenseExplanationVisible"
-      :license="licenseExplanationCode"
-      :icon-dom-node="$refs[`${licenseExplanationCode}licenseIcon`][0]"
-    />
   </fieldset>
 </template>
 
 <script>
-import helpIcon from '~/assets/icons/help.svg'
-
-import VLicenseExplanationTooltip from '~/components/VFilters/VLicenseExplanationTooltip.vue'
+import VLicenseExplanation from '~/components/VFilters/VLicenseExplanation.vue'
 import VCheckbox from '~/components/VCheckbox/VCheckbox.vue'
 import VLicense from '~/components/License/VLicense.vue'
 import VIcon from '~/components/VIcon/VIcon.vue'
+import VPopover from '~/components/VPopover/VPopover.vue'
+
+import helpIcon from '~/assets/icons/help.svg'
+import closeSmallIcon from '~/assets/icons/close-small.svg'
 
 export default {
   name: 'FilterCheckList',
   components: {
     VCheckbox,
     VIcon,
     VLicense,
-    VLicenseExplanationTooltip,
+    VLicenseExplanation,
+    VPopover,
   },
   props: {
     options: { type: Array, required: false },
@@ -63,9 +79,7 @@ export default {
   },
   data() {
     return {
-      licenseExplanationVisible: false,
-      licenseExplanationCode: null,
-      helpIcon,
+      icons: { help: helpIcon, closeSmall: closeSmallIcon },
     }
   },
   computed: {
@@ -87,13 +101,6 @@ export default {
         filterType: this.filterType,
       })
     },
-    toggleLicenseExplanationVisibility(licenseCode) {
-      this.licenseExplanationVisible = !this.licenseExplanationVisible
-      this.licenseExplanationCode = licenseCode
-    },
-    hideLicenseExplanationVisibility() {
-      this.licenseExplanationVisible = false
-    },
     getFilterTypeValue(filterKey, val) {
       return this.$store.state.search.filters[filterKey].filter((item) =>
         item.code.includes(val)
@@ -120,13 +127,6 @@ export default {
       }
       return this.disabled
     },
-    shouldRenderLicenseExplanationTooltip(licenseCode) {
-      return (
-        !this.isDisabled({ code: licenseCode }) &&
-        this.licenseExplanationVisible &&
-        this.licenseExplanationCode === licenseCode
-      )
-    },
   },
 }
 </script>

src/components/VFilters/VLicenseExplanation.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="license-explanation w-full max-w-xs p-6">
+    <h5 class="text-base font-semibold">
+      <template v-if="isTechnicallyLicense">{{
+        $t('filters.license-explanation.license-definition')
+      }}</template>
+      <template v-else>{{
+        $t('filters.license-explanation.mark-definition', {
+          mark: license.toUpperCase(),
+        })
+      }}</template>
+    </h5>
+
+    <VLicenseElements
+      v-if="license"
+      size="small"
+      class="my-4"
+      :license="license"
+    />
+
+    <i18n
+      :path="`filters.license-explanation.more.${
+        isTechnicallyLicense ? 'license' : 'mark'
+      }`"
+      tag="p"
+      class="text-sm"
+    >
+      <template #read-more>
+        <VLink :href="`${getLicenseDeedLink(license)}`">{{
+          $t('filters.license-explanation.more.read-more')
+        }}</VLink>
+      </template>
+      <template #mark>{{ license.toUpperCase() }}</template>
+    </i18n>
+  </div>
+</template>
+
+<script>
+import { isLicense } from '~/utils/license'
+
+import VLicenseElements from '~/components/VLicenseElements.vue'
+
+import { DEPRECATED_LICENSES } from '~/constants/license'
+
+/**
+ * Renders the explanation of the license passed to it by breaking it down to
+ * its constituent clauses.
+ */
+export default {
+  name: 'VLicenseExplanation',
+  components: {
+    VLicenseElements,
+  },
+  props: {
+    /**
+     * the code of the license whose elements need to be explained
+     */
+    license: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    /**
+     * Public domain marks such as CC0 and PDM are not technically licenses.
+     * @return {boolean} true if the license is not CC0 or PDM, false otherwise
+     */
+    isTechnicallyLicense() {
+      return isLicense(this.license)
+    },
+  },
+  methods: {
+    getLicenseDeedLink(licenseTerm) {
+      let fragment
+      if (licenseTerm === 'cc0') {
+        fragment = 'publicdomain/zero/1.0'
+      } else if (licenseTerm === 'pdm') {
+        fragment = 'publicdomain/mark/1.0'
+      } else if (DEPRECATED_LICENSES.includes(licenseTerm)) {
+        fragment = `licenses/${licenseTerm}/1.0`
+      } else {
+        fragment = `licenses/${licenseTerm}/4.0`
+      }
+      return `https://creativecommons.org/${fragment}/?ref=openverse`
+    },
+  },
+}
+</script>