Update search types popover for the new homepage and header (#2071)

* Split homepage VR tests

* Fix e2e tests

* Update spacing in the internal header

* Update search types popover for the new homepage

* Revert changes to the VContentPage.vue

* Revert changes to home page

Author: obulat

src/assets/icons/item-indicator.svg

@@ -3,7 +3,8 @@
     :selected="selected"
     :is-first="isFirst"
     :as="component"
-    class="h-16 text-base lg:h-12"
+    class="label-regular"
+    :size="size"
     v-bind="{ href }"
     @click.native="$emit('click', item)"
   >

src/components/VContentSwitcher/VSearchTypeItem.vue

@@ -14,16 +14,16 @@
     </template>
     <VSearchTypes
       id="content-switcher-popover"
-      class="min-w-[262px] pt-2"
+      class="w-[260px] pt-2"
       size="small"
-      :use-links="true"
+      :use-links="placement === 'header'"
       @select="closePopover"
     />
   </VPopover>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from "@nuxtjs/composition-api"
+import { defineComponent, PropType, ref } from "@nuxtjs/composition-api"
 
 import VPopover from "~/components/VPopover/VPopover.vue"
 import VSearchTypeButton from "~/components/VContentSwitcher/VSearchTypeButton.vue"
@@ -38,6 +38,12 @@ export default defineComponent({
     VSearchTypeButton,
     VSearchTypes,
   },
+  props: {
+    placement: {
+      type: String as PropType<"header" | "searchbar">,
+      default: "header",
+    },
+  },
   setup() {
     const contentMenuPopover = ref<InstanceType<typeof VPopover> | null>(null)
 

src/components/VContentSwitcher/VSearchTypePopover.vue

@@ -4,22 +4,24 @@
     :size="size"
     :bordered="bordered"
     type="radiogroup"
-    class="z-10 min-w-[262px] max-w-full"
+    class="z-10"
+    :class="{ 'w-[260px]': size === 'small' }"
   >
     <div
       v-for="(category, index) in contentTypeGroups"
       :key="index"
-      class="flex flex-col lg:gap-y-1"
+      class="flex flex-col"
       :class="{
         'mt-2': index > 0,
         'border-t border-dark-charcoal-20 bg-dark-charcoal-06':
           index > 0 && !bordered,
+        'gap-1': size === 'small',
       }"
     >
       <h4
         v-if="index !== 0"
         :class="bordered ? 'ps-0' : 'ps-6'"
-        class="pt-6 pb-4 text-sr font-semibold uppercase pe-6"
+        class="category pt-6 pb-4 uppercase pe-6"
       >
         {{ $t(`search-type.${category.heading}`) }}
       </h4>
@@ -57,13 +59,18 @@ import { defineEvent } from "~/types/emits"
 import VItemGroup from "~/components/VItemGroup/VItemGroup.vue"
 import VSearchTypeItem from "~/components/VContentSwitcher/VSearchTypeItem.vue"
 
+type ContentTypeGroup = {
+  heading: string
+  items: SearchType[]
+}
+
 export default defineComponent({
   name: "VSearchTypes",
   components: { VItemGroup, VSearchTypeItem },
   props: {
     /**
-     * 'Small' size for mobile screens,
-     * 'medium' size for larger screens.
+     * 'Small' size is used in the popover,
+     * 'medium' size is used in the mobile modal.
      */
     size: {
       type: String as PropType<"small" | "medium">,
@@ -86,18 +93,18 @@ export default defineComponent({
 
     const isActive = (item: SearchType) => item === content.activeType.value
 
-    const contentTypeGroups = computed(() => {
-      const base = [
+    const contentTypeGroups = computed<ContentTypeGroup[]>(() => {
+      const base: ContentTypeGroup[] = [
         {
           heading: "heading",
           items: content.types,
         },
       ]
 
-      if (content.additionalTypes.value.length && props.useLinks) {
+      if (content.additionalTypes.value.length) {
         base.push({
           heading: "additional",
-          items: content.additionalTypes.value,
+          items: [...content.additionalTypes.value],
         })
       }
 

src/components/VContentSwitcher/VSearchTypes.vue

@@ -7,6 +7,7 @@ import {
 } from "@storybook/addon-docs"
 
 import VSearchTypePopover from "~/components/VContentSwitcher/VSearchTypePopover.vue"
+import { useFeatureFlagStore } from "~/stores/feature-flag"
 
 <Meta
   title="Components/VContentSwitcher/VSearchTypePopover"
@@ -15,13 +16,24 @@ import VSearchTypePopover from "~/components/VContentSwitcher/VSearchTypePopover
     select: {
       action: "select",
     },
+    additionalTypes: {
+      control: { type: "boolean" },
+    },
+  }}
+  args={{
+    additionalTypes: false,
   }}
 />
 
 export const Template = (args) => ({
   template: `<VSearchTypePopover active-item="image" v-bind="args" v-on="args"/>`,
   components: { VSearchTypePopover },
   setup() {
+    const featureFlagStore = useFeatureFlagStore()
+    featureFlagStore.toggleFeature(
+      "external_sources",
+      args.additionalTypes ? "on" : "off"
+    )
     return { args }
   },
 })

src/components/VContentSwitcher/meta/VSearchTypePopover.stories.mdx

@@ -7,32 +7,39 @@ import {
 } from "@storybook/addon-docs"
 
 import VSearchTypes from "~/components/VContentSwitcher/VSearchTypes.vue"
+import { useFeatureFlagStore } from "~/stores/feature-flag"
 
 <Meta
   title="Components/VContentSwitcher/VSearchTypes"
   components={VSearchTypes}
   argTypes={{
-    select: {
-      action: "select",
-    },
     size: {
-      control: {
-        type: "select",
-        options: ["small", "medium"],
-      },
+      options: ["small", "medium"],
+      control: { type: "select" },
     },
     useLinks: {
-      control: {
-        type: "boolean",
-      },
+      control: { type: "boolean" },
+    },
+    additionalTypes: {
+      control: { type: "boolean" },
     },
   }}
+  args={{
+    size: "medium",
+    useLinks: false,
+    additionalTypes: false,
+  }}
 />
 
 export const Template = (args) => ({
-  template: `<VSearchTypes active-item="image" v-bind="args" v-on="args"/>`,
+  template: `<VSearchTypes v-bind="args" v-on="args"/>`,
   components: { VSearchTypes },
   setup() {
+    const featureFlagStore = useFeatureFlagStore()
+    featureFlagStore.toggleFeature(
+      "external_sources",
+      args.additionalTypes ? "on" : "off"
+    )
     return { args }
   },
 })

src/components/VContentSwitcher/meta/VSearchTypes.stories.mdx

@@ -18,7 +18,7 @@
     <VButton
       data-item-group-item
       :as="as"
-      class="group relative flex min-w-full justify-between py-2 px-6 hover:bg-dark-charcoal-10 focus:z-10 lg:px-2"
+      class="group relative flex min-w-full justify-between py-2 hover:bg-dark-charcoal-10 focus:z-10"
       :class="[
         $style[`${contextProps.direction}-button`],
         $style[`${contextProps.size}-button`],
@@ -54,8 +54,9 @@
           contextProps.direction === 'vertical' &&
           contextProps.showCheck
         "
-        class="absolute end-2 lg:end-5"
-        :icon-path="checkmark"
+        class="absolute end-2"
+        :class="contextProps.size === 'small' ? 'end-3' : 'end-6'"
+        :icon-path="itemIndicator"
       />
     </VButton>
   </div>
@@ -82,7 +83,7 @@ import VButton from "~/components/VButton.vue"
 import VIcon from "~/components/VIcon/VIcon.vue"
 import { VPopoverContentContextKey } from "~/components/VPopover/VPopoverContent.vue"
 
-import checkmark from "~/assets/icons/checkmark.svg"
+import itemIndicator from "~/assets/icons/item-indicator.svg"
 
 export default defineComponent({
   name: "VItem",
@@ -165,7 +166,7 @@ export default defineComponent({
     })
 
     return {
-      checkmark,
+      itemIndicator,
       contextProps,
       isInPopover,
       isFocused,
@@ -205,7 +206,7 @@ export default defineComponent({
 }
 
 .has-check .vertical-content {
-  @apply pe-8 lg:pe-8;
+  @apply pe-8;
 }
 
 .vertical-popover-item {
@@ -243,4 +244,10 @@ export default defineComponent({
 .horizontal-popover-item:last-of-type {
   @apply pe-2;
 }
+.small-button {
+  @apply p-3;
+}
+.medium-button {
+  @apply px-6 py-5;
+}
 </style>

src/components/VItemGroup/VItem.vue

@@ -14,6 +14,8 @@ import {
 import { useSearchStore } from "~/stores/search"
 import { useFeatureFlagStore } from "~/stores/feature-flag"
 
+import { useI18n } from "~/composables/use-i18n"
+
 import allIcon from "~/assets/icons/all-content.svg"
 import audioIcon from "~/assets/icons/audio-content.svg"
 import imageIcon from "~/assets/icons/image-content.svg"
@@ -28,7 +30,16 @@ const icons = {
   [MODEL_3D]: model3dIcon,
 } as const
 
+const labels = {
+  [ALL_MEDIA]: "search-type.all",
+  [IMAGE]: "search-type.image",
+  [AUDIO]: "search-type.audio",
+  [VIDEO]: "search-type.video",
+  [MODEL_3D]: "search-type.model-3d",
+} as const
+
 export default function useSearchType() {
+  const i18n = useI18n()
   const activeType = computed(() => useSearchStore().searchType)
 
   const previousSearchType = ref(activeType.value)
@@ -46,13 +57,22 @@ export default function useSearchType() {
     previousSearchType.value = searchType
   }
 
+  const getSearchTypeProps = (searchType?: SearchType) => {
+    const type = searchType ?? activeType.value
+    return {
+      label: i18n.t(labels[type]).toString(),
+      icon: icons[type],
+      searchType: type,
+    }
+  }
+
   return {
     setActiveType,
     activeType,
+    getSearchTypeProps,
     types: searchTypes,
     icons,
+    labels,
     additionalTypes,
   }
 }
-
-export type UseSearchTypeReturn = ReturnType<typeof useSearchType>