Add icon and change fonts for tabs

src/components/VTabs/VTab.vue

@@ -197,10 +197,10 @@ export default defineComponent({
 
 <style module>
 .bordered {
-  @apply label-bold md:description-bold rounded-t-sm border-x border-t border-tx;
+  @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 label-regular rounded-sm border-tx bg-tx 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;

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,59 @@
+import { expect, test } from "@playwright/test"
+
+import {
+  enableNewHeader,
+  goToSearchTerm,
+  languageDirections,
+} 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: "Filters" }).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: "Filters" }).click()
+
+      await page.locator('input[type="checkbox"]').first().check()
+
+      await expectSnapshot(`filters-modal-filters-selected-${dir}.png`, page)
+    })
+  })
+}