WEB-2067 allow color override

Telefonica · Oct 7, 2024 · 04b221e · 04b221e
1 parent c8dcc2a
commit 04b221e
Show file tree

Hide file tree

Showing 10 changed files with 154 additions and 31 deletions.
diff --git a/src/__stories__/logo-story.tsx b/src/__stories__/logo-story.tsx
@@ -17,6 +17,7 @@ type Args = {
     action: 'none' | 'onPress' | 'href' | 'to';
     forceBrandLogo: boolean;
     brand: 'Movistar' | 'O2' | 'O2-new' | 'Vivo' | 'Telefonica' | 'Blau' | 'Tu';
+    color: string;
 };
 
 const getLogoActionProps = (action: string) => {
@@ -42,11 +43,20 @@ const getLogoActionProps = (action: string) => {
             : {};
 };
 
-export const Default: StoryComponent<Args> = ({type, size, inverse, action, forceBrandLogo, brand}) => {
+export const Default: StoryComponent<Args> = ({
+    type,
+    size,
+    inverse,
+    action,
+    forceBrandLogo,
+    brand,
+    color,
+}) => {
     const logoProps = {
         ...getLogoActionProps(action),
         type,
         size,
+        color: color || undefined,
     };
 
     const CurrentLogo = {
@@ -78,6 +88,7 @@ Default.args = {
     inverse: false,
     forceBrandLogo: false,
     brand: 'Movistar',
+    color: '',
 };
 
 Default.argTypes = {

diff --git 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
@@ -9,6 +9,7 @@ export type LogoImageProps = {
     type: LogoType;
     isDarkMode: boolean;
     isInverse: boolean;
+    color?: string;
 };
 
 export const calcInlineVars = (size: ByBreakpoint<number>): Record<string, string> => {

diff --git 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
@@ -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 (
         <svg

diff --git a/src/logo-o2.tsx b/src/logo-o2.tsx
@@ -6,9 +6,9 @@ import {calcInlineVars} from './logo-common';
 
 import type {LogoImageProps} from './logo-common';
 
-const O2LogoImage = ({size, isDarkMode, isInverse}: LogoImageProps): JSX.Element => {
+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 (
         <svg

diff --git a/src/logo-telefonica.tsx b/src/logo-telefonica.tsx
@@ -6,9 +6,15 @@ import {calcInlineVars} from './logo-common';
 
 import type {LogoImageProps} from './logo-common';
 
-const TelefonicaLogoImage = ({size, type, isDarkMode, isInverse}: LogoImageProps): JSX.Element => {
+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
@@ -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 (
         <svg

diff --git a/src/logo-vivo.tsx b/src/logo-vivo.tsx
@@ -6,9 +6,15 @@ import {calcInlineVars} from './logo-common';
 
 import type {LogoImageProps} from './logo-common';
 
-const VivoLogoImage = ({size, type, isInverse, isDarkMode}: LogoImageProps): JSX.Element => {
+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
@@ -75,31 +75,84 @@ type LogoBaseProps = {
     skinName: KnownSkinName;
     size: ByBreakpoint<number>;
     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 (
-                <MovistarLogoImage size={size} type={type} isDarkMode={isDarkMode} isInverse={isInverse} />
+                <MovistarLogoImage
+                    size={size}
+                    type={type}
+                    isDarkMode={isDarkMode}
+                    isInverse={isInverse}
+                    color={color}
+                />
             );
         case 'Vivo':
         case 'Vivo-new':
-            return <VivoLogoImage size={size} type={type} isDarkMode={isDarkMode} isInverse={isInverse} />;
+            return (
+                <VivoLogoImage
+                    size={size}
+                    type={type}
+                    isDarkMode={isDarkMode}
+                    isInverse={isInverse}
+                    color={color}
+                />
+            );
         case 'O2':
-            return <O2LogoImage size={size} type={type} isDarkMode={isDarkMode} isInverse={isInverse} />;
+            return (
+                <O2LogoImage
+                    size={size}
+                    type={type}
+                    isDarkMode={isDarkMode}
+                    isInverse={isInverse}
+                    color={color}
+                />
+            );
         case 'O2-new':
-            return <O2NewLogoImage size={size} type={type} isDarkMode={isDarkMode} isInverse={isInverse} />;
+            return (
+                <O2NewLogoImage
+                    size={size}
+                    type={type}
+                    isDarkMode={isDarkMode}
+                    isInverse={isInverse}
+                    color={color}
+                />
+            );
         case 'Telefonica':
             return (
-                <TelefonicaLogoImage size={size} type={type} isDarkMode={isDarkMode} isInverse={isInverse} />
+                <TelefonicaLogoImage
+                    size={size}
+                    type={type}
+                    isDarkMode={isDarkMode}
+                    isInverse={isInverse}
+                    color={color}
+                />
             );
         case 'Blau':
-            return <BlauLogoImage size={size} type={type} isDarkMode={isDarkMode} isInverse={isInverse} />;
+            return (
+                <BlauLogoImage
+                    size={size}
+                    type={type}
+                    isDarkMode={isDarkMode}
+                    isInverse={isInverse}
+                    color={color}
+                />
+            );
         case 'Tu':
-            return <TuLogoImage size={size} type={type} isDarkMode={isDarkMode} isInverse={isInverse} />;
+            return (
+                <TuLogoImage
+                    size={size}
+                    type={type}
+                    isDarkMode={isDarkMode}
+                    isInverse={isInverse}
+                    color={color}
+                />
+            );
         default:
             return <></>;
     }
@@ -108,6 +161,7 @@ const LogoBase = ({size, skinName, type = 'isotype'}: LogoBaseProps): JSX.Elemen
 type LogoProps = TouchableComponentProps<{
     size?: ByBreakpoint<number>;
     type?: LogoType;
+    color?: string;
     /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
     dataAttributes?: DataAttributes;
 }>;
@@ -144,38 +198,59 @@ 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 (
         <MaybeTouchableLogo size={size} {...props}>
-            <LogoBase skinName={skinName as KnownSkinName} type={type} size={size} />
+            <LogoBase skinName={skinName as KnownSkinName} type={type} size={size} color={color} />
         </MaybeTouchableLogo>
     );
 };
 
 export const MovistarLogo = ({
     size = DEFAULT_HEIGHT_PX,
     type = 'isotype',
+    color,
     ...props
 }: LogoProps): JSX.Element => (
     <MaybeTouchableLogo size={size} {...props}>
         <LogoBase skinName="Movistar" type={type} size={size} />
     </MaybeTouchableLogo>
 );
 
-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 => (
     <MaybeTouchableLogo size={size} {...props}>
         <LogoBase skinName="Vivo" type={type} size={size} />
     </MaybeTouchableLogo>
 );
 
-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 => (
     <MaybeTouchableLogo size={size} {...props}>
         <LogoBase skinName="O2" type={type} size={size} />
     </MaybeTouchableLogo>
 );
 
-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 => (
     <MaybeTouchableLogo size={size} {...props}>
         <LogoBase skinName="O2-new" type={type} size={size} />
     </MaybeTouchableLogo>
@@ -184,20 +259,31 @@ export const O2NewLogo = ({size = DEFAULT_HEIGHT_PX, type = 'isotype', ...props}
 export const TelefonicaLogo = ({
     size = DEFAULT_HEIGHT_PX,
     type = 'isotype',
+    color,
     ...props
 }: LogoProps): JSX.Element => (
     <MaybeTouchableLogo size={size} {...props}>
         <LogoBase skinName="Telefonica" type={type} size={size} />
     </MaybeTouchableLogo>
 );
 
-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 => (
     <MaybeTouchableLogo size={size} {...props}>
         <LogoBase skinName="Blau" type={type} size={size} />
     </MaybeTouchableLogo>
 );
 
-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 => (
     <MaybeTouchableLogo size={size} {...props}>
         <LogoBase skinName="Tu" type={type} size={size} />
     </MaybeTouchableLogo>