Refactor SearchTypePopover desktop header (#1842)

* Refactor SearchTypePopover and filter button for desktop header

* Make VSearchTypes handle type selection

* Update src/components/VHeader/VHeaderFilter.vue

* Fix the logo size

* Revert changes to the VSearchTypeButton

src/components/VContentSwitcher/VSearchTypePopover.vue

@@ -10,35 +10,19 @@
       <VSearchTypeButton
         :a11y-props="a11yProps"
         aria-controls="content-switcher-popover"
-        :active-item="activeItem"
-        :class="{
-          '!border-tx': isInSearchBar,
-          '!bg-white group-hover:!border-dark-charcoal-20 group-hover:focus:!border-tx':
-            isInSearchBar && !a11yProps['aria-expanded'],
-        }"
-        :type="placement"
       />
     </template>
     <VSearchTypes
       id="content-switcher-popover"
       size="medium"
-      :active-item="activeItem"
-      :use-links="placement === 'header'"
-      @select="selectItem"
+      :use-links="true"
+      @select="closePopover"
     />
   </VPopover>
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  defineComponent,
-  PropType,
-  ref,
-} from '@nuxtjs/composition-api'
-
-import type { SearchType } from '~/constants/media'
-import { defineEvent } from '~/types/emits'
+import { defineComponent, ref } from '@nuxtjs/composition-api'
 
 import VPopover from '~/components/VPopover/VPopover.vue'
 import VSearchTypeButton from '~/components/VContentSwitcher/VSearchTypeButton.vue'
@@ -49,55 +33,21 @@ import checkIcon from '~/assets/icons/checkmark.svg'
 export default defineComponent({
   name: 'VSearchTypePopover',
   components: {
-    VSearchTypeButton,
     VPopover,
+    VSearchTypeButton,
     VSearchTypes,
   },
-  model: {
-    prop: 'activeItem',
-    event: 'select',
-  },
-  props: {
-    activeItem: {
-      type: String as PropType<SearchType>,
-      required: true,
-    },
-    placement: {
-      type: String as PropType<'header' | 'searchbar'>,
-      default: 'header',
-    },
-  },
-  emits: {
-    select: defineEvent<SearchType>(),
-  },
-  setup(props, { emit }) {
-    const contentMenuPopover = ref<HTMLElement | null>(null)
-
-    /**
-     * When in the searchbar, content switcher button has a border when the
-     * search bar group is hovered on.
-     */
-    const isInSearchBar = computed(() => props.placement === 'searchbar')
-
-    /**
-     * Only the contentMenuPopover needs to be closed programmatically
-     */
-    const closeMenu = () => {
-      if (contentMenuPopover.value) {
-        contentMenuPopover.value.close()
-      }
-    }
+  setup() {
+    const contentMenuPopover = ref<InstanceType<typeof VPopover> | null>(null)
 
-    const selectItem = (item: SearchType) => {
-      emit('select', item)
+    const closePopover = () => {
+      contentMenuPopover.value?.close()
     }
 
     return {
       checkIcon,
-      selectItem,
+      closePopover,
       contentMenuPopover,
-      isInSearchBar,
-      closeMenu,
     }
   },
 })

src/components/VContentSwitcher/VSearchTypes.vue

@@ -29,17 +29,21 @@
         :item-id="idx"
         :icon="content.icons[item]"
         :use-links="useLinks"
-        :selected="item === activeItem"
-        @click="handleClick(item)"
+        :selected="isActive(item)"
+        @click="selectItem(item)"
       />
     </div>
   </VItemGroup>
 </template>
 <script lang="ts">
-import { computed, defineComponent, PropType } from '@nuxtjs/composition-api'
+import {
+  computed,
+  defineComponent,
+  type PropType,
+} from '@nuxtjs/composition-api'
 
-import type { SearchType } from '~/constants/media'
 import useSearchType from '~/composables/use-search-type'
+import type { SearchType } from '~/constants/media'
 import { defineEvent } from '~/types/emits'
 
 import VItemGroup from '~/components/VItemGroup/VItemGroup.vue'
@@ -57,10 +61,9 @@ export default defineComponent({
       type: String as PropType<'small' | 'medium'>,
       default: 'small',
     },
-    activeItem: {
-      type: String as PropType<SearchType>,
-      required: true,
-    },
+    /**
+     * Whether to use buttons for search type selection, or links to the specific search type search for the items.
+     */
     useLinks: {
       type: Boolean,
       default: true,
@@ -71,6 +74,9 @@ export default defineComponent({
   },
   setup(props, { emit }) {
     const content = useSearchType()
+    const bordered = computed(() => props.size === 'small')
+
+    const isActive = (item: SearchType) => item === content.activeType.value
 
     const contentTypeGroups = computed(() => {
       const base = [
@@ -90,15 +96,17 @@ export default defineComponent({
       return base
     })
 
-    const bordered = computed(() => props.size === 'small')
-    const handleClick = (item) => {
+    const selectItem = (item: SearchType) => {
+      content.setActiveType(item)
       emit('select', item)
     }
+
     return {
       content,
       contentTypeGroups,
+      isActive,
       bordered,
-      handleClick,
+      selectItem,
     }
   },
 })