Add tags in image single result page (#865)

Co-authored-by: Zack Krida <zackkrida@pm.me>

src/components/AudioDetails/VAudioDetails.vue

@@ -10,13 +10,13 @@
       <div class="flex flex-col gap-4 lg:gap-6 flex-grow">
         <p v-if="audio.description" class="mb-6">{{ audio.description }}</p>
         <ul class="flex flex-wrap gap-2">
-          <MediaTag
+          <VMediaTag
             v-for="(tag, index) in audio.tags.filter((i) => !!i)"
             :key="index"
             tag="li"
           >
             {{ tag.name }}
-          </MediaTag>
+          </VMediaTag>
         </ul>
         <dl v-if="audio">
           <div v-if="audio.audio_set">
@@ -88,8 +88,12 @@ import getProviderName from '~/utils/get-provider-name'
 import { PROVIDER } from '~/constants/store-modules'
 import { mapState } from 'vuex'
 
+import VAudioThumbnail from '~/components/VAudioThumbnail/VAudioThumbnail.vue'
+import VMediaTag from '~/components/VMediaTag/VMediaTag.vue'
+
 export default {
   name: 'VAudioDetails',
+  components: { VAudioThumbnail, VMediaTag },
   props: ['audio'],
   computed: {
     ...mapState(PROVIDER, ['audioProviders']),

src/components/VImageDetails/VImageDetails.vue

@@ -6,6 +6,14 @@
       </h3>
       <VContentReportPopover :media="image" />
     </div>
+    <ul v-if="image && image.tags" class="flex flex-wrap gap-2 mb-6">
+      <VMediaTag
+        v-for="(tag, index) in image.tags.filter((i) => !!i)"
+        :key="index"
+        tag="li"
+        >{{ tag.name }}</VMediaTag
+      >
+    </ul>
     <dl>
       <div>
         <dt>{{ $t('image-details.information.type') }}</dt>
@@ -42,8 +50,12 @@
 <script>
 import { computed, defineComponent, useContext } from '@nuxtjs/composition-api'
 
+import VContentReportPopover from '~/components/VContentReport/VContentReportPopover.vue'
+import VMediaTag from '~/components/VMediaTag/VMediaTag.vue'
+
 const VImageDetails = defineComponent({
   name: 'VImageDetails',
+  components: { VContentReportPopover, VMediaTag },
   props: {
     image: {
       type: Object,

src/components/MediaTag/MediaTag.vue → src/components/VMediaTag/VMediaTag.vue

@@ -2,7 +2,7 @@
   <Component
     :is="tag"
     v-bind="$attrs"
-    class="text-dark-blue text-sr md:text-sm font-semibold px-2 md:px-3 py-1 md:py-2 bg-dark-charcoal-10 rounded-full leading-none inline-flex"
+    class="text-dark-blue text-sr md:text-base font-semibold px-3 md:px-4 py-1 md:py-2 bg-dark-charcoal-10 rounded-full leading-[130%] md:leading-[130%] inline-flex"
   >
     <!-- @slot Content goes here -->
     <slot />
@@ -23,7 +23,7 @@ export default {
      */
     tag: {
       type: String,
-      default: 'div',
+      default: 'span',
     },
   },
 }

src/components/MediaTag/meta/MediaTag.stories.mdx → src/components/VMediaTag/meta/VMediaTag.stories.mdx

@@ -6,21 +6,21 @@ import {
   Story,
 } from '@storybook/addon-docs'
 
-import MediaTag from '~/components/MediaTag/MediaTag'
+import VMediaTag from '~/components/VMediaTag/VMediaTag'
 
-<Meta title="Components/Media tag" component={MediaTag} />
+<Meta title="Components/VMediaTag" component={VMediaTag} />
 
 export const Template = (args, { argTypes }) => ({
-  template: `<MediaTag v-bind="$props" v-on="$props">Hello</MediaTag>`,
-  components: { MediaTag },
+  template: `<VMediaTag v-bind="$props">Hello</VMediaTag>`,
+  components: { VMediaTag },
   props: Object.keys(argTypes),
 })
 
 # Media tag
 
-<Description of={MediaTag} />
+<Description of={VMediaTag} />
 
-<ArgsTable of={MediaTag} />
+<ArgsTable of={VMediaTag} />
 
 By default, the component is a transparent wrapper over `<span>`.
 
@@ -38,7 +38,6 @@ focus states on interactive elements, can be applied to add to the base styles.
     args={{
       tag: 'a',
       href: 'https://wordpress.org/',
-      class: 'hover:bg-dark-charcoal-60 hover:text-white hover:no-underline',
     }}
   >
     {Template.bind({})}

test/unit/specs/components/MediaTag/media-tag.spec.js → test/unit/specs/components/VMediaTag/v-media-tag.spec.js

@@ -1,8 +1,8 @@
 import { RouterLinkStub } from '@vue/test-utils'
-import MediaTag from '~/components/MediaTag/MediaTag'
+import VMediaTag from '~/components/VMediaTag/VMediaTag'
 import render from '~/../test/unit/test-utils/render'
 
-describe('MediaTag', () => {
+describe('VMediaTag', () => {
   let props = null
   let options = null
 
@@ -11,10 +11,10 @@ describe('MediaTag', () => {
     options = { propsData: props }
   })
 
-  it('should render an div tag by default', () => {
-    const wrapper = render(MediaTag, options)
-    expect(wrapper.vm.$props.tag).toEqual('div')
-    expect(wrapper.vm.$el).toBeInstanceOf(HTMLDivElement)
+  it('should render an span tag by default', () => {
+    const wrapper = render(VMediaTag, options)
+    expect(wrapper.vm.$props.tag).toEqual('span')
+    expect(wrapper.vm.$el).toBeInstanceOf(HTMLSpanElement)
   })
 
   it('should render the supplied tag', () => {
@@ -24,7 +24,7 @@ describe('MediaTag', () => {
       href: 'https://example.com/',
     }
 
-    const wrapper = render(MediaTag, options)
+    const wrapper = render(VMediaTag, options)
     expect(wrapper.vm.$props.tag).toEqual('a')
     expect(wrapper.vm.$el).toBeInstanceOf(HTMLAnchorElement)
     expect(wrapper.vm.$el.href).toEqual('https://example.com/')
@@ -40,7 +40,7 @@ describe('MediaTag', () => {
       RouterLink: RouterLinkStub,
     }
 
-    const wrapper = render(MediaTag, options)
+    const wrapper = render(VMediaTag, options)
     expect(wrapper.vm.$props.tag).toEqual('RouterLink')
     expect(wrapper.vm.$el).toBeInstanceOf(HTMLAnchorElement)
   })
@@ -50,7 +50,7 @@ describe('MediaTag', () => {
       default: '<div id="slot-content">Hello</div>',
     }
 
-    const wrapper = render(MediaTag, options)
+    const wrapper = render(VMediaTag, options)
     const element = wrapper.find('#slot-content').element
     expect(element).toBeInstanceOf(HTMLDivElement)
     expect(element.textContent).toEqual('Hello')