From 4d16939984945745533ff0c93a24cc5e7161b973 Mon Sep 17 00:00:00 2001 From: Pedro Ladaria Date: Tue, 8 Oct 2024 10:07:51 +0200 Subject: [PATCH] feat(Logo): allow color override (#1263) WEB-2067 Example: https://mistica-1i2esjses-flows-projects-65bb050e.vercel.app/playroom#?code=N4Igxg9gJgpiBcIA8AVGAbGAzCA7AlmAIYAyEA5hAAQAuAngA4wC8AOiPgLZGX1PtVI6CACc2IAEboiYANYCAzvgBeLYAA4ADAF8qAegB8rXCAA0IGgAsYnGAoQBtEACFpAVxABdcwHd8UK3t4BwBmADZNT20gA --------- Co-authored-by: Pedro Ladaria --- ...o-with-color-override-skin-blau-1-snap.png | Bin 0 -> 1294 bytes ...th-color-override-skin-movistar-1-snap.png | Bin 0 -> 2300 bytes ...go-with-color-override-skin-o-2-1-snap.png | Bin 0 -> 1064 bytes ...ith-color-override-skin-o-2-new-1-snap.png | Bin 0 -> 1064 bytes ...-color-override-skin-telefonica-1-snap.png | Bin 0 -> 2384 bytes ...ogo-with-color-override-skin-tu-1-snap.png | Bin 0 -> 1222 bytes ...o-with-color-override-skin-vivo-1-snap.png | Bin 0 -> 2316 bytes ...th-color-override-skin-vivo-new-1-snap.png | Bin 0 -> 2316 bytes .../logo-screenshot-test.tsx | 30 +++- src/__stories__/logo-story.tsx | 24 +++- src/logo-blau.tsx | 12 +- src/logo-common.tsx | 1 + src/logo-movistar.tsx | 10 +- src/logo-o2-new.tsx | 4 +- src/logo-o2.tsx | 4 +- src/logo-telefonica.tsx | 10 +- src/logo-tu.tsx | 5 +- src/logo-vivo.tsx | 10 +- src/logo.tsx | 130 +++++++++++++++--- 19 files changed, 198 insertions(+), 42 deletions(-) create mode 100644 src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-with-color-override-skin-blau-1-snap.png create mode 100644 src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-with-color-override-skin-movistar-1-snap.png create mode 100644 src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-with-color-override-skin-o-2-1-snap.png create mode 100644 src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-with-color-override-skin-o-2-new-1-snap.png create mode 100644 src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-with-color-override-skin-telefonica-1-snap.png create mode 100644 src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-with-color-override-skin-tu-1-snap.png create mode 100644 src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-with-color-override-skin-vivo-1-snap.png create mode 100644 src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-with-color-override-skin-vivo-new-1-snap.png diff --git a/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-with-color-override-skin-blau-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-with-color-override-skin-blau-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..84f84bfe386c8c00772cab8861721d5a48854bce GIT binary patch literal 1294 zcmV+p1@ZccP)1^@s6yzY9x00001b5ch_0Itp) z=>Px#1am@3R0s$N2z&@+hyVZtxJg7oRCt{2oZWG=IuM56oH_S!mrG0oF&!W(2&n-1 zGFNs38B7IsDlo3VxB`?4LOLK7SgC+>;eqoxvA-Y?KeqJDFq6b#wdS=}yDRWrQ4|F< zO7PFn4ruyAi>(k^Y=zKbD})wXA+*>E@$aP<-rn9i8`LliIF3{6f3qyZ*Vk90aa`AJ zbl%NUTmV4lhvPU!9LJYjD2k#eT-R-EUvtW!VLZz+P)cFjHnJ=m(iJ5b#hRVxIXutP zf_Ka)#0CJ)IXurpp65fma?-xs>xi}tq#L5YS*@Dnx5F%?RLWTvFp0k`Sba_^24$$sde_@a3~gw zMQwYO(&BJ96k!W}h5Y}1E!*0t)p-zUY@Bm&KA#IY`1tsE)(?@3{F~VC z@9)KAG7qb*&2SI=&NrcyT5!UN z_><{$3fFaES(aRf24EComvGMU^z?){j-}fcEtd?#K$@n=vJ8wd_k!Y<6`&8rCQ(j zeZ0QD_Uw%uq>D`{{UOqNy#}RJsDWRG&hHxmO%bWB|5oSA@@EKo3*$}79+_=Pkxc(@ z;|{&o-lieco7hdtsv&#Omp+_*hVXOmzfCUFo7l1wE>T2Vuu&A9EIXWYL{ZeLG!*^7 zM^SVVNf={7OW}7euGvu(RX>X+SASC87|^7RDzisU2oai)+V!;xtv&*B|Ld#Ma5Cp*}(Cl$Sl1~(?k#i z((E;5$Z~SDVpB@5!lo!)?$!UsD8)7mqmvsB2_b`bzvd;4V9Vul z@J)@OwpvFg_GYu`G~Ak|i6lt|n_a+hIcbwWH1&NnVwby2eXOgFN==tp+2oQ#0 zYaik`ZY20-vuRwC4led|I>lzQ0q4BeOtlnzwOZ8*>xN+<3`42guW=k>x7*bk-?A+1 zcDq)S;jSpof9YM957?EWI*uc>HZ#VAYEF^&P}(l-bIxI!CMJ^!2qEx&zw%YY4?;+- z4{?@dCpTxx8lO^HZQfiITXTC19>z8Op~Y4REw(~vu@yp#tq^CoIMX!k^h@tF{c(SP zkLTy-<1go)U4D6a5q@r2ALBe89v&)Pbr@F&Ew(~vu@yp#tq@vlh0tOvgce&NwAc!v z_p=p3&uoRzVk?9eTOqXA3ZcbT2rafkXt5PSi>(m<0Z8tC9$?`OiU0rr07*qoM6N<$ Ef<$9#tpET3 literal 0 HcmV?d00001 diff --git a/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-with-color-override-skin-movistar-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-with-color-override-skin-movistar-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..712cb104d2ad49938876196fe4eac47bd59a8cc2 GIT binary patch literal 2300 zcmai0dpHve7au9hJ%%!cat(8vOD@G&E}4ubbLqC+iiTJ=Ti)0wT5h9NzD)1be9dJp zbI&4$zNw`pwAU?{y=aJ-^2)pS|L=LebDnd4&pCgb=Q)?>_nh3o0B>al9R&aYpzQ18 z6(q$PslkAIq~54A1SAES>p|WyK0{`at;6hWcqq}oJo5mE}Oc? zaMkW(FXOqzH2|jU1BD#TfAr5YfDpjJ9L=tOFkB{ncdO>iwzYhKyQ~ND_UM+2iRkN5 zvf>ZX+?=tKV(2e)bVfj=MV`uqdjM~_@^7iFy7LNSlCS%RgLXgS$2gVq zPgC?-gksZfS>oO?$+kS2{9MjKeM0h(8K(r$feWBoa@`{fPjaU>7fLaHbdhSKG9L1Q zfe@4&$hI+6;WdP!X~p29*Tvi~PVZ(M4A>ri96a3)mcwyZ>UnUcRYDlOV(5NzPmqn6 z(0NF+B^teFaXswkrU5g@m%`Y8Q1!?}vBzM0ZF(@q#8PzB*{na2b#Bl(-_F+pf0~$%t&F>$Q3gdE zcv^z=Lzgny4kBYhc)fX3>ZwsN&hfwv*Fz?nUqSS8o8Fh!)h-$aUe0B6P5~7fTv-7W ztT7jE#-kefzN8xB3C_sPnN`<}woucj#gvUS*YR(y+}Hy5k`LY2+imsPziHRhE;az#=w$(*fLBa9he#yeb>^BX_)sqgfmwt~V_#~w$o}<{6b0gheB`hP3I)uZoFg3i zrW=JXjcv354<%wgMBHI?U2Dmj{sycXy7E5XyKd~-zv8;}fs@4JCuZ6)HcGo1ETr?8 z>nQS>$*iOUP;lc-z2c_#soO`H3p^+PA`dl0V8nHfm%F6Znx9G=(=H7pUQM@ObCWxX zd}YC-9?$5yY2mSsL^RDGSyGifnE>o5wCN?|R?7U5pgH^@#h$uBgU@*b`*~`i_oSoX<^xo-?94Xuh=&f znqJaT8AUfSh@wyc@vI-WgY!ZgD>PuWu$(&(m+a@p=e17+tyBc1%T2*wSN`x~%(AVD z>AGOSDyQf4FM>FxKCGq|)`jMd#FiSzmTp|J(+Q>RX2!{O4fn3~Oa*2*mV|u?PG`oQ zd%KVztlc5CMJ!BP@?_!21%B1t(@4C7z>GlQEjGXfAHop6gEK97~mef4dJ|1Qz>c-S% zeLKdl#lS@xFrCb5FJ7f$R5|M2i<ihihVuidXR#*=>T3w)Y#q&%Ncp}beI?JF>CkpMk6?*2`$EK)(fs^M8lqLZ$a z{xtIYDjwBGn&omejRqmlylWXKIF53p{3G_h8O|{G!%5qfX3qSn74thmB0|UHS_4UJ z*wASOA4x5bLMvz|vOpm&eG!_G!|bm$bZ?j0A$Vn_5jkT04~4-x;f7X$JFayRe2uxn zc`gqIm*eRs9KM89mjEVCVEqXeJXu}?p+{NR3|_xOzt@kOkQe|nt2XSFD(qB@$RE!Y z7o^%Fs>+kp^&3OS?&TBqtw-D(E43nlZwt*mgSFsD@^FHnMJew^ zhIIycbXSo#tGOxF1Bf4a67OGn3X0jur>OU*kr`s}#!rVBVe@t&Xk`DOPWIr#f^7)6 zzQ|?%dJp6Gn@wTs?aR+@h1A~JF}%PA$RURI5H2K=?|HxC)6@r|RCvVaeij}s9- zR5=Nc2zH~ zW$6R#b|`uMFZSNidU((@>@x0gY|-c~20U8+|0eo&WI8e~Cf1myRZ2e?fG<42s}^=4 F^KYVQXY~L8 literal 0 HcmV?d00001 diff --git a/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-with-color-override-skin-o-2-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-with-color-override-skin-o-2-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..59d984bcd8a770a7c44c2a2c44b32f9a648598e6 GIT binary patch literal 1064 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 literal 0 HcmV?d00001 diff --git a/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-with-color-override-skin-vivo-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-with-color-override-skin-vivo-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..f98d1fea22752c8c74c2ffd3f25f869bbbd66916 GIT binary patch literal 2316 zcmV+n3G?=eP)1^@s6?%{>800001b5ch_0Itp) z=>Px#1am@3R0s$N2z&@+hyVZxwn;=mRCt{2UF~(FIuM<_22cmE72vJFqym!)Oe(Nb zf!PY|t-z!L*a}Q4FdaZD5L>~#A35IR4-hkwh?kA-Ir_1CKvIUw)o5mf9}p42!C^x9 z@7@z|aNxp`)?spRq;;4a9BCaU2S-|m$-$AeEaqdo}QlI_4O6nwzWFmgG(+r=%Q^~cz%9{q9~Nt2_ay=-$NY7R>pOtb}tq>O{hQr~2 zK@cDST(l%fP)d34>3s=AQFLQ}PCFb9M&nP4wEO*DX^h!y=7>8ohMobX1wmjmhsi__ znx=v0=V#?LRaL>$)6*x-=xbtV(?vnkG*DHQ_WhF~?QXXtU00T+kwF~P`1R|Tm3~af zKN-?;h**~8coX@;Xqx7)=!w~oT{k^C5Ww2N*?wS#sZ0&)={m`~8 z%w{uqe}8A+yV-0YO;e-sC*#vP{5=ptKv|X$h9T=d8-xX5RC!fZ1@G_gAcTPVd~Q52 zz(=g^?d=VMAh6aa1#R2H+uIue0LfZtH&s103R99KxhbN^vTU&5?RJZ^+3dzoisKlM$D{Jzx~^}=6+#T& zH-!Cuk3xuxKG*9t)^*M9tFCL@?RLsaDj@_WNrFXD7|pv2Qc6sc1ZT4u20?&Hl3}`rEX%a!-Zh6VK{&Tl9LKoZ z?Jh{HvMm7oxmHSvMN!~-y;hC`0LqPZCuxtzBgtSoN`i>Wm*Lblo6YTH33FPlRyX$z z8K`eO3Wi=JfRB|)g*?xd#HX|JX zDOoR#4)Q$5)oS&r1onL&7mEdMx7$Gh9Q>Une9B{MQSS9gk1=;WSY&T|*w4B{{m)devR#mcQgS3crzpYDc zIV#(?@|fD;9264iCQVex^PII&zn+h7QtAZK`oRf+Ur>vO{FEMOu!_bN#@nD(iV( z=Yx?_4&JL;ZLUEHo0%3|_kru1t6pR-$W9M+_kBJwj>-;Ya%_9y-1753t_74!UZ`aM$HzTXUVA9ujO)SbkL29G)+n8&CauA)a;k<`>iWM0*}uDH9vHb1u2YA}z<|Q8nt4$5HnviY|`S zNGUPPGAqd%E~v`RX}YU`7HK&JD1D9VkdH-LM01yi8_F@Y-Pok)g6Y@4ZSern;A0&o zzKzc2U`*1QxIEP8$2rEVr9Cy9Dr>Uw8frQlGovre=%(^?c8_C{7E#~j(N(jti&1RU z93bk66L%%yZp@5GtMgqa-K@yiq}6eGOw`PVi)Gu!*Whlv!Z7?JNZhk;aU7H9W&ABK zPT{c5QhLJJq($VbifN#H=!1GX%~pP&d%D8&yqib`cdtNw*^EicDV#9b7*Mi5rldur zyF9isO?6#syII$*?|6z1xErrNcZB=5QG~$CR}(4zU>JtR<4_D>x?`p&dS4ZnE~J!3 z5e(n=t@*Hs{4k)(=3F<3vPrl0sZW)g;QPLnhdi{L+ETwEH({*Lik?1W$|36*^|G8z zDa9S(xIsdQ!Tzj%>a!?{n;-NDf&k(;w)R1`wrwHHvYU#lAP68y5-Vc>d{iW5S$6aP zNs^3SiPg3(lx2DG^HNRI{24cjB8cO7w92@mC`iA@7KR~|Wl4IrS(Xj{4&15F!5@V& zek~pTNesDSIxZ3=-b-AQ}p_nkcM zgZq5F!yr!nwGaa0IJV-`pY}gO2uPBIwdZl9b(kF7Z!S1Y4vw@AlY=9z!{p#d>o7Su m(mG5Ij1^@s6?%{>800001b5ch_0Itp) z=>Px#1am@3R0s$N2z&@+hyVZxwn;=mRCt{2UF~(FIuM<_22cmE72vJFqym!)Oe(Nb zf!PY|t-z!L*a}Q4FdaZD5L>~#A35IR4-hkwh?kA-Ir_1CKvIUw)o5mf9}p42!C^x9 z@7@z|aNxp`)?spRq;;4a9BCaU2S-|m$-$AeEaqdo}QlI_4O6nwzWFmgG(+r=%Q^~cz%9{q9~Nt2_ay=-$NY7R>pOtb}tq>O{hQr~2 zK@cDST(l%fP)d34>3s=AQFLQ}PCFb9M&nP4wEO*DX^h!y=7>8ohMobX1wmjmhsi__ znx=v0=V#?LRaL>$)6*x-=xbtV(?vnkG*DHQ_WhF~?QXXtU00T+kwF~P`1R|Tm3~af zKN-?;h**~8coX@;Xqx7)=!w~oT{k^C5Ww2N*?wS#sZ0&)={m`~8 z%w{uqe}8A+yV-0YO;e-sC*#vP{5=ptKv|X$h9T=d8-xX5RC!fZ1@G_gAcTPVd~Q52 zz(=g^?d=VMAh6aa1#R2H+uIue0LfZtH&s103R99KxhbN^vTU&5?RJZ^+3dzoisKlM$D{Jzx~^}=6+#T& zH-!Cuk3xuxKG*9t)^*M9tFCL@?RLsaDj@_WNrFXD7|pv2Qc6sc1ZT4u20?&Hl3}`rEX%a!-Zh6VK{&Tl9LKoZ z?Jh{HvMm7oxmHSvMN!~-y;hC`0LqPZCuxtzBgtSoN`i>Wm*Lblo6YTH33FPlRyX$z z8K`eO3Wi=JfRB|)g*?xd#HX|JX zDOoR#4)Q$5)oS&r1onL&7mEdMx7$Gh9Q>Une9B{MQSS9gk1=;WSY&T|*w4B{{m)devR#mcQgS3crzpYDc zIV#(?@|fD;9264iCQVex^PII&zn+h7QtAZK`oRf+Ur>vO{FEMOu!_bN#@nD(iV( z=Yx?_4&JL;ZLUEHo0%3|_kru1t6pR-$W9M+_kBJwj>-;Ya%_9y-1753t_74!UZ`aM$HzTXUVA9ujO)SbkL29G)+n8&CauA)a;k<`>iWM0*}uDH9vHb1u2YA}z<|Q8nt4$5HnviY|`S zNGUPPGAqd%E~v`RX}YU`7HK&JD1D9VkdH-LM01yi8_F@Y-Pok)g6Y@4ZSern;A0&o zzKzc2U`*1QxIEP8$2rEVr9Cy9Dr>Uw8frQlGovre=%(^?c8_C{7E#~j(N(jti&1RU z93bk66L%%yZp@5GtMgqa-K@yiq}6eGOw`PVi)Gu!*Whlv!Z7?JNZhk;aU7H9W&ABK zPT{c5QhLJJq($VbifN#H=!1GX%~pP&d%D8&yqib`cdtNw*^EicDV#9b7*Mi5rldur zyF9isO?6#syII$*?|6z1xErrNcZB=5QG~$CR}(4zU>JtR<4_D>x?`p&dS4ZnE~J!3 z5e(n=t@*Hs{4k)(=3F<3vPrl0sZW)g;QPLnhdi{L+ETwEH({*Lik?1W$|36*^|G8z zDa9S(xIsdQ!Tzj%>a!?{n;-NDf&k(;w)R1`wrwHHvYU#lAP68y5-Vc>d{iW5S$6aP zNs^3SiPg3(lx2DG^HNRI{24cjB8cO7w92@mC`iA@7KR~|Wl4IrS(Xj{4&15F!5@V& zek~pTNesDSIxZ3=-b-AQ}p_nkcM zgZq5F!yr!nwGaa0IJV-`pY}gO2uPBIwdZl9b(kF7Z!S1Y4vw@AlY=9z!{p#d>o7Su m(mG5Ij = [ + 'Movistar', + 'O2', + 'O2-new', + 'Vivo', + 'Vivo-new', + 'Telefonica', + 'Blau', + 'Tu', +]; const LOGO_TYPES = ['imagotype', 'vertical', 'isotype']; const INVERSE_VALUES = [false, true]; const DARK_MODE_VALUES = [false, true]; @@ -38,11 +49,24 @@ test.each(getBrandLogoCases())( } ); -test.each(SKINS)('Logo. Default brand with skin={%s}', async (skin) => { +test.each(SKINS)('Logo. Default brand with skin={%s}', async (skin: KnownSkinName) => { await openStoryPage({ id: 'components-logo--default', device: 'DESKTOP', - skin: skin as (typeof SKINS)[number], + skin, + }); + + const story = await screen.findByTestId('logo'); + + const image = await story.screenshot(); + expect(image).toMatchImageSnapshot(); +}); + +test.each(SKINS)('Logo with color override skin=%s', async (skin: KnownSkinName) => { + await openStoryPage({ + id: 'components-logo--default', + skin, + args: {color: '#000000', size: 64, type: 'imagotype'}, }); const story = await screen.findByTestId('logo'); diff --git a/src/__stories__/logo-story.tsx b/src/__stories__/logo-story.tsx index d593385053..b96bb7faa7 100644 --- a/src/__stories__/logo-story.tsx +++ b/src/__stories__/logo-story.tsx @@ -1,6 +1,8 @@ import * as React from 'react'; import {BlauLogo, Logo, MovistarLogo, O2Logo, TelefonicaLogo, VivoLogo, TuLogo, O2NewLogo} from '../logo'; -import {Box, ResponsiveLayout} from '../index'; +import {Box, ResponsiveLayout, useTheme} from '../index'; + +const COLOR_OPTIONS = ['default', 'neutralHigh', 'neutralMedium', '#000000'] as const; export default { title: 'Components/Logo', @@ -8,6 +10,12 @@ export default { parameters: { fullScreen: true, }, + argTypes: { + color: { + options: COLOR_OPTIONS, + control: {type: 'select'}, + }, + }, }; type Args = { @@ -17,6 +25,7 @@ type Args = { action: 'none' | 'onPress' | 'href' | 'to'; forceBrandLogo: boolean; brand: 'Movistar' | 'O2' | 'O2-new' | 'Vivo' | 'Telefonica' | 'Blau' | 'Tu'; + color: (typeof COLOR_OPTIONS)[number]; }; const getLogoActionProps = (action: string) => { @@ -42,11 +51,21 @@ const getLogoActionProps = (action: string) => { : {}; }; -export const Default: StoryComponent = ({type, size, inverse, action, forceBrandLogo, brand}) => { +export const Default: StoryComponent = ({ + type, + size, + inverse, + action, + forceBrandLogo, + brand, + color, +}) => { + const {colorValues} = useTheme(); const logoProps = { ...getLogoActionProps(action), type, size, + color: color === 'default' ? undefined : colorValues[color as never] || color || undefined, }; const CurrentLogo = { @@ -78,6 +97,7 @@ Default.args = { inverse: false, forceBrandLogo: false, brand: 'Movistar', + color: 'default', }; Default.argTypes = { diff --git a/src/logo-blau.tsx b/src/logo-blau.tsx index eefbc0896c..d85244c215 100644 --- a/src/logo-blau.tsx +++ b/src/logo-blau.tsx @@ -6,10 +6,16 @@ import {calcInlineVars} from './logo-common'; import type {LogoImageProps} from './logo-common'; -const BlauLogoImage = ({size, type, isDarkMode, isInverse}: LogoImageProps): JSX.Element => { +const BlauLogoImage = ({ + size, + type, + isDarkMode, + isInverse, + color: colorProp, +}: LogoImageProps): JSX.Element => { const {colors} = getBlauSkin(); - const color = isInverse && !isDarkMode ? colors.inverse : colors.brand; - const colorSecondary = isInverse && !isDarkMode ? colors.inverse : colors.promo; + const color = colorProp || (isInverse && !isDarkMode ? colors.inverse : colors.brand); + const colorSecondary = colorProp || (isInverse && !isDarkMode ? colors.inverse : colors.promo); if (type === 'vertical') { return ( diff --git a/src/logo-common.tsx b/src/logo-common.tsx index f031493977..3020e350ea 100644 --- a/src/logo-common.tsx +++ b/src/logo-common.tsx @@ -9,6 +9,7 @@ export type LogoImageProps = { type: LogoType; isDarkMode: boolean; isInverse: boolean; + color?: string; }; export const calcInlineVars = (size: ByBreakpoint): Record => { diff --git a/src/logo-movistar.tsx b/src/logo-movistar.tsx index 4dead6e410..7a74d14626 100644 --- a/src/logo-movistar.tsx +++ b/src/logo-movistar.tsx @@ -6,9 +6,15 @@ import {calcInlineVars} from './logo-common'; import type {LogoImageProps} from './logo-common'; -const MovistarLogoImage = ({size, type, isDarkMode, isInverse}: LogoImageProps): JSX.Element => { +const MovistarLogoImage = ({ + size, + type, + isDarkMode, + isInverse, + color: colorProp, +}: LogoImageProps): JSX.Element => { const {colors} = getMovistarSkin(); - const color = isInverse && !isDarkMode ? colors.inverse : colors.brand; + const color = colorProp || (isInverse && !isDarkMode ? colors.inverse : colors.brand); if (type === 'vertical') { return ( diff --git a/src/logo-o2-new.tsx b/src/logo-o2-new.tsx index 1c5bc248d5..48f5f80f61 100644 --- a/src/logo-o2-new.tsx +++ b/src/logo-o2-new.tsx @@ -6,9 +6,9 @@ import {calcInlineVars} from './logo-common'; import type {LogoImageProps} from './logo-common'; -const O2NewLogoImage = ({size, isDarkMode, isInverse}: LogoImageProps): JSX.Element => { +const O2NewLogoImage = ({size, isDarkMode, isInverse, color: colorProp}: LogoImageProps): JSX.Element => { const {colors} = getO2NewSkin(); - const color = isInverse && !isDarkMode ? colors.inverse : colors.brand; + const color = colorProp || (isInverse && !isDarkMode ? colors.inverse : colors.brand); return ( { +const O2LogoImage = ({size, isDarkMode, isInverse, color: colorProp}: LogoImageProps): JSX.Element => { const {colors} = getO2Skin(); - const color = isInverse && !isDarkMode ? colors.inverse : colors.brand; + const color = colorProp || (isInverse && !isDarkMode ? colors.inverse : colors.brand); return ( { +const TelefonicaLogoImage = ({ + size, + type, + isDarkMode, + isInverse, + color: colorProp, +}: LogoImageProps): JSX.Element => { const {colors} = getTelefonicaSkin(); - const color = isInverse && !isDarkMode ? colors.inverse : colors.brand; + const color = colorProp || (isInverse && !isDarkMode ? colors.inverse : colors.brand); if (type === 'vertical') { return ( diff --git a/src/logo-tu.tsx b/src/logo-tu.tsx index 858b41b834..428cad71c6 100644 --- a/src/logo-tu.tsx +++ b/src/logo-tu.tsx @@ -6,9 +6,10 @@ import {calcInlineVars} from './logo-common'; import type {LogoImageProps} from './logo-common'; -const TuLogoImage = ({size, isDarkMode, isInverse}: LogoImageProps): JSX.Element => { +const TuLogoImage = ({size, isDarkMode, isInverse, color: colorProp}: LogoImageProps): JSX.Element => { const {colors} = getTuSkin(); - const color = isDarkMode ? colors.inverse : isInverse ? colors.inverse : colors.backgroundBrand; + const color = + colorProp || (isDarkMode ? colors.inverse : isInverse ? colors.inverse : colors.backgroundBrand); return ( { +const VivoLogoImage = ({ + size, + type, + isInverse, + isDarkMode, + color: colorProp, +}: LogoImageProps): JSX.Element => { const {colors} = getVivoSkin(); - const color = isInverse && !isDarkMode ? colors.inverse : colors.brand; + const color = colorProp || (isInverse && !isDarkMode ? colors.inverse : colors.brand); if (type === 'vertical') { return ( diff --git a/src/logo.tsx b/src/logo.tsx index 0ff69bdb7a..de4c76cdd4 100644 --- a/src/logo.tsx +++ b/src/logo.tsx @@ -75,31 +75,84 @@ type LogoBaseProps = { skinName: KnownSkinName; size: ByBreakpoint; type?: LogoType; + color?: string; }; -const LogoBase = ({size, skinName, type = 'isotype'}: LogoBaseProps): JSX.Element => { +const LogoBase = ({size, skinName, type = 'isotype', color}: LogoBaseProps): JSX.Element => { const isInverse = useIsInverseOrMediaVariant(); const {isDarkMode} = useTheme(); switch (skinName) { case 'Movistar': return ( - + ); case 'Vivo': case 'Vivo-new': - return ; + return ( + + ); case 'O2': - return ; + return ( + + ); case 'O2-new': - return ; + return ( + + ); case 'Telefonica': return ( - + ); case 'Blau': - return ; + return ( + + ); case 'Tu': - return ; + return ( + + ); default: return <>; } @@ -108,6 +161,7 @@ const LogoBase = ({size, skinName, type = 'isotype'}: LogoBaseProps): JSX.Elemen type LogoProps = TouchableComponentProps<{ size?: ByBreakpoint; type?: LogoType; + color?: string; /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */ dataAttributes?: DataAttributes; }>; @@ -144,11 +198,16 @@ const MaybeTouchableLogo = ( ); }; -export const Logo = ({size = DEFAULT_HEIGHT_PX, type = 'isotype', ...props}: LogoProps): JSX.Element => { +export const Logo = ({ + size = DEFAULT_HEIGHT_PX, + type = 'isotype', + color, + ...props +}: LogoProps): JSX.Element => { const {skinName} = useTheme(); return ( - + ); }; @@ -156,49 +215,76 @@ export const Logo = ({size = DEFAULT_HEIGHT_PX, type = 'isotype', ...props}: Log export const MovistarLogo = ({ size = DEFAULT_HEIGHT_PX, type = 'isotype', + color, ...props }: LogoProps): JSX.Element => ( - + ); -export const VivoLogo = ({size = DEFAULT_HEIGHT_PX, type = 'isotype', ...props}: LogoProps): JSX.Element => ( +export const VivoLogo = ({ + size = DEFAULT_HEIGHT_PX, + type = 'isotype', + color, + ...props +}: LogoProps): JSX.Element => ( - + ); -export const O2Logo = ({size = DEFAULT_HEIGHT_PX, type = 'isotype', ...props}: LogoProps): JSX.Element => ( +export const O2Logo = ({ + size = DEFAULT_HEIGHT_PX, + type = 'isotype', + color, + ...props +}: LogoProps): JSX.Element => ( - + ); -export const O2NewLogo = ({size = DEFAULT_HEIGHT_PX, type = 'isotype', ...props}: LogoProps): JSX.Element => ( +export const O2NewLogo = ({ + size = DEFAULT_HEIGHT_PX, + type = 'isotype', + color, + ...props +}: LogoProps): JSX.Element => ( - + ); export const TelefonicaLogo = ({ size = DEFAULT_HEIGHT_PX, type = 'isotype', + color, ...props }: LogoProps): JSX.Element => ( - + ); -export const BlauLogo = ({size = DEFAULT_HEIGHT_PX, type = 'isotype', ...props}: LogoProps): JSX.Element => ( +export const BlauLogo = ({ + size = DEFAULT_HEIGHT_PX, + type = 'isotype', + color, + ...props +}: LogoProps): JSX.Element => ( - + ); -export const TuLogo = ({size = DEFAULT_HEIGHT_PX, type = 'isotype', ...props}: LogoProps): JSX.Element => ( +export const TuLogo = ({ + size = DEFAULT_HEIGHT_PX, + type = 'isotype', + color, + ...props +}: LogoProps): JSX.Element => ( - + );