From 2e4cc830b787c89383d15c78f11317f44ae4a288 Mon Sep 17 00:00:00 2001
From: ngken0995 <59739226+ngken0995@users.noreply.github.com>
Date: Fri, 13 Oct 2023 00:24:33 -0400
Subject: [PATCH] Create VTag component (#3137)

* create VTag component

* revise VTag and VMediaTags

* revise test and update VMediaTags

* run just lint

* revise VTag storybook

* revise VTag storybook

* Update frontend/src/components/VTag/meta/VTag.stories.mdx

---------

Co-authored-by: Panisa Busayanont <Panisa@ecipanisamac.lan>
Co-authored-by: Olga Bulat <obulat@gmail.com>
---
 .../src/components/VMediaInfo/VMediaTags.vue  | 26 ++++++++--
 frontend/src/components/VTag/VTag.vue         | 31 ++++++++++++
 .../src/components/VTag/meta/VTag.stories.mdx | 48 +++++++++++++++++++
 3 files changed, 102 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/VTag/VTag.vue
 create mode 100644 frontend/src/components/VTag/meta/VTag.stories.mdx

diff --git a/frontend/src/components/VMediaInfo/VMediaTags.vue b/frontend/src/components/VMediaInfo/VMediaTags.vue
index 3d4bc4c5b9a..bbe43f39dea 100644
--- a/frontend/src/components/VMediaInfo/VMediaTags.vue
+++ b/frontend/src/components/VMediaInfo/VMediaTags.vue
@@ -1,25 +1,45 @@
 <template>
-  <ul v-if="tags.length" class="flex flex-wrap gap-2">
+  <ul v-if="tags.length && additionalSearchViews" class="flex flex-wrap gap-2">
+    <VTag
+      v-for="(tag, index) in tags"
+      :key="index"
+      href="/"
+      :title="tag.name"
+    />
+  </ul>
+  <ul v-else>
     <VMediaTag v-for="(tag, index) in tags" :key="index" tag="li">{{
       tag.name
     }}</VMediaTag>
   </ul>
 </template>
 <script lang="ts">
-import { defineComponent, PropType } from "vue"
+import { computed, defineComponent, PropType } from "vue"
 
 import type { Tag } from "~/types/media"
+import { useFeatureFlagStore } from "~/stores/feature-flag"
 
 import VMediaTag from "~/components/VMediaTag/VMediaTag.vue"
 
+import VTag from "~/components/VTag/VTag.vue"
+
 export default defineComponent({
   name: "VMediaTags",
-  components: { VMediaTag },
+  components: { VMediaTag, VTag },
   props: {
     tags: {
       type: Array as PropType<Tag[]>,
       required: true,
     },
   },
+  setup() {
+    const featureFlagStore = useFeatureFlagStore()
+
+    const additionalSearchViews = computed(() =>
+      featureFlagStore.isOn("additional_search_views")
+    )
+
+    return { additionalSearchViews }
+  },
 })
 </script>
diff --git a/frontend/src/components/VTag/VTag.vue b/frontend/src/components/VTag/VTag.vue
new file mode 100644
index 00000000000..d676f6e4bc8
--- /dev/null
+++ b/frontend/src/components/VTag/VTag.vue
@@ -0,0 +1,31 @@
+<template>
+  <VButton
+    as="VLink"
+    size="small"
+    variant="filled-gray"
+    class="label-bold"
+    :href="href"
+    >{{ title }}</VButton
+  >
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue"
+
+import VButton from "~/components/VButton.vue"
+
+export default defineComponent({
+  name: "VTag",
+  components: { VButton },
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    href: {
+      type: String,
+      required: true,
+    },
+  },
+})
+</script>
diff --git a/frontend/src/components/VTag/meta/VTag.stories.mdx b/frontend/src/components/VTag/meta/VTag.stories.mdx
new file mode 100644
index 00000000000..ba4fc6b9070
--- /dev/null
+++ b/frontend/src/components/VTag/meta/VTag.stories.mdx
@@ -0,0 +1,48 @@
+import {
+  ArgsTable,
+  Canvas,
+  Description,
+  Meta,
+  Story,
+} from "@storybook/addon-docs"
+
+import VTag from "~/components/VTag/VTag.vue"
+
+<Meta
+  title="Components/VTag"
+  component={VTag}
+  argTypes={{
+    title: {
+      type: "text",
+    },
+    href: {
+      type: "text",
+    },
+  }}
+/>
+
+export const Template = (args) => ({
+  template: `<VTag v-bind="args"/>`,
+  components: { VTag },
+  setup() {
+    return { args }
+  },
+})
+
+# VTag
+
+<Description of={VTag} />
+
+<ArgsTable of={VTag} />
+
+<Canvas>
+  <Story
+    name="default"
+    args={{
+      title: "cat",
+      href: "#",
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>