Fix design mismatch in VMediaLicense

src/components/VLicense/VLicenseElements.vue

@@ -3,17 +3,17 @@
     <li
       v-for="element in elementNames"
       :key="element"
-      class="mb-2 flex items-center gap-3 text-sm md:text-base"
+      class="mb-2 flex items-center gap-3 text-sm md:mb-4 md:text-base"
     >
       <VIcon
         view-box="0 0 30 30"
-        :size="isSmall ? 5 : 6"
+        :size="isSmall || isMobile ? 5 : 6"
         :icon-path="icons[element]"
       />
       <span v-if="elementNames.length > 1" class="sr-only">{{
         element.toUpperCase()
       }}</span>
-      <p :class="{ 'text-sm': isSmall }">
+      <p class="label-regular" :class="{ 'md:description-regular': !isSmall }">
         {{ $t(`browse-page.license-description.${element}`) }}
       </p>
     </li>
@@ -25,7 +25,7 @@ import { computed, defineComponent, PropType } from '@nuxtjs/composition-api'
 
 import type { License } from '~/constants/license'
 import { LICENSE_ICONS } from '~/constants/license'
-
+import { isMinScreen } from '~/composables/use-media-query'
 import { getElements } from '~/utils/license'
 
 import VIcon from '~/components/VIcon/VIcon.vue'
@@ -56,11 +56,13 @@ export default defineComponent({
     )
 
     const isSmall = computed(() => props.size === 'small')
+    const isMobile = computed(() => !isMinScreen('md').value)
 
     return {
       icons: LICENSE_ICONS,
       elementNames,
       isSmall,
+      isMobile,
     }
   },
 })

src/components/VMediaInfo/VMediaLicense.vue

@@ -8,10 +8,10 @@
       <i18n
         path="media-details.reuse.attribution"
         tag="span"
-        class="mb-2 block text-sm md:text-base"
+        class="mb-2 block text-sm md:mb-4 md:text-base"
       >
         <template #link>
-          <VLink class="uppercase" :href="licenseUrl">
+          <VLink :href="licenseUrl">
             {{ fullLicenseName }}
           </VLink>
         </template>
@@ -41,10 +41,10 @@
 <script lang="ts">
 import { computed, defineComponent, PropType } from '@nuxtjs/composition-api'
 
-import { isLicense as isLicenseFn } from '~/utils/license'
+import { getFullLicenseName, isLicense as isLicenseFn } from '~/utils/license'
 import { useI18n } from '~/composables/use-i18n'
 
-import type { License } from '~/constants/license'
+import type { License, LicenseVersion } from '~/constants/license'
 
 import VLicenseElements from '~/components/VLicense/VLicenseElements.vue'
 import VLink from '~/components/VLink.vue'
@@ -53,14 +53,14 @@ export default defineComponent({
   name: 'VMediaLicense',
   components: { VLicenseElements, VLink },
   props: {
-    fullLicenseName: {
-      type: String,
-      required: true,
-    },
     license: {
       type: String as PropType<License>,
       required: true,
     },
+    licenseVersion: {
+      type: String as PropType<LicenseVersion>,
+      required: true,
+    },
     licenseUrl: {
       type: String,
       required: true,
@@ -73,9 +73,13 @@ export default defineComponent({
       const licenseOrTool = isLicense.value ? 'license' : 'tool'
       return i18n.t(`media-details.reuse.${licenseOrTool}-header`)
     })
+    const fullLicenseName = computed(() =>
+      getFullLicenseName(props.license, props.licenseVersion, i18n)
+    )
     return {
       isLicense,
       headerText,
+      fullLicenseName,
     }
   },
 })

src/components/VMediaInfo/VMediaReuse.vue

@@ -17,22 +17,18 @@
       <VMediaLicense
         :license="media.license"
         :license-url="media.license_url"
-        :full-license-name="fullLicenseName"
+        :license-version="media.license_version"
       />
       <VCopyLicense :media="media" />
     </div>
   </section>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from '@nuxtjs/composition-api'
-
-import { getFullLicenseName } from '~/utils/license'
+import { defineComponent, PropType } from '@nuxtjs/composition-api'
 
 import type { Media } from '~/models/media'
 
-import { useI18n } from '~/composables/use-i18n'
-
 import VCopyLicense from '~/components/VMediaInfo/VCopyLicense.vue'
 import VMediaLicense from '~/components/VMediaInfo/VMediaLicense.vue'
 
@@ -45,14 +41,5 @@ export default defineComponent({
       required: true,
     },
   },
-  setup(props) {
-    const i18n = useI18n()
-
-    const fullLicenseName = computed(() =>
-      getFullLicenseName(props.media.license, props.media.license_version, i18n)
-    )
-
-    return { fullLicenseName }
-  },
 })
 </script>

src/components/VMediaInfo/meta/VMediaLicense.stories.mdx

