From 68c5749af62c6d6b486d6329c4b503bb6542d6e8 Mon Sep 17 00:00:00 2001 From: Nils Date: Tue, 21 Jan 2025 14:15:50 +0100 Subject: [PATCH 01/23] test(component-library): make sure banner component can be closed --- .../mt-banner/mt-banner.spec.ts | 42 +++++++++++++++++++ .../mt-banner/mt-banner.vue | 4 ++ 2 files changed, 46 insertions(+) create mode 100644 packages/component-library/src/components/feedback-indicator/mt-banner/mt-banner.spec.ts diff --git a/packages/component-library/src/components/feedback-indicator/mt-banner/mt-banner.spec.ts b/packages/component-library/src/components/feedback-indicator/mt-banner/mt-banner.spec.ts new file mode 100644 index 000000000..a6de3464d --- /dev/null +++ b/packages/component-library/src/components/feedback-indicator/mt-banner/mt-banner.spec.ts @@ -0,0 +1,42 @@ +import { render, screen } from "@testing-library/vue"; +import userEvent from "@testing-library/user-event"; +import { vi } from "vitest"; +import MtBanner from "./mt-banner.vue"; + +describe("mt-banner", () => { + it("emits a close event when clicking on the close button", async () => { + // ARRANGE + const closeHandler = vi.fn(); + + render(MtBanner, { + props: { onClose: closeHandler, closable: true }, + }); + + // ACT + await userEvent.click(screen.getByRole("button", { name: /close/i })); + + // ASSERT + expect(closeHandler).toHaveBeenCalledOnce(); + expect(closeHandler).toHaveBeenCalledWith(undefined); + }); + + it("emits a close event with the bannerIndex when clicking on the close button", async () => { + // ARRANGE + const closeHandler = vi.fn(); + + render(MtBanner, { + props: { + onClose: closeHandler, + closable: true, + bannerIndex: "some-banner-index", + }, + }); + + // ACT + await userEvent.click(screen.getByRole("button", { name: /close/i })); + + // ASSERT + expect(closeHandler).toHaveBeenCalledOnce(); + expect(closeHandler).toHaveBeenCalledWith("some-banner-index"); + }); +}); diff --git a/packages/component-library/src/components/feedback-indicator/mt-banner/mt-banner.vue b/packages/component-library/src/components/feedback-indicator/mt-banner/mt-banner.vue index c93121fc5..2151c25b2 100644 --- a/packages/component-library/src/components/feedback-indicator/mt-banner/mt-banner.vue +++ b/packages/component-library/src/components/feedback-indicator/mt-banner/mt-banner.vue @@ -65,6 +65,10 @@ const props = withDefaults( }, ); +defineEmits<{ + close: [bannerIndex?: string]; +}>(); + const bannerIcon = computed(() => { if (props.icon) return props.icon; From 95edac48f38ffc225ec28c95d4c336abede9a30c Mon Sep 17 00:00:00 2001 From: Nils Date: Tue, 21 Jan 2025 14:18:53 +0100 Subject: [PATCH 02/23] fix(component-library): add focus state to banner close button --- .changeset/sweet-trains-talk.md | 5 +++++ .../components/feedback-indicator/mt-banner/mt-banner.vue | 5 +++++ 2 files changed, 10 insertions(+) create mode 100644 .changeset/sweet-trains-talk.md diff --git a/.changeset/sweet-trains-talk.md b/.changeset/sweet-trains-talk.md new file mode 100644 index 000000000..39a43ac5c --- /dev/null +++ b/.changeset/sweet-trains-talk.md @@ -0,0 +1,5 @@ +--- +"@shopware-ag/meteor-component-library": patch +--- + +Add focus state to banner close button diff --git a/packages/component-library/src/components/feedback-indicator/mt-banner/mt-banner.vue b/packages/component-library/src/components/feedback-indicator/mt-banner/mt-banner.vue index 2151c25b2..590ccb9b0 100644 --- a/packages/component-library/src/components/feedback-indicator/mt-banner/mt-banner.vue +++ b/packages/component-library/src/components/feedback-indicator/mt-banner/mt-banner.vue @@ -168,6 +168,11 @@ const bodyClasses = computed(() => ({ border: 0 none; outline: none; cursor: pointer; + border-radius: var(--border-radius-xs); + + &:focus-visible { + outline: 2px solid var(--color-border-brand-selected); + } } .mt-banner--info { From a91fcac7771ecf2542aea89f6c0ca352f15e05f4 Mon Sep 17 00:00:00 2001 From: Nils Date: Tue, 21 Jan 2025 14:38:23 +0100 Subject: [PATCH 03/23] refactor(component-library): use spacing tokens in banner component --- .../mt-banner/mt-banner.vue | 47 ++++++------------- 1 file changed, 14 insertions(+), 33 deletions(-) diff --git a/packages/component-library/src/components/feedback-indicator/mt-banner/mt-banner.vue b/packages/component-library/src/components/feedback-indicator/mt-banner/mt-banner.vue index 590ccb9b0..14cccf354 100644 --- a/packages/component-library/src/components/feedback-indicator/mt-banner/mt-banner.vue +++ b/packages/component-library/src/components/feedback-indicator/mt-banner/mt-banner.vue @@ -3,7 +3,7 @@ ({ From e55fea549cd39d811624f2013e4d2368b2ab942e Mon Sep 17 00:00:00 2001 From: Haberkamp <35109813+Haberkamp@users.noreply.github.com> Date: Wed, 22 Jan 2025 07:02:14 +0000 Subject: [PATCH 11/23] update snapshots --- ...t-checkbox--visual-test-help-text-snap.png | Bin 7036 -> 7762 bytes ...l-test-colorpicker-with-help-text-snap.png | Bin 9248 -> 9975 bytes ...-mt-switch--visual-test-help-text-snap.png | Bin 7238 -> 7949 bytes 3 files changed, 0 insertions(+), 0 deletions(-) diff --git a/packages/component-library/__snapshots__/interaction-tests-form-mt-checkbox--visual-test-help-text-snap.png b/packages/component-library/__snapshots__/interaction-tests-form-mt-checkbox--visual-test-help-text-snap.png index 7f1f06e6f4ab060d823ea4fc4bd672ef59706260..be7d221207351cf7635792923188ac4c8d3ce180 100644 GIT binary patch literal 7762 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 literal 7036 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 diff --git a/packages/component-library/__snapshots__/interaction-tests-form-mt-colorpicker--visual-test-colorpicker-with-help-text-snap.png b/packages/component-library/__snapshots__/interaction-tests-form-mt-colorpicker--visual-test-colorpicker-with-help-text-snap.png index 9bdd0b218d8dedb197b590452b054af77a167b5f..6487692399db9ea777bbe0497cb2a7043e461c71 100644 GIT binary patch literal 9975 zcmeHtX;4$y+HP9Q=Cn3&(hjIh-Edk|gtQ_vgjS$)R1gsn8Kcq|1wt5;KnSs$Mvze( z8Dz>4l$l@{5~d_70tzw-B#==+#t_03LgpLqSLgotZhdv{-&57QYS*s4Yp=D}TJN*o z_j#XpKfH1oqPh3zUH|}~dEuWfR{?T_56-*%~=v;`?D)t9egu0qZO2t#^H0KoTv z3ohrbp-TiDY+>FUc2UMVd?UFxr2~dM3M(==X1}-d0nzhVgVw@#y?Vb{ogt;$dj8Wm zR`)dVc1z*kFSz|w`FGp%?*Cw>S(Q)yzG_yq|CLqp>hD{BE1bRQ_tQh?qBF;AoxSrB z%|F}V)~sFuEcOHW!p-)bBpL$%XtMqMT@V0ppPan18}QF_ z+g|~mj|jg!L1&mjl{=*}Eqe%^B*m1i&P;@<`R=4_iz`+iCTAUx@$l59dS z-{|#w%J;kn1JFM4b9p}5+uzwdso2@~Cl&xWf&Nnm@Jatyelc-oVSQ4H4h;@Zuubwx zPwIQCahWNqT2GEzKN98U3MH*v2vT= ^oVOOL$|G>4HgB}s4^=bbo9+?mLCc6Snd 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 Bsin5UGMW7-uL@_ zevkjl)k$r)&Taqzpmyo+4p#tx9b4D-w7+cMnrZS?lx*F$#awYZ52)(Zn*#t0=$9PM zUA^~uaRQZ$`;OT;XPw(SVmRRv;j=eIclzjMv~|Dkp|;(X+amXcAA9+i5nX=c zt>ic7E)Bgo`qcCA(S%0La0j=;IO)P8!=v|sRY%Pe%tm+p7TfHC&>bp%yhl6kKmn?z zeS51}`cM6R3-Gh_i69)$j`M0#kDZK<4?ISQn9u(@k z77I?O3EI}~^+zTtwrLt;ry<@qny$T6qsKR` zv9s6>kUjg;lOJA?A~hGQse3JG&xeI;W5LNslHJqLX9?PkPSk@Yo$n;HRA>g+$Pn;z z%n?Bzd*;L`N!fbW^L4Hi7gug`tO{gj4lZJ?>z-XkssukGX@-s1qiRY4Tkpe9jPV-& z8Q)~)d*=yy)?+^pd5HE}M^J?sD>61xih#l^VfIay2J7^Dje43wod1--;;~zDb$Y>V zPQfMdwi?POGO$*~gLY)~mRq782Le8Asg!pN5bG8|D3$@jsI|Ex>N1ENaH%i)LiL$Tp8lfso3lPrL1-Q*gw}( z^W>Z?To?w*-m4kKUG_W~Qk`pIB$Yftt*?%TS+Ux%VpnfEB_E&avGqQu` zlE(rPBiWRQ+q0nWfNx0K74l@AXS;jQVr-y>Mqab7FvC1CB~ag7eLRitcV* zN^8TM47#}xW1)0%NLmK%P_Ac;K{M=y`EWs*{ln#6A#g^9U;jZBoy zz{sR3Vvm+)@nAV6X#+CG0t%v>7v#bqOdhMDn=m6Y*ID@--viQUzD4^~A7~|xGgA4q z;93G#uAeqB4@MeyWRFcbbFk=_;Dn&nww939eu_LfXX}Yx#!E1A-1i`@Ew9yuJ98(a zCf=dZ7T~d{6bry|HqnAf6b`%O0V#w<9vP`hH zVtG4IbuFS?3Nnyh%|jhxCp$DmWT<$=-C?%C7YM~1+=2V5#$@sOLsNMEnLYWn@@Hit z(3hsbsWxn%&W0_@!gi0I9rvNMjU`eu+zDW=*~+@OV*Q0AC;ef;%lRTRGuhSu8P~)% zCDPd2!00x z%TMA14ZSDE$An|MQBbbtRIP z{4>y=ifD&UI;1A1o1?^Q*$S3f1cre^Xkjj2na0|S(y{p)Rfl(|@SDm=@!g1QQqweJ z75tNCtu#lNiMLmjL48{MWrTHB>WbM2RyMYy8<#}z+b|}&9JIYD$qPHmZoS=`Rn9X{ zPGYXm4RNRamaB@dX~%bT0FxRvpN1LuCNtJ^BOJ~4yizVt*E{YvE4IF#+p@N})2v&HKWsROq{+`daZAzue&2SU zUh)}S{$8)vZTJ%Yp&dh6r5@hPvmadkQm>XCiMQnHb}!|gyjhLY1Dst>po}rtvV|+nmB?<2Qf40cflrD-hC4Vo4?$dVW3PL$ zdhJ*(*2n%F3D=XU1s*8ml}RNOj~qigN1S*<5~df4lM>#is;7JPZGJ-6gQLRYKZ-oC ze3DcAT%&)LVp2-0#vDxkOv>Jh4zL%eh*fZN7+Rq;U+b1d77Y0FASdWx z%lR&o`6{V&beMrTsCH57UwIHADyFJHtfxAHFt3J_jtT~o!Db7q z$ma`K8mPI+l8Ie&Z%Ki@8zKP&$-_g)A;W}nwHrBoKK3_PdWIYsjISd&+XQJ2ZT|s_ z;L-ZWUDjGIx{$Y9<>(0v9s8=eFf$?hZeZu`e$incK~c(krs9G-QxYrTr(Qe$vXL~? z72;pss#6dK&s@50i5l4uH4YCq{%(TN9c`IUSq#H+-%;++)<3`-twlv8J-KJ!__3eQ z_}bIfC2E?QPH{I}C!*Md`aam*E^1JlY=sF`uu%NE8fjlXd;2|y!$woXG@HcNF`SXa z{XQsyvtNHPwkko1w^iCF(wkYhmmi<1K5FdEvq8C-cDbkq^`gp>*Pep3kRH7h_(jvg z@w(ZOlw!Xk6$J74xFWc?7|0n}87PCv$}bJ82K7YF&#a?^y*BzkHgbOfF-E_RtaT2S zL}z*F;JrL5%FWlTl5KWVTh76$A6trHxO)>H;S&+ZPqZ$P9@pzSQ*(2b+$&cZ!v_ja z^2ZB`QwbW0EcxQ*bS(m^4$$*#Q;w6<(sry-4N~@+w}kXIxxx;xq_bbUJscdYDsT8C zkcH!?g9J@w-c>M^S!yaccFnvZZB%4Cc_nNCQ$K6bcwnJiGFo&2TGV))R2tQ_ zSmXh-3lD&L9L}+Gis9+2f}U_JH(M+i-pIMvR9Ho5NYd;K1vgP+-op0OJ}a)S!dX>R zy>Dy|KyIFQcXrrUo<2ZIkUb0ya}Jvm8L9*1Ra<|l-6`O_GcSw_z1iav@K)~1!t0L3 zXq%e%QpxVCU2HHIV9NRfAfi}V*B4G^loNkOIGk-8T!rMOH!9Okmu(23{^`1 z-H*&^M|DHn`9H=Qi5Xrs-Dug_O!S{xF^oa&UYPD&1dix)1kE|gZLElCWx_^v@(^|Z zkjd~;a4%++icIy6U-yR+iIJGm7I@gji`3o{0YTn!CG^A#TwXl;i0X)_#;vxcM7!49 zsBo!s-c@rnZy?kWs(mfg8x;JJDpHMHs+Efa2;7pCdT`s_Yx`6%ZGOFK3@e;y<59GS zZn-10IiY_Zia#9{V7mK431o$e@hfU6u`N7eROsn;T>Q@}H;Fehvr7v{O7JWqxgp9z zg=q#iVKg>2WQT=@5f!FcH(E&9w>r9L)-05{^_dFOk^KIPz>B3RZ*Wc#UT{_g7mlYy zdCx5!RK3w+P~aSvZ4s`UJi!miq~(L|d}=@M#bahO&Qy#=9i-1c3i{Q$bVM|DiWWsh zqj{U*yzKf^KKae{)8E3e>~*L5&8Z8C24Lw0JA^OuXU)rrQ>F-Zypy~8usDF6hE5A# zXr6e@UA(dJSOxzs|8CFd11fr|T^M8VGUl9?*;|oTQs7mW!)ZI{KJW6nPGVeccu@zZ2f7C!z&;X zAxJNWeIqBxA+$pGo*tJct7NP4fqy8<~CBbDnlb8uD7jaFYw6yrV+bqSC-~huUT0WE4*W; z*90#dUF};5TG&&ri5?D}gRWWvS3TsF9C+NQ!N9fnd(^iOa6G-b+jlFC6_n0{K}oYq zt(3OuaU@p2U+@iKe(CGMrf*87f;^6s{qNY{<9!5CR*7G08bl9U4PdqMrT+})G)K$~ zP7D&{oghiWp1j8ItvMR}z=n@cP2Io^Gc%EuzgYKBHe~KOzNZN#tCu715x6wF$nc6* z>A?Oz`MnSB!_GlUmkZ6UPaq_?cwSl!B22wR zA%VR=lUMPc92~0XAU67Jq)a`mKJMxM-ga^=%8gxpY!@EE?Qa~? z$|v7c9)SBRR_|vrT?`xqgFnbZplkV4-pu8 zlr5V$hfqq&oa;%&l_%$QyUmkseL1qq=`Ztv_3mm{)?pbzv8(!F)zx)%eL{MhzoB{( z$Sg49^?}nlzZpgYXyB|nOr6rcjA0A9#DtDsG(+eD!woDq2Jp&mGmzdr+M9WL5Vq<) z-;;y91J7s%xq{E&WasJXDssE{)3;%M%WDEx)6Jf*dAc{!M0+X8-Oc6IXHhd?@@CEN z{2ez@%p8lLbo4X^=_C|^Uq?czQ<`-B#6!6j&pM9XlFp*h-8?6jco|$5i7zE@n4qF* zcCGerji#VZUlq$G^$06YB+Gw=d{;w`sYdDeHTvA?X_c_T$N>AhA+P;IGyu<| zo=bWbH&E%2d|eBIql0|1b(+#cZ5YtEa*c#q8fZluW!EJvsuA&Q+WQF?w20jx4u<$1I!9@IJz$o^%p}u+Roh_=g zy>+z^P-EEqJSRW6*|NkmI6r>el)PoGKtv{~sJ} ziwpc41GfJMjPS=6{*8d{k6`@>*1vB%;z#!W$lf2>`>)?N{86X>=Q{m}+8!_ztZyOv TE zZS)chC6tf|NEf0Bp@f7;2_X=I5K;&wU-td+{eS=Y%{XVyoSAdZoaa9GeO=dGp1++O zY*bZ_r~m)}RolxKodEzP#ko8Ao85{#&G79~#bsBxv&|oX+To)-0N^OV_M(+*Ou;fM zHpWd&w)Si}CG31z@{_xVbIZ>+?-01u9B0sw#fg9ZSO_kjU-zw^}s z{QeDI4RGuWd<`EMznlNv{4hFn{=FwVer21*W>Z^^+${=i?P^k3jc|U!Ju6_=Gpuydlb%Aw>65_XCz~OR_Nz$B ze!%!s-{chi;l|2?>Scx`ul)SBT5C!m_4RbEJrLC;D0d36GT$s&=TnolmfJmA1&=GN zj5{&KXfaz5ovi;yq)e)hRtd?m?EcG|R0wKnD=#~-*Fi(R zE>6rrY>aBLnU8dK1K6p^eiAVfsIrf&x6y*xE@(pL5l~~5=r(uc@;Xr!WSZP}@rwGqvMsggb zSG89XvNgB7X*aR_hELM<@i)AZ;xY?N!$dZr9Sg3QYv8}Ul=Aq1Mp1EbalfxKRCoC~ zM;Q>TZahpP5^)qdy(*{O4*Q4$8u!bw7A+z<1#Cv+Qcx@Vu_oqqbTJ9mw*8zEiq?vg zJ~hxp|LaPNtv&K!@1Edr6TIdB3x6s0GU_D;Yf=WS-)_6v9 zq*d1Nm=2$MEilJJ2a(XfupyKOr6A)(=M(1bX)aL1_p$zSec!vKGGAQSyr-mmg&5@= z8oHWs0!0!tmejrOz#nS6F3i|jCrYPnKwc1Dhq3@UUN_B|#dyj-H0#$M4ei)SAHqm8 zT`*>G>wbph^Eg@WwLrnz5Q6gZoUCzOilA|Uv>qHanK%T3H*sioc_>!v&`i8VHiC@V z-m9j0el_oJbeyCmWNq&Fg+~PuR9nwrTKUzkH$J^riq5r2C^Dv5(CCAzlj{o~Uu`)l z$%ZzV~)bb^91?x$K(M&{pS6)LP;4OE~2+5j&l2Tid)0BN(shf7U$_5M;2&03S68@{)p)gpjaIkC zOL#`e#dTGn2{UqxrTF`%O38Qw@3d%XOx~qc^k-wB=-C+`JL{@Deo)?hA;nP_o0F5{ zoM*fw$OTbO9o`zbr-X^`&N3waMtJSzNeHp@?fbMyP6arj6&jbA*&&v^-Iip-wxqM^ z6wRm*D39joQ44RE@o#Yb{pbd<<>low>Bk}jL>~4Kt1Y^HTWnD|rDt*kW_jVR$l2R&QD{GhtzWAZ8-iBWgs z0`#`ePLE8qIY#C^D_)hy2qD2f$KaMcarUK0ZuEh7HJ((@!TyB5}_uo^dK z{Z|umvfgatX?gYm~+NVw3r3sv&o55j7C4}TJHzuktQr3CxyN)%26+qJ5o|omd0=h zVmqYBc|wzN7~_z08WtxuPoU1()(1e$W2un`Yv22x1+l}zUp-1IikayjJ47rhPF%4! zLg|?;W;&m&=SBXir&l?Q+2su!kxr5Ld|b-%-~gGhGRRD>wQ@gqIkMq4t@V06%%gUT zZ7E)GTEop{glrff^uxuscD6huiiEH>nThPEw3$+HQu^&!YV#-1(r67?eotBd=!-uF zb8y!hV)|2gE;0#(^SMjSlZ>fvW!%izyhd}ZS_^5+w{NKy+Dk}g|Z?+nU>kWfcFKU zm8=ZgDNJvnlH)SsmCvbA=dxr(l{trTQXlKE1K;DBor!Q59^(cPJcL;VxV%`}P!2q5 z;$!bo8VS7_!fLfIKC}D|D=Wzy<#0+e#hW?X(BUvuAei5$oqmf=Vj0SIZoa*{LtrM@ zZG0T9hP!xqZDC)fhtMni=t*Un4i@MSk3>rWLwS+(2UU-YjjHFO-mfJEbBh%}KVNXGQ)D+R_f>PH*R z*o%s~E>6M=--3kbl*=yv2edz<+}&BF_Q1r|Zbl}RTa1IXMQxw9Ka%CO%&I#sA7m1# zsIb~Aw9+)_ig#5hVtZ{)5##sILTS{JK}N%EH2+O+0fzB5BOQDcy)L)lWV+a-Yi2pO zMyz+|q;D=KA1vlKjz!m!;6rtfwIVtH_L`XW<6WLqL^Q6 zCitB(P+iq=!$#cP%5Nbs8*T zP7mc7TWr-80YM?v!JidjQ#*3*R^KNhh1|i>BKpI9>hPH9zn*FvR^It%Im{GA-WIRa z7Dn*=Ugd*OB;WpgZNsD2Ck7M=PVMk{U;g-+098vNE1F$s7CtXs^~l~2_K~ID-@1QQ z9l^x=r4Xj#g0`||%dQkUixk2%89d81(%S+C(VrF;(wpps$e5e-sd)Le0;$`pHJ2vQ za~h+qo$J_MYCOWVamcEMs%=vi=Vl@%#tM~HkF2RCx<28_3g-IDE0z8+V%SN z>m_AjZIMeR8?F787^jZtiG(F-J`rG%huoMA)-5rq$p=j^a)eo9uWh?bY6ywK?vda0 zEmvs~t}UBlsAxjpQi`oPhk)|xy5giUw+vcujr8TCa$`T;Q&!}erg%w+whdg`Sztzw z(FBZKOEX-{?(?N8dOT3Dlc6E%f|b<`s~b0XV|?Tbhr%mS?(XhU?z7gS@G#~-B+KOt ztpB#D0W4p0=hzUeXbO(SFTGB@U4&sCSFGGv6PoR^uhbzoYPh9K2LWnP2xOIeO`Lcl zAfy=sMLMe7Eu_hDhSRg2zKXsPx2#+DL)cSwZ=3ow_1IkiY1GsIs`quC?MVxYSK$W} zD*#cyVH7Dfq6AF!fMKFYQC?DphH92u zJ{yd_w#7OWnjg?SzwnoK99`@M7|-~3aM5uI{)LY!zT`2=SKIy{&Ah$_>ua#Sz)|d1 sSbl}&S6F`eTP9z5`bF{dfn3SvVv73nH}c;UTX6u}OAZ%n|M0&5zXKOWl>h($ From ba4e649b8caac821d1496875651c2b759d1d85f9 Mon Sep 17 00:00:00 2001 From: Nils Date: Wed, 22 Jan 2025 09:27:47 +0100 Subject: [PATCH 12/23] refactor(component-library): migrate mt-search over to spacing tokens --- .../src/components/navigation/mt-search/mt-search.vue | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/component-library/src/components/navigation/mt-search/mt-search.vue b/packages/component-library/src/components/navigation/mt-search/mt-search.vue index 04b77ad32..4a83f54f2 100644 --- a/packages/component-library/src/components/navigation/mt-search/mt-search.vue +++ b/packages/component-library/src/components/navigation/mt-search/mt-search.vue @@ -10,7 +10,11 @@ :placeholder="placeholder || t('placeholder')" /> - + @@ -67,11 +71,11 @@ defineEmits<{ } .mt-search--size-default { - padding: 0.75rem 1rem; + padding: var(--scale-size-12) var(--scale-size-16); } .mt-search--size-small { - padding: 0.25rem 1rem; + padding: var(--scale-size-4) var(--scale-size-16); } .mt-search__input { From 137147c9fbdcf0e1836342289bc29a5c6b51f14b Mon Sep 17 00:00:00 2001 From: Nils Date: Wed, 22 Jan 2025 09:28:17 +0100 Subject: [PATCH 13/23] refactor(component-library): remove default appereance from mt-search --- .../src/components/navigation/mt-search/mt-search.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/component-library/src/components/navigation/mt-search/mt-search.vue b/packages/component-library/src/components/navigation/mt-search/mt-search.vue index 4a83f54f2..be7721b7d 100644 --- a/packages/component-library/src/components/navigation/mt-search/mt-search.vue +++ b/packages/component-library/src/components/navigation/mt-search/mt-search.vue @@ -88,6 +88,7 @@ defineEmits<{ line-height: var(--font-line-height-xs); color: var(--color-text-primary-default); outline: none; + appearance: none; -webkit-appearance: none; -moz-appearance: none; From 3863b6468011697d57daabf6d8e16412a82fd6c0 Mon Sep 17 00:00:00 2001 From: Nils Date: Wed, 22 Jan 2025 09:42:29 +0100 Subject: [PATCH 14/23] fix(component-library): announce mt-search as a search input --- .changeset/wise-squids-brush.md | 5 +++++ .../src/components/navigation/mt-search/mt-search.vue | 9 ++++++++- 2 files changed, 13 insertions(+), 1 deletion(-) create mode 100644 .changeset/wise-squids-brush.md diff --git a/.changeset/wise-squids-brush.md b/.changeset/wise-squids-brush.md new file mode 100644 index 000000000..c0ea228d9 --- /dev/null +++ b/.changeset/wise-squids-brush.md @@ -0,0 +1,5 @@ +--- +"@shopware-ag/meteor-component-library": patch +--- + +Announce mt-search as a real search input diff --git a/packages/component-library/src/components/navigation/mt-search/mt-search.vue b/packages/component-library/src/components/navigation/mt-search/mt-search.vue index be7721b7d..788200fdf 100644 --- a/packages/component-library/src/components/navigation/mt-search/mt-search.vue +++ b/packages/component-library/src/components/navigation/mt-search/mt-search.vue @@ -6,7 +6,7 @@ @change="$emit('change', ($event.target as HTMLInputElement).value || '')" class="mt-search__input" :disabled="disabled" - type="text" + type="search" :placeholder="placeholder || t('placeholder')" /> @@ -92,6 +92,13 @@ defineEmits<{ -webkit-appearance: none; -moz-appearance: none; + &::-webkit-search-cancel-button, + &::-webkit-search-decoration, + &::-webkit-search-results-button, + &::-webkit-search-results-decoration { + display: none; + } + &::placeholder { color: var(--color-text-secondary-default); } From cdf2c371ceb793b9e35ac1e366cefa5adf29b619 Mon Sep 17 00:00:00 2001 From: Nils Date: Wed, 22 Jan 2025 09:42:54 +0100 Subject: [PATCH 15/23] test(component-library): make sure search has a default placeholder --- .../navigation/mt-search/mt-search.spec.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 packages/component-library/src/components/navigation/mt-search/mt-search.spec.ts diff --git a/packages/component-library/src/components/navigation/mt-search/mt-search.spec.ts b/packages/component-library/src/components/navigation/mt-search/mt-search.spec.ts new file mode 100644 index 000000000..2e3101fbe --- /dev/null +++ b/packages/component-library/src/components/navigation/mt-search/mt-search.spec.ts @@ -0,0 +1,12 @@ +import { render, screen } from "@testing-library/vue"; +import MtSearch from "./mt-search.vue"; + +describe("mt-search", () => { + it("has a default placeholder of search", async () => { + // ARRANGE + render(MtSearch); + + // ASSERT + expect(screen.getByRole("searchbox")).toHaveAttribute("placeholder", "Search"); + }); +}); From 4c83bae5becf72085f3970f50004868133622c9e Mon Sep 17 00:00:00 2001 From: Nils Date: Wed, 22 Jan 2025 10:00:46 +0100 Subject: [PATCH 16/23] test(component-library): set a custom placeholder --- .../navigation/mt-search/mt-search.spec.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/component-library/src/components/navigation/mt-search/mt-search.spec.ts b/packages/component-library/src/components/navigation/mt-search/mt-search.spec.ts index 2e3101fbe..55d42b7b4 100644 --- a/packages/component-library/src/components/navigation/mt-search/mt-search.spec.ts +++ b/packages/component-library/src/components/navigation/mt-search/mt-search.spec.ts @@ -9,4 +9,16 @@ describe("mt-search", () => { // ASSERT expect(screen.getByRole("searchbox")).toHaveAttribute("placeholder", "Search"); }); + + it("has the specified placeholder", async () => { + // ARRANGE + render(MtSearch, { + props: { + placeholder: "Find me", + }, + }); + + // ASSERT + expect(screen.getByRole("searchbox")).toHaveAttribute("placeholder", "Find me"); + }); }); From 42fe27da84c8c5d4ab7404e582c6bac8fc976161 Mon Sep 17 00:00:00 2001 From: Nils Date: Wed, 22 Jan 2025 10:04:09 +0100 Subject: [PATCH 17/23] test(component-library): search can be disabled --- .../navigation/mt-search/mt-search.spec.ts | 33 +++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/packages/component-library/src/components/navigation/mt-search/mt-search.spec.ts b/packages/component-library/src/components/navigation/mt-search/mt-search.spec.ts index 55d42b7b4..16f751319 100644 --- a/packages/component-library/src/components/navigation/mt-search/mt-search.spec.ts +++ b/packages/component-library/src/components/navigation/mt-search/mt-search.spec.ts @@ -1,5 +1,6 @@ import { render, screen } from "@testing-library/vue"; import MtSearch from "./mt-search.vue"; +import { userEvent } from "@storybook/test"; describe("mt-search", () => { it("has a default placeholder of search", async () => { @@ -21,4 +22,36 @@ describe("mt-search", () => { // ASSERT expect(screen.getByRole("searchbox")).toHaveAttribute("placeholder", "Find me"); }); + + it("disables the search", async () => { + // ARRANGE + render(MtSearch, { + props: { + disabled: true, + }, + }); + + // ASSERT + expect(screen.getByRole("searchbox")).toBeDisabled(); + }); + + it("does not change the value when the search is disabled", async () => { + // ARRANGE + const handler = vi.fn(); + + render(MtSearch, { + props: { + modelValue: "Hello", + disabled: true, + "onUpdate:modelValue": handler, + }, + }); + + // ACT + await userEvent.type(screen.getByRole("searchbox"), "World"); + + // ASSERT + expect(screen.getByRole("searchbox")).toHaveValue("Hello"); + expect(handler).not.toHaveBeenCalled(); + }); }); From 13dd546bf10403e073051cac5351c484df02652d Mon Sep 17 00:00:00 2001 From: Nils Date: Wed, 22 Jan 2025 10:05:59 +0100 Subject: [PATCH 18/23] test(component-library): change the value when typing in the input --- .../navigation/mt-search/mt-search.spec.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/packages/component-library/src/components/navigation/mt-search/mt-search.spec.ts b/packages/component-library/src/components/navigation/mt-search/mt-search.spec.ts index 16f751319..e35c970d3 100644 --- a/packages/component-library/src/components/navigation/mt-search/mt-search.spec.ts +++ b/packages/component-library/src/components/navigation/mt-search/mt-search.spec.ts @@ -3,6 +3,25 @@ import MtSearch from "./mt-search.vue"; import { userEvent } from "@storybook/test"; describe("mt-search", () => { + it("changes the value when typing in the search", async () => { + // ARRANGE + const handler = vi.fn(); + + render(MtSearch, { + props: { + modelValue: "", + "onUpdate:modelValue": handler, + }, + }); + + // ACT + await userEvent.type(screen.getByRole("searchbox"), "Hello"); + + // ASSERT + expect(screen.getByRole("searchbox")).toHaveValue("Hello"); + expect(handler).toHaveBeenCalledWith("Hello"); + }); + it("has a default placeholder of search", async () => { // ARRANGE render(MtSearch); From 622a411244ab458b969df300ab60f1c18ac6e774 Mon Sep 17 00:00:00 2001 From: Nils Date: Wed, 22 Jan 2025 10:10:07 +0100 Subject: [PATCH 19/23] test(component-library): removing focus from the input emits a change vent --- .../navigation/mt-search/mt-search.spec.ts | 41 +++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/packages/component-library/src/components/navigation/mt-search/mt-search.spec.ts b/packages/component-library/src/components/navigation/mt-search/mt-search.spec.ts index e35c970d3..ea2858fa4 100644 --- a/packages/component-library/src/components/navigation/mt-search/mt-search.spec.ts +++ b/packages/component-library/src/components/navigation/mt-search/mt-search.spec.ts @@ -22,6 +22,47 @@ describe("mt-search", () => { expect(handler).toHaveBeenCalledWith("Hello"); }); + it("emits a change event when typing in the search and then removing the focus from the input", async () => { + // ARRANGE + const handler = vi.fn(); + + render(MtSearch, { + props: { + modelValue: "", + onChange: handler, + }, + }); + + // ACT + await userEvent.type(screen.getByRole("searchbox"), "Hello"); + await userEvent.tab(); + + // ASSERT + expect(screen.getByRole("searchbox")).toHaveValue("Hello"); + + expect(handler).toHaveBeenCalledWith("Hello"); + }); + + it("emits an empty string when clearing the search and then removing focus from the input", async () => { + // ARRANGE + const handler = vi.fn(); + + render(MtSearch, { + props: { + modelValue: "Hello", + onChange: handler, + }, + }); + + // ACT + await userEvent.clear(screen.getByRole("searchbox")); + await userEvent.tab(); + + // ASSERT + expect(screen.getByRole("searchbox")).toHaveValue(""); + expect(handler).toHaveBeenCalledWith(""); + }); + it("has a default placeholder of search", async () => { // ARRANGE render(MtSearch); From d90cf632b7d4407db5358188ff2fb4bc897b3212 Mon Sep 17 00:00:00 2001 From: Nils Date: Wed, 22 Jan 2025 10:10:48 +0100 Subject: [PATCH 20/23] refactor(component-library): remove unnecessary short-circuit in mt-search event --- .../src/components/navigation/mt-search/mt-search.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/component-library/src/components/navigation/mt-search/mt-search.vue b/packages/component-library/src/components/navigation/mt-search/mt-search.vue index 788200fdf..3bbba0c3e 100644 --- a/packages/component-library/src/components/navigation/mt-search/mt-search.vue +++ b/packages/component-library/src/components/navigation/mt-search/mt-search.vue @@ -3,7 +3,7 @@ Date: Wed, 22 Jan 2025 10:21:59 +0100 Subject: [PATCH 21/23] test(component-library): remove unecessary storybook test --- .../mt-search.interactive.stories.ts | 22 ------------------- 1 file changed, 22 deletions(-) diff --git a/packages/component-library/src/components/navigation/mt-search/mt-search.interactive.stories.ts b/packages/component-library/src/components/navigation/mt-search/mt-search.interactive.stories.ts index fea600c5d..79adc21a2 100644 --- a/packages/component-library/src/components/navigation/mt-search/mt-search.interactive.stories.ts +++ b/packages/component-library/src/components/navigation/mt-search/mt-search.interactive.stories.ts @@ -1,8 +1,3 @@ -import { within, userEvent } from "@storybook/test"; -import { expect } from "@storybook/test"; - -import * as test from "@storybook/test"; - import meta, { type MtSearchMeta, type MtSearchStory } from "./mt-search.stories"; export default { @@ -10,23 +5,6 @@ export default { title: "Interaction Tests/Navigation/mt-search", } as MtSearchMeta; -export const TestInputValue: MtSearchStory = { - name: "Should keep input value", - args: { - change: test.fn(), - }, - play: async ({ args, canvasElement }) => { - // we can't use canvasElement because it is not available anymore - const canvas = within(canvasElement); - - await userEvent.type(canvas.getByRole("textbox"), "Shopware"); - await userEvent.click(canvas.getByText("hidden")); - - await expect((canvas.getByRole("textbox") as HTMLInputElement).value).toBe("Shopware"); - await expect(args.change).toHaveBeenCalledWith("Shopware"); - }, -}; - export const VisualTestDefaultSize: MtSearchStory = { name: "Render the default sized search", args: { From 71088d098a8c4f0cd8d9b555bbafcee17371746c Mon Sep 17 00:00:00 2001 From: Nils Date: Tue, 21 Jan 2025 15:36:42 +0100 Subject: [PATCH 22/23] build(component-library): add types to storybooks test runner config --- packages/component-library/.storybook/test-runner.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/component-library/.storybook/test-runner.ts b/packages/component-library/.storybook/test-runner.ts index 91b9d1ed1..00f5d94c8 100644 --- a/packages/component-library/.storybook/test-runner.ts +++ b/packages/component-library/.storybook/test-runner.ts @@ -1,3 +1,5 @@ +import type { TestRunnerConfig } from "@storybook/test-runner"; + const path = require("path"); const { toMatchImageSnapshot } = require("jest-image-snapshot"); @@ -51,4 +53,4 @@ module.exports = { customReceivedDir: customReceivedDir, }); }, -}; +} satisfies TestRunnerConfig; From 2d21e03b92559e29f8597bdba89dd5284ee6f14f Mon Sep 17 00:00:00 2001 From: Nils Date: Wed, 22 Jan 2025 10:45:46 +0100 Subject: [PATCH 23/23] ci: disable automatic comitting for forks --- .github/workflows/tests.yml | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index 2677bd71d..06e9022ab 100644 --- a/.github/workflows/tests.yml +++ b/.github/workflows/tests.yml @@ -23,6 +23,11 @@ jobs: uses: actions/checkout@v4 with: ref: ${{ github.head_ref }} + if: ${{ github.event.pull_request.head.repo.full_name == 'shopware/meteor' }} + + - name: Checkout + uses: actions/checkout@v4 + if: ${{ github.event.pull_request.head.repo.full_name != 'shopware/meteor' }} - uses: pnpm/action-setup@v3 with: @@ -54,7 +59,7 @@ jobs: run: pnpx turbo run lint:types - name: Commit changes - if: always() + if: always() && ${{ github.event.pull_request.head.repo.full_name == 'shopware/meteor' }} uses: stefanzweifel/git-auto-commit-action@v5 with: commit_message: "Apply code formatting and fixable ESLint issues"