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 <[email protected]>
Telefonica · Oct 8, 2024 · 4d16939 · 4d16939 · github-actions · Oct 8, 2024
1 parent e9e7067
commit 4d16939
Show file tree

Hide file tree

Showing 19 changed files with 198 additions and 42 deletions.
diff --git a/...pshots__/logo-screenshot-test-tsx-logo-with-color-override-skin-blau-1-snap.png b/...pshots__/logo-screenshot-test-tsx-logo-with-color-override-skin-blau-1-snap.png
diff --git a/...ts__/logo-screenshot-test-tsx-logo-with-color-override-skin-movistar-1-snap.png b/...ts__/logo-screenshot-test-tsx-logo-with-color-override-skin-movistar-1-snap.png
diff --git a/...apshots__/logo-screenshot-test-tsx-logo-with-color-override-skin-o-2-1-snap.png b/...apshots__/logo-screenshot-test-tsx-logo-with-color-override-skin-o-2-1-snap.png
diff --git a/...ots__/logo-screenshot-test-tsx-logo-with-color-override-skin-o-2-new-1-snap.png b/...ots__/logo-screenshot-test-tsx-logo-with-color-override-skin-o-2-new-1-snap.png
diff --git a/...__/logo-screenshot-test-tsx-logo-with-color-override-skin-telefonica-1-snap.png b/...__/logo-screenshot-test-tsx-logo-with-color-override-skin-telefonica-1-snap.png
diff --git a/...napshots__/logo-screenshot-test-tsx-logo-with-color-override-skin-tu-1-snap.png b/...napshots__/logo-screenshot-test-tsx-logo-with-color-override-skin-tu-1-snap.png
diff --git a/...pshots__/logo-screenshot-test-tsx-logo-with-color-override-skin-vivo-1-snap.png b/...pshots__/logo-screenshot-test-tsx-logo-with-color-override-skin-vivo-1-snap.png
diff --git a/...ts__/logo-screenshot-test-tsx-logo-with-color-override-skin-vivo-new-1-snap.png b/...ts__/logo-screenshot-test-tsx-logo-with-color-override-skin-vivo-new-1-snap.png
diff --git a/src/__screenshot_tests__/logo-screenshot-test.tsx b/src/__screenshot_tests__/logo-screenshot-test.tsx
@@ -1,6 +1,17 @@
 import {openStoryPage, screen} from '../test-utils';
 
-const SKINS = ['Movistar', 'O2', 'O2-new', 'Vivo', 'Vivo-new', 'Telefonica', 'Blau', 'Tu'] as const;
+import type {KnownSkinName} from '../skins/types';
+
+const SKINS: Array<KnownSkinName> = [
+    '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
@@ -1,13 +1,21 @@
 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',
     component: Logo,
     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<Args> = ({type, size, inverse, action, forceBrandLogo, brand}) => {
+export const Default: StoryComponent<Args> = ({
+    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
@@ -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 (