From 4fb83086e9e10b4170a70b1b5e74c8e27ca849c6 Mon Sep 17 00:00:00 2001 From: Olga Bulat Date: Mon, 20 Feb 2023 12:16:45 +0300 Subject: [PATCH] Add Storybook VR tests for filters button --- src/components/VHeader/VFilterButton.vue | 8 +- .../VHeader/VFilterIconOrCounter.vue | 4 +- .../VHeader/meta/VFilterButton.stories.mdx | 13 +-- .../visual-regression/v-filter-button.spec.ts | 95 +++++++++++------- ...lter-button-at-rest-0-checked-sm-linux.png | Bin 0 -> 350 bytes ...lter-button-at-rest-0-checked-xl-linux.png | Bin 0 -> 989 bytes ...lter-button-at-rest-1-checked-sm-linux.png | Bin 0 -> 373 bytes ...lter-button-at-rest-1-checked-xl-linux.png | Bin 0 -> 989 bytes ...ter-button-at-rest-12-checked-sm-linux.png | Bin 0 -> 601 bytes ...ter-button-at-rest-12-checked-xl-linux.png | Bin 0 -> 1177 bytes ...ton-focused-pressed-0-checked-sm-linux.png | Bin 0 -> 748 bytes ...ton-focused-pressed-0-checked-xl-linux.png | Bin 0 -> 1344 bytes ...ton-focused-pressed-1-checked-sm-linux.png | Bin 0 -> 729 bytes ...ton-focused-pressed-1-checked-xl-linux.png | Bin 0 -> 1319 bytes ...on-focused-pressed-12-checked-sm-linux.png | Bin 0 -> 934 bytes ...on-focused-pressed-12-checked-xl-linux.png | Bin 0 -> 1478 bytes ...lter-button-hovered-0-checked-sm-linux.png | Bin 0 -> 475 bytes ...lter-button-hovered-0-checked-xl-linux.png | Bin 0 -> 1109 bytes ...lter-button-hovered-1-checked-sm-linux.png | Bin 0 -> 513 bytes ...lter-button-hovered-1-checked-xl-linux.png | Bin 0 -> 1109 bytes ...ter-button-hovered-12-checked-sm-linux.png | Bin 0 -> 716 bytes ...ter-button-hovered-12-checked-xl-linux.png | Bin 0 -> 1279 bytes ...lter-button-pressed-0-checked-sm-linux.png | Bin 0 -> 463 bytes ...lter-button-pressed-0-checked-xl-linux.png | Bin 0 -> 1085 bytes ...lter-button-pressed-1-checked-sm-linux.png | Bin 0 -> 457 bytes ...lter-button-pressed-1-checked-xl-linux.png | Bin 0 -> 1051 bytes ...ter-button-pressed-12-checked-sm-linux.png | Bin 0 -> 672 bytes ...ter-button-pressed-12-checked-xl-linux.png | Bin 0 -> 1219 bytes ...ton-pressed-hovered-0-checked-sm-linux.png | Bin 0 -> 447 bytes ...ton-pressed-hovered-0-checked-xl-linux.png | Bin 0 -> 1055 bytes ...ton-pressed-hovered-1-checked-sm-linux.png | Bin 0 -> 449 bytes ...ton-pressed-hovered-1-checked-xl-linux.png | Bin 0 -> 1038 bytes ...on-pressed-hovered-12-checked-sm-linux.png | Bin 0 -> 671 bytes ...on-pressed-hovered-12-checked-xl-linux.png | Bin 0 -> 1222 bytes 34 files changed, 72 insertions(+), 48 deletions(-) create mode 100644 test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-at-rest-0-checked-sm-linux.png create mode 100644 test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-at-rest-0-checked-xl-linux.png create mode 100644 test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-at-rest-1-checked-sm-linux.png create mode 100644 test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-at-rest-1-checked-xl-linux.png create mode 100644 test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-at-rest-12-checked-sm-linux.png create mode 100644 test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-at-rest-12-checked-xl-linux.png create mode 100644 test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-focused-pressed-0-checked-sm-linux.png create mode 100644 test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-focused-pressed-0-checked-xl-linux.png create mode 100644 test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-focused-pressed-1-checked-sm-linux.png create mode 100644 test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-focused-pressed-1-checked-xl-linux.png create mode 100644 test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-focused-pressed-12-checked-sm-linux.png create mode 100644 test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-focused-pressed-12-checked-xl-linux.png create mode 100644 test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-hovered-0-checked-sm-linux.png create mode 100644 test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-hovered-0-checked-xl-linux.png create mode 100644 test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-hovered-1-checked-sm-linux.png create mode 100644 test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-hovered-1-checked-xl-linux.png create mode 100644 test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-hovered-12-checked-sm-linux.png create mode 100644 test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-hovered-12-checked-xl-linux.png create mode 100644 test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-0-checked-sm-linux.png create mode 100644 test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-0-checked-xl-linux.png create mode 100644 test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-1-checked-sm-linux.png create mode 100644 test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-1-checked-xl-linux.png create mode 100644 test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-12-checked-sm-linux.png create mode 100644 test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-12-checked-xl-linux.png create mode 100644 test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-hovered-0-checked-sm-linux.png create mode 100644 test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-hovered-0-checked-xl-linux.png create mode 100644 test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-hovered-1-checked-sm-linux.png create mode 100644 test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-hovered-1-checked-xl-linux.png create mode 100644 test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-hovered-12-checked-sm-linux.png create mode 100644 test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-hovered-12-checked-xl-linux.png diff --git a/src/components/VHeader/VFilterButton.vue b/src/components/VHeader/VFilterButton.vue index fa62b8565c..54bfab58a4 100644 --- a/src/components/VHeader/VFilterButton.vue +++ b/src/components/VHeader/VFilterButton.vue @@ -3,18 +3,17 @@ id="filter-button" variant="plain" size="disabled" - class="align-center label-regular h-12 w-12 gap-2 self-center xl:w-auto xl:ps-3 xl:pe-4" + class="align-center label-regular h-12 w-12 gap-2 self-center border-tx xl:w-auto xl:ps-3 xl:pe-4" :class=" pressed - ? 'border-tx bg-dark-charcoal text-white hover:bg-dark-charcoal-90' - : 'border-tx bg-tx hover:border-dark-charcoal-20 ' + ? 'bg-dark-charcoal text-white hover:bg-dark-charcoal-90' + : 'bg-tx hover:border-dark-charcoal-20' " :pressed="pressed" :disabled="disabled" aria-controls="filters" :aria-label="ariaLabel" @click="$emit('toggle')" - @keydown.tab.exact="$emit('tab', $event)" > (), toggle: defineEvent(), }, setup() { diff --git a/src/components/VHeader/VFilterIconOrCounter.vue b/src/components/VHeader/VFilterIconOrCounter.vue index 3eef350d9a..c2e3ea74b2 100644 --- a/src/components/VHeader/VFilterIconOrCounter.vue +++ b/src/components/VHeader/VFilterIconOrCounter.vue @@ -2,8 +2,8 @@

{{ appliedFilterCount }}

diff --git a/src/components/VHeader/meta/VFilterButton.stories.mdx b/src/components/VHeader/meta/VFilterButton.stories.mdx index 302f249a64..455459f6ce 100644 --- a/src/components/VHeader/meta/VFilterButton.stories.mdx +++ b/src/components/VHeader/meta/VFilterButton.stories.mdx @@ -20,17 +20,19 @@ import { IMAGE } from "~/constants/media" appliedFilters: { type: "number", }, + disabled: { + type: "boolean", + }, toggle: { action: "toggle", }, - tab: { - action: "tab", - }, }} /> export const Template = (args, { argTypes }) => ({ - template: ``, + template: `
+ +
`, components: { VFilterButton }, props: Object.keys(argTypes), setup() { @@ -67,8 +69,7 @@ export const Template = (args, { argTypes }) => ({ The button opens and closes the filters sidebar. It also shows how many filters -are applied in the mobile view. the field receives an input. It also emits the -`search` event when the search button is clicked. +are applied. It also emits the `toggle` event when clicked. { - breakpoints.describeLg(({ expectSnapshot }) => { - test("no filters applied", async ({ page }) => { - await gotoWithArgs(page, { isMinMd: true }) - await expectSnapshot("filter-button-at-rest", page) - }) - - test("no filters pressed", async ({ page }) => { - await gotoWithArgs(page, { pressed: true }) - await expectSnapshot("filter-button-pressed", page) - }) - - test("filters applied", async ({ page }) => { - await gotoWithArgs(page, { appliedFilters: 2 }) - await expectSnapshot("filter-button-2-filters", page) - }) +const wrapper = "#wrapper" - test("filters applied and pressed", async ({ page }) => { - await gotoWithArgs(page, { - isMinMd: true, - appliedFilters: 2, - pressed: true, +test.describe("VFilterButton", () => { + breakpoints.describeMobileAndDesktop(({ expectSnapshot }) => { + for (const filterCount of [0, 1, 12]) { + test(`resting, ${filterCount} filters`, async ({ page }) => { + await gotoWithArgs(page, { appliedFilters: filterCount }) + await expectSnapshot( + `filter-button-at-rest-${filterCount}-checked`, + page.locator(wrapper) + ) }) - await expectSnapshot("filter-button-2-filters-pressed", page) - }) - }) - - breakpoints.describeXl(({ expectSnapshot }) => { - test("no filters applied", async ({ page }) => { - await gotoWithArgs(page) - await expectSnapshot("filter-button-no-filters-not-scrolled", page) - }) - - test("2 filters", async ({ page }) => { - await gotoWithArgs(page, { appliedFilters: 2 }) - await expectSnapshot("filter-button-2-filters-not-scrolled", page) - }) + test(`focused, ${filterCount} filters`, async ({ page }) => { + await gotoWithArgs(page, { appliedFilters: filterCount }) + await expectSnapshot( + `filter-button-at-rest-${filterCount}-checked`, + page.locator(wrapper) + ) + }) + test(`pressed, ${filterCount} filters`, async ({ page }) => { + await gotoWithArgs(page, { + appliedFilters: filterCount, + pressed: true, + }) + await expectSnapshot( + `filter-button-pressed-${filterCount}-checked`, + page.locator(wrapper) + ) + }) + test(`pressed, hovered, ${filterCount} filters`, async ({ page }) => { + await gotoWithArgs(page, { + appliedFilters: filterCount, + pressed: true, + }) + await page.locator("button", { hasText: "Filter" }).hover() + await expectSnapshot( + `filter-button-pressed-hovered-${filterCount}-checked`, + page.locator(wrapper) + ) + }) + test(`hovered, ${filterCount} filters`, async ({ page }) => { + await gotoWithArgs(page, { + appliedFilters: filterCount, + }) + await page.locator("button", { hasText: "Filter" }).hover() + await expectSnapshot( + `filter-button-hovered-${filterCount}-checked`, + page.locator(wrapper) + ) + }) + test(`focused, pressed ${filterCount} filters`, async ({ page }) => { + await gotoWithArgs(page, { + appliedFilters: filterCount, + pressed: true, + }) + await page.locator("button", { hasText: "Filter" }).focus() + await expectSnapshot( + `filter-button-focused-pressed-${filterCount}-checked`, + page.locator(wrapper) + ) + }) + } }) }) diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-at-rest-0-checked-sm-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-at-rest-0-checked-sm-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..54b8894cc68a03e92d29c2329caa1f4d87b3799e GIT binary patch literal 350 zcmeAS@N?(olHy`uVBq!ia0vp^3xL>xgAGW|?XFo5q!^2X+?^QKos)S9WJ`FuIEGZr zd3(pukI7M@A#iWmd4xgAGW|?XFo5q!^2X+?^QKos)UVz`#7+)5S5Q zV$Rz;{yCFNWsZORp7HxaS^GqVe>+c_xFvQ<&NNqj6_Ikd#dXo8KHlqTn`a*U!LBUq z?!qtPV+^%Bg{(2<2|Nh0o z>GgjSCzdOfFM7nx^R?~tx2VpQEC+oV_t@RvQ~Bem!Q1n>Dc^VRzA4;2X@-};Eulx3 zzE5YE;d!p$o6nqc0pT~lMQLi;9e6kI-KKr>u0Pjq`C49`baBz=5Uryd&%28z2>#;R z;UN^v8Fg*jpX7h1{q2SCh$u|qq_Lj3-iz-t@mqcP`d`yH;BAS4PL3-k8L- zysvLb*ctiUzP$E`zduvK(@&zi%*r?ZJDL81+ug%Q^;CJ2YS72<1NM8RZk9!#x3)2f zcr^FS_Yz_K?R&j2KF?wmT)_?7MbL-D%kJLvc z=jHWv-;aBe@+UhhJDc&vJI=y{{51j#Za+>dc4yfB{95#rqMZ?siVSPtO6_cySGpk? z(Xx4CxGCeb*QcI+{b}+4ZY%5BiF@X$%s#v6>Ce7HI`hvzE}U~HdHe0)4*mo2uhZ{0 z?(L~7oD*TGb>?1z4&5vH}4&nFRk9i;NI6KGI#p#>!0F({;dQ0;PQUo&5z!RR_u+Nb=`FH z`(};zd$tQ7FZ}Uk^5TkVR$pAIy4Dqby}tTQ&FcBh^7SWdzu&FSp0WPVZtd{chQsc5 z+E&|n3Vz0(=KR`Lp}Avf-`cq>*35f8ew)oBC-da!H}Mq<+m0=Bi@W{r*Zy^Z{}XK2 zp5G?O>Aqv)*-f7stJv%U7D;K%S5QddBtx!_hE?u TU#JK$zcP5b`njxgN@xNAv+vb% literal 0 HcmV?d00001 diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-at-rest-1-checked-sm-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-at-rest-1-checked-sm-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..44ffec3c5916eb593c830ee3e837fcc2e3cd876e GIT binary patch literal 373 zcmeAS@N?(olHy`uVBq!ia0vp^3xL>xgAGW|?XFo5q!^2X+?^QKos)S9Wb1pnIEGZr zd3$HKFSDbF!$ni21Gx{lbd2oyIv4N@xiGuvF&jCt@G^$ZIFKUXykk^Sv~9hW?Tr^dcOPTJ(0gFwy|}pc z*{fea{Pbs$T%;jW(t~&lY}6|%1-xF`->GzcjutG?Wxfre!Iyz(|J9-8kVpSO}ygnJtB4BxA%v~ Qz;I;nboFyt=akR{03lC+ivR!s literal 0 HcmV?d00001 diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-at-rest-1-checked-xl-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-at-rest-1-checked-xl-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..0172f23c9fc1f4da65ae6c24914e291fbc554228 GIT binary patch literal 989 zcmeAS@N?(olHy`uVBq!ia0vp^3xL>xgAGW|?XFo5q!^2X+?^QKos)UVz`#7+)5S5Q zV$Rz;ce5v_OC0~WUQN@pYC_XL#&vxQXB)h_(^)(>I@)yO(Wvb=r*FM{LM5l?V9Uy$ zstvLcM>+a(MY!)?v&i0EmMgL~D8T%q{0;4#OO36i>#8#^ADW!j_{L${!;lR#z8Kwn z&un>O@{?14C+L@Z1#QYun|MMYDP`kVrYHY>8M`!DHI|7im=V;F_oVm4>nph{&c3|!@%3YyzfY{P zw6gPd&iVC4#PfLK|9Q1He_su`mLhL%YwEjZxBBvIO)=K5j$iglypdP16Ii}(U*E=! z^NZ~6zy56a>*)*Gd~1ofJ05>@QF1(g+%W2Ju4TOcLhW6$8)|+Q^?fhdxb4$Q*4lgj z-&Otp@$dHgjC-R_sulIPEtoprru=T1w#IlCR|{}_9Ddo$kn z=`~|<`=U2@WZ4e9Exdf=Qp@e)&#FZ`V|2=P&e&7f{H4o1BQN*V!J9XN8$Lhz`qQF5 z^U1z6pTCx_T2mh_6_46<+-N4xyh)SZly1L0xtISy{Hy05E;=8vvvk~|d}`J4aKTF5 zLz_OezsuIWCbFQ>A(CPHao_g^@~MpnZ0*-2oz2p^wnlBPpRtL7%kO{8M}8$$#$^5z zy?eibUupk+|4W54{*($atiSFZS}NLp|7}89*|ZR?qwUA-7OdX8?tH;2-xgAGW|?XFo5q!^2X+?^QKos)UVz`!Kz>Eakt zG3V`_{oYp!8IFBCp7BD;=Y*rWs%MOz$+01F)4%N4{CL%?-xtNJE>(SJc~Iei&W(GwE}h=jva7l}B((Ont-1zF zh2P2$ug>SpS=se#cKx#YKIg#)wI_4bjvd>&bK}Ykl^_$Lzm;`aPS?4)dru#laD4uh z`A7JJ^u_cKq6g=E=6Q#XtB7}76B)#)5wbd&;dGSg(J9Y*fN6!n)78&qol`;+0Q1uN AApigX literal 0 HcmV?d00001 diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-at-rest-12-checked-xl-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-at-rest-12-checked-xl-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..5af6760b082027b434c4d569e4b01b595772fb26 GIT binary patch literal 1177 zcmeAS@N?(olHy`uVBq!ia0vp^3xL>xgAGW|?XFo5q!^2X+?^QKos)UVz`zph>Eakt zG3V`_SfA)rnd2YtUz@h&=_21}t-Eif?DC0Cni0I%XpTdou4~*fY5k^4u0f{VohlBo zUS|w8Dr=uwHnpe4ch|uLg)6SdkCp68F;|1YhIctU6I=`(gpM+JiZH7LlEhg$W!{0c zAAU0j%Em7abT6%$)vc}2nbe@t#W+cW&0~=SjI&|~$A?4u`yZLU_Ir{t>$yyJwr$g) zKe-iZr+dtEw@S!M$A747)8|XRtgLCUL@F)UyAM~qBgU!N6r4|@@jH%Uo3a5 zb7d=Q`T7{n-mvC3F~;ZSTgy+a{8N7Q_wn=gbDck4Q)2n^??e_SL!$#jwQTjoxp^-0 z48?uln<{<@*DwkzYva^qk4o?|K6LpmH-p9RuaQ$krzM_#rn6_$;jV|>hXZ#`TPpII zQO$l1&(^Ac>n|AjMtXSO71{asuKE3>x4V8%%gSPC_$^<PXaQ*`2YPjdOQ1zqM~E#Jv;uQ?avZVnYZ4OvR+jd`uNC9yCpew zT*qyXPyZ6NNby;GQ~tFB-Cyl$_dv2pX{`SV0J z?W3}S4=&_8uh{(F?W*+Eh^cxO+}JO!oXm)m(Ode(A&MT7hac`|K0JVS9-#pLT0Ch0#&=J61HDGboXK3BcH|k&+aq- zo4;|R;SH_qfT*}O6X#hsY_>${GS%6;{gYv2SaCILN&1q-`_47Ke3{A8?6^bfzI$=- zXWruydki`j{dv3NPrEo*>!V-i3f}zRT@=G!vErwK-rqXTb+vlH^s0RO>cxwybB}lJ z4m%K(c(D7Z{(`f2`4}qp?h>-vD|h?zwuJ|#@UOq#-IUIqXW@2fucyH*-wp3J9Ga7O zX!`tm#@~6rgJPYo=yWf&*L=<&^w>XUeM8CbWVBqOwQL{f!{aI++p*^$li_@% literal 0 HcmV?d00001 diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-focused-pressed-0-checked-sm-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-focused-pressed-0-checked-sm-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..9050221a7fa5ffce1bb4690a3acb1099852dcd3e GIT binary patch literal 748 zcmeAS@N?(olHy`uVBq!ia0vp^3xL>xgAGW|?XFo5q!^2X+?^QKos)UVz`(T3)5S5Q zV$R#U`?G};8IFBi{;b_l<%)}k_+d$|rE`yXt@aR8|IZ>`D7bOkQtv=>cK4%8w`^33 zJ+lAc)q@HdfrW;SIv+ducuh8X`kY^~kWY0-$%&VN`b^CsUZ%?%B9$FijizSNZeA5YEGo|%r ztEG?Kj-LGQ_YRy47m(`TnErL{M03U77)b^JZ}o|hQIb1;FdWdkaYARU!Zbf7hJQ78 zmGnQgO=NsG?LX6v{S)Mm{IGh{#2c@|!Ei&@`ibd110x4X8Log8A`1fG-t=PRn#v@i z#i|j4T|&8j(*6ATpW~~l?zevYTpO1p$9kjn>eKW$oX3J1Vk`FTIW;dqCzhFOs-J^+ z+@6@%uiod~-}CgNQ1J^E5v{omdM{F5+s_3CsPG2%@@MIMHL>NV-)SC@J9Fl~?T1p< z7xS3jH12!&LLOuSK4)OM@6-u~zaJ+vG?cC7)J~mv{mVJ8$c*dX<+r@;Z$FW}Co!er zVW$Pdf=RkbWr=wT%5QAeZJngc^y9z%OgH{Dc8mH>Gq3LD-4L3kQ2*ET+Z?m%Qwx7A za_rf=tIa{_%)CdO$;@w7tj|Am^M>2*YbpMPN5y%SOsslNT;ZthTHeDS&}XKc@03!Y e0ZS~exgAGW|?XFo5q!^2X+?^QKos)UVz`*j$)5S5Q zV$R#U^*&QdWe$A&URl9@=CjqTgy`c>HI`q#x+${n!qYi_4`nS~7M-TLLgR!A9mAO14c#r^-- zQ*C!Y{rkPchY#;KUhwbEP6eloOa9-Pj-2&n5{dF`aMI=s$PitW{h@WSsY$r$#iD!5 zvpJazqI_D8MMxT0d7Z9#%J?h$?wrck9O8AWLT#gBjyC*O+PME8!(ZjYQ_q>M*vI?% z^d+WQr(YN9?3*8*l)wD{+C;76-P%81+n9*`>&nhGTzFV{M{?+#OFzBNH_ZD~bx!tQ z@50r`i+j8_rRy9EeH*lsrI7Ww0Q=|Q$&ype+U8G}S+a9c*KfMX!hUg-?mO{`#G4nZNjYmze%I`3KW{ zXHPx5$^G_8`wjg4w=XAFe{0jRyFd5%sjcrfX;dnH%dnpR?xb?r6$u8mD0ZXLUz>C8 z@AADFRoxBLd(Ag`%DK-wY~LovW(Iyb-cKFWQ>tAX&r>m8G_OjB_)_r`k zUA^?jM4k;Ll~UU{r2G9VM3U{5UvDz@oH6^vwKdm_cU{do`ueNU!-F4x{H@aw<6doi z-Jm*+N!`oOp!gcMjqO)Sqw8zJt88M|o@ZI%6;UD4-Y-^i!>sVmk^fuyC!cir6Fj+N z{s)P7-FXYX1|>zhRaG}MIyA&u7jv>Ot&QK#vg1lo=fUl~%l@QT?zAr2^&sQRYh%V$ zR+}sD$Q|q3x6z+}gX;~0*=OJU%zFQ{myOx({nPU&Ie##}{kZk4udi3)wK*))QgxO; zso<2po>sK$)fe8iuG{T|6Y?+JxX^L`efp&%6|z|kH=H%s04Mx>WV zvVVPJQ=#$vr_VQjZkB!W?!?2n=J%gXP4&L{{cc^;L4|Y5e)pm`ev1DdSh{M`AN}u> zHdl+QP3}AuJavh_XLyCkUFVm}ldtAzFHWo0+_<#!)ASCxXBDoTt;*X4ry5LJaYXRc zvs1OCr)Oa91|{|>Y!X6=Yzv<5;Xf|We(K^QEg5H-xBPth)%_uXQVBmka4<-5oingE zjZ}KWcuVg3t$+fyh7Y^hHRtN{ui1C(+YP7CE5Q1qp3tH}}k$>vbIz9r6xyoJGot^^B+H&VC)@ Tanco7BrxgAGW|?XFo5q!^2X+?^QKos)UVz`!)w)5S5Q zV$R#UhS|c2497k$U)E`;a>d0*{IDd~)<_wxt3jJAEG;^ln_0h$?Gh<1E(m!QkXd$d z;rs>Os(fup(r+@HHXJdwGP!U>&9Jw3A>Sk`^^X-*`Sb6qSMdFlDQ7=!9kTvvpMq0S zo2`SNIjcqpSHKF91p&O9*)7&iyz82sEt)4?a!z{HEeAQORy|A~c}-zwG1l`AO3AC(ep(iQRH@b5+t&-7~spl0SVk z;o`r)aO(O)_JV2Wf4%Ri;mmxd#n4b-)OO`l*Xu{j47)Rwx9({wFk)l)@iVi3&k0F4 zwjaAcaUZzPUTJ>pda8JCg_9k_|8*x#+}JeUEo5l*V&t02B%%fPrl!Nfpa!R6l_tUI@k%g~+ zEO`6Qbmp-W49uMz3=3vyCgvsHn<`k=pS?ECi=pAb)$S**=Poo}RlkyHx#1Q#&OUv= zR&eFjhUGj*gg+(zIjdW-nDLv4yM%N?xbp7qYv=xb+&m>37-T<=y9vyZ0{U;tN5)ep j)1G*D>}ZDv+dl?Pi8Wd-qRHyOw94S=>gTe~DWM4fs{Ae5 literal 0 HcmV?d00001 diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-focused-pressed-1-checked-xl-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-focused-pressed-1-checked-xl-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..2f5b8e09424268d9c9d408ecc132b0c5e9937e6e GIT binary patch literal 1319 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 literal 0 HcmV?d00001 diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-hovered-0-checked-sm-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-hovered-0-checked-sm-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..9ffe1347e83756891d2e744fd1891bba07e09cfd GIT binary patch literal 475 zcmeAS@N?(olHy`uVBq!ia0vp^3xL>xgAGW|?XFo5q!^2X+?^QKos)S9WKZ>UaSW-L z^Y-pWzvcuHhljV>*wm~ee=FquGPs%%^ChvwQ0i-9$!E_O9_{rDGHV<8TBpeTs@^y8 z!V|uBX(^8xYi6g33#EARFZh3!q1DJ?Ay0q?v&bnhldGy>VeaxDb82maYowc3r`+PrQ-VZNJ^KxJoZOXJ_C>(? rQ}Noz(`p-}w(rr`@12Kk)L%wPZPz3Tt&M%a*kbT>^>bP0l+XkK6_~`W literal 0 HcmV?d00001 diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-hovered-0-checked-xl-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-hovered-0-checked-xl-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..164d946ac63ca5155644671a0d01511930c589bb GIT binary patch literal 1109 zcmeAS@N?(olHy`uVBq!ia0vp^3xL>xgAGW|?XFo5q!^2X+?^QKos)UVz`(-q>Eakt zG3V{w{2bv@nd2YN?|6OlwOkLYxeTY=31!W^O$LuCaami4X!{%8w0_LBgtPnA3DCjc#FLxcGK%qQ-3Agu+ZSFzxDgp zuS(n7`mf)A-~DCoy|p{vz|@^=d44>Ry!5_4BZHdoWQ%gMCcgOPxz)O&s`3fp z<MQvXu>fGLbVb`tR6Eh1L4qQDQesSkU z;q3TI-o5`AdR8RfXB6{1SM@IVS z&l8nj@?LKJTEVq8hiQxVDU*kFrElkK+-%=(dqu|B*m%c})2?&6{&#&Za%Qu;tGARj*DQWoKCDCI0Q*{pJt-#|60BE^JuD*!Z2PVp-kE zV1p5A0oR>kwT)>_a`Qty#p_xd+X zGImCD%J00}Kkfh7r$vgX=j<96EZfHBw_Nya_N0C zdy4P;c+Ix0{!%;h{hHR+Qvb7jY2N=|o=O#eaN*(m&wbu(J06^5{qXh2hrV*-Tju2l zZa+NeKEJM~k(s$-_gmeN1x&rZy+0COw|}3z_}|W|9r5|D2jmZ|Es^q`x7Pi?_+K+Q z*TN7F+a-58q$2)&N$OnsQg70G*8S{A`2c@%MP!$VhE=N$%`sa#ZMpTCOyRCY9c%T= z+_wO8knfQRCsR~_!XcrqzPY_O_GgQ7PvCf9s=%4tpwh)SNrTN}k%U5L5}31MKjXPi WV!Cr2KfVK&6AYfNelF{r5}E)X3-<8< literal 0 HcmV?d00001 diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-hovered-1-checked-sm-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-hovered-1-checked-sm-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..517646691aaf612bb786670555960a40c2ac7c6a GIT binary patch literal 513 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 literal 0 HcmV?d00001 diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-0-checked-sm-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-0-checked-sm-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..614b11bb0117912e2a5b246cec9c25df3acca67d GIT binary patch literal 463 zcmeAS@N?(olHy`uVBq!ia0vp^3xL>xgAGW|?XFo5q!^2X+?^QKos)S9WOsVHIEGZr zd3)E;>u`cZ!^8cLOzSr7>I~PAJLt+TF5PqCu}DvdID4#3(-*Es&$RYB+BW#zwNg=h z=xcXBokzFk!u0i?Q77J{Z~yHp^rS=1;s0z#uG9u6$pryy8dJbb*~`p4xu5rW_J6g? z-M{^d#@Z)J%Uwg4{rovcE;V5D3-d+m_4L%m@5kvCRaI6mJuVUQWBr4b$EIJ}lAf@==E*7QFy}l-485$} z^3-xcK;8kdYv=uYxgAGW|?XFo5q!^2X+?^QKos)UVz`*?7)5S5Q zV$R#U^%+x28IFHEU-|f)@H0cjjrQ|y%S*DbO%!lhx+FU=SM;gR<*28*?^1%7P1&?I zqA_*pvgx<)1f|bjaINQyMA%_@Q{QVgQxcaw5OMO@uq3nO_+8toe}-jSOB;9Ye!h9P z-TMFUPT&3fw{EBTdE0WC@@@9(V!NGNQe>(bKmA|E(CWp=HI+$3i&Z0pD`17lf`F$R z)a*(g2y8RUKX`P${-$XP3_Uf>sr!n~)a96^)=9r^e!;4$ueHzc&k|j9To;PI4#Ar0xr?@ZR(#8%gSx;J4d**CLp zMj5*vW503fLe9&YhXEFX*E~*Zub$ku`)*!^_9>ABp)tU(>`Ia>Dk>5>ZguCgY)z>5g}c=v#m}ZP zFr?X73ClL>7pVNOwYz(h&41tVUA)UYkIiRn&&j-B=KWn;|Ld|!)x&fDeKeU@xu@cW zw-LjdHPNkmJS!_!J>a}?{N~1mC;9VTC8MO+&%emqEM@0CBU=WZ#nUpdW`G3u!4!B*wt{e05eb0UAt?|WEa5%49)u#0P+ z%Zu{@4F|nDXZ^b6(y%Nu>G-#@8Otmye(&m(zMh|OYHo1Bv*pGa`MKT)^L}hnb69;Y z=V5?^v0Oz;$ng`ir?3P4y*K{t@9Ya{&L%>>cTAGgl=dyGoc?pwhK!Bkre8~6Sl?{- zef@Vw!M{T*t{nopByCdTeRhHFqX97yEvuQs^M4i|yrNvNO>Z^745x-IJC- zUsAaA<@8dFEv^r5|bkudj&zYj!W{tJiy@LW4Ff6baj=NU2b0z9FjXA+2nEBA#H<`KcC zInF$95=)r5K1Q&Q(YgNmDW~6F`#2V4J17QYCjUI9+%59&jIUnt2bKp6p00i_>zopr E0DQRhnE(I) literal 0 HcmV?d00001 diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-1-checked-sm-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-1-checked-sm-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..3f490d439b260729316a16ced269b307883acb08 GIT binary patch literal 457 zcmeAS@N?(olHy`uVBq!ia0vp^3xL>xgAGW|?XFo5q!^2X+?^QKos)S9WH)=dIEGZr zd3)E^i#brj?VuD*q1DJ?Ay0q?nE8v*VZWtr4#$;^ Qz_?-XboFyt=akR{0NqQkr~m)} literal 0 HcmV?d00001 diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-1-checked-xl-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-1-checked-xl-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..6245ca2175af044319b0d0d226f275065c108576 GIT binary patch literal 1051 zcmeAS@N?(olHy`uVBq!ia0vp^3xL>xgAGW|?XFo5q!^2X+?^QKos)UVz`%Uf)5S5Q zV$R#U^*&chWsZM*ezbr0FR|9(&%-p|;Q*G(Yosq)V zHiZ41xV7Y2Q>tnZ*COo`ks7gOvvz-2mVCNoTHe|E;stAy<1LriONATUExL1e_PXoI zkNbZ!&6nT(eBXV2o_8_(g6Zzq)ksaYF-y% zC%%gvW(JCZ1UZ?K4|Ff*FI~BGrt?@Vt&#M7pM>rPZv-KYTxM^CwHEyX`AygmXH4WZsdXu3o>iV<}@pgpS*1_1m3C zlj?2ddI~E)7+wCftnkzF$vOXbXfp2JxSU~qVEvZ)kE-9vUzV7>Zhp({x6iuQ-}-O& zqNwoXPLX;E>5ik1rRSB0p7ok$7kzZsFRQA)?;C#J^_^o|T;`L#aTx>em#^Op4GbJ2 zGaI;T#s7W%?z&6aWtVbFN{T`L!{9x83z?_(hp7}UJvqJXd&A>E6RD$*zZ#^z3Sp2r zzOeZI^(*@~&YLqwX49rk5qryc&+p&yXjSr^h!WwqbK@sXpMU(p0|jSi=N&QYLUI)| zMH0B?{C{i1JKH`X++EsVKbGl0^!mM?`T6qI`)|6ZzhL-j{^atn$kU<6Ek1wNFR8ib z7wm1!epu1#*|~*fxw)&hO)yDY&ue_`w}$7Mi}n#qyUsNvc`fSXGOVftkFBev}Rr8GLGYo54UG;P5P$(Q)xl9gW)pdd;?A9^-QOxirljc(BlT? Ob_P#ZKbLh*2~7avCGpq* literal 0 HcmV?d00001 diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-12-checked-sm-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-12-checked-sm-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..a452897699f1d505a5bbc0c5a9154a311fdfadd0 GIT binary patch literal 672 zcmeAS@N?(olHy`uVBq!ia0vp^3xL>xgAGW|?XFo5q!^2X+?^QKos)UVz`zvc>Eakt zG3V{w{oYdw8IFJKe`$$!GPhVq2}A zXWr-dWIeTOzihZQ%m1}Qu-DO~z}WEJJlcm{8d7KcG+F%kWwKU}nAf>iufw&jUtaxl z{pVl%cC2`~@c6A=wX+jbXC(dKdM0Z|)#q>h>B|0Yb=CXQ@5j~F{9kx&a#AzH>Wt&- z=4RPedp(c3btky#pzaQ@Yx#E;%-(x<*QJXqZ=T=$&hntb0j-Rf+bi}RwBA+tcGt1v z$LrSt?^s&|6T)I(ch|nUuIVO6>w~D64#3jnG&xgAGW|?XFo5q!^2X+?^QKos)UVz`#=L>Eakt zG3V{wSfAi@nd2Yh-4`kxWK(m=;u6ogv#9!F?n$*IGl9*KC5am>M5i+5-E~>6mbAoh zLu!@cB8}uLJH!Q^7bM8c4Q^bwtE(?@xuT$HUXqyc`m`>+?3G(Kb+_(ndUJH$U*>;y zp8B^ASI&FBNm*c@Jw(qbPzhq;3>ka5(wceoigi2(zXZ6 zkL6;1|D1J2h@-(Qu)F3j*OD`yf-~b4zq);Sw8ph3f5rv1td0907Ej!Hw2swy-$Un5 zJ0F-TbS5>ZbTLlSVDnfcK{Q87l+my9i{OYZ zfnghEr-^-Dko)=B>jlvh`sTQvo?xZTTDDtOb+-4PS?6CCBt7d%ug&|tD*NK)%gtN0 zuiq(_-x_t6q21sS^PZZQMneVa5w;zu)ZR%@G z-&+^F+_!b*PXnc6E*0meF)RpL84!|lpwmoy*4nf+QQM`wmR_>H_HkSOLj4NvYv00B z^v*CbsMy;}e_hsWk!juf>aVGXhY!bzjVzZt_&=Qa{(!N z`?+=VRucw?=Rf^)X3TzPTl{YII#vb|DYJx_Hx_5SYXxWS;;}LO>p6e(lBl(9r=L1y zUE;Q=Sil$<7^rb~C-3`QEyqunJvYqIJyG#>>H;}$g^s`R1sip#l+a|o_={@={}a@@A()GyyNe=5fRgJcd8ph!|k_jZYdF6z;?|HpE9p&KZDyUZ3{S^RuKMr|O-)FXD%$L_z@_*KtalPIdQ z_!p1IVR?8yM9Gx6IjUj{%mTGdO?ef5#&odGSRa3oqrLIp`s}Gn-_(D)Fsx_vl)z%- aUq+U7QQqbxgAGW|?XFo5q!^2X+?^QKos)S9WLJ8+IEGZr zd3)E+=dehIl zOP0%|Sk0dH^U=1Ln7Ad&c~<@6wm9~~OEdNJZq3(EwQQ3MuCfCKz8%}MckL_YCp$PN zXfO(?q8W)Pxaybv$@hnkUr%2?fA`K^?Ie8(Zpbs1J&^AESHTAI z0j70W1cA<;>w8()O8WD+ZL9bT_U({;%D(e|`P!|sfk87}?%>N+|CoyIpo9$PgcbHl X8%xgAGW|?XFo5q!^2X+?^QKos)UVz`%Ud)5S5Q zV$R#Uck_cw8IFBizE)Q?BDbli@D=O575^Kh7KLjFs-2y{C|hErs*<#gRXcLdg9EJ# z6!-Bgl01{UbnTXu;$#Cw<(3~p>ry2IFQy!BQ56!D6kl$c-d^Q+%|eD#|83>ApEd8k zo&Htrx!=+{+t2L$*Nq#QTs-!?;XUzxHj{`Jt40V{zzUHC0h$gAgBqN^GGsrze1E>1 zS*^h0>28tH0t{|P9CYG(UC-+-TI0W)No(KB#4ndLHoa`#@->qY$ZP%?_d*WIfTawr zUW{B*F-=C1*y8@l`{|K#_4hAJ_3ifWIAT4q+VC;6Px;cA=+hk%9%;cRX8-hj%x*PF z;)Q)z`K;L+_O6r!IwbmeolblZBLhdP(~6FLJvnXPU;Hjv%J4qu-Wl=3yRLp)_Du7* zGk>cA{+_>^VO^&a9Sv*WtmJ2MzNY#a@XmzS=ib2&5JRYInKyn z(bp_}j#nq*gGSx%5872lcU3KT@2}y!uvR@etXwc!+&Oj;-K1JO^KYR*I55dhPr6#K)_pPwlw;X?7{&vFz++GUdOwKdm?R6)tWn zHuyjB=Z;U$MI)xQ=KI$+Z<>^ZbKP z?e!K1FxbfTpH|njWqr}Kx<1x*mvL)t?AsHyGhO}HNmtwD9hEMfJ;7>ab3IiA7O)z4*}Q$iB}ysX$| literal 0 HcmV?d00001 diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-hovered-1-checked-sm-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-hovered-1-checked-sm-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..e4005e64c6095b0dd0d6d1d1fe6e29ccc9d6bef9 GIT binary patch literal 449 zcmeAS@N?(olHy`uVBq!ia0vp^3xL>xgAGW|?XFo5q!^2X+?^QKos)S9WLJB-IEGZr zd3)E;k10^Z?O}JJsPoEoO%b;xxP5&TW_o>he9X3`kWuA=v{ZCz)M2J8eUS$?Fsyk| zc;d+ix#!Ub=bt(GHg4JWyji{;6NIZ8`erk7r8YQ8E(l=Lm;z?by~MmLtTxPWw$I|Y zt6!$nYyNWOIUUHO$NpuCUur#LaF4#yqPVL->6emoPum?3d3@We^7pz;`~mG}8Cs1T z7V-pWFpHcb%#60$ZPEYy`t*wG`Imzyr8Vf@xp)8Qk4%~FepXx6O12w^-hcPEnZ_R| z`QYBB`e`>?pI)CdZvwAA!l58H?`W?IJ%0A8sjYG*%>77S!O6VI9`S{{$|+kj|9owoa3*BE-0R35d1KlI9_!|~jIM!H3y8z>a!PC{xWt~$(69D3G BtaAVW literal 0 HcmV?d00001 diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-hovered-1-checked-xl-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-hovered-1-checked-xl-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..c80d5e82a721d4554c9dbff1de6ff6359a3c3391 GIT binary patch literal 1038 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 mP5Y