Add the desktop header

src/components/VButton.vue

@@ -323,25 +323,43 @@ a.button {
 .action-menu {
   @apply border border-tx bg-tx text-dark-charcoal hover:border-dark-charcoal-20;
 }
-
-.action-menu-secondary {
-  @apply border border-tx bg-white text-dark-charcoal hover:border-dark-charcoal-20;
+.action-menu-pressed {
+  @apply border-tx bg-dark-charcoal text-white hover:border-tx hover:bg-dark-charcoal-90;
 }
 
-.action-menu-secondary-pressed {
-  @apply border-tx bg-dark-charcoal text-white;
+/**
+Similar to `action-menu`, but always has a border, not only on hover.
+https://www.figma.com/file/GIIQ4sDbaToCfFQyKMvzr8/Openverse-Design-Library?node-id=1684%3A3678
+ */
+.action-menu-bordered {
+  @apply border border-dark-charcoal-20 bg-white text-dark-charcoal focus-visible:border-tx;
 }
-
-.action-menu-pressed {
-  @apply border-tx bg-dark-charcoal text-white hover:border-tx;
+.action-menu-bordered-pressed {
+  @apply border-dark-charcoal bg-dark-charcoal text-white hover:bg-dark-charcoal-80;
 }
 
 .action-menu-muted {
   @apply border border-tx bg-dark-charcoal-10 text-dark-charcoal hover:border-dark-charcoal-20;
 }
-
 .action-menu-muted-pressed {
-  @apply border border-tx bg-dark-charcoal text-white;
+  @apply border border-tx bg-dark-charcoal text-white hover:border-tx hover:bg-dark-charcoal-90;
+}
+
+.action-menu[disabled='disabled'],
+.action-menu[aria-disabled='true'],
+.action-menu-muted[disabled='disabled'],
+.action-menu-muted[aria-disabled='true'],
+.action-menu-bordered[disabled='disabled'],
+.action-menu-bordered[aria-disabled='true'] {
+  @apply border-dark-charcoal-10 bg-dark-charcoal-10 text-dark-charcoal-40;
+}
+
+.action-menu-secondary {
+  @apply border border-tx bg-white text-dark-charcoal hover:border-dark-charcoal-20;
+}
+
+.action-menu-secondary-pressed {
+  @apply border-tx bg-dark-charcoal text-white;
 }
 
 .full {

src/components/VContentSwitcher/VSearchTypeButton.vue

@@ -1,108 +1,69 @@
 <template>
   <VButton
-    class="flex flex-row py-2 text-sr font-semibold md:text-base"
-    :class="[
-      sizeClasses,
-      isHeaderScrolled ? 'max-w-[10rem] sm:max-w-[20rem] md:max-w-[16rem]' : '',
-    ]"
-    :variant="buttonVariant"
+    class="flex h-12 w-12 flex-row xl:w-auto xl:px-2 xl:ps-3"
+    variant="action-menu"
     size="disabled"
     :aria-label="buttonLabel"
     v-bind="a11yProps"
     @click="$emit('click')"
   >
     <VIcon :icon-path="icon" />
     <span
-      class="md:block md:truncate md:ms-2 md:text-start"
-      :class="isHeaderScrolled ? 'hidden' : 'block truncate ms-2 text-start'"
+      class="label-regular hidden truncate xl:block xl:ms-2 xl:text-start"
       >{{ buttonLabel }}</span
     >
-    <VIcon
-      class="hidden text-dark-charcoal-40 md:block md:ms-2"
-      :icon-path="caretDownIcon"
-    />
+    <VIcon class="hidden xl:block xl:ms-2" :icon-path="caretDownIcon" />
   </VButton>
 </template>
 <script lang="ts">
-import {
-  computed,
-  defineComponent,
-  inject,
-  PropType,
-  ref,
-} from '@nuxtjs/composition-api'
+import { computed, defineComponent } from '@nuxtjs/composition-api'
 
-import { ALL_MEDIA, SearchType } from '~/constants/media'
+import { ALL_MEDIA, AUDIO, IMAGE, MODEL_3D, VIDEO } from '~/constants/media'
 import useSearchType from '~/composables/use-search-type'
 import { useI18n } from '~/composables/use-i18n'
-import { isMinScreen } from '~/composables/use-media-query'
 
 import VIcon from '~/components/VIcon/VIcon.vue'
 import VButton from '~/components/VButton.vue'
 
 import caretDownIcon from '~/assets/icons/caret-down.svg'
 
+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',
+}
+
+/**
+ * This is the search type button that appears in the header, not on the homepage.
+ */
 export default defineComponent({
   name: 'VSearchTypeButton',
   components: { VButton, VIcon },
   props: {
     a11yProps: {
       type: Object,
-      required: true,
-    },
-    activeItem: {
-      type: String as PropType<SearchType>,
-      default: ALL_MEDIA,
-    },
-    type: {
-      type: String as PropType<'header' | 'searchbar'>,
-      default: 'header',
+      default: () => ({
+        'aria-expanded': false,
+        'aria-haspopup': 'dialog',
+      }),
     },
   },
-  setup(props) {
+  setup() {
     const i18n = useI18n()
-    const isHeaderScrolled = inject('isHeaderScrolled', ref(null))
-    const isMinScreenMd = isMinScreen('md', { shouldPassInSSR: true })
+    const { icons, activeType } = useSearchType()
+
+    const activeItem = computed(() => activeType.value)
 
-    const { icons, activeType: activeItem } = useSearchType()
-    const isIconButton = computed(
-      () => isHeaderScrolled?.value && !isMinScreenMd.value
-    )
-    const sizeClasses = computed(() => {
-      if (props.type === 'searchbar') {
-        return 'h-12 px-2'
-      } else if (isIconButton.value) {
-        return 'w-10 h-10'
-      } else {
-        /**
-          When there is a caret down icon (on 'md' screens), paddings are balanced,
-          without it, paddings need to be adjusted.
-          */
-        return 'ps-2 pe-3 md:px-2'
-      }
-    })
+    const buttonLabel = computed(() => i18n.t(labels[activeItem.value]))
 
-    const buttonVariant = computed(() => {
-      if (props.type === 'searchbar') {
-        return 'action-menu'
-      } else {
-        return isMinScreenMd.value && !isHeaderScrolled?.value
-          ? 'tertiary'
-          : 'action-menu'
-      }
-    })
-    const buttonLabel = computed(() => {
-      return i18n.t(`search-type.${props.activeItem}`)
-    })
+    const icon = computed(() => icons[activeItem.value])
 
     return {
-      buttonVariant,
-      sizeClasses,
       buttonLabel,
       caretDownIcon,
-      isHeaderScrolled,
-      isMinScreenMd,
-      icon: computed(() => icons[activeItem.value]),
+      icon,
     }
   },
 })

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,
     }
   },
 })