From 3de2d9e5112b92acca7d1b5faf0ec6a6e20946da Mon Sep 17 00:00:00 2001 From: Egor Startsev <78896684+benax-se@users.noreply.github.com> Date: Thu, 7 Nov 2024 14:45:57 +0300 Subject: [PATCH] fix: support ContentList theme prop; pass theme prop from Content to ContentList (#1066) --- src/components/ContentList/ContentList.scss | 39 ++++++++++++++++++ src/components/ContentList/ContentList.tsx | 4 +- ...tories-CardThemes-light-chromium-linux.png | Bin 42224 -> 77660 bytes ...-stories-CardThemes-light-webkit-linux.png | Bin 89346 -> 168536 bytes .../__stories__/BackgroundCard.stories.tsx | 14 ++++++- .../BackgroundCard/__stories__/data.json | 15 +++++++ src/sub-blocks/Content/Content.scss | 12 +----- src/sub-blocks/Content/Content.tsx | 2 +- 8 files changed, 72 insertions(+), 14 deletions(-) diff --git a/src/components/ContentList/ContentList.scss b/src/components/ContentList/ContentList.scss index 350340bcc..163bf3aff 100644 --- a/src/components/ContentList/ContentList.scss +++ b/src/components/ContentList/ContentList.scss @@ -7,6 +7,17 @@ $iconSizeS: 20px; $iconSizeXS: 18px; $marginIconSizeS: 2px; $marginIconSizeL: 1px; +$lightPrimary: var(--g-color-text-light-primary); +$darkPrimary: var(--g-color-text-dark-primary); +$darkSecondary: var(--g-color-text-dark-secondary); + +@mixin content-link($baseColor: $primary, $hoverColor: $secondary) { + color: $baseColor; + text-decoration: underline; + &:hover { + color: $hoverColor; + } +} #{$block} { &_size_l { @@ -84,6 +95,34 @@ $marginIconSizeL: 1px; } } + &_theme_light { + #{$block}__item { + *, + .yfm, + .yfm * { + color: $darkPrimary; + } + + .yfm a { + @include content-link($darkPrimary, $darkSecondary); + } + } + } + + &_theme_dark { + #{$block}__item { + *, + .yfm, + .yfm * { + color: $lightPrimary; + } + + .yfm a { + @include content-link($lightPrimary, $lightSecondary); + } + } + } + &__icon { display: block; } diff --git a/src/components/ContentList/ContentList.tsx b/src/components/ContentList/ContentList.tsx index 428981153..258912824 100644 --- a/src/components/ContentList/ContentList.tsx +++ b/src/components/ContentList/ContentList.tsx @@ -24,11 +24,11 @@ function getHeadingLevel(size: ContentSize) { } } -const ContentList = ({list, size = 'l', qa}: ContentListProps & QAProps) => { +const ContentList = ({list, size = 'l', qa, theme}: ContentListProps & QAProps) => { const qaAttributes = getQaAttrubutes(qa, ['image', 'title', 'text']); return ( -
du!A7ySw}1DJ+-0fY>sLGQwVs}yynNr`a`*1;t}ixKh$1rl>v&U{
ziYm3RurQv}5D^j-5)yGfI~WkTrG5NZ*x}d8_2p?(Q d2M2g(jW+->gGWxygm{4NQ}@UB2*ma9bm
zepPKB6UdEGyG3sIv0?Wu|v~i)joPJT^8?
zpU0Iyefor}a8ou_tt#n6?*5F8J%!!y_pPC`1)Q2&kXMm#t&M4O3kp0gSp2%rwey?G
zfCYHZ!S`hSx|$g#6P&?n9|@Bs`thTuu*i-@!;Ibj8_s|}C3zs*Lt5HO(^_$hS2`e^
z
qjScrz
zgW*65$XOEN;+xysplBy1BrF};V@To?5!q$kc}hO(`wW9AD#{NTvGu&ADL;Q-Au_v*
z_#(R;B;-KC-ti&Qg3Lc1A9C}f8`Y%$kf~(rWE@Xfl0moNA3!DIiU@^C(b^}&K!YlY
z{3}6)b`Q&1f&`316%tAnI&gXB|K|e#T;FSTbx8$dQ`1b?C0PLe!|{o=Z+`zyU$S&R
zJzf7J7pV`8UqFDSkvpd3=|dc(z=#Mv07PcCb3NKlQ%{mkCy&qai>rShE+6dd^hN-(
ze~B7`s+P4yes;p0;`nF=$HbTy1O^1r#Sx!BpU~mUNK2R1U3`SxqDGn#pIk6V3f^cR
z5_FpqW44|dM
zv2o4^fxMR44)O_{
*jrD;IF+0on4)ys}wb)BWe-R;_wD^^RDtPo|p(}CbMtNk9%fi
zHx8!?en0Ivj8nIakALG2OMjo2k*!s4__L#2t?P)iaZy3h!XhPdm{fjsP*q$^2(h`;
zJ#3(U#4Kc6sJ1lC177T~L7@ns_i@QjVC#DDw1EfGQBRPd$^K|7y75|0d+h!N=A+z
z{`A{`fYz24E^h9^H01a6CRK8BU@R+uLor`zb_-|AU-u13b38Q7%HCTmIN6{?N6|84
zH|^HpXfK$~SY3^dCJCvl*Pv^t70ZHnkJZmFhv0yMb~nTIdy-PPG$aq2XtA*|glN~6
zcJ_amZB~T+(wX2uMe`MfEf)&P<;%O93X*n38BuqagC!A2;$doU4+Gip_~kpi^%Fw2
zi{;dqK%{)LUBojrqN1ZK(QOVcGIeo^Z(_Nu`*i!S-aFp8Gvxblf3{+t3T5pV*~H@F
z-QjlCz4}|b>8vML|KpDpWk*`7VQG(jml0L8--=kBBg#IMi*olZpgt@_^dH}LzjByN
z%_}qbhFu4Y3dY7H`1s+_OiM`UY;H~mk5OKppg!h$_B`<2$t
@_jmcqV*ciyYo9l!e+{#zs)-X51th-1Xe`oqyjvl4
zrCN=4CNnOXNQODfO?|hd^qUCt+%&3w9Ydx^Hofo;5vm7{eO{*KgaC7;bAi&F-j_oP
z#0k$|&s0~}MCUaHWq8ZIh_YK=kCS9TMTnBPxbh(HoAZzDXc9yA%?t7j{oS>m;z_r?
z0TAVT`V>~SI$dkPAe1j5Y(1Wzbi^|sl6ioL!x`w%V@Hlw
zOF)$X2ONYn21=z@%PRM$iF49=)kbk!YFHo^xzA|o#!sgFC}7cthB?TQz-o>Q3&Ltr
zu_iSJE4t0^-+(tj5bsuJ+@6&~{rHczAMX46n^PB$wuuA5AH$_iOliCS{e{2CYaHvf
zwZ3BWSkQQHdxOAh+a|QK+ytlJ_V=IIn3y@AKZ7awcEq#cVsl|7S
PYTu||o7I>`5`
zloT78IGdOgQEy&%wmyA;`vk#oJF8wNVvY*ozx*`(_uIFG*#pOJdkKo)(Otjx8PGzv
zrIt3iJ+8p@xN5n7UO0VY%FP@9g?Crb@}RpqQ2=5_oy2ASIg&~9VAWxwL`YyVW#`0!
zUtaT;K#aGfNPjSbW-(Eg{v@+=^eF0$dmT0-IBh3jry20}?fv#ABgj|dX$bC_r6t*z
zP3*cRIb751
zecbT^T|3o88LV(mq~K