Add 'beta' VPill to Audio in the content switcher

src/components/VButton.vue

@@ -232,7 +232,7 @@ export default VButton
 
 <style module>
 .button {
-  @apply flex items-center rounded-sm justify-center transition-shadow duration-100 ease-linear disabled:opacity-70 focus:outline-none focus-visible:ring no-underline appearance-none ring-offset-1;
+  @apply flex items-center rounded-sm justify-center transition-shadow duration-100 ease-linear disabled:opacity-70 focus:outline-none focus-visible:outline-none no-underline appearance-none ring-offset-1;
 }
 
 .button[disabled='disabled'],
@@ -257,35 +257,35 @@ a.button {
 }
 
 .primary {
-  @apply bg-pink text-white focus-visible:ring-pink hover:bg-dark-pink hover:text-white;
+  @apply bg-pink text-white focus-visible:ring focus-visible:ring-pink hover:bg-dark-pink hover:text-white;
 }
 
 .primary-pressed {
   @apply bg-dark-pink;
 }
 
 .secondary {
-  @apply bg-dark-charcoal text-white font-bold focus-visible:ring-pink hover:bg-dark-charcoal-80 hover:text-white;
+  @apply bg-dark-charcoal text-white font-bold focus-visible:ring focus-visible:ring-pink hover:bg-dark-charcoal-80 hover:text-white;
 }
 
 .secondary-pressed {
   @apply bg-dark-charcoal-80 border border-tx hover:border-tx;
 }
 
 .tertiary {
-  @apply bg-white text-black border border-dark-charcoal-20 focus-visible:border-tx focus-visible:ring-pink ring-offset-0;
+  @apply bg-white text-black border border-dark-charcoal-20 focus-visible:border-tx focus-visible:ring focus-visible:ring-pink ring-offset-0;
 }
 
 .tertiary-pressed {
   @apply bg-dark-charcoal text-white border-tx;
 }
 
 .action-menu {
-  @apply bg-white text-black border border-tx hover:border-dark-charcoal-20 focus-visible:ring-pink;
+  @apply bg-white text-black border border-tx hover:border-dark-charcoal-20 focus-visible:ring focus-visible:ring-pink;
 }
 
 .action-menu-secondary {
-  @apply bg-white text-black border border-tx hover:border-dark-charcoal-20 focus-visible:ring-pink;
+  @apply bg-white text-black border border-tx hover:border-dark-charcoal-20 focus-visible:ring focus-visible:ring-pink;
 }
 
 .action-menu-secondary-pressed {
@@ -297,30 +297,30 @@ a.button {
 }
 
 .action-menu-muted {
-  @apply bg-dark-charcoal-10 text-black border border-tx hover:border-dark-charcoal-20 focus-visible:ring-pink;
+  @apply bg-dark-charcoal-10 text-black border border-tx hover:border-dark-charcoal-20 focus-visible:ring focus-visible:ring-pink;
 }
 
 .action-menu-muted-pressed {
-  @apply border border-tx bg-dark-charcoal text-white focus-visible:ring-pink;
+  @apply border border-tx bg-dark-charcoal text-white focus-visible:ring focus-visible:ring-pink;
 }
 
 .grouped {
-  @apply bg-white text-black focus-visible:ring-pink;
+  @apply bg-white text-black;
 }
 
 .grouped-pressed {
   @apply bg-dark-charcoal-10 ring-offset-dark-charcoal-10;
 }
 
 .full {
-  @apply w-full font-semibold bg-dark-charcoal-06 focus-visible:ring-pink hover:bg-dark-charcoal-40 hover:text-white;
+  @apply w-full font-semibold bg-dark-charcoal-06 focus-visible:ring focus-visible:ring-pink hover:bg-dark-charcoal-40 hover:text-white;
 }
 
 .full-pressed {
   @apply w-full font-semibold bg-dark-charcoal-06 text-dark-charcoal;
 }
 
 .plain {
-  @apply bg-tx focus-visible:ring-pink;
+  @apply bg-tx focus-visible:ring focus-visible:ring-pink;
 }
 </style>

src/components/VContentSwitcher/VContentItem.vue

@@ -0,0 +1,43 @@
+<template>
+  <VItem
+    :selected="selected"
+    :is-first="itemId === 0"
+    @click.native="$emit('click', item)"
+  >
+    <div class="flex flex-row items-center py-2">
+      <VIcon :icon-path="icon" class="me-2" />
+      <span class="pe-20 font-semibold leading-[2.25rem]">{{
+        $t(`search-type.${item}`)
+      }}</span>
+      <VPill v-if="status === 'beta'">{{
+        $t('search-type.status-beta')
+      }}</VPill>
+    </div>
+  </VItem>
+</template>
+
+<script>
+import { computed } from '@nuxtjs/composition-api'
+import { defineComponent } from '@vue/composition-api'
+import { contentStatus } from '~/constants/media'
+/** @typedef {import('@nuxtjs/composition-api').ExtractPropTypes<typeof propTypes>} Props */
+const propTypes = {
+  item: { type: String, required: true },
+  itemId: { type: Number, required: true },
+  selected: { type: Boolean, default: false },
+  icon: { type: String, required: true },
+}
+const VContentItem = defineComponent({
+  name: 'VContentItem',
+  props: propTypes,
+  setup(props) {
+    const status = computed(() => {
+      return contentStatus[props.item]
+    })
+    return {
+      status,
+    }
+  },
+})
+export default VContentItem
+</script>

src/components/VContentSwitcher/VContentSwitcherButton.vue

@@ -67,7 +67,7 @@ export default {
       return i18n.t(labelKey)
     })
     const showLabel = computed(
-      () => isMinScreenMd.value || !isHeaderScrolled.value
+      () => isMinScreenMd.value || !isHeaderScrolled?.value
     )
 
     return {

src/components/VContentSwitcher/VContentSwitcherPopover.vue

@@ -11,7 +11,7 @@
       />
     </template>
     <VContentTypes
-      :bordered="false"
+      size="medium"
       :active-item="activeItem"
       @select="selectItem"
     />
@@ -25,12 +25,14 @@ import checkIcon from '~/assets/icons/checkmark.svg'
 
 import VPopover from '~/components/VPopover/VPopover.vue'
 import VContentSwitcherButton from '~/components/VContentSwitcher/VContentSwitcherButton.vue'
+import VContentTypes from '~/components/VContentSwitcher/VContentTypes.vue'
 
 export default {
   name: 'VContentSwitcherPopover',
   components: {
     VContentSwitcherButton,
     VPopover,
+    VContentTypes,
   },
   props: {
     activeItem: {

src/components/VContentSwitcher/VContentTypes.vue

@@ -1,57 +1,60 @@
 <template>
   <VItemGroup
     direction="vertical"
+    :size="size"
     :bordered="bordered"
+    :heading="$t('search-type.heading')"
     type="radiogroup"
     class="z-10"
   >
-    <VItem
+    <VContentItem
       v-for="(item, idx) in content.types"
-      :key="idx"
+      :key="item"
+      :class="{ 'mb-1 p-4': size === 'medium' }"
+      :item="item"
+      :item-id="idx"
+      :icon="content.icons[item]"
       :selected="item === activeItem"
-      :is-first="idx === 0"
-      @click.native="handleClick(item)"
-    >
-      <VIcon :icon-path="content.icons[item]" class="me-2 ms-4 my-4" />
-      <span class="pe-20 py-4 font-semibold">{{
-        $t(`search-type.${item}`)
-      }}</span>
-    </VItem>
+      @click="handleClick(item)"
+    />
   </VItemGroup>
 </template>
 <script>
 import { supportedContentTypes } from '~/constants/media'
 import useContentType from '~/composables/use-content-type'
 
-import checkIcon from '~/assets/icons/checkmark.svg'
-
-import VIcon from '~/components/VIcon/VIcon.vue'
-import VItem from '~/components/VItemGroup/VItem.vue'
 import VItemGroup from '~/components/VItemGroup/VItemGroup.vue'
+import VContentItem from '~/components/VContentSwitcher/VContentItem.vue'
+import { computed } from '@nuxtjs/composition-api'
 
 export default {
   name: 'VContentTypes',
-  components: { VIcon, VItem, VItemGroup },
+  components: { VItemGroup, VContentItem },
   props: {
-    bordered: {
-      type: Boolean,
-      default: true,
+    /**
+     * 'Small' size for mobile screens,
+     * 'medium' size for larger screens.
+     */
+    size: {
+      type: String,
+      default: 'small',
+      validator: (val) => ['small', 'medium'].includes(val),
     },
     activeItem: {
       type: String,
       required: true,
       validator: (val) => supportedContentTypes.includes(val),
     },
   },
-  setup(_, { emit }) {
+  setup(props, { emit }) {
     const content = useContentType()
-
+    const bordered = computed(() => props.size === 'small')
     const handleClick = (item) => {
       emit('select', item)
     }
     return {
       content,
-      checkIcon,
+      bordered,
       handleClick,
     }
   },

src/components/VContentSwitcher/VMobileMenuModal.vue

@@ -17,14 +17,8 @@
       :aria-label="$t('header.filter-button.simple')"
     >
       <nav class="p-6" aria-labelledby="content-switcher-heading">
-        <h2
-          id="content-switcher-heading"
-          class="md:sr-only text-sr pb-4 uppercase font-semibold"
-        >
-          {{ $t('search-type.heading') }}
-        </h2>
         <VContentTypes
-          :bordered="false"
+          size="small"
           :active-item="content.activeType.value"
           @select="selectItem"
         />

src/components/VItemGroup/VItem.vue

@@ -14,10 +14,14 @@
     <VButton
       data-item-group-item
       :as="as"
-      class="flex justify-between focus-visible:ring-pink rounded min-w-full"
-      :class="[$style.button, $style[`${contextProps.direction}-button`]]"
+      class="flex justify-between rounded min-w-full group relative hover:bg-dark-charcoal-10 px-2 py-2"
+      :class="[
+        $style.button,
+        $style[`${contextProps.direction}-button`],
+        $style[`${contextProps.size}-button`],
+      ]"
       variant="grouped"
-      size="small"
+      size="disabled"
       :pressed="selected"
       :role="contextProps.type === 'radiogroup' ? 'radio' : 'menuitemcheckbox'"
       :aria-checked="selected"
@@ -31,13 +35,17 @@
       @click.native="$emit('click')"
     >
       <div
-        class="flex-grow whitespace-nowrap"
-        :class="$style[`${contextProps.direction}-content`]"
+        class="flex-grow whitespace-nowrap my-0 rounded-sm px-2 group-focus-visible:ring group-focus-visible:ring-pink md:group-focus-visible:ring-tx"
+        :class="[
+          $style[`${contextProps.direction}-content`],
+          $style[`${contextProps.size}-content`],
+        ]"
       >
         <slot name="default" />
       </div>
       <VIcon
         v-if="!isInPopover && selected && contextProps.direction === 'vertical'"
+        class="absolute end-5"
         :icon-path="checkmark"
       />
     </VButton>
@@ -106,6 +114,7 @@ export default defineComponent({
     const isFocused = ref(false)
     const isInPopover = inject(VPopoverContentContextKey, false)
     const contextProps = inject(VItemGroupContextKey)
+    console.log('vitem', contextProps)
 
     if (isInPopover && contextProps.bordered) {
       warn('Bordered popover items are not supported')
@@ -153,6 +162,14 @@ export default defineComponent({
   @apply z-10;
 }
 
+.medium-button {
+  @apply focus-visible:ring focus-visible:ring-pink;
+}
+
+.small-content {
+  @apply group-focus-visible:ring group-focus-visible:ring-pink;
+}
+
 .vertical {
   @apply min-w-max;
 }
@@ -174,7 +191,7 @@ export default defineComponent({
 }
 
 .vertical-content {
-  @apply flex flex-row;
+  @apply flex flex-row items-center;
 }
 
 .vertical-popover-item {

src/components/VItemGroup/VItemGroup.vue

@@ -11,6 +11,9 @@
     @focusin="isFocused = true"
     @focusout="isFocused = false"
   >
+    <h2 v-if="showHeading" class="text-sr p-6 pb-4 uppercase font-semibold">
+      {{ heading }}
+    </h2>
     <!--
       @slot The items in the item group. Should all be `VItem`s
     -->
@@ -24,6 +27,7 @@ import {
   provide,
   ref,
   readonly,
+  computed,
 } from '@nuxtjs/composition-api'
 import { ensureFocus } from 'reakit-utils/ensureFocus'
 import { useI18n } from '~/composables/use-i18n'
@@ -33,6 +37,7 @@ import { useI18n } from '~/composables/use-i18n'
  * @property {'vertical' | 'horizontal'} direction
  * @property {boolean} bordered
  * @property {'menu' | 'radiogroup'} type
+ * @property {'small' | 'medium'} size
  */
 
 /**
@@ -101,6 +106,24 @@ export default defineComponent({
       default: 'menu',
       validate: (v) => ['menu', 'radiogroup'].includes(v),
     },
+    /**
+     * The heading text to show at the top of the Item Group.
+     * Optional.
+     */
+    heading: {
+      type: String,
+      required: false,
+    },
+    /**
+     * Size of the item group corresponds to the size of the component.
+     *
+     * @default 'small'
+     */
+    size: {
+      type: String,
+      default: 'small',
+      validate: (val) => ['small', 'medium'].includes(val),
+    },
   },
   setup(props) {
     /** @type {import('@nuxtjs/composition-api').Ref<HTMLElement | undefined>} */
@@ -169,6 +192,8 @@ export default defineComponent({
       if (!previousSelected && selected) selectedCount.value += 1
     }
 
+    const showHeading = computed(() => Boolean(props.heading))
+
     const focusContext = {
       isGroupFocused: readonly(isFocused),
       onItemKeyPress,
@@ -178,7 +203,7 @@ export default defineComponent({
 
     provide(VItemGroupFocusContextKey, focusContext)
 
-    return { isFocused, nodeRef }
+    return { isFocused, nodeRef, showHeading }
   },
 })
 </script>