Add pink border to VSearchButton on group hover

src/components/VHeader/VHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <header
-    class="flex px-4 md:px-7 items-center md:items-stretch z-40 w-screen bg-white gap-x-2 gap-y-4"
+    class="main-header flex px-4 md:px-7 items-center md:items-stretch z-40 w-screen bg-white gap-x-2 gap-y-4"
     :class="{
       'py-3 ': isHeaderScrolled,
       'py-4 flex-wrap md:flex-nowrap': !isHeaderScrolled,

src/components/VHeader/VSearchBar/VSearchBar.vue

@@ -24,12 +24,14 @@
   </form>
 </template>
 
-<script>
-import { computed, defineComponent } from '@nuxtjs/composition-api'
+<script lang="ts">
+import { computed, defineComponent, PropType } from '@nuxtjs/composition-api'
 
 import { useMatchHomeRoute } from '~/composables/use-match-routes'
 
-import VInputField from '~/components/VInputField/VInputField.vue'
+import VInputField, {
+  FIELD_SIZES,
+} from '~/components/VInputField/VInputField.vue'
 import VSearchButton from '~/components/VHeader/VSearchBar/VSearchButton.vue'
 
 /**
@@ -50,9 +52,9 @@ const VSearchBar = defineComponent({
       default: '',
     },
     size: {
-      type: String,
+      type: String as PropType<keyof typeof FIELD_SIZES>,
       required: true,
-      validator: (v) => ['small', 'medium', 'large', 'standalone'].includes(v),
+      validator: (v: string) => Object.keys(FIELD_SIZES).includes(v),
     },
     placeholder: {
       type: String,
@@ -64,7 +66,8 @@ const VSearchBar = defineComponent({
     const { matches: isHomeRoute } = useMatchHomeRoute()
 
     const searchText = computed(() => props.value)
-    const updateSearchText = (val) => {
+
+    const updateSearchText = (val: string) => {
       emit('input', val)
     }
 

src/components/VHeader/VSearchBar/VSearchButton.vue

@@ -4,7 +4,7 @@
     :aria-label="$t('search.search')"
     size="disabled"
     :variant="isIcon ? 'plain' : 'primary'"
-    class="transition-none inline-block rounded-s-none font-semibold text-2xl hover:text-white group-hover:text-white hover:bg-pink group-hover:bg-pink focus-visible:ring focus-visible:ring-pink"
+    class="transition-none inline-block rounded-s-none font-semibold text-2xl hover:text-white group-hover:text-white group-hover:border-pink hover:bg-pink group-hover:bg-pink focus-visible:ring focus-visible:ring-pink"
     :class="[
       isIcon
         ? 'search-button focus-visible:bg-pink focus-visible:text-white p-[0.5px] ps-[1.5px]'

src/components/VHeader/VSearchBar/meta/VSearchBar.stories.mdx

@@ -8,7 +8,7 @@ import {
 import VSearchBar from '~/components/VHeader/VSearchBar/VSearchBar.vue'
 
 <Meta
-  title="Components/Header/Search bar"
+  title="Components/VHeader/Search bar"
   component={VSearchBar}
   argTypes={{
     input: {
@@ -46,6 +46,7 @@ button is clicked.
     name="Default"
     args={{
       value: 'Search query',
+      size: 'medium',
     }}
   >
     {Template.bind({})}
@@ -58,7 +59,7 @@ representing the search query.
 export const vModelTemplate = () => ({
   template: `
     <div>
-      <VSearchBar v-model="text">
+      <VSearchBar v-model="text" size="small">
         {{ text.length }}
       </VSearchBar>
       {{ text }}
@@ -85,6 +86,7 @@ easy `<input>` attributes like placeholders or HTML validations.
     name="With placeholder"
     args={{
       placeholder: 'Search query',
+      size: 'large',
     }}
   >
     {Template.bind({})}

src/components/VInputField/VInputField.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="input-field group flex flex-row items-center hover:bg-dark-charcoal-06 focus-within:bg-dark-charcoal-06 group-hover:bg-dark-charcoal-06 p-0.5px focus-within:p-0 border focus-within:border-1.5 border-dark-charcoal-20 rounded-sm overflow-hidden focus-within:border-pink"
+    class="input-field group flex flex-row items-center focus-within:bg-dark-charcoal-06 group-hover:bg-dark-charcoal-06 p-0.5px focus-within:p-0 border focus-within:border-1.5 border-dark-charcoal-20 rounded-sm overflow-hidden focus-within:border-pink"
     :class="[
       {
         // Padding is set to 1.5px to accommodate the border that will appear later.
@@ -26,20 +26,20 @@
   </div>
 </template>
 
-<script>
-import { computed } from '@nuxtjs/composition-api'
+<script lang="ts">
+import { computed, defineComponent, PropType } from '@nuxtjs/composition-api'
 
-const FIELD_SIZES = {
+export const FIELD_SIZES = {
   small: 'h-10 text-md',
   medium: 'h-12',
   large: 'h-14',
   standalone: 'h-14 md:h-[69px]',
-}
+} as const
 
 /**
  * Provides a control to enter text as input.
  */
-export default {
+export default defineComponent({
   name: 'VInputField',
   inheritAttrs: false,
   model: {
@@ -76,7 +76,8 @@ export default {
     connectionSides: {
       type: Array,
       default: () => [],
-      validator: (v) => v.every((item) => ['start', 'end'].includes(item)),
+      validator: (v: string[]) =>
+        v.every((item) => ['start', 'end'].includes(item)),
     },
     /**
      *  Small size is for mobile header/scrolled
@@ -85,18 +86,18 @@ export default {
      *  Standalone size is for homepage
      */
     size: {
-      type: String,
+      type: String as PropType<keyof typeof FIELD_SIZES>,
       required: true,
-      validator: (v) => ['small', 'medium', 'large', 'standalone'].includes(v),
+      validator: (v: string) => Object.keys(FIELD_SIZES).includes(v),
     },
   },
   // using non-native event name to ensure the two are not mixed
   emits: ['update:modelValue'],
   setup(props, { emit, attrs }) {
-    const type = attrs['type'] ?? 'text'
+    const type = typeof attrs['type'] === 'string' ? attrs['type'] : 'text'
 
-    const updateModelValue = (event) => {
-      emit('update:modelValue', event.target.value)
+    const updateModelValue = (event: Event) => {
+      emit('update:modelValue', (event.target as HTMLInputElement).value)
     }
     const sizeClass = computed(() => FIELD_SIZES[props.size])
 
@@ -108,7 +109,7 @@ export default {
       updateModelValue,
     }
   },
-}
+})
 </script>
 
 <style scoped>

src/composables/use-match-routes.js → src/composables/use-match-routes.ts

@@ -1,4 +1,10 @@
-import { useContext, ref, useRoute, useRouter } from '@nuxtjs/composition-api'
+import {
+  useContext,
+  ref,
+  useRoute,
+  useRouter,
+  Ref,
+} from '@nuxtjs/composition-api'
 
 /**
  * Reactive property that returns true only on the matching routes.
@@ -7,17 +13,18 @@ import { useContext, ref, useRoute, useRouter } from '@nuxtjs/composition-api'
  * Routes are also localized before comparison, so 'search' becomes
  * 'search__en', for example.
  *
- * @returns {{matches: import('@nuxtjs/composition-api').Ref<boolean>}}
  */
-export const useMatchRoute = (routes = []) => {
+export const useMatchRoute = (
+  routes: string[] = []
+): { matches: Ref<boolean> } => {
   const { app } = useContext()
   const route = useRoute()
   const router = useRouter()
   const localizedRoutes = routes.map(
-    (route) => app.localeRoute({ name: route }).name
+    (route) => app.localeRoute({ name: route })?.name
   )
   const matches = ref(localizedRoutes.includes(route.value.name))
-  router.beforeEach((to, from, next) => {
+  router.beforeEach((to, _from, next) => {
     matches.value = localizedRoutes.includes(to.name)
     next()
   })

test/playwright/visual-regression/header.spec.ts

@@ -0,0 +1,66 @@
+import { test } from '@playwright/test'
+
+import breakpoints from '~~/test/playwright/utils/breakpoints'
+import { hideInputCursors } from '~~/test/playwright/utils/page'
+
+const headerSelector = '.main-header'
+const loadMoreSelector = 'button:has-text("Load more")'
+
+test.describe('header snapshots', () => {
+  test.describe('ltr', () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/search/?q=birds')
+    })
+
+    test.describe('header', () => {
+      breakpoints.describeEvery(({ expectSnapshot }) => {
+        test('resting', async ({ page }) => {
+          await expectSnapshot('resting-ltr', page.locator(headerSelector))
+        })
+
+        test('scrolled', async ({ page }) => {
+          await page.locator(loadMoreSelector).focus()
+          await expectSnapshot('scrolled-ltr', page.locator(headerSelector))
+        })
+
+        test('searchbar hovered', async ({ page }) => {
+          await page.hover('input')
+          await hideInputCursors(page)
+          await expectSnapshot(
+            'searchbar-hovered-ltr',
+            page.locator(headerSelector)
+          )
+        })
+      })
+    })
+  })
+
+  test.describe('rtl', () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/ar/search/?q=birds')
+    })
+
+    test.describe('header', () => {
+      breakpoints.describeEvery(({ expectSnapshot }) => {
+        test('resting', async ({ page }) => {
+          await expectSnapshot('resting-rtl', page.locator(headerSelector))
+        })
+
+        test('scrolled', async ({ page }) => {
+          await page.locator(loadMoreSelector).focus()
+          await page.mouse.wheel(10, 0)
+          await expectSnapshot('scrolled-rtl', page.locator(headerSelector))
+        })
+
+        test('searchbar hovered', async ({ page }) => {
+          await page.hover('input')
+          await hideInputCursors(page)
+          await expectSnapshot(
+            'searchbar-hovered-rtl',
+            page.locator(headerSelector)
+          )
+        })
+      })
+    })
+  })
+})

test/proxy.js

@@ -51,7 +51,10 @@ const tapeNameGenerator = (tapeNumber, tape) => {
   if (typeMatch && typeMatch.type) {
     const groups = typeMatch.match.groups
     const prefix = `${typeMatch.type}_${groups.mediaType}`
-    const suffix = tape.req.headers.connection
+    let suffix = `${tape.req.headers.connection}`
+    if (tape.req.method !== 'GET') {
+      suffix = `${suffix}_${tape.req.method}`
+    }
     if (typeMatch.type === 'search') {
       return `${prefix}_${groups.query}_${suffix}`
     } else {