@@ -0,0 +1,179 @@
+import {
+  Canvas,
+  Story,
+  Description,
+  Meta,
+  ArgsTable,
+} from '@storybook/addon-docs'
+
+import VMediaLicense from '~/components/VMediaInfo/VMediaLicense.vue'
+
+import { ALL_LICENSES, LICENSE_VERSIONS } from '~/constants/license'
+import { getLicenseUrl } from '~/utils/license'
+
+export const Template = (args) => ({
+  template: `<VMediaLicense v-bind="args"/>`,
+  components: { VMediaLicense },
+  setup() {
+    return { args }
+  },
+})
+
+<Meta
+  title="Components/VMediaLicense"
+  component={VMediaLicense}
+  argTypes={{
+    license: {
+      defaultValue: ALL_LICENSES[0],
+      options: ALL_LICENSES,
+      control: 'select',
+    },
+    licenseVersion: {
+      defaultValue: LICENSE_VERSIONS[0],
+      options: LICENSE_VERSIONS,
+      control: 'select',
+    },
+  }}
+/>
+
+# VMediaLicense
+
+<Description of={VMediaLicense} />
+
+<ArgsTable of={VMediaLicense} />
+
+<!-- A large portion of this file is copied from the story for `VLicense`. -->
+
+It can display CC licenses.
+
+| License name                            | Abbreviation | Slug       |
+| --------------------------------------- | ------------ | ---------- |
+| Attribution                             | CC BY        | `by`       |
+| Attribution-ShareAlike                  | CC BY-SA     | `by-sa`    |
+| Attribution-NoDerivatives               | CC BY-ND     | `by-nd`    |
+| Attribution-NonCommercial               | CC BY-NC     | `by-nc`    |
+| Attribution-NonCommercial-ShareAlike    | CC BY-NC-SA  | `by-nc-sa` |
+| Attribution-NonCommercial-NoDerivatives | CC BY-NC-ND  | `by-nc-nd` |
+
+<Canvas>
+  <Story
+    name="CC BY"
+    args={{
+      license: 'by',
+      licenseVersion: '4.0',
+      licenseUrl: getLicenseUrl('by', '4.0'),
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="CC BY-SA"
+    args={{
+      license: 'by-sa',
+      licenseVersion: '4.0',
+      licenseUrl: getLicenseUrl('by-sa', '4.0'),
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="CC BY-ND"
+    args={{
+      license: 'by-nd',
+      licenseVersion: '4.0',
+      licenseUrl: getLicenseUrl('by-nd', '4.0'),
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="CC BY-NC"
+    args={{
+      license: 'by-nc',
+      licenseVersion: '4.0',
+      licenseUrl: getLicenseUrl('by-nc', '4.0'),
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="CC BY-NC-SA"
+    args={{
+      license: 'by-nc-sa',
+      licenseVersion: '4.0',
+      licenseUrl: getLicenseUrl('by-nc-sa', '4.0'),
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="CC BY-NC-ND"
+    args={{
+      license: 'by-nc-nd',
+      licenseVersion: '4.0',
+      licenseUrl: getLicenseUrl('by-nc-nd', '4.0'),
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+It can also display some public domain licenses.
+
+| License name       | Abbreviation | Slug  |
+| ------------------ | ------------ | ----- |
+| CC Zero            | CC0          | `cc0` |
+| Public Domain Mark | -            | `pdm` |
+
+<Canvas>
+  <Story
+    name="CC0"
+    args={{
+      license: 'cc0',
+      licenseVersion: '1.0',
+      licenseUrl: getLicenseUrl('cc0', '1.0'),
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="PDM"
+    args={{
+      license: 'pdm',
+      licenseVersion: '1.0',
+      licenseUrl: getLicenseUrl('pdm', '4.0'),
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+It can also display some deprecated CC licenses.
+
+| License name                | Abbreviation    | Slug           |
+| --------------------------- | --------------- | -------------- |
+| Sampling Plus               | CC Sampling+    | `sampling+`    |
+| NonCommercial Sampling Plus | CC NC-Sampling+ | `nc-sampling+` |
+
+<Canvas>
+  <Story
+    name="CC Sampling+"
+    args={{
+      license: 'sampling+',
+      licenseVersion: '',
+      licenseUrl: getLicenseUrl('sampling+', ''),
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="CC NC-Sampling+"
+    args={{
+      license: 'nc-sampling+',
+      licenseVersion: '',
+      licenseUrl: getLicenseUrl('nc-sampling+', ''),
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

test/storybook/visual-regression/v-media-license.spec.ts

@@ -0,0 +1,39 @@
+import { test, Page } from '@playwright/test'
+
+import breakpoints from '~~/test/playwright/utils/breakpoints'
+
+const goTo = async (page: Page, slug: string) => {
+  await page.goto(`/iframe.html?id=components-vmedialicense--${slug}`)
+}
+
+/**
+ * parts of Storybook's story IDs for VMediaLicense stories; Note that these are
+ * distinct from license slugs such as 'cc0' (changed to 'cc-0' here) and
+ * 'sampling+' (changed to 'cc-sampling' here).
+ */
+const allSlugs = [
+  'cc-by',
+  'cc-by-sa',
+  'cc-by-nd',
+  'cc-by-nc',
+  'cc-by-nc-sa',
+  'cc-by-nc-nd',
+  'cc-0',
+  'pdm',
+  'cc-sampling',
+  'cc-nc-sampling',
+]
+
+test.describe.configure({ mode: 'parallel' })
+
+test.describe('VMediaLicense', () => {
+  for (const slug of allSlugs) {
+    const name = `v-media-license-${slug}`
+    breakpoints.describeMobileAndDesktop(({ expectSnapshot }) => {
+      test(name, async ({ page }) => {
+        await goTo(page, slug)
+        await expectSnapshot(name, page.locator('.media-attribution'))
+      })
+    })
+  }
+})