diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-colorblind-linux.png new file mode 100644 index 00000000000..380729cf417 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-dimmed-linux.png new file mode 100644 index 00000000000..6ba0952ef13 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-high-contrast-linux.png new file mode 100644 index 00000000000..572b14f775c Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-linux.png new file mode 100644 index 00000000000..380729cf417 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-tritanopia-linux.png new file mode 100644 index 00000000000..380729cf417 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-light-colorblind-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-light-colorblind-linux.png new file mode 100644 index 00000000000..1ed79aaea66 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-light-high-contrast-linux.png new file mode 100644 index 00000000000..1d4331b7752 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-light-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-light-linux.png new file mode 100644 index 00000000000..1ed79aaea66 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-light-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-light-tritanopia-linux.png new file mode 100644 index 00000000000..1ed79aaea66 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-colorblind-linux.png new file mode 100644 index 00000000000..380729cf417 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-dimmed-linux.png new file mode 100644 index 00000000000..6ba0952ef13 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-high-contrast-linux.png new file mode 100644 index 00000000000..572b14f775c Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-linux.png new file mode 100644 index 00000000000..380729cf417 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-tritanopia-linux.png new file mode 100644 index 00000000000..380729cf417 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-light-colorblind-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-light-colorblind-linux.png new file mode 100644 index 00000000000..1ed79aaea66 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-light-high-contrast-linux.png new file mode 100644 index 00000000000..1d4331b7752 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-light-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-light-linux.png new file mode 100644 index 00000000000..1ed79aaea66 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-light-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-light-tritanopia-linux.png new file mode 100644 index 00000000000..1ed79aaea66 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-dark-colorblind-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-dark-colorblind-linux.png new file mode 100644 index 00000000000..775708b3e59 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-dark-dimmed-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-dark-dimmed-linux.png new file mode 100644 index 00000000000..691ab37f700 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-dark-high-contrast-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-dark-high-contrast-linux.png new file mode 100644 index 00000000000..5a59ac5cfc0 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-dark-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-dark-linux.png new file mode 100644 index 00000000000..775708b3e59 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-dark-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-dark-tritanopia-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-dark-tritanopia-linux.png new file mode 100644 index 00000000000..775708b3e59 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-light-colorblind-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-light-colorblind-linux.png new file mode 100644 index 00000000000..7ef2b17da04 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-light-high-contrast-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-light-high-contrast-linux.png new file mode 100644 index 00000000000..826116ad125 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-light-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-light-linux.png new file mode 100644 index 00000000000..7ef2b17da04 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-light-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-light-tritanopia-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-light-tritanopia-linux.png new file mode 100644 index 00000000000..7ef2b17da04 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-colorblind-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-colorblind-linux.png new file mode 100644 index 00000000000..a95a5472776 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-dimmed-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-dimmed-linux.png new file mode 100644 index 00000000000..07303911f0b Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-high-contrast-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-high-contrast-linux.png new file mode 100644 index 00000000000..4755127c858 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-linux.png new file mode 100644 index 00000000000..a95a5472776 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-tritanopia-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-tritanopia-linux.png new file mode 100644 index 00000000000..a95a5472776 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-light-colorblind-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-light-colorblind-linux.png new file mode 100644 index 00000000000..1e9614f028d Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-light-high-contrast-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-light-high-contrast-linux.png new file mode 100644 index 00000000000..a6b1cc225b8 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-light-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-light-linux.png new file mode 100644 index 00000000000..1e9614f028d Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-light-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-light-tritanopia-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-light-tritanopia-linux.png new file mode 100644 index 00000000000..1e9614f028d Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-dark-colorblind-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-dark-colorblind-linux.png new file mode 100644 index 00000000000..e4bbf59873f Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-dark-dimmed-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-dark-dimmed-linux.png new file mode 100644 index 00000000000..bccafd46ed9 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-dark-high-contrast-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-dark-high-contrast-linux.png new file mode 100644 index 00000000000..0a0048d51a8 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-dark-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-dark-linux.png new file mode 100644 index 00000000000..b76e862b711 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-dark-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-dark-tritanopia-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-dark-tritanopia-linux.png new file mode 100644 index 00000000000..e4bbf59873f Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-light-colorblind-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-light-colorblind-linux.png new file mode 100644 index 00000000000..39fd21dbded Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-light-high-contrast-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-light-high-contrast-linux.png new file mode 100644 index 00000000000..391e41a82a7 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-light-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-light-linux.png new file mode 100644 index 00000000000..39fd21dbded Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-light-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-light-tritanopia-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-light-tritanopia-linux.png new file mode 100644 index 00000000000..39fd21dbded Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-colorblind-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-colorblind-linux.png new file mode 100644 index 00000000000..06312377557 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-dimmed-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-dimmed-linux.png new file mode 100644 index 00000000000..8b34b8686c2 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-high-contrast-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-high-contrast-linux.png new file mode 100644 index 00000000000..0b566ed6a86 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-linux.png new file mode 100644 index 00000000000..06312377557 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-tritanopia-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-tritanopia-linux.png new file mode 100644 index 00000000000..06312377557 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-light-colorblind-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-light-colorblind-linux.png new file mode 100644 index 00000000000..2dc42e41db5 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-light-high-contrast-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-light-high-contrast-linux.png new file mode 100644 index 00000000000..259cc07ed6f Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-light-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-light-linux.png new file mode 100644 index 00000000000..2dc42e41db5 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-light-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-light-tritanopia-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-light-tritanopia-linux.png new file mode 100644 index 00000000000..2dc42e41db5 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-colorblind-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-colorblind-linux.png new file mode 100644 index 00000000000..fef8afe02db Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-dimmed-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-dimmed-linux.png new file mode 100644 index 00000000000..e3b49a50fd8 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-high-contrast-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-high-contrast-linux.png new file mode 100644 index 00000000000..e5776e97060 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-linux.png new file mode 100644 index 00000000000..fef8afe02db Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-tritanopia-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-tritanopia-linux.png new file mode 100644 index 00000000000..fef8afe02db Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-light-colorblind-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-light-colorblind-linux.png new file mode 100644 index 00000000000..1258c1ed187 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-light-high-contrast-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-light-high-contrast-linux.png new file mode 100644 index 00000000000..30403a93e92 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-light-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-light-linux.png new file mode 100644 index 00000000000..1258c1ed187 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-light-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-light-tritanopia-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-light-tritanopia-linux.png new file mode 100644 index 00000000000..1258c1ed187 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-colorblind-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-colorblind-linux.png new file mode 100644 index 00000000000..79b4f821f96 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-dimmed-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-dimmed-linux.png new file mode 100644 index 00000000000..2af230e86b4 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-high-contrast-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-high-contrast-linux.png new file mode 100644 index 00000000000..b3ac40e62b7 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-linux.png new file mode 100644 index 00000000000..79b4f821f96 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-tritanopia-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-tritanopia-linux.png new file mode 100644 index 00000000000..79b4f821f96 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-light-colorblind-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-light-colorblind-linux.png new file mode 100644 index 00000000000..d05768fe7ca Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-light-high-contrast-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-light-high-contrast-linux.png new file mode 100644 index 00000000000..39292cd5085 Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-light-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-light-linux.png new file mode 100644 index 00000000000..d05768fe7ca Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-light-linux.png differ diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-light-tritanopia-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-light-tritanopia-linux.png new file mode 100644 index 00000000000..d05768fe7ca Binary files /dev/null and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-light-tritanopia-linux.png differ diff --git a/e2e/components/UnderlinePanels.test.ts b/e2e/components/UnderlinePanels.test.ts index 3166549175f..fd9b5ec9764 100644 --- a/e2e/components/UnderlinePanels.test.ts +++ b/e2e/components/UnderlinePanels.test.ts @@ -2,244 +2,74 @@ import {test, expect} from '@playwright/test' import {visit} from '../test-helpers/storybook' import {themes} from '../test-helpers/themes' -test.describe('UnderlinePanels', () => { - test.describe('Default', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'experimental-components-underlinepanels--default', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`UnderlineNav.Default.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'experimental-components-underlinepanels--default', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } - }) - - test.describe('Labelled By External Element', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'experimental-components-underlinepanels-features--labelled-by-external-element', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`UnderlineNav.Labelled By External Element.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'experimental-components-underlinepanels-features--labelled-by-external-element', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } - }) - - test.describe('Selected Tab', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'experimental-components-underlinepanels-features--selected-tab', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`UnderlineNav.Selected Tab.${theme}.png`) - }) +const stories: Array<{title: string; id: string}> = [ + { + title: 'Default', + id: 'experimental-components-underlinepanels--default', + }, + { + title: 'Dev Default', + id: 'experimental-components-underlinepanels-dev--default', + }, + { + title: 'Labelled By External Element', + id: 'experimental-components-underlinepanels-features--labelled-by-external-element', + }, + { + title: 'Selected Tab', + id: 'experimental-components-underlinepanels-features--selected-tab', + }, + { + title: 'With Counters', + id: 'experimental-components-underlinepanels-features--with-counters', + }, + { + title: 'With Counters In Loading State', + id: 'experimental-components-underlinepanels-features--with-counters-in-loading-state', + }, + { + title: 'With Icons', + id: 'experimental-components-underlinepanels-features--with-icons', + }, + { + title: 'With Icons Hidden On Narrow Screen', + id: 'experimental-components-underlinepanels-features--with-icons-hidden-on-narrow-screen', + }, +] - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'experimental-components-underlinepanels-features--selected-tab', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } - }) - - test.describe('With Counters', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'experimental-components-underlinepanels-features--with-counters', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`UnderlineNav.With Counters.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'experimental-components-underlinepanels-features--with-counters', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', +test.describe('UnderlinePanels', () => { + for (const story of stories) { + test.describe(story.title, () => { + for (const theme of themes) { + test.describe(theme, () => { + test('@vrt', async ({page}) => { + await visit(page, { + id: story.id, + globals: { + colorScheme: theme, }, - }, - }) - }) - }) - } - }) + }) - test.describe('With Counters In Loading State', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'experimental-components-underlinepanels-features--with-counters-in-loading-state', - globals: { - colorScheme: theme, - }, + expect(await page.screenshot()).toMatchSnapshot(`UnderlinePanels.${story.title}.${theme}.png`) }) - // Default state - expect(await page.screenshot()).toMatchSnapshot(`UnderlineNav.With Counters In Loading State.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'experimental-components-underlinepanels-features--with-counters-in-loading-state', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', + test('@aat', async ({page}) => { + await visit(page, { + id: story.id, + globals: { + colorScheme: theme, }, - }, - }) - }) - }) - } - }) - - test.describe('With Icons', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'experimental-components-underlinepanels-features--with-icons', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`UnderlineNav.With Icons.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'experimental-components-underlinepanels-features--with-icons', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } - }) - - test.describe('With Icons Hidden On Narrow Screen', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'experimental-components-underlinepanels-features--with-icons-hidden-on-narrow-screen', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot( - `UnderlineNav.With Icons Hidden On Narrow Screen.${theme}.png`, - ) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'experimental-components-underlinepanels-features--with-icons-hidden-on-narrow-screen', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, }, - }, + }) }) }) - }) - } - }) + } + }) + } }) diff --git a/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.dev.stories.tsx b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.dev.stories.tsx new file mode 100644 index 00000000000..6ffd6f3a423 --- /dev/null +++ b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.dev.stories.tsx @@ -0,0 +1,20 @@ +import React from 'react' +import type {Meta} from '@storybook/react' +import UnderlinePanels from './UnderlinePanels' +import type {ComponentProps} from '../../utils/types' + +export default { + title: 'Experimental/Components/UnderlinePanels/Dev', + component: UnderlinePanels, +} as Meta> + +export const Default = () => ( + + Tab 1 + Tab 2 + Tab 3 + Panel 1 + Panel 2 + Panel 3 + +)