Add the new VR tests

Remove the Chrome search input cross in tailwind.css
Move the `self-center` class to weblink button
Add updated snapshots

Extract changes from #1930

Update snapshots

Try fixing the search button

Simplify the search button

Simplify the search button

src/components/VCopyButton.vue

@@ -4,7 +4,7 @@
     type="button"
     variant="secondary-filled"
     size="disabled"
-    class="py-2 px-3 text-sr font-semibold"
+    class="py-2 px-3 text-sr font-bold"
     :data-clipboard-target="el"
   >
     <span v-if="!success">

src/components/VHeader/VHeaderMobile/VHeaderMobile.vue

@@ -5,7 +5,6 @@
   >
     <VInputModal
       class="flex w-full"
-      variant="recent-searches"
       :is-active="isRecentSearchesModalOpen"
       @close="deactivate"
     >

src/components/VHeader/VSearchBar/VSearchBar.vue

@@ -273,13 +273,3 @@ export default defineComponent({
   },
 })
 </script>
-
-<style>
-/* Removes the cross icon to clear the field */
-.search-field input[type='search']::-webkit-search-decoration,
-.search-field input[type='search']::-webkit-search-cancel-button,
-.search-field input[type='search']::-webkit-search-results-button,
-.search-field input[type='search']::-webkit-search-results-decoration {
-  -webkit-appearance: none;
-}
-</style>

src/components/VHeader/VSearchBar/VSearchButton.vue

@@ -3,42 +3,52 @@
     v-bind="$attrs"
     :aria-label="$t('search.search')"
     size="disabled"
-    :variant="isIcon ? 'plain' : 'primary'"
-    class="flex-shrink-0 text-2xl font-semibold transition-none rounded-s-none hover:bg-pink hover:text-white focus-visible:ring focus-visible:ring-pink"
+    :variant="route === 'home' ? 'primary' : 'plain'"
+    class="heading-6 border-s-tx flex-shrink-0 transition-none rounded-s-none"
     :class="[
-      isIcon
-        ? 'search-button ps-[1.5px] p-[0.5px] focus-visible:bg-pink focus-visible:text-white'
-        : 'h-full whitespace-nowrap py-6 px-10',
       sizeClasses,
       route === 'home'
-        ? 'border-b border-tx border-b-pink bg-pink text-white group-hover:border-pink group-hover:bg-pink group-hover:text-white'
-        : 'border-tx bg-dark-charcoal-10 group-focus-within:bg-pink group-focus-within:text-white group-focus-within:hover:bg-dark-pink',
+        ? 'h-full whitespace-nowrap text-white md:py-6 md:px-10'
+        : 'search-button ps-[1.5px] border-dark-charcoal-20 p-[0.5px] -ms-1 border-s hover:bg-pink hover:text-white focus-visible:bg-pink focus-visible:text-white group-hover:border-pink group-hover:bg-pink group-hover:text-white',
     ]"
     v-on="$listeners"
   >
-    <template v-if="isIcon">
-      <VIcon :icon-path="searchIcon" />
-    </template>
-    <template v-else>
-      <span>{{ $t('search.search') }}</span>
-    </template>
+    <VIcon
+      class="flex"
+      :class="{ 'md:hidden': route === 'home' }"
+      :icon-path="searchIcon"
+    />
+    <span class="hidden" :class="{ 'md:flex': route === 'home' }">{{
+      $t('search.search')
+    }}</span>
   </VButton>
 </template>
-
 <script lang="ts">
-import { defineComponent, computed, PropType } from '@nuxtjs/composition-api'
+import {
+  defineComponent,
+  computed,
+  PropType,
+  inject,
+} from '@nuxtjs/composition-api'
 
+import { IsMinScreenMdKey } from '~/types/provides'
 import { isMinScreen } from '~/composables/use-media-query'
-import { useBrowserIsMobile } from '~/composables/use-browser-detection'
 
 import VIcon from '~/components/VIcon/VIcon.vue'
 import VButton from '~/components/VButton.vue'
-import type { FieldSize } from '~/components/VInputField/VInputField.vue'
+import type { FieldSize } from '~/components/VInputFieldOld/VInputFieldOld.vue'
 
 import searchIcon from '~/assets/icons/search.svg'
-
+/**
+ * Displays a search button at the end of the search bar.
+ * It displays the text 'Search' on the homepage on screens above `md`,
+ * or a search icon in other cases.
+ * The button uses `primary` variant on the homepage; on other pages it is
+ * `plain` when resting, and pink on hover/focus/active.
+ *
+ */
 export default defineComponent({
-  name: 'VSearchButton',
+  name: 'VSearchButtonOld',
   components: { VIcon, VButton },
   inheritAttrs: false,
   props: {
@@ -47,57 +57,36 @@ export default defineComponent({
       required: true,
     },
     route: {
-      type: String as PropType<'home' | '404'>,
-      validator: (v: string) => ['home', '404'].includes(v),
+      type: String as PropType<'home' | '404' | 'search'>,
+      validator: (v: string) => ['home', '404', 'search'].includes(v),
     },
   },
   setup(props) {
-    const isMobile = useBrowserIsMobile()
-
-    const isMinScreenMd = isMinScreen('md', { shouldPassInSSR: !isMobile })
+    const isMinScreenMd = inject(IsMinScreenMdKey, isMinScreen('md'))
 
-    const isIcon = computed(() => {
-      // split the evaluation of the isMinScreenMd ref
-      // out to prevent short-circuiting from creating
-      // problems with `computed`'s dependency detection
-      const currentIsMinScreenMd = isMinScreenMd.value
-
-      return (
-        props.route === '404' ||
-        props.size !== 'standalone' ||
-        (props.size === 'standalone' && !currentIsMinScreenMd)
-      )
-    })
+    const isIcon = computed(
+      () => props.route !== 'home' || !isMinScreenMd.value
+    )
 
     const sizeClasses = computed(() => {
       return isIcon.value
         ? {
             small: 'w-10 md:w-12 h-10 md:h-12',
             medium: 'w-12 h-12',
             large: 'w-14 h-14',
-            standalone: 'w-[57px] md:w-[69px] h-[57px] md:h-[69px]',
+            standalone: 'w-[57px] md:w-[69px] h-full',
           }[props.size]
         : undefined
     })
 
-    return { isMinScreenMd, searchIcon, sizeClasses, isIcon }
+    return { searchIcon, sizeClasses, isIcon }
   },
 })
 </script>
-
 <style scoped>
+/* Negative margin removes a tiny gap between the button and the input borders. */
 .search-button {
-  /* Negative margin removes a tiny gap between the button and the input borders */
   margin-inline-start: -1px;
   border-inline-start-color: transparent;
-  border-width: 1px;
-}
-.search-button.search-button:not(:hover):not(:focus):not(:focus-within) {
-  border-inline-start-color: transparent;
-  border-width: 1px;
-}
-.search-button.search-button:hover {
-  border-inline-start-color: rgba(214, 212, 213, 1);
-  border-width: 1px;
 }
 </style>

src/components/VHeaderOld/VHeaderOld.vue

@@ -14,6 +14,7 @@
       :is-fetching="isFetching"
       :is-header-scrolled="isHeaderScrolled"
       :is-search-route="isSearchRoute"
+      class="md:h-12"
     />
 
     <VSearchBarOld

src/components/VHeaderOld/VSearchBar/VSearchBarOld.vue

@@ -24,7 +24,7 @@
     <VSearchButtonOld
       type="submit"
       :size="size"
-      :route="is404 ? '404' : undefined"
+      :route="is404 ? '404' : 'search'"
     />
   </form>
 </template>

src/components/VHeaderOld/VSearchBar/VSearchButtonOld.vue

@@ -3,40 +3,50 @@
     v-bind="$attrs"
     :aria-label="$t('search.search')"
     size="disabled"
-    :variant="isIcon ? 'plain' : 'primary'"
-    class="heading-6 flex-shrink-0 transition-none rounded-s-none hover:bg-pink hover:text-white focus-visible:ring focus-visible:ring-pink group-hover:border-pink group-hover:bg-pink group-hover:text-white"
+    :variant="route === 'home' ? 'primary' : 'plain'"
+    class="heading-6 border-s-tx flex-shrink-0 transition-none rounded-s-none"
     :class="[
-      isIcon
-        ? 'search-button ps-[1.5px] p-[0.5px] focus-visible:bg-pink focus-visible:text-white'
-        : 'h-full whitespace-nowrap py-6 px-10',
       sizeClasses,
       route === 'home'
-        ? 'border-b border-tx border-b-pink bg-pink text-white'
-        : 'border-dark-charcoal-20',
+        ? 'h-full whitespace-nowrap text-white md:py-6 md:px-10'
+        : 'search-button ps-[1.5px] border-dark-charcoal-20 p-[0.5px] -ms-1 border-s hover:bg-pink hover:text-white focus-visible:bg-pink focus-visible:text-white group-hover:border-pink group-hover:bg-pink group-hover:text-white',
     ]"
     v-on="$listeners"
   >
-    <template v-if="isIcon">
-      <VIcon :icon-path="searchIcon" />
-    </template>
-    <template v-else>
-      <span>{{ $t('search.search') }}</span>
-    </template>
+    <VIcon
+      class="flex"
+      :class="{ 'md:hidden': route === 'home' }"
+      :icon-path="searchIcon"
+    />
+    <span class="hidden" :class="{ 'md:flex': route === 'home' }">{{
+      $t('search.search')
+    }}</span>
   </VButton>
 </template>
-
 <script lang="ts">
-import { defineComponent, computed, PropType } from '@nuxtjs/composition-api'
+import {
+  defineComponent,
+  computed,
+  PropType,
+  inject,
+} from '@nuxtjs/composition-api'
 
+import { IsMinScreenMdKey } from '~/types/provides'
 import { isMinScreen } from '~/composables/use-media-query'
-import { useBrowserIsMobile } from '~/composables/use-browser-detection'
 
 import VIcon from '~/components/VIcon/VIcon.vue'
 import VButton from '~/components/VButton.vue'
 import type { FieldSize } from '~/components/VInputFieldOld/VInputFieldOld.vue'
 
 import searchIcon from '~/assets/icons/search.svg'
-
+/**
+ * Displays a search button at the end of the search bar.
+ * It displays the text 'Search' on the homepage on screens above `md`,
+ * or a search icon in other cases.
+ * The button uses `primary` variant on the homepage; on other pages it is
+ * `plain` when resting, and pink on hover/focus/active.
+ *
+ */
 export default defineComponent({
   name: 'VSearchButtonOld',
   components: { VIcon, VButton },
@@ -47,27 +57,16 @@ export default defineComponent({
       required: true,
     },
     route: {
-      type: String as PropType<'home' | '404'>,
-      validator: (v: string) => ['home', '404'].includes(v),
+      type: String as PropType<'home' | '404' | 'search'>,
+      validator: (v: string) => ['home', '404', 'search'].includes(v),
     },
   },
   setup(props) {
-    const isMobile = useBrowserIsMobile()
-
-    const isMinScreenMd = isMinScreen('md', { shouldPassInSSR: !isMobile })
+    const isMinScreenMd = inject(IsMinScreenMdKey, isMinScreen('md'))
 
-    const isIcon = computed(() => {
-      // split the evaluation of the isMinScreenMd ref
-      // out to prevent short-circuiting from creating
-      // problems with `computed`'s dependency detection
-      const currentIsMinScreenMd = isMinScreenMd.value
-
-      return (
-        props.route === '404' ||
-        props.size !== 'standalone' ||
-        (props.size === 'standalone' && !currentIsMinScreenMd)
-      )
-    })
+    const isIcon = computed(
+      () => props.route !== 'home' || !isMinScreenMd.value
+    )
 
     const sizeClasses = computed(() => {
       return isIcon.value
@@ -80,14 +79,13 @@ export default defineComponent({
         : undefined
     })
 
-    return { isMinScreenMd, searchIcon, sizeClasses, isIcon }
+    return { searchIcon, sizeClasses, isIcon }
   },
 })
 </script>
-
 <style scoped>
+/* Negative margin removes a tiny gap between the button and the input borders. */
 .search-button {
-  /* Negative margin removes a tiny gap between the button and the input borders */
   margin-inline-start: -1px;
   border-inline-start-color: transparent;
 }

src/components/VMediaInfo/VMediaLicense.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="media-attribution">
-    <h3 class="description md:heading-6 mb-4">
+    <h3 class="description-bold md:heading-6 mb-4">
       {{ headerText }}
     </h3>
 

src/layouts/default.vue

@@ -57,6 +57,7 @@ import {
 } from '~/composables/use-match-routes'
 import { isMinScreen } from '~/composables/use-media-query'
 import { useFilterSidebarVisibility } from '~/composables/use-filter-sidebar-visibility'
+import { useBrowserIsMobile } from '~/composables/use-browser-detection'
 import { useFeatureFlagStore } from '~/stores/feature-flag'
 
 import {
@@ -123,7 +124,9 @@ const embeddedPage = {
     const isMinScreenLg = computed(() =>
       Boolean(innerIsMinScreenLg.value && mounted.value)
     )
-    const innerIsMinScreenMd = isMinScreen('md')
+
+    const isMobile = useBrowserIsMobile()
+    const innerIsMinScreenMd = isMinScreen('md', { shouldPassInSSR: !isMobile })
     const isMinScreenMd = computed(() =>
       Boolean(innerIsMinScreenMd.value && mounted.value)
     )

test/playwright/e2e/search-query-client-old.spec.ts

@@ -4,6 +4,7 @@ import {
   changeContentType,
   goToSearchTerm,
   OLD_HEADER,
+  searchFromHeader,
 } from '~~/test/playwright/utils/navigation'
 import { mockProviderApis } from '~~/test/playwright/utils/route'
 
@@ -70,8 +71,8 @@ test('url filter types not used by current mediaType are discarded', async ({
 
 test('can search for a different term', async ({ page }) => {
   await goToSearchTerm(page, 'cat', { searchType: IMAGE })
-  await page.fill('header input[type="search"]', 'dog')
-  await page.keyboard.press('Enter')
+  await searchFromHeader(page, 'dog')
+
   await expect(page).toHaveURL('/search/image?q=dog')
 })
 
@@ -80,7 +81,6 @@ test('search for a different term keeps query parameters', async ({ page }) => {
     searchType: IMAGE,
     query: 'license=by&extension=jpg',
   })
-  await page.fill('header input[type="search"]', 'dog')
-  await page.keyboard.press('Enter')
+  await searchFromHeader(page, 'dog')
   await expect(page).toHaveURL('/search/image?q=dog&license=by&extension=jpg')
 })

test/playwright/playwright.config.ts

@@ -56,7 +56,7 @@ const config: PlaywrightTestConfig = {
   expect: {
     toMatchSnapshot: {
       // To avoid flaky tests, we allow a small amount of pixel difference.
-      maxDiffPixelRatio: 0.06,
+      maxDiffPixelRatio: 0.02,
     },
   },
 }