From cacd3979e88bd49533c943d556910671da64cf76 Mon Sep 17 00:00:00 2001 From: Ilya Bychek Date: Wed, 24 Apr 2024 14:31:56 +0300 Subject: [PATCH] feat(plasma-new-hope): Add docs --- .../plasma-web IconButton -- _pin.snap.png | Bin 0 -> 7932 bytes .../plasma-web IconButton -- _size.snap.png | Bin 0 -> 5520 bytes .../plasma-web IconButton -- _view.snap.png | Bin 0 -> 12899 bytes .../plasma-web IconButton -- simple.snap.png | Bin 0 -> 2967 bytes ...sma-web IconButton -- with Loader.snap.png | Bin 0 -> 8165 bytes .../plasma-web IconButton -- _pin.snap.png | Bin 0 -> 7948 bytes .../plasma-web IconButton -- _size.snap.png | Bin 0 -> 5585 bytes .../plasma-web IconButton -- _view.snap.png | Bin 0 -> 12863 bytes .../plasma-web IconButton -- simple.snap.png | Bin 0 -> 2991 bytes ...sma-web IconButton -- with Loader.snap.png | Bin 0 -> 8235 bytes packages/plasma-b2c/api/plasma-b2c.api.md | 11 +- .../IconButton/IconButton.component-test.tsx | 1 + .../IconButton/IconButton.config.ts | 10 +- .../IconButton/IconButton.stories.tsx | 51 ++--- .../src/components/IconButton/IconButton.ts | 2 +- .../src/components/IconButton/index.ts | 2 - .../src/components/Button/Button.styles.ts | 98 +++++++++- .../IconButton/IconButton.styles.ts | 23 +-- .../IconButton/IconButton.tokens.ts | 4 - .../src/components/IconButton/IconButton.tsx | 72 ++----- .../components/IconButton/IconButton.types.ts | 15 -- .../src/components/IconButton/index.ts | 3 +- .../IconButton/variations/_disabled/base.ts | 3 - .../variations/_disabled/tokens.json | 1 - .../IconButton/variations/_focused/base.ts | 3 - .../variations/_focused/tokens.json | 1 - .../IconButton/variations/_size/base.ts | 3 - .../IconButton/variations/_size/tokens.json | 1 - .../IconButton/variations/_view/base.ts | 3 - .../IconButton/variations/_view/tokens.json | 1 - .../IconButton/IconButton.config.ts | 10 +- .../IconButton/IconButton.stories.tsx | 30 +-- .../IconButton/IconButton.config.ts | 10 +- .../IconButton/IconButton.stories.tsx | 30 +-- packages/plasma-web/api/plasma-web.api.md | 10 +- .../IconButton/IconButton.component-test.tsx | 180 ++++++++++++++++++ .../IconButton/IconButton.config.ts | 10 +- .../IconButton/IconButton.stories.tsx | 51 ++--- .../src/components/IconButton/IconButton.ts | 2 +- .../src/components/IconButton/index.ts | 2 - packages/sdds-serv/api/sdds-serv.api.md | 4 +- .../docs/components/IconButton.mdx | 138 ++++++++++++++ 42 files changed, 538 insertions(+), 247 deletions(-) create mode 100644 cypress/snapshots/b2c/components/IconButton/IconButton.component-test.tsx/plasma-web IconButton -- _pin.snap.png create mode 100644 cypress/snapshots/b2c/components/IconButton/IconButton.component-test.tsx/plasma-web IconButton -- _size.snap.png create mode 100644 cypress/snapshots/b2c/components/IconButton/IconButton.component-test.tsx/plasma-web IconButton -- _view.snap.png create mode 100644 cypress/snapshots/b2c/components/IconButton/IconButton.component-test.tsx/plasma-web IconButton -- simple.snap.png create mode 100644 cypress/snapshots/b2c/components/IconButton/IconButton.component-test.tsx/plasma-web IconButton -- with Loader.snap.png create mode 100644 cypress/snapshots/web/components/IconButton/IconButton.component-test.tsx/plasma-web IconButton -- _pin.snap.png create mode 100644 cypress/snapshots/web/components/IconButton/IconButton.component-test.tsx/plasma-web IconButton -- _size.snap.png create mode 100644 cypress/snapshots/web/components/IconButton/IconButton.component-test.tsx/plasma-web IconButton -- _view.snap.png create mode 100644 cypress/snapshots/web/components/IconButton/IconButton.component-test.tsx/plasma-web IconButton -- simple.snap.png create mode 100644 cypress/snapshots/web/components/IconButton/IconButton.component-test.tsx/plasma-web IconButton -- with Loader.snap.png create mode 120000 packages/plasma-b2c/src/components/IconButton/IconButton.component-test.tsx delete mode 100644 packages/plasma-new-hope/src/components/IconButton/IconButton.types.ts delete mode 100644 packages/plasma-new-hope/src/components/IconButton/variations/_disabled/base.ts delete mode 100644 packages/plasma-new-hope/src/components/IconButton/variations/_disabled/tokens.json delete mode 100644 packages/plasma-new-hope/src/components/IconButton/variations/_focused/base.ts delete mode 100644 packages/plasma-new-hope/src/components/IconButton/variations/_focused/tokens.json delete mode 100644 packages/plasma-new-hope/src/components/IconButton/variations/_size/base.ts delete mode 100644 packages/plasma-new-hope/src/components/IconButton/variations/_size/tokens.json delete mode 100644 packages/plasma-new-hope/src/components/IconButton/variations/_view/base.ts delete mode 100644 packages/plasma-new-hope/src/components/IconButton/variations/_view/tokens.json create mode 100644 packages/plasma-web/src/components/IconButton/IconButton.component-test.tsx create mode 100644 website/plasma-web-docs/docs/components/IconButton.mdx diff --git a/cypress/snapshots/b2c/components/IconButton/IconButton.component-test.tsx/plasma-web IconButton -- _pin.snap.png b/cypress/snapshots/b2c/components/IconButton/IconButton.component-test.tsx/plasma-web IconButton -- _pin.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..2a9050f4672731771ce80726b75f21a6bc06612d GIT binary patch literal 7932 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 literal 0 HcmV?d00001 diff --git a/cypress/snapshots/b2c/components/IconButton/IconButton.component-test.tsx/plasma-web IconButton -- _view.snap.png b/cypress/snapshots/b2c/components/IconButton/IconButton.component-test.tsx/plasma-web IconButton -- _view.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..027b65fa2933e506e6005d27ae6f01205f3d310f GIT binary patch literal 12899 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 literal 0 HcmV?d00001 diff --git a/cypress/snapshots/b2c/components/IconButton/IconButton.component-test.tsx/plasma-web IconButton -- simple.snap.png b/cypress/snapshots/b2c/components/IconButton/IconButton.component-test.tsx/plasma-web IconButton -- simple.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..1c5d1207c0ce2e93919f3c5058fdd59dcd7218bd GIT binary patch literal 2967 zcmeHJ|4&m_6u)%>PA9k+A<>F%GgPC}=_KGp8Xd~i1avbp1Y31FbY#|2uzeKz2*!XT zP_UvFYU?0NvoxcNjVVuCiep-`+CB+WL`ut-enFfR+hTcbdEI+M-Q4ycj33?)_nvd^ z`J8h;pZo6ly_p#c=P#WP09d%|)AY{(p!mpdUL>(&d}#X?fCbE5>D%`6DbH?is7i>u zoiNB_?!10ZQnW2Xj$>)tz!Ou{a{;zA(lZk3>?28hs8WUBx}**s6HHoL;i3qIGp_!xK{wm zp@rZ>6$LnxK!-LGT{726S|erLcQOL=2eI=UK6{B*)vfeK%!p%;Dm zT*9BHY-wpJ4ffm2t~5VFU~NX4Y4XyIjL=YwdiZpTePl(LPvE$p*WK5bQ!5gwhqt<+ ztajh`^av0iX0$Xqnh`H&UFDn`Qfx3M8aZ`8qzEhUAcLD!? zQuc%dElp68CeU%V6{(1Ur#f>cyG6oHVB%Uq>)_)X1v$k;Z)U6+@z5$|JY=sYmv7FZ zF=#&*$Lvz0X-&$2Gg&W*WAfhv9Zdz};w`*!d(ajZ${?piD^aV}p}{Cd*VQe&IY5hy zSZK*?>pd3kxty1mXP0@s-jGdt^{T_;*{Dz`5Xk!#C{N}|gQG;{vg+z;3s)$Vg$Ibz z6X|qrNl9bp&>}GSbuCxEJi5}t<#6f+W)$V3|8N+q^+u;qqY>Be@caG{0mtlc9M8B~3Ep|<&W`cT3`Pt%U2H&5v)Nn-L6V-H9wI@gvU8|TkeHZQh+-H7%9WeVWkqMs zTrwJsQkl$2lo&2bp%$XAkC<>0g_Zhm*-WqDdcuV-UDBp*$2gs)CJMmAgd0h%YF6l| z48}37gh*tF7p$YvXcSkX~*R_=Ls6*TcmDaQSfG#kmoLOqvHnURI-k78h zJWzQEwr~D3YP5hAJUDLEH7((}t)^_kNRay)(%i3MyVkO>-3Q3A-{@s70IBaZY6caI z>60?SIHK*}>bG#QK2#VB_+L<6>jP$9yVw@S{n&F6EG1RdWI?zz*3{2&9*>b8MJlg< zg3zGzJWbZMhpxNGtG>)ES(BCeJe?`T97I+pA^!rE?ot*U=)oQt(k_t#TY+_Dc)p7% zTfJhcBg$j-wB~ zwdt>$>2Iz5_q8=^e3N{$9s19|+bm6HX)^Q9nPtNNhzWR{!tn8xx{AyP#Dg2`+L4*w Iy8Up)A1%Y&9smFU literal 0 HcmV?d00001 diff --git a/cypress/snapshots/b2c/components/IconButton/IconButton.component-test.tsx/plasma-web IconButton -- with Loader.snap.png b/cypress/snapshots/b2c/components/IconButton/IconButton.component-test.tsx/plasma-web IconButton -- with Loader.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..e566cade406b625aa8885724a084b78775fd69ca GIT binary patch literal 8165 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 SsKD!cDzviprF=#6kbePRaBL3% literal 0 HcmV?d00001 diff --git a/cypress/snapshots/web/components/IconButton/IconButton.component-test.tsx/plasma-web IconButton -- _pin.snap.png b/cypress/snapshots/web/components/IconButton/IconButton.component-test.tsx/plasma-web IconButton -- _pin.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..ce1f2fc8ddcef4d8e18502f3da22387024eff806 GIT binary patch literal 7948 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 literal 0 HcmV?d00001 diff --git a/cypress/snapshots/web/components/IconButton/IconButton.component-test.tsx/plasma-web IconButton -- _size.snap.png b/cypress/snapshots/web/components/IconButton/IconButton.component-test.tsx/plasma-web IconButton -- _size.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..7af5d3e58cd42f39e64fe2bb03e0d4ba0e96799d GIT binary patch literal 5585 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 literal 0 HcmV?d00001 diff --git a/cypress/snapshots/web/components/IconButton/IconButton.component-test.tsx/plasma-web IconButton -- _view.snap.png b/cypress/snapshots/web/components/IconButton/IconButton.component-test.tsx/plasma-web IconButton -- _view.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..c05d1f83a3f952a38cd78cf39775d8e7cc6eaa46 GIT binary patch literal 12863 zcmeIZS6q`z)Gw@}q7+f-q9R3*-lQpl0%Afp1P}?J(v&Ko^s-R_flv~pH_-ql3T$Ch zLRD%)RjTw3O794voC%;?_vd@@UVOiEb1w2=p3Ew<*34S-Uuz81*1SPWb&6`=zJ0V% zh%#*7zWqz&&ymC6OX;I8|pKhnPFdwh3*G`qbjC*h{$dX)Gq9I3>k z+{c0PMc!;5%Cr7pM|G2aWeL~YQc|n!@kI6F7t;bYm6UF?Nv27w-21EdF7h=RiRBsf zu8W^hJQin(5Dw;c0 z;2acw? z+}uonNJ>ho0}?)+G*OQg8;gdx>$bK+Xzr4msNtodV3BO+>D#5t8TOyMyXziaa-BPO z*=5FTyfM+H>z_a|)9SfFI-eLu0XGDLBEU&kf-@Uxj3oJ_bdH@_R1mBpY9GRu`g}U-j8u-I$r(5{{R)PeTYhWk=ST z=h^kvN|&u^j5Wm9^x&OXshZ?Tfj?l@? z?HhHBMWw;8bM+EU;pVK5A3uhm8Cd?JWs`c?VdNs#>@`SjGSJ<>B~|k_Cnw^@S+{2_ zTwJ&9Gw0tR^4>Wr-8v)&??h&b?Y`aXA;8~R%RC6&VWk93eWI-l=KxVGM24J4|ylBF}( zni-AxETHW->ox0vnV?kozQ1i^VuDk*$az{3ebF88|6&@3!etod!!q=Z-TdGsOU-H! zv`W@h#?aHUia7Ekm#ig!blvXj_4Rd#E-+ymc!R+qgt?%nO8&Dj!TLQfBC0OG@;=O= z=8TJWhNN}--1{&uWGmv~$3qB*Dn|HQEH;o@xL_X?eV9vBJxx8fyhdTmVQWZa>xn6z zG*h(prAEH`1)mN?1FS@5V^@w~CZVBQOhUIS4>2RI?yOE)71UkF@kAGKuwE*-e4;yv<*}Kr%~85~XwQf95>J#@2~<;w8Hs%}wUh z+T5&Yx3(}kVpqCmVLUriG;7hBZT`-rEGa6A3D(xvrO^&&yTA^Up)v1Hifi%+L<(O0d+ppv~G; z$m3!v+|cHEK1cK~Mu{*i^_0cO+n2`b5MNynzHehg-pM0C1TlA)kk9etFXO=s%5T<1 zi}1QEHb^`1-}>kNiI9+xsUCd9%8GNSm5mK|M_*qkH&iKwAX)?*XOL&ZI@ytxo|@|S z`u6SH1R;~sgq{ZJe)U@5JY`c;E)Y8~zz?r~vC0iJ<|Ds2a;B7I_sjf4ej^Y1om|># zZ^pog2xGuNplY=FM95=!gwqy+RYzA)u?Y~V< zzRt>`+ZDc6t6y4vwa2;J7V~w!hTZa9o=xWyZs=3SKSXd}{?_((G!6u0oeag4t2irb zYZP~gu`j=RvV0<3BVH=RDuhis6b>H8K&W7RQ+}P9kC4xT=vP7wbpOj1C$bv#1VZ595CDh??d@h;$zz zBfqZ};xd_$pKa4A9;y#)A8q8!%GGNgZB(5g>lDt7CG5*U;L*V%r7>YX8^fn%9{z$TSTz+dZ>f$}_!t##nM2RN3h~&*F%ca#-33O{~>qFoor$*WF-@-mkCCCeQ)Qf8W_Z>)ugx z-_CAKIY#vEfewTd?UgH6mX?j40~Q#_?KVKUN!+oaMRRWkbJh%wcMobw znVp_$U^%+3I+xhsOJWc0@m3m{SY$nUC96ED5ebVuk%I6|Uo`{b1R6u?WoV)3ErUDz z?mf%eYC;-r8TvjgVdZN0*oV~WH5`~!I9f?~DL3z_QWHuhO^5qaI-AL@$pLveANFnZ zzGgKc)qH@gMzUM>Y(K1?@7i>%rf(7(y0V2(S?!~Nq7Ue5O8YWUzN z1+WXWQ7idb2?=}Ko^RMsUjnvR{+9K|y2M_Vc9WwJZ;qI6;T6X%_XwciSGMDyb3a(3 zf)BEvt%I~_B@y1V=VX~-CIIO!iPkdsrr%@%pUkb`o{W47((wDMjP4|;p1p#uKr~bj zkK}&9Kn+hRQ_o(ngJ+zC>YWE$xa!YI+0N6_*DzBEmZ4>=KT_?&1ko@xsy?41fqP7x zLRJ?7OOO*XPv}!NX2$Ou&73va>lD|c%5pwbI&i0_?F)JAduZI^blnptiBppYB*E%D z^@6iv70QcJdGkmxRZQ)IDVx^%Jz`Vfncd2N);P z55FvLZ-m%=#Ir8zQ1p5T*i0iq`X(pfAH;~LkN=WsG8$gy(oXTV+Q&ZvhznQsfNT`^ zgEtJa!1NbT9@|e2;CJ<_#9CNe9wbk1IGp zk-oB*S7%m2&cpJ48XQwU6@^13|-DG|Dm;F!TS4A#_7kQZmG6=~? zzxK9z>0!U)y#G>P5Le%-@SxuFH(7QDcyO+69Xe#}D!I_c9tkC`Nl5&(p_{;-VF$GB z{dkjtA?QcNK{OE*0fXJ!@Uf;D5eGrwkS{(g$4>LeZkm7T)ESH}0t+!$qS*xZ$wUQ> zxyC21KC_uFPBCw}8V&i}m_)d`;iylZ3DqCK(p5$)DsJncTR0|hw5|?FgFzq-j$t6U z#so-Pbvyc<*mbbeZoQ;hoPe}Wp1%@N$X5!K-IL_SzAvT%SgjAa(E)%ebWi& z4!P&cFPOjvZ7av4tTd9IHwC~r{*UfO5W^+@at`M6PEaBzEr+{ zxYiA+-Z;!+NDnf*o$r3v?F|BZX?i(iHDDI|uy+(Stg9gDxTUUAyl7cIB>~nDBkRlU zIYSU{YdyE@DJVT8RM1CFIk)F282co{u3g@qB0Lx#WKLvF73WfYzfWUag{(iuhe_s` zellJE+H0!d#$Y4^czBM7@fTa4RkEmlFqb6~)S6iR{HDvPjmcon$LSo<=CTWp329os zkIPI32WLJgCCH0O-|!q)J=g1G2Y>Ybt>NSg4_3#*gA{Y zjk}WP<0&4#WDZ@rhAls;OCy@c#1rbM&KVh-3@*59W)lLX9-mZC zWB{9w`%ezuLBoGYij1rW0K5gK1bR~p413&kM7cH_dHjGu)J+{7B@GSQiWC?Y04_om zOQ4t|r@4Vjl=+C_k!Q!lxxY0q$ZCqIxO;efo1NvYCOixhg9%3yBUR6n0TCcItwwUx ziTmHiBLH4JZfYh&=7D|-=QlG@IpV9B0#wS{q$R8{v-f_35Ce9SB_`}&NJvCG#(9s_I#G+=$FnyQF} zb5;`|U>_AeOy}bw)9BWNq0>me#0s~s_;Je-f zy3fU$`}?)5)=8v5F>wGaVDzTD`1BKa9c7N;sS^jkVf9jB9Mur3dq_AxSO4#41m z(ivb9I55v$I0|IqfC_CvVrZZz`Q6TO=2O}8-(URa^jt9#-@n0QvN6PrZD%f>J5;*X zV2_SFbJ=+3LB1{vysFXuo;IOtFGrJ(%Yo?lvp(|s!wrTbQIUfO3-ntY^eU0PnA zZ`ILyZ(hd~Y7QX7)R*^9fp0)ALvmJN0CE{m@(9h#lXA?+$S95lq@UZ{tI_Ax?mu|I zAxQ?Klyqk?MMd!l9UXdm3&7x!i;IqlNs}M5@pEwIziGyjo0o^SwzlT#=<2GS%($H! z1h_>B8Yo&@3t+9RtT;OWLeB&cxT8DUoVvHSx3#0ArM2}LAO;ZR7h+YrHk|H1xw-Gn zh$n9w8bXbLMEuN*ouh_^#t48IiY_kFpr&(CQW9(#?F)`4|JfBh{N`VQ=|O2}JdQxf zX>wh_%j*iD1$mE*BfLMgxw>+9}h{v&a5ap61p@u*(L?dxEaT9jZ)Zf@jjvJ5aQNB%Fr zPPg*rzeE=pKnmB(c$JY6a$YU!6ENG&AIg!h3>Q zZTvvWt!%TSWT)K(hQ{xC5Oe>hhqTBJ1AyUIVsaH>wb!L(&&9U3qZxZfG##st1?V~) zZL+=IvFqX;2C2Yt2w-@69`%88Y7vlj$iPuOK?c>oz1csWle{Td(+p;Sfkwp0IB;UI z85!m?J$Qt3r}=3$ph0eKE&x@#ryd^mt+@c!=S|)#Ihgxk5KScjL;n8*aNNHcELaE8 zjWXY@#AFL{>2e%Yc}k8OWcUbx8H`c!fbIpRU<~e-AS~nf0W1~AxgAuu z^DZsT-^%YeMEA)49eAmD#P{BNh*eM(r$Ln1agKv9dc~_dwWo{DQ@3Cec0DqO0UNYA zE0&Ory!Rd)S07Qs`JR0!a2S3rCf;1d!YXZd8iW-&D!&6*P*vM0n#IMPst!F<2ayIm zz>1eK<~Rrha2dV7#r+HfN8kOYBrIr#Yr-rsrxd*9Ksdeox8f1t8c=uR(ugt#|2ht| zz#s->7=o|!Xv8UlsEGmElVQ`n_XKTXHWG+XJc4B4I0*O?vcbtUl;1HSThJ7MD-csb zcmd@+7A{a7WZ~k4MVUW44%7#D`~5A9_JxP90NZ=WN){}fe}w#376r^%C+^5`aOW>K z)crN*Q}_i2FrS2pomYxSz^-XN_=iI5A5zZ_Yy)^~YwPL8SA6o~YSY$>#*V^HCs&bx z+5lNpHFLF?*M>oTETU<)zA(4o|)jY6Ve_jZs$9BdoYQnthw8e|kf{WK`b2C1v4m;mYhQ>uq80 zrJg2Moj0RO<6FY)Wdp0RmsV)}n^6lV&TcmxOX};;z``tKmZM2-89hzbB_y|%57Z1w zzOoUM_<k(I$(RvlQLiK;bls-0G6ZfbzYv0U6b!vnBNAkc%iPT`mwh3r)kcbQX`I*l@_5dTaHp#PyR)jcx9Sz~j>sP6(~SG8|KtakY^rci)z(DqttxF6m@Az6-}WzT08)dw<|Z8PS%j{1vMC;CC%>qv5Z$FsK5&D>f9cX!X&K9M8oQXBn4a2D$>LZt z>AGw%e)gM&=eN)H;c+#_eT~oJj$Twxx^CyxB-K~1`*`s|j9hT0SCQM)D7lKta^3%P z#u;luuc)OMKJtvUYsoK6db-~G!)<3eRWk1`2s*}l6}LFNG`97Jwm0-S0Rn zrrJX#M}BBAGGkR5GC3|dR+=vDU|n+xmXEh&!}}9+2xLYxxWYBEHXWtCHZz?d;DY)k z^dT7LC|z%$E=-Y`oD)Mz>Z=4Q$>@R+JCZ}Kc2(}|$pO^}e^pe($WMu0TJ}TWOM;cu zsts3%s2dX=%x!NV?9Q|20GABwj&S4Ou1W3jR-W;f4JKwx-KxNj{Hx8#DV`=yvZ{Mn z(5NBbVKbqsXLX6kZu(ZmO|p7+<~64@5B+X|9o>4yl5BS%EltjUtoIraEBz3tRGW#5 z*QyvXcr@MJ07y>f{$d((^3gS8>2335>u55l--r;DG=PN5Jd> zmLRVRd53T84}a0z5T9#Gi)R}X9K$~qnM=J)g zrLG&r{mqq;m4`$+HrJu$87)b-DO=+RTx2|X`NLKz1tu*Ec8_F#sdJ^-^mHAV#!@8d z+uIl51R@I1WSRF+5lv-Wz*Yi-?RG;8O=Vv6S+Zt-!Vdr-D$!!&;1Vb+#%xfJrOw?= zuxX)Jp28C)S7>mOc`{M(5TVxH(x}Y#5*~xQyI_NRe0$mqCW*D++})D`O@#^YlA;+^ zoTOI|942YHadGz)Je%Zj9_zk}6u`D4=UX6co%CrteG}an34GG^#~PTixY%Iw9>PiD zoli>esB=kz&?%N8L+%wZzG)s8-aaUq;ty|qc1o|w~s2NUy0C zYL{tehg~Jr;~J_gixW{ZLlS+B-8>D7XbdOCQeg1bU(}k(b?H+5A3rv8032C0|IX;U zoA>0D#o@_U5@QbQF?@1!LsIK?n@Da+zf*DP4dYWsLEG$wz`t!hhnW%gt?6#>c*~X9 zu~>>G@sq`t)rwma6AGhfiAGR|%}gY8^CVXIZatlvRrmlAby7T|-&7DJQJn-D3pYTL zlc?4je>+O2?n#;qdVTPiq#p(O`W6@y`IYR`H=IaI6`XreMwWi{~{92eF zRvAP)a)P8e+$)heQdQyMHa}Na+(TkJw!}W7{q0DqY9Kw9C5W6=?=>83JneL;r8<%L zkAn_abRi&bGg=zel0R5Gkb2bFq#2=Tl~?~0&iqr27Im%m*en-ml#XzAOMXf2`brnI zSqY^qYAEJtWlN)f;o|e?l4Muny`chPf_AEWxxI5mpPkIcsiiYdU<#lXd)TUmzDC1W zVlvRO{>i<)X6%b;57gA`7QLU(I?vLoctUpHQ!@|e4@qa{zS6z4paCWFXW#ARp$T#! z9BnQ!Hmf4U6}dx^;uW}7y3`KBv690gvz*k2?)AzI$ucWV%j_1p31>-{seCpA%xagsuFj~<{n z!8N!gqPW8wT2>!lL^+ zMM~A~wj?4S4U()0QvG!f9`g^tXwhc#Ub>2;GvxFQ%iFYMD1A(iy|B^mqrOt9AggC2Y2GW%csasj(1(T!n!0>3#7rK|cZ**nCyHp%C}JwLNbsuau1U|R}lhj@vg zHy!D*L~s02c2g&(SqfahJc2B^rBi^7YyMOSr23)`cACFuzySlO4bFOb!0l>(&8=$}hZ3RhBRQ}r_>C}F6D^D(QuZfm&<%#lQj3Zg zegKTfSs&C?edn_=He%!~K2TccJ0bdLgEZ`0L3HhE8N{)Wog*|6BIPBFF96-q2r{*o zutU?auigiDTU-47PW1Rso?Q5aE7J4seqo-m;7eqv2OoHk4FbJQ^OkXRaCf&`iA^78 z_BW?M59i}MokVh3cGSa;lR3_wTfcOi$MHY3faV7+(R`5!rID=Glk>EI+|Tn@L`A&x zY|}%pFYbyL_R?*ZA(r5uNk971;-NOO<^UOb6p=3(~CE%B4Qh`2XU3TW8 zd8o7ax>?Kk$Tab5%i1oIs%y7Oy{+pzDC161Dy;z z{nyM5Q1Sw~Rye@;^}_2i%tmjMqad*86Q!(=DIE|^Y}ogntUxXM!CONs&KH)iVfVV8 z*p2TZtj`x*6x7g39tn`;p%z1se*gYc=RrHbRjLJlwXNmD_q_uhZ!;!wF*)aTU>xhuy#pecNkuR#Ini=+2j0 zztNNP;=$H7%24j^&3ExPMmPF7B_q|C=$qc9TMcV*CCNv$R!UgX*QoC{Lg8Bf~z;O_L;=o1W-NKfx%h}PTR0zCbO4A1$>p&F6bbc)x^rK zd2-7Au&>f@J9J?v68UJfN+3|bmoOjH!WOt3E!JGMUiZA^6pGx?)XgLbI<%i>C|wiF z<|45|hrU2xD6C5kRc-r!49XD+2((0BS(CW1D)EZJ>bZScoNKipH?;Ops1gXisy++* zB7?mHP_G<6&uXtnP(EkgX7g8-GnI-wRCYtol!@y)c-cBGneWE8EV3~;=P$V6Wp`=OXH^ETu$(6 z3_P2d3>f!#UX&c*ML9q?@m0h@v5kRP9rBb&KbXM!(D_Vj`z{bR_Ap6Vi0*$j>&@;? zBAC;JO?|riwd?v+*Y%ChO?TCWJiodeWhW`znP8>Ca@`o1KU0}rl!CChwH*C?lXSP= z+jZs81%^ACS2_g}^dMIAUWah@Tc!{7z)rP?4s)suMVD%BDCn1eR6@#7(w(qh7o4wKy^5r% z%}V0ln!5H?L~Lj&`ndwI#3b1IFQ{p*Zp?09-3TtTzyxovWj$ZD9V&RNptjNGtWsQ) z^el4+(ZW3M2+T`lU^uskMwLG6hbZ#K&kv2+at||yDK?Ss?c`t0EzR9uYmUCjU*SVC zJj^fOc2o=sYS?E3 zX|`FAXjRn<@agv{>Yc-|r1u;bjB&fB=}lMWIHW!2%FbKHA^OYE_Sa!Lx%#W9clzF- z4@%B>`O#*}E3jNxtXX93F7^64RL?{~_bnWv2P)EF&>#9VA4IWhgn&0j%SUmNV|fZ` zV_fW!;Y^UG+-*;06X~&=U&X6E=cPi;>l2e-lZVF3p+;Jn`0C@8 z25akNqsk)}k1mc~wLP($#lDf6JBSvIFUS0?iOb#=wDuM|bn8`1{rQ2VB3_BDaPQni zoAQH-6*i8el-44Da9_hYW7T1!Wo*pjcPTo6aP>-SyD{J|nidaSYOrqkxV_1SLa z+1kqx-L;RlBR}Yusq`CpFV??m&W&Gq+D#6NK{PpikuKqH@q@P=OOg$g?0(UJ{6ira zNAUCS9I2&~SI>Mn>Zw>E$Zu4{r%*sfo8*k>GJ0mj%B~>F2NcKZ;*a`3k@d-@WA*@2MXJj2J2kWKz1 z8m!u3S4(F%90DF(%%?0O1QfoDl8;fSyD(CqkJc~r8B3YPPZ15Y9Ve4#Q)bmnc+U^M za(m`)055db@qWl=p9*H+m~vNYet?6&tP8-BnzsbeK+>^KK20uPjTXmGtAPb@r{8<1 zl!7}wOWB;%@`8Pfu?7ZcmzJ-Y9Nk-lW#gA=lxO1QtVBf7~hbO&yBlGC$v1CIk&fIPy55&w+2}c%5nkqUQE89}Ly& zAYjmY@vu#^a<+i*c}9a4b5T1%@)&U3r|m%ZZroHUoEi&5Z}yR7?7(Uej;n!08(pO9 zlcI*AgJ`r@0)6P16K-rQ`8)$5_a+aL*O26vy;>Y`t?28tS$eWcPch@V8uEhV^=v=t zfvKHH8>+O@=Yq0bXZx<-fMnUm#oDy=hnI{e(!|C-Hk&00$#`7is_twd_N^L%Y_XFg zWy~egBD|J`zgNAkY%mNAlh^E7K0W0YI5l@d6C-0Ms2;DX=X0#{{CI?rCndsxkGJx> zgV}6p(Dxx@R|k>e4gS+IM*`@Su=PiE1wj#9)Zsv9Z2F0Gjq~wR04DamA>1)?;Ok_J zMmt#5rD^y*(2E<^EG{aW?EWWgd_3%UL~;b@g%|a%iq2|UAfk7B|!Y& z4#O%@!bY{=2Z*kdlLWr8QPYu{S$Jgm(xppZCnjE{r1*mSX1jGjo8H35BT_bBuG&p^ z<&NmRyY;a;gw3Gv5#MBc2G`?;hK7+J(h)aqP=d==7cXA?)YC%_XrK!Cw_WcgM>Z*& zbIhh@!_^^zMujgPPqsVYz|}6Ej?PY~a5ZFC-;2`HMq_lLz z*{=-4V-Bzj@FuzSt0V-83IvW_ZkL_UHF|U#=l@;?YW~2i>)u%fX9d4Z~+V{#XP2-_&;guWaA{C-nc<==i&N dNk04Ue&`pje`N0q{$t2K=ygryOvO7-{tu`b4b}hv literal 0 HcmV?d00001 diff --git a/cypress/snapshots/web/components/IconButton/IconButton.component-test.tsx/plasma-web IconButton -- simple.snap.png b/cypress/snapshots/web/components/IconButton/IconButton.component-test.tsx/plasma-web IconButton -- simple.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..25d42e14bada5dd83e02c0617f0e5eb1af84b44f GIT binary patch literal 2991 zcmeHJ|5K889RHBFY>~3Eo3}!^R?Afztm_LA3Z-t$)lq9Jy3?TR%dusFfv2JfZC>N7 zOKe@EG@;gYuB)WgH6#)AtO=s9bjmg@FnJ)qB40E>zU)D|+4>v&;rZeHdETGb^ZLBs z@7L@3RP3fv6BaI82mnaP{yb|B00?jNSuh`7G4xu_0Dvsa&f5NUF=DJG{g>7Azr$Gx zoFDW*v%4Ns7VJN=_TxwGi;?f`e!rJnd9HS+kCs$KSkrZU0JY)jX3V1Ui>HZ)&i{Vo zZqnj)cSctsw(rkeyRu?c`HzOBNa;~$XN7_0Hl~?)7LhvGo`VW`rsKfqF>s2X06tM5 zfPE8aR?i2Q%m8?nfrHOZ2T>siFVZ9N>MD6?l;saOMRF-qNK|OUC1FBSB;+)SDZzo< zhXrexfi9{0ufr0kB_6v7^xwkSu-^7{3R|Nk#1?w5W1&uhrK8px7*RMLCo?5mBmRI{E6Y)`p(cCpogDtS%E66!_|FaO{wjnF#vFs(Hm>zvKR}y|V^!s__6X z(Ukr&cVBuW=!u2e>8H+n!%A)F1hBHrS6Y{I)aUnd)UMBB;hh}iyCyC%l84@xL9nBz2`R99E0Dw#ZnDS2@X0FEMk zw1`<*S;;Ld{Hb-|9bm0hRTb$6@^vTL+S*iOqoW^*TUUT)l37hvPxj^@KzMz!8%LZ) z?0ZG^Z7^ZX)iqjY`NANgt*=1sGh0CfQICaj)I}C8v+N(qCev- zbC&vbR5Fa2ywTZA*SIgH`E3{Yic+^el~+)(6g1FtbtLbfU+sdD=2(h30+$79R!rUax-gP60 ZeadZb?O9c5hcDtF`%_w0ea6A>{{<^d*mnQ` literal 0 HcmV?d00001 diff --git a/cypress/snapshots/web/components/IconButton/IconButton.component-test.tsx/plasma-web IconButton -- with Loader.snap.png b/cypress/snapshots/web/components/IconButton/IconButton.component-test.tsx/plasma-web IconButton -- with Loader.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..a1fa01bb3443ab68e015bc0373ba2779fa4769e7 GIT binary patch literal 8235 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 literal 0 HcmV?d00001 diff --git a/packages/plasma-b2c/api/plasma-b2c.api.md b/packages/plasma-b2c/api/plasma-b2c.api.md index 73eab78edc..411e387333 100644 --- a/packages/plasma-b2c/api/plasma-b2c.api.md +++ b/packages/plasma-b2c/api/plasma-b2c.api.md @@ -118,7 +118,6 @@ import { gridGutters } from '@salutejs/plasma-hope'; import { gridMargins } from '@salutejs/plasma-hope'; import { gridSizes } from '@salutejs/plasma-hope'; import { HTMLAttributes } from 'react'; -import { IconButtonProps } from '@salutejs/plasma-new-hope/styled-components'; import { ImageProps } from '@salutejs/plasma-new-hope/styled-components'; import { ImgHTMLAttributes } from 'react'; import { IndicatorProps } from '@salutejs/plasma-new-hope/styled-components'; @@ -1127,7 +1126,7 @@ headline5: string; // @public export const IconButton: FunctionComponent & IconButtonProps & RefAttributes>; - -export { IconButtonProps } +}> & ButtonProps & RefAttributes>; // @public const Image_2: FunctionComponent & ImgHTMLAttributes & { @@ -1729,7 +1726,7 @@ true: string; onChangeChips?: undefined; enumerationType?: "plain" | undefined; onSearch?: ((value: string, event?: React_2.KeyboardEvent | undefined) => void) | undefined; -} & Omit, "size"> & React_2.RefAttributes) | ({ +} & Omit, "size"> & React_2.RefAttributes) | ({ size?: string | undefined; view?: string | undefined; readOnly?: boolean | undefined; @@ -1746,7 +1743,7 @@ true: string; onSearch?: undefined; chips?: TextFieldPrimitiveValue[] | undefined; onChangeChips?: ((value: TextFieldPrimitiveValue[]) => void) | undefined; -} & Omit, "size"> & React_2.RefAttributes)), "enumerationType" | "chips" | "onChangeChips"> & React_2.RefAttributes>; +} & Omit, "size"> & React_2.RefAttributes)), "enumerationType" | "chips" | "onChangeChips"> & React_2.RefAttributes>; // Warning: (ae-forgotten-export) The symbol "newHopeTextFieldProps" needs to be exported by the entry point index.d.ts // diff --git a/packages/plasma-b2c/src/components/IconButton/IconButton.component-test.tsx b/packages/plasma-b2c/src/components/IconButton/IconButton.component-test.tsx new file mode 120000 index 0000000000..e5f97e7851 --- /dev/null +++ b/packages/plasma-b2c/src/components/IconButton/IconButton.component-test.tsx @@ -0,0 +1 @@ +../../../../plasma-web/src/components/IconButton/IconButton.component-test.tsx \ No newline at end of file diff --git a/packages/plasma-b2c/src/components/IconButton/IconButton.config.ts b/packages/plasma-b2c/src/components/IconButton/IconButton.config.ts index ab752f6e9a..efaa4588c8 100644 --- a/packages/plasma-b2c/src/components/IconButton/IconButton.config.ts +++ b/packages/plasma-b2c/src/components/IconButton/IconButton.config.ts @@ -2,13 +2,13 @@ import { css, iconButtonTokens } from '@salutejs/plasma-new-hope/styled-componen export const config = { defaults: { - view: 'primary', + view: 'default', focused: 'true', size: 'm', }, variations: { view: { - primary: css` + default: css` ${iconButtonTokens.iconButtonColor}: var(--inverse-text-primary); ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-solid-default); ${iconButtonTokens.iconButtonColorHover}: var(--inverse-text-primary); @@ -83,9 +83,9 @@ export const config = { white: css` ${iconButtonTokens.iconButtonColor}: var(--on-light-text-primary); ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-dark-surface-solid-default); - ${iconButtonTokens.iconButtonColorHover}: var(--on-light-text-primary); + ${iconButtonTokens.iconButtonColorHover}: var(--on-light-text-primary-hover); ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-light-text-primary); + ${iconButtonTokens.iconButtonColorActive}: var(--on-light-text-primary-active); ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); `, }, @@ -148,7 +148,7 @@ export const config = { `, s: css` ${iconButtonTokens.iconButtonHeight}: 2.5rem; - ${iconButtonTokens.iconButtonWidth}: 2.5remm; + ${iconButtonTokens.iconButtonWidth}: 2.5rem; ${iconButtonTokens.iconButtonPadding}: 1rem; ${iconButtonTokens.iconButtonRadius}: 0.625rem; ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); diff --git a/packages/plasma-b2c/src/components/IconButton/IconButton.stories.tsx b/packages/plasma-b2c/src/components/IconButton/IconButton.stories.tsx index 5a5edd7197..dfb92906be 100644 --- a/packages/plasma-b2c/src/components/IconButton/IconButton.stories.tsx +++ b/packages/plasma-b2c/src/components/IconButton/IconButton.stories.tsx @@ -7,19 +7,7 @@ import { IconButton } from './IconButton'; type StoryButtonProps = ComponentProps & { contentType: string; isLoading: boolean }; -const views = [ - 'default', - 'accent', - 'primary', - 'secondary', - 'success', - 'warning', - 'critical', - 'clear', - 'dark', - 'black', - 'white', -]; +const views = ['default', 'accent', 'secondary', 'success', 'warning', 'critical', 'clear', 'dark', 'black', 'white']; const sizes = ['l', 'm', 's', 'xs']; const pins = [ 'square-square', @@ -55,31 +43,25 @@ const meta: Meta = { }, table: { defaultValue: { summary: 'bottom' } }, }, - ...disableProps(['theme', 'loader', 'onClick', 'onFocus', 'onBlur', 'contentLeft', 'contentRight']), + ...disableProps(['children', 'theme', 'loader', 'onClick', 'onFocus', 'onBlur', 'contentLeft', 'contentRight']), }, }; export default meta; const getSizeForIcon = (size) => { - if (size === 'mr') { - return 's'; - } - if (size === 'lr') { - return 's'; - } - if (size === 'm') { - return 's'; - } - if (size === 'l') { - return 's'; - } - if (size === 'sr') { - return 's'; - } - if (size === 'xsr') { - return 'xs'; + const map = { + mr: 's', + lr: 's', + m: 's', + l: 's', + sr: 's', + xsr: 'xs', + }; + if (map[size]) { + return map[size]; } + return size; }; @@ -92,5 +74,10 @@ export const Default: StoryObj> = { focused: true, isLoading: false, }, - render: (args) => } />, + argTypes: { ...disableProps(['children']) }, + render: (args) => ( + + + + ), }; diff --git a/packages/plasma-b2c/src/components/IconButton/IconButton.ts b/packages/plasma-b2c/src/components/IconButton/IconButton.ts index 6d42e3fbe7..6faeac7efe 100644 --- a/packages/plasma-b2c/src/components/IconButton/IconButton.ts +++ b/packages/plasma-b2c/src/components/IconButton/IconButton.ts @@ -6,6 +6,6 @@ const mergedConfig = mergeConfig(iconButtonConfig, config); const IconButtonComponent = component(mergedConfig); /** - * Кнопка. + * Кнопка с иконкой. */ export const IconButton = IconButtonComponent; diff --git a/packages/plasma-b2c/src/components/IconButton/index.ts b/packages/plasma-b2c/src/components/IconButton/index.ts index 904c715e72..bd4d78d297 100644 --- a/packages/plasma-b2c/src/components/IconButton/index.ts +++ b/packages/plasma-b2c/src/components/IconButton/index.ts @@ -1,3 +1 @@ export { IconButton } from './IconButton'; - -export type { IconButtonProps } from '@salutejs/plasma-new-hope/styled-components'; diff --git a/packages/plasma-new-hope/src/components/Button/Button.styles.ts b/packages/plasma-new-hope/src/components/Button/Button.styles.ts index 6f27d647d4..79ab8ed8cb 100644 --- a/packages/plasma-new-hope/src/components/Button/Button.styles.ts +++ b/packages/plasma-new-hope/src/components/Button/Button.styles.ts @@ -1,7 +1,7 @@ import { css } from '@linaria/core'; import { styled } from '@linaria/react'; -import { applyEllipsis } from '../../mixins'; +import { applyEllipsis, addFocus } from '../../mixins'; import { component, mergeConfig } from '../../engines'; import { spinnerConfig, spinnerTokens } from '../Spinner'; @@ -72,3 +72,99 @@ export const StyledSpinner = styled(Spinner)` ${spinnerTokens.size}: var(${tokens.buttonSpinnerSize}); ${spinnerTokens.color}: var(${tokens.buttonSpinnerColor}); `; + +// INFO: Для возможности переиспользования стилей в других компонентах +export const baseContent = ` + position: relative; + display: inline-flex; + align-items: center; + box-sizing: border-box; + justify-content: center; + + appearance: none; + border: none; + cursor: pointer; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + + a& { + text-decoration: none; + } + + /* NOTE: + --plasma_computed-btn-br-radius is defined in Button.tsx + */ + --plasma_private-btn-br: var(--plasma_computed-btn-br); + border-radius: var(--plasma_private-btn-br); + + &&.${String(classes.buttonSquare)} { + width: var(${tokens.buttonHeight}); + padding: 0; + } + + color: var(${tokens.buttonColor}); + background-color: var(${tokens.buttonBackgroundColor}); + + :hover { + color: var(${tokens.buttonColorHover}, var(${tokens.buttonColor})); + background-color: var(${tokens.buttonBackgroundColorHover}, var(${tokens.buttonBackgroundColor})); + + scale: var(${tokens.buttonScaleHover}); + } + + :active { + color: var(${tokens.buttonColorActive}, var(${tokens.buttonColor})); + background-color: var(${tokens.buttonBackgroundColorActive}, var(${tokens.buttonBackgroundColor})); + + scale: var(${tokens.buttonScaleActive}); + } + + height: var(${tokens.buttonHeight}); + width: var(${tokens.buttonWidth}); + + /* TODO: #714 move these calc's to plasma-mapping | ds-generator and add Math.round() */ + padding: 0 var(${tokens.buttonPadding}, calc(var(${tokens.buttonHeight}) * 1.618 / 4)); + + font-family: var(${tokens.buttonFontFamily}); + font-size: var(${tokens.buttonFontSize}); + font-style: var(${tokens.buttonFontStyle}); + font-weight: var(${tokens.buttonFontWeight}); + letter-spacing: var(${tokens.buttonLetterSpacing}); + line-height: var(${tokens.buttonLineHeight}); + + /* TODO: #710 make it token API ? */ + --plasma_private-btn-outline-size: var(--plasma-button-outline-size, 0.0625rem); + + :focus { + outline: none; + } + + ${addFocus({ + outlineOffset: '-0.125rem', + outlineSize: 'var(--plasma_private-btn-outline-size)', + outlineRadius: 'calc(0.125rem + var(--plasma_private-btn-br))', + outlineColor: `var(${tokens.buttonFocusColor})`, + })} + + &[disabled] { + opacity: var(${tokens.buttonDisabledOpacity}); + cursor: not-allowed; + + :hover, + :active { + scale: none; + + color: var(${tokens.buttonColor}); + background-color: var(${tokens.buttonBackgroundColor}); + } + } + + &.${classes.fixedStretching} { + width: var(${tokens.buttonWidth}); + } + &.${classes.filledStretching} { + width: 100%; + } + &.${classes.autoStretching} { + width: auto; + } +`; diff --git a/packages/plasma-new-hope/src/components/IconButton/IconButton.styles.ts b/packages/plasma-new-hope/src/components/IconButton/IconButton.styles.ts index 298c176815..44f447f0bd 100644 --- a/packages/plasma-new-hope/src/components/IconButton/IconButton.styles.ts +++ b/packages/plasma-new-hope/src/components/IconButton/IconButton.styles.ts @@ -1,21 +1,13 @@ -import { styled } from '@linaria/react'; import { css } from '@linaria/core'; -import { component, mergeConfig } from '../../engines'; -import { buttonConfig, buttonTokens } from '../Button'; +import { buttonTokens } from '../Button'; +import { baseContent as buttonBase } from '../Button/Button.styles'; -import { tokens, classes } from './IconButton.tokens'; +import { tokens } from './IconButton.tokens'; -const mergedConfig = mergeConfig(buttonConfig); -const Button = component(mergedConfig); +export const mappingOverride = ` + ${buttonTokens.buttonPadding}: 0; -export const base = css` - &&.${classes.iconButtonItem} { - display: inline-flex; - } -`; - -export const IconButtonStyled = styled(Button)` ${buttonTokens.buttonColor}: var(${tokens.iconButtonColor}); ${buttonTokens.buttonBackgroundColor}: var(${tokens.iconButtonBackgroundColor}); @@ -43,3 +35,8 @@ export const IconButtonStyled = styled(Button)` ${buttonTokens.buttonSpinnerSize}: var(${tokens.iconButtonSpinnerSize}); ${buttonTokens.buttonSpinnerColor}: var(${tokens.iconButtonSpinnerColor}); `; + +export const base = css` + ${buttonBase}; + ${mappingOverride}; +`; diff --git a/packages/plasma-new-hope/src/components/IconButton/IconButton.tokens.ts b/packages/plasma-new-hope/src/components/IconButton/IconButton.tokens.ts index 505a268fd3..d568dd5fac 100644 --- a/packages/plasma-new-hope/src/components/IconButton/IconButton.tokens.ts +++ b/packages/plasma-new-hope/src/components/IconButton/IconButton.tokens.ts @@ -1,7 +1,3 @@ -export const classes = { - iconButtonItem: 'icon-button-item', -}; - export const tokens = { iconButtonColor: '--plasma-icon-button-color', iconButtonBackgroundColor: '--plasma-icon-button-background-color', diff --git a/packages/plasma-new-hope/src/components/IconButton/IconButton.tsx b/packages/plasma-new-hope/src/components/IconButton/IconButton.tsx index a0df7b8b3d..e31a55d798 100644 --- a/packages/plasma-new-hope/src/components/IconButton/IconButton.tsx +++ b/packages/plasma-new-hope/src/components/IconButton/IconButton.tsx @@ -1,61 +1,18 @@ -import React, { forwardRef } from 'react'; +import { buttonRoot } from '../Button'; +import { base as viewCSS } from '../Button/variations/_view/base'; +import { base as sizeCSS } from '../Button/variations/_size/base'; +import { base as disabledCSS } from '../Button/variations/_disabled/base'; +import { base as focusedCSS } from '../Button/variations/_focused/base'; +import { base as blurredCSS } from '../Button/variations/_blurred/base'; +import { base as stretchingCSS } from '../Button/variations/_stretching/base'; -import type { RootProps } from '../../engines'; -import { cx } from '../../utils'; +import { base } from './IconButton.styles'; -import { base, IconButtonStyled } from './IconButton.styles'; -import type { IconButtonProps } from './IconButton.types'; -import { classes } from './IconButton.tokens'; -import { base as viewCSS } from './variations/_view/base'; -import { base as sizeCSS } from './variations/_size/base'; -import { base as disabledCSS } from './variations/_disabled/base'; -import { base as focusedCSS } from './variations/_focused/base'; - -export const iconButtonRoot = (Root: RootProps) => - forwardRef((props, ref) => { - const { - children, - view, - size, - icon, - isLoading, - loader, - pin, - disabled, - focused, - outlined, - className, - style, - ...rest - } = props; - - return ( - - - {icon || children} - - - ); - }); +export const iconButtonRoot = buttonRoot; export const iconButtonConfig = { - name: 'Button', - tag: 'div', + name: 'IconButton', + tag: 'button', layout: iconButtonRoot, base, variations: { @@ -72,9 +29,16 @@ export const iconButtonConfig = { focused: { css: focusedCSS, }, + blurred: { + css: blurredCSS, + }, + stretching: { + css: stretchingCSS, + }, }, defaults: { view: 'secondary', size: 'm', + stretching: 'fixed', }, }; diff --git a/packages/plasma-new-hope/src/components/IconButton/IconButton.types.ts b/packages/plasma-new-hope/src/components/IconButton/IconButton.types.ts deleted file mode 100644 index 4e38dfb2a8..0000000000 --- a/packages/plasma-new-hope/src/components/IconButton/IconButton.types.ts +++ /dev/null @@ -1,15 +0,0 @@ -import type { ButtonProps } from '../Button'; - -type CustomIconButton = { - /** - * Иконка - */ - icon?: React.ReactNode; -}; - -type OmitButtonProps = Omit< - ButtonProps, - 'text' | 'contentLeft' | 'contentRight' | 'stretch' | 'stretching' | 'square' | 'shiftLeft' | 'shiftRight' | 'blur' ->; - -export interface IconButtonProps extends CustomIconButton, OmitButtonProps {} diff --git a/packages/plasma-new-hope/src/components/IconButton/index.ts b/packages/plasma-new-hope/src/components/IconButton/index.ts index 89c175254d..391f1570ae 100644 --- a/packages/plasma-new-hope/src/components/IconButton/index.ts +++ b/packages/plasma-new-hope/src/components/IconButton/index.ts @@ -1,3 +1,2 @@ export { iconButtonRoot, iconButtonConfig } from './IconButton'; -export type { IconButtonProps } from './IconButton.types'; -export { tokens as iconButtonTokens, classes as iconButtonClasses } from './IconButton.tokens'; +export { tokens as iconButtonTokens } from './IconButton.tokens'; diff --git a/packages/plasma-new-hope/src/components/IconButton/variations/_disabled/base.ts b/packages/plasma-new-hope/src/components/IconButton/variations/_disabled/base.ts deleted file mode 100644 index cd585b76c4..0000000000 --- a/packages/plasma-new-hope/src/components/IconButton/variations/_disabled/base.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { css } from '@linaria/core'; - -export const base = css``; diff --git a/packages/plasma-new-hope/src/components/IconButton/variations/_disabled/tokens.json b/packages/plasma-new-hope/src/components/IconButton/variations/_disabled/tokens.json deleted file mode 100644 index 0967ef424b..0000000000 --- a/packages/plasma-new-hope/src/components/IconButton/variations/_disabled/tokens.json +++ /dev/null @@ -1 +0,0 @@ -{} diff --git a/packages/plasma-new-hope/src/components/IconButton/variations/_focused/base.ts b/packages/plasma-new-hope/src/components/IconButton/variations/_focused/base.ts deleted file mode 100644 index cd585b76c4..0000000000 --- a/packages/plasma-new-hope/src/components/IconButton/variations/_focused/base.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { css } from '@linaria/core'; - -export const base = css``; diff --git a/packages/plasma-new-hope/src/components/IconButton/variations/_focused/tokens.json b/packages/plasma-new-hope/src/components/IconButton/variations/_focused/tokens.json deleted file mode 100644 index 0967ef424b..0000000000 --- a/packages/plasma-new-hope/src/components/IconButton/variations/_focused/tokens.json +++ /dev/null @@ -1 +0,0 @@ -{} diff --git a/packages/plasma-new-hope/src/components/IconButton/variations/_size/base.ts b/packages/plasma-new-hope/src/components/IconButton/variations/_size/base.ts deleted file mode 100644 index cd585b76c4..0000000000 --- a/packages/plasma-new-hope/src/components/IconButton/variations/_size/base.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { css } from '@linaria/core'; - -export const base = css``; diff --git a/packages/plasma-new-hope/src/components/IconButton/variations/_size/tokens.json b/packages/plasma-new-hope/src/components/IconButton/variations/_size/tokens.json deleted file mode 100644 index 0967ef424b..0000000000 --- a/packages/plasma-new-hope/src/components/IconButton/variations/_size/tokens.json +++ /dev/null @@ -1 +0,0 @@ -{} diff --git a/packages/plasma-new-hope/src/components/IconButton/variations/_view/base.ts b/packages/plasma-new-hope/src/components/IconButton/variations/_view/base.ts deleted file mode 100644 index cd585b76c4..0000000000 --- a/packages/plasma-new-hope/src/components/IconButton/variations/_view/base.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { css } from '@linaria/core'; - -export const base = css``; diff --git a/packages/plasma-new-hope/src/components/IconButton/variations/_view/tokens.json b/packages/plasma-new-hope/src/components/IconButton/variations/_view/tokens.json deleted file mode 100644 index 0967ef424b..0000000000 --- a/packages/plasma-new-hope/src/components/IconButton/variations/_view/tokens.json +++ /dev/null @@ -1 +0,0 @@ -{} diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/IconButton/IconButton.config.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/IconButton/IconButton.config.ts index 8866a1af65..e31f64b1ea 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/IconButton/IconButton.config.ts +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/IconButton/IconButton.config.ts @@ -18,14 +18,6 @@ export const config = { ${iconButtonTokens.iconButtonColorActive}: var(--inverse-text-primary); ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active); `, - primary: css` - ${iconButtonTokens.iconButtonColor}: var(--inverse-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-solid-default); - ${iconButtonTokens.iconButtonColorHover}: var(--inverse-text-primary); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--inverse-text-primary); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active); - `, accent: css` ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-accent); @@ -158,7 +150,7 @@ export const config = { `, s: css` ${iconButtonTokens.iconButtonHeight}: 2.5rem; - ${iconButtonTokens.iconButtonWidth}: 2.5remm; + ${iconButtonTokens.iconButtonWidth}: 2.5rem; ${iconButtonTokens.iconButtonPadding}: 1rem; ${iconButtonTokens.iconButtonRadius}: 0.625rem; ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx index 087abf9802..ff66cd742a 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx @@ -1,5 +1,6 @@ import React, { ComponentProps } from 'react'; import type { StoryObj, Meta } from '@storybook/react'; +import { disableProps } from '@salutejs/plasma-sb-utils'; import { iconButtonConfig } from '../../../../components/IconButton'; import { mergeConfig } from '../../../../engines'; @@ -37,18 +38,18 @@ const meta: Meta = { export default meta; const getSizeForIcon = (size) => { - if (size === 'mr') { - return 'm'; - } - if (size === 'lr') { - return 'l'; - } - if (size === 'sr') { - return 's'; - } - if (size === 'xsr') { - return 'xs'; + const map = { + mr: 's', + lr: 's', + m: 's', + l: 's', + sr: 's', + xsr: 'xs', + }; + if (map[size]) { + return map[size]; } + return size; }; @@ -61,5 +62,10 @@ export const Default: StoryObj> = { focused: true, isLoading: false, }, - render: (args) => } />, + argTypes: { ...disableProps(['children']) }, + render: (args) => ( + + + + ), }; diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/IconButton/IconButton.config.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/IconButton/IconButton.config.ts index 8866a1af65..e31f64b1ea 100644 --- a/packages/plasma-new-hope/src/examples/plasma_web/components/IconButton/IconButton.config.ts +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/IconButton/IconButton.config.ts @@ -18,14 +18,6 @@ export const config = { ${iconButtonTokens.iconButtonColorActive}: var(--inverse-text-primary); ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active); `, - primary: css` - ${iconButtonTokens.iconButtonColor}: var(--inverse-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-solid-default); - ${iconButtonTokens.iconButtonColorHover}: var(--inverse-text-primary); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--inverse-text-primary); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active); - `, accent: css` ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-accent); @@ -158,7 +150,7 @@ export const config = { `, s: css` ${iconButtonTokens.iconButtonHeight}: 2.5rem; - ${iconButtonTokens.iconButtonWidth}: 2.5remm; + ${iconButtonTokens.iconButtonWidth}: 2.5rem; ${iconButtonTokens.iconButtonPadding}: 1rem; ${iconButtonTokens.iconButtonRadius}: 0.625rem; ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/IconButton/IconButton.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_web/components/IconButton/IconButton.stories.tsx index 9ff7ab3741..d7b118b1d0 100644 --- a/packages/plasma-new-hope/src/examples/plasma_web/components/IconButton/IconButton.stories.tsx +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/IconButton/IconButton.stories.tsx @@ -1,5 +1,6 @@ import React, { ComponentProps } from 'react'; import type { StoryObj, Meta } from '@storybook/react'; +import { disableProps } from '@salutejs/plasma-sb-utils'; import { iconButtonConfig } from '../../../../components/IconButton'; import { mergeConfig } from '../../../../engines'; @@ -37,18 +38,18 @@ const meta: Meta = { export default meta; const getSizeForIcon = (size) => { - if (size === 'mr') { - return 'm'; - } - if (size === 'lr') { - return 'l'; - } - if (size === 'sr') { - return 's'; - } - if (size === 'xsr') { - return 'xs'; + const map = { + mr: 's', + lr: 's', + m: 's', + l: 's', + sr: 's', + xsr: 'xs', + }; + if (map[size]) { + return map[size]; } + return size; }; @@ -61,5 +62,10 @@ export const Default: StoryObj> = { focused: true, isLoading: false, }, - render: (args) => } />, + argTypes: { ...disableProps(['children']) }, + render: (args) => ( + + + + ), }; diff --git a/packages/plasma-web/api/plasma-web.api.md b/packages/plasma-web/api/plasma-web.api.md index e7a7fe26c6..813d1f0f1b 100644 --- a/packages/plasma-web/api/plasma-web.api.md +++ b/packages/plasma-web/api/plasma-web.api.md @@ -118,7 +118,6 @@ import { gridGutters } from '@salutejs/plasma-hope'; import { gridMargins } from '@salutejs/plasma-hope'; import { gridSizes } from '@salutejs/plasma-hope'; import { HTMLAttributes } from 'react'; -import { IconButtonProps } from '@salutejs/plasma-new-hope/styled-components'; import { ImageProps } from '@salutejs/plasma-new-hope/styled-components'; import { ImgHTMLAttributes } from 'react'; import { IndicatorProps } from '@salutejs/plasma-new-hope/styled-components'; @@ -1130,7 +1129,6 @@ headline5: string; export const IconButton: FunctionComponent & IconButtonProps & RefAttributes>; - -export { IconButtonProps } +}> & ButtonProps & RefAttributes>; // @public const Image_2: FunctionComponent & ImgHTMLAttributes & { @@ -1732,7 +1728,7 @@ true: string; onChangeChips?: undefined; enumerationType?: "plain" | undefined; onSearch?: ((value: string, event?: React_2.KeyboardEvent | undefined) => void) | undefined; -} & Omit, "size"> & React_2.RefAttributes) | ({ +} & Omit, "size"> & React_2.RefAttributes) | ({ size?: string | undefined; view?: string | undefined; readOnly?: boolean | undefined; @@ -1749,7 +1745,7 @@ true: string; onSearch?: undefined; chips?: TextFieldPrimitiveValue[] | undefined; onChangeChips?: ((value: TextFieldPrimitiveValue[]) => void) | undefined; -} & Omit, "size"> & React_2.RefAttributes)), "enumerationType" | "chips" | "onChangeChips"> & React_2.RefAttributes>; +} & Omit, "size"> & React_2.RefAttributes)), "enumerationType" | "chips" | "onChangeChips"> & React_2.RefAttributes>; // Warning: (ae-forgotten-export) The symbol "newHopeTextFieldProps" needs to be exported by the entry point index.d.ts // diff --git a/packages/plasma-web/src/components/IconButton/IconButton.component-test.tsx b/packages/plasma-web/src/components/IconButton/IconButton.component-test.tsx new file mode 100644 index 0000000000..3b045c7ce6 --- /dev/null +++ b/packages/plasma-web/src/components/IconButton/IconButton.component-test.tsx @@ -0,0 +1,180 @@ +import React from 'react'; +import type { FC, PropsWithChildren } from 'react'; +import { IconClose } from '@salutejs/plasma-icons'; +import { standard as standardTypo } from '@salutejs/plasma-typo'; +import { createGlobalStyle } from 'styled-components'; +import { mount, CypressTestDecorator, getComponent, PadMe, SpaceMe } from '@salutejs/plasma-cy-utils'; + +const Icon = () => ; +const StandardTypoStyle = createGlobalStyle(standardTypo); + +describe('plasma-web: IconButton', () => { + const IconButton = getComponent('IconButton'); + + const CypressTestDecoratorWithTypo: FC = ({ children }) => ( + + + {children} + + ); + + it('simple', () => { + mount( + + + + + , + ); + cy.matchImageSnapshot(); + }); + + it('with Loader', () => { + mount( + + + + + + + + + + + + + + + + + + + , + ); + cy.matchImageSnapshot(); + }); + + it('_view', () => { + mount( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + , + ); + cy.matchImageSnapshot(); + }); + + it('_size', () => { + mount( + + + + + + + + + + + + + + + + + + , + ); + cy.matchImageSnapshot(); + }); + + it('_pin', () => { + mount( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + , + ); + + cy.matchImageSnapshot(); + }); +}); diff --git a/packages/plasma-web/src/components/IconButton/IconButton.config.ts b/packages/plasma-web/src/components/IconButton/IconButton.config.ts index c124083a2a..efaa4588c8 100644 --- a/packages/plasma-web/src/components/IconButton/IconButton.config.ts +++ b/packages/plasma-web/src/components/IconButton/IconButton.config.ts @@ -16,14 +16,6 @@ export const config = { ${iconButtonTokens.iconButtonColorActive}: var(--inverse-text-primary); ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active); `, - primary: css` - ${iconButtonTokens.iconButtonColor}: var(--inverse-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-solid-default); - ${iconButtonTokens.iconButtonColorHover}: var(--inverse-text-primary); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--inverse-text-primary); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active); - `, accent: css` ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-accent); @@ -156,7 +148,7 @@ export const config = { `, s: css` ${iconButtonTokens.iconButtonHeight}: 2.5rem; - ${iconButtonTokens.iconButtonWidth}: 2.5remm; + ${iconButtonTokens.iconButtonWidth}: 2.5rem; ${iconButtonTokens.iconButtonPadding}: 1rem; ${iconButtonTokens.iconButtonRadius}: 0.625rem; ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); diff --git a/packages/plasma-web/src/components/IconButton/IconButton.stories.tsx b/packages/plasma-web/src/components/IconButton/IconButton.stories.tsx index 5a5edd7197..dfb92906be 100644 --- a/packages/plasma-web/src/components/IconButton/IconButton.stories.tsx +++ b/packages/plasma-web/src/components/IconButton/IconButton.stories.tsx @@ -7,19 +7,7 @@ import { IconButton } from './IconButton'; type StoryButtonProps = ComponentProps & { contentType: string; isLoading: boolean }; -const views = [ - 'default', - 'accent', - 'primary', - 'secondary', - 'success', - 'warning', - 'critical', - 'clear', - 'dark', - 'black', - 'white', -]; +const views = ['default', 'accent', 'secondary', 'success', 'warning', 'critical', 'clear', 'dark', 'black', 'white']; const sizes = ['l', 'm', 's', 'xs']; const pins = [ 'square-square', @@ -55,31 +43,25 @@ const meta: Meta = { }, table: { defaultValue: { summary: 'bottom' } }, }, - ...disableProps(['theme', 'loader', 'onClick', 'onFocus', 'onBlur', 'contentLeft', 'contentRight']), + ...disableProps(['children', 'theme', 'loader', 'onClick', 'onFocus', 'onBlur', 'contentLeft', 'contentRight']), }, }; export default meta; const getSizeForIcon = (size) => { - if (size === 'mr') { - return 's'; - } - if (size === 'lr') { - return 's'; - } - if (size === 'm') { - return 's'; - } - if (size === 'l') { - return 's'; - } - if (size === 'sr') { - return 's'; - } - if (size === 'xsr') { - return 'xs'; + const map = { + mr: 's', + lr: 's', + m: 's', + l: 's', + sr: 's', + xsr: 'xs', + }; + if (map[size]) { + return map[size]; } + return size; }; @@ -92,5 +74,10 @@ export const Default: StoryObj> = { focused: true, isLoading: false, }, - render: (args) => } />, + argTypes: { ...disableProps(['children']) }, + render: (args) => ( + + + + ), }; diff --git a/packages/plasma-web/src/components/IconButton/IconButton.ts b/packages/plasma-web/src/components/IconButton/IconButton.ts index 6d42e3fbe7..6faeac7efe 100644 --- a/packages/plasma-web/src/components/IconButton/IconButton.ts +++ b/packages/plasma-web/src/components/IconButton/IconButton.ts @@ -6,6 +6,6 @@ const mergedConfig = mergeConfig(iconButtonConfig, config); const IconButtonComponent = component(mergedConfig); /** - * Кнопка. + * Кнопка с иконкой. */ export const IconButton = IconButtonComponent; diff --git a/packages/plasma-web/src/components/IconButton/index.ts b/packages/plasma-web/src/components/IconButton/index.ts index 904c715e72..bd4d78d297 100644 --- a/packages/plasma-web/src/components/IconButton/index.ts +++ b/packages/plasma-web/src/components/IconButton/index.ts @@ -1,3 +1 @@ export { IconButton } from './IconButton'; - -export type { IconButtonProps } from '@salutejs/plasma-new-hope/styled-components'; diff --git a/packages/sdds-serv/api/sdds-serv.api.md b/packages/sdds-serv/api/sdds-serv.api.md index 8cb0c01c6d..811dd051e2 100644 --- a/packages/sdds-serv/api/sdds-serv.api.md +++ b/packages/sdds-serv/api/sdds-serv.api.md @@ -1178,7 +1178,7 @@ chips?: undefined; onChangeChips?: undefined; enumerationType?: "plain" | undefined; onSearch?: ((value: string, event?: KeyboardEvent_2 | undefined) => void) | undefined; -} & Omit, "size"> & RefAttributes) | ({ +} & Omit, "size"> & RefAttributes) | ({ size?: string | undefined; view?: string | undefined; readOnly?: boolean | undefined; @@ -1195,7 +1195,7 @@ enumerationType: "chip"; onSearch?: undefined; chips?: TextFieldPrimitiveValue[] | undefined; onChangeChips?: ((value: TextFieldPrimitiveValue[]) => void) | undefined; -} & Omit, "size"> & RefAttributes))>; +} & Omit, "size"> & RefAttributes))>; export { TextFieldProps } diff --git a/website/plasma-web-docs/docs/components/IconButton.mdx b/website/plasma-web-docs/docs/components/IconButton.mdx new file mode 100644 index 0000000000..c87fb9fc9e --- /dev/null +++ b/website/plasma-web-docs/docs/components/IconButton.mdx @@ -0,0 +1,138 @@ +--- +id: IconButton +title: IconButton +--- + +import { PropsTable, Description, StorybookLink } from '@site/src/components'; + +# IconButton +Кнопки могут отображаться в нескольких размерах и цветах, могут содержать иконку. + +## IconButton + + + + +## Использование +Компонент `IconButton` может содержать иконку, которая указывается напрямую через `children`. + +```tsx live +import React from 'react'; +import { IconButton } from '@salutejs/plasma-web'; +import { IconClose } from '@salutejs/plasma-icons'; + +export function App() { + return ( +
+ + + +
+ ); +} +``` + +## Примеры + +### Размер кнопки +Размер кнопки задается с помощью свойства `size`. + +```tsx live +import React from 'react'; +import { IconButton } from '@salutejs/plasma-web'; + +export function App() { + return ( +
+ + + + + + + + + + + + +
+ ); +} +``` + +### Вид кнопки +Вид кнопки задается с помощью свойства `view`. Возможные значения свойства `view`: ++ `"default"` – по умолчанию; ++ `"secondary"` – вторичная; ++ `"success"` – успешное завершение; ++ `"warning"` – предупреждение; ++ `"critical"` – ошибка; ++ `"clear"` – без цветового сопровождения; ++ `"dark"` – темная; ++ `"black"` – черная; ++ `"white"` – белая. + +```tsx live +import React from 'react'; +import { IconButton } from '@salutejs/plasma-web'; + +export function App() { + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ); +} +``` + +### Границы кнопки +Границы кнопки задаются с помощью свойства `pin`. Возможные значения свойства `pin`: ++ `square` – обычное скругление; ++ `circle` – сильное скругление; ++ `clear` – нет скругления. + +```tsx live +import React from 'react'; +import { IconButton } from '@salutejs/plasma-web'; + +export function App() { + return ( +
+ + + + + + + +
+ ); +} +``` \ No newline at end of file