Update content switcher tabs fonts and icons to match the mockups (#2140

)

* Add icon and change fonts for tabs

* Fix VR test

* Add snapshots

src/components/VHeader/VHeaderMobile/VContentSettingsModalContent.vue

@@ -20,8 +20,10 @@
           v-if="showFilters"
           id="content-settings"
           size="medium"
-          class="category me-4"
-          >{{ $t("search-type.heading") }}</VTab
+          class="gap-x-2 me-4"
+          ><VIcon :icon-path="searchType.icon" />{{
+            $t("search-type.heading")
+          }}</VTab
         >
         <h2
           v-else
@@ -30,9 +32,14 @@
           <VIcon :icon-path="searchType.icon" />
           {{ $t("search-type.heading") }}
         </h2>
-        <VTab v-if="showFilters" id="filters" size="medium" class="category">{{
-          $t("filters.title")
-        }}</VTab>
+        <VTab
+          v-if="showFilters"
+          id="filters"
+          size="medium"
+          class="label-regular gap-x-2"
+        >
+          <VIcon :icon-path="filtersIcon" />{{ $t("filters.title") }}</VTab
+        >
         <VIconButton
           class="self-center ms-auto hover:bg-dark-charcoal hover:text-white"
           :icon-props="{ iconPath: closeIcon }"
@@ -89,6 +96,7 @@ import VTabPanel from "~/components/VTabs/VTabPanel.vue"
 import VTabs from "~/components/VTabs/VTabs.vue"
 
 import closeIcon from "~/assets/icons/close-small.svg"
+import filtersIcon from "~/assets/icons/filter.svg"
 
 export default defineComponent({
   name: "VContentSettingsModalContent",
@@ -161,6 +169,7 @@ export default defineComponent({
 
     return {
       closeIcon,
+      filtersIcon,
       searchType,
 
       selectedTab,

src/components/VTabs/VTab.vue

@@ -200,7 +200,7 @@ export default defineComponent({
   @apply rounded-t-sm border-x border-t border-tx text-sm font-semibold md:text-base md:font-semibold md:leading-snug;
 }
 .plain {
-  @apply rounded-sm border-tx bg-tx text-sr font-semibold uppercase hover:bg-dark-charcoal-10;
+  @apply rounded-sm border-tx bg-tx text-sm hover:bg-dark-charcoal-10;
 }
 .bordered-selected {
   @apply -mb-[1px] border border-x-dark-charcoal-20 border-t-dark-charcoal-20 border-b-white bg-white;

src/locales/scripts/en.json5

@@ -668,7 +668,7 @@
     video: "Videos",
     "model-3d": "3D Models",
     label: "Type of content to search",
-    heading: "Content types",
+    heading: "Content type",
     additional: "Coming soon",
     "status-beta": "Beta",
     "see-image": "See all images",

test/playwright/playwright.config.ts

@@ -30,7 +30,7 @@ const config: PlaywrightTestConfig = {
      */
     command: "./node_modules/.bin/npm-run-all -p -r talkback prod:playwright",
     cwd: "/app",
-    timeout: 60_000 * 5, // 5 minutes
+    timeout: process.env.CI ? 60_000 * 5 : 60_000 * 10, // 5 minutes in CI, 10 in other envs
     port: 8443,
     reuseExistingServer: !process.env.CI || process.env.PWDEBUG === "1",
     env: {

test/playwright/utils/navigation.ts

@@ -185,7 +185,7 @@ export const openContentSettingsTab = async (
   tab: "contentTypes" | "filters" = "contentTypes",
   dir: LanguageDirection = "ltr"
 ) => {
-  const selector = buttonSelectors.mobileContentSettings
+  const selector = "#content-settings-button"
 
   await ensureButtonPressed(page, selector)
 

test/playwright/visual-regression/components/filters.spec.ts

@@ -0,0 +1,60 @@
+import { expect, test } from "@playwright/test"
+
+import {
+  enableNewHeader,
+  goToSearchTerm,
+  languageDirections,
+  t,
+} from "~~/test/playwright/utils/navigation"
+import breakpoints from "~~/test/playwright/utils/breakpoints"
+
+test.describe.configure({ mode: "parallel" })
+
+for (const dir of languageDirections) {
+  breakpoints.describeEachDesktop(() => {
+    test(`Filters sidebar none selected - ${dir}`, async ({ page }) => {
+      await enableNewHeader(page)
+
+      await goToSearchTerm(page, "birds", { dir })
+
+      expect(await page.locator(".sidebar").screenshot()).toMatchSnapshot(
+        `filters-sidebar-${dir}.png`
+      )
+    })
+
+    test(`Filters sidebar some filters selected - ${dir}`, async ({ page }) => {
+      await enableNewHeader(page)
+
+      await goToSearchTerm(page, "birds", { dir })
+      await page.locator('input[type="checkbox"]').first().check()
+
+      expect(await page.locator(".sidebar").screenshot()).toMatchSnapshot(
+        `filters-sidebar-checked-${dir}.png`
+      )
+    })
+  })
+
+  breakpoints.describeEachMobile(({ expectSnapshot }) => {
+    test(`Filters modal none selected - ${dir}`, async ({ page }) => {
+      await enableNewHeader(page)
+
+      await goToSearchTerm(page, "birds", { dir })
+      await page.getByRole("button", { name: "Menu" }).click()
+      await page.getByRole("tab", { name: t("filters.title", dir) }).click()
+
+      await expectSnapshot(`filters-modal-${dir}.png`, page)
+    })
+
+    test(`Filters modal some filters selected - ${dir}`, async ({ page }) => {
+      await enableNewHeader(page)
+
+      await goToSearchTerm(page, "birds", { dir })
+      await page.getByRole("button", { name: "Menu" }).click()
+      await page.getByRole("tab", { name: t("filters.title", dir) }).click()
+
+      await page.locator('input[type="checkbox"]').first().check()
+
+      await expectSnapshot(`filters-modal-filters-selected-${dir}.png`, page)
+    })
+  })
+}