diff --git a/.storybook/colors.js b/.storybook/colors.js index 1d73910020..8bb87476eb 100644 --- a/.storybook/colors.js +++ b/.storybook/colors.js @@ -3,7 +3,7 @@ // This module replaces the required parts from ./src/skins /** - * @param {'Movistar' | 'Vivo' | 'Vivo-new' | 'O2' | 'Telefonica' | 'Blau' | 'Tu'} skin + * @param {'Movistar' | 'Vivo' | 'Vivo-new' | 'O2' | 'O2-new' | 'Telefonica' | 'Blau' | 'Tu'} skin */ export const getColors = (skin) => { switch (skin) { @@ -29,6 +29,13 @@ export const getColors = (skin) => { textPrimaryInverse: '#FFFFFF', textSecondary: '#757575', }; + case 'O2-new': + return { + primary: '#0050FF', + textPrimary: '#00001E', + textPrimaryInverse: '#FFFFFF', + textSecondary: '#3C3C46', + }; case 'Telefonica': return { primary: '#0066FF', diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index dc98449ae1..b4131caa1b 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -10,6 +10,7 @@ import { VIVO_SKIN, VIVO_NEW_SKIN, O2_SKIN, + O2_NEW_SKIN, TELEFONICA_SKIN, BLAU_SKIN, TU_SKIN, @@ -26,9 +27,16 @@ type Platform = 'android' | 'desktop' | 'ios'; const getSkin = (searchParams: URLSearchParams) => { const qsSkin = searchParams.get('skin'); - return [MOVISTAR_SKIN, O2_SKIN, VIVO_SKIN, VIVO_NEW_SKIN, TELEFONICA_SKIN, BLAU_SKIN, TU_SKIN].find( - (skin) => skin === qsSkin - ); + return [ + MOVISTAR_SKIN, + O2_SKIN, + O2_NEW_SKIN, + VIVO_SKIN, + VIVO_NEW_SKIN, + TELEFONICA_SKIN, + BLAU_SKIN, + TU_SKIN, + ].find((skin) => skin === qsSkin); }; const getColorScheme = (searchParams: URLSearchParams): ColorScheme | undefined => { @@ -108,7 +116,9 @@ const MisticaThemeProvider = ({Story, context}): React.ReactElement => { {(skin === TELEFONICA_SKIN || skin === TU_SKIN) && ( )} - {skin === O2_SKIN && } + {(skin === O2_SKIN || skin === O2_NEW_SKIN) && ( + + )} diff --git a/.storybook/theme-selector-addon/register.js b/.storybook/theme-selector-addon/register.js index 7894511dc5..a480db86e4 100644 --- a/.storybook/theme-selector-addon/register.js +++ b/.storybook/theme-selector-addon/register.js @@ -5,7 +5,7 @@ import {WithTooltip, IconButton, TooltipLinkList} from '@storybook/components'; import {getColors} from '../colors'; import {createStorybookTheme} from '../storybook-manager-theme'; -const AVAILABLE_SKINS = ['Movistar', 'O2', 'Vivo', 'Vivo-new', 'Telefonica', 'Blau', 'Tu']; +const AVAILABLE_SKINS = ['Movistar', 'O2', 'O2-new', 'Vivo', 'Vivo-new', 'Telefonica', 'Blau', 'Tu']; const renderPrimaryColorDot = (skinName) => (
( ); +const O2NewLogo = () => ( + + + + + + + +); + const themesMap: { [skinName in KnownSkinName]: {themeConfig: ThemeConfig; text: string; icon: React.ReactNode}; } = { @@ -91,9 +116,9 @@ const themesMap: { icon: , }, 'O2-new': { - text: 'O2', - themeConfig: O2, // TODO - icon: , + text: 'O2 new', + themeConfig: O2_New, + icon: , }, Telefonica: { text: 'Telefónica', diff --git a/playroom/frame-component.tsx b/playroom/frame-component.tsx index 7411557556..ee6e7607e0 100644 --- a/playroom/frame-component.tsx +++ b/playroom/frame-component.tsx @@ -13,6 +13,7 @@ import { VIVO_NEW_SKIN, TELEFONICA_SKIN, O2_SKIN, + O2_NEW_SKIN, TU_SKIN, MOVISTAR_SKIN, } from '../src'; @@ -44,7 +45,12 @@ const App = ({children, skinName}: {children: React.ReactNode; skinName: string} ${skinName === VIVO_NEW_SKIN ? 'body {font-family: "Vivo Type"}' : ''} ${skinName === TELEFONICA_SKIN || skinName === TU_SKIN ? 'body {font-family: "Telefonica Sans"}' : ''} - ${skinName === MOVISTAR_SKIN || skinName === O2_SKIN ? 'body {font-family: "On Air"}' : ''} + ${ + skinName === MOVISTAR_SKIN || skinName === O2_SKIN || skinName === O2_NEW_SKIN + ? 'body {font-family: "On Air"}' + : '' + } + *[class^='_1fu0koy1'] { display: none; diff --git a/playroom/preview-tools.css.ts b/playroom/preview-tools.css.ts index 3a777fc656..668b6bcea6 100644 --- a/playroom/preview-tools.css.ts +++ b/playroom/preview-tools.css.ts @@ -21,7 +21,7 @@ export const controls = style([ paddingRight: 16, }), { - gap: 16, + gap: 8, zIndex: 2, background: 'white', borderBottom: `1px solid ${skinVars.colors.divider}`, diff --git a/playroom/themes.tsx b/playroom/themes.tsx index 03633cca36..ebed1fc4e3 100644 --- a/playroom/themes.tsx +++ b/playroom/themes.tsx @@ -14,6 +14,7 @@ export const Movistar: ThemeConfig = {...themes.Movistar, ...common}; export const Vivo: ThemeConfig = {...themes.Vivo, ...common}; export const Vivo_New: ThemeConfig = {...themes.Vivo_New, ...common}; export const O2: ThemeConfig = {...themes.O2, ...common}; +export const O2_New: ThemeConfig = {...themes.O2_New, ...common}; export const Telefonica: ThemeConfig = {...themes.Telefonica, ...common}; export const Blau: ThemeConfig = {...themes.Blau, ...common}; export const Tu: ThemeConfig = {...themes.Tu, ...common}; @@ -22,6 +23,7 @@ export const Movistar_iOS: ThemeConfig = {...Movistar, platformOverrides: {platf export const Vivo_iOS: ThemeConfig = {...Vivo, platformOverrides: {platform: 'ios'}}; export const Vivo_New_iOS: ThemeConfig = {...Vivo_New, platformOverrides: {platform: 'ios'}}; export const O2_iOS: ThemeConfig = {...O2, platformOverrides: {platform: 'ios'}}; +export const O2_New_iOS: ThemeConfig = {...O2_New, platformOverrides: {platform: 'ios'}}; export const Telefonica_iOS: ThemeConfig = {...Telefonica, platformOverrides: {platform: 'ios'}}; export const Blau_iOS: ThemeConfig = {...Blau, platformOverrides: {platform: 'ios'}}; export const Tu_iOS: ThemeConfig = {...Tu, platformOverrides: {platform: 'ios'}}; diff --git a/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-brand-o-2-new-type-imagotype-is-inverse-false-is-dark-mode-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-brand-o-2-new-type-imagotype-is-inverse-false-is-dark-mode-false-1-snap.png new file mode 100644 index 0000000000..a49d6930ac Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-brand-o-2-new-type-imagotype-is-inverse-false-is-dark-mode-false-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-brand-o-2-new-type-imagotype-is-inverse-false-is-dark-mode-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-brand-o-2-new-type-imagotype-is-inverse-false-is-dark-mode-true-1-snap.png new file mode 100644 index 0000000000..0fd102bb80 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-brand-o-2-new-type-imagotype-is-inverse-false-is-dark-mode-true-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-brand-o-2-new-type-imagotype-is-inverse-true-is-dark-mode-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-brand-o-2-new-type-imagotype-is-inverse-true-is-dark-mode-false-1-snap.png new file mode 100644 index 0000000000..a49d6930ac Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-brand-o-2-new-type-imagotype-is-inverse-true-is-dark-mode-false-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-brand-o-2-new-type-imagotype-is-inverse-true-is-dark-mode-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-brand-o-2-new-type-imagotype-is-inverse-true-is-dark-mode-true-1-snap.png new file mode 100644 index 0000000000..0fd102bb80 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-brand-o-2-new-type-imagotype-is-inverse-true-is-dark-mode-true-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-brand-o-2-new-type-isotype-is-inverse-false-is-dark-mode-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-brand-o-2-new-type-isotype-is-inverse-false-is-dark-mode-false-1-snap.png new file mode 100644 index 0000000000..a49d6930ac Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-brand-o-2-new-type-isotype-is-inverse-false-is-dark-mode-false-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-brand-o-2-new-type-isotype-is-inverse-false-is-dark-mode-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-brand-o-2-new-type-isotype-is-inverse-false-is-dark-mode-true-1-snap.png new file mode 100644 index 0000000000..0fd102bb80 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-brand-o-2-new-type-isotype-is-inverse-false-is-dark-mode-true-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-brand-o-2-new-type-isotype-is-inverse-true-is-dark-mode-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-brand-o-2-new-type-isotype-is-inverse-true-is-dark-mode-false-1-snap.png new file mode 100644 index 0000000000..a49d6930ac Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-brand-o-2-new-type-isotype-is-inverse-true-is-dark-mode-false-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-brand-o-2-new-type-isotype-is-inverse-true-is-dark-mode-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-brand-o-2-new-type-isotype-is-inverse-true-is-dark-mode-true-1-snap.png new file mode 100644 index 0000000000..0fd102bb80 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-brand-o-2-new-type-isotype-is-inverse-true-is-dark-mode-true-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-brand-o-2-new-type-vertical-is-inverse-false-is-dark-mode-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-brand-o-2-new-type-vertical-is-inverse-false-is-dark-mode-false-1-snap.png new file mode 100644 index 0000000000..a49d6930ac Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-brand-o-2-new-type-vertical-is-inverse-false-is-dark-mode-false-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-brand-o-2-new-type-vertical-is-inverse-false-is-dark-mode-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-brand-o-2-new-type-vertical-is-inverse-false-is-dark-mode-true-1-snap.png new file mode 100644 index 0000000000..0fd102bb80 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-brand-o-2-new-type-vertical-is-inverse-false-is-dark-mode-true-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-brand-o-2-new-type-vertical-is-inverse-true-is-dark-mode-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-brand-o-2-new-type-vertical-is-inverse-true-is-dark-mode-false-1-snap.png new file mode 100644 index 0000000000..a49d6930ac Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-brand-o-2-new-type-vertical-is-inverse-true-is-dark-mode-false-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-brand-o-2-new-type-vertical-is-inverse-true-is-dark-mode-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-brand-o-2-new-type-vertical-is-inverse-true-is-dark-mode-true-1-snap.png new file mode 100644 index 0000000000..0fd102bb80 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-brand-o-2-new-type-vertical-is-inverse-true-is-dark-mode-true-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-default-brand-with-skin-o-2-new-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-default-brand-with-skin-o-2-new-1-snap.png new file mode 100644 index 0000000000..7c1d232d1d Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/logo-screenshot-test-tsx-logo-default-brand-with-skin-o-2-new-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-1-snap.png new file mode 100644 index 0000000000..1628481a4d Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-alternative-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-alternative-1-snap.png new file mode 100644 index 0000000000..fd97f18d3a Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-alternative-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-dark-mode-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-dark-mode-1-snap.png new file mode 100644 index 0000000000..93a65805e9 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-dark-mode-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-1-snap.png new file mode 100644 index 0000000000..90ce0f5ba6 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-and-dark-mode-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-and-dark-mode-1-snap.png new file mode 100644 index 0000000000..618219b1d9 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-and-dark-mode-1-snap.png differ diff --git a/src/__screenshot_tests__/logo-screenshot-test.tsx b/src/__screenshot_tests__/logo-screenshot-test.tsx index 14802d87f8..7ab6b146a0 100644 --- a/src/__screenshot_tests__/logo-screenshot-test.tsx +++ b/src/__screenshot_tests__/logo-screenshot-test.tsx @@ -1,6 +1,6 @@ import {openStoryPage, screen} from '../test-utils'; -const SKINS = ['Movistar', 'O2', 'Vivo', 'Vivo-new', 'Telefonica', 'Blau', 'Tu'] as const; +const SKINS = ['Movistar', 'O2', 'O2-new', 'Vivo', 'Vivo-new', 'Telefonica', 'Blau', 'Tu'] as const; const LOGO_TYPES = ['imagotype', 'vertical', 'isotype']; const INVERSE_VALUES = [false, true]; const DARK_MODE_VALUES = [false, true]; diff --git a/src/__screenshot_tests__/private-skin-components-screenshot-test.tsx b/src/__screenshot_tests__/private-skin-components-screenshot-test.tsx index c2508b74a4..bf41904373 100644 --- a/src/__screenshot_tests__/private-skin-components-screenshot-test.tsx +++ b/src/__screenshot_tests__/private-skin-components-screenshot-test.tsx @@ -1,6 +1,6 @@ import {openStoryPage} from '../test-utils'; -const SKINS = ['Movistar', 'O2', 'Vivo-new', 'Telefonica', 'Blau', 'Tu'] as const; +const SKINS = ['Movistar', 'O2', 'Vivo-new', 'Telefonica', 'Blau', 'O2-new', 'Tu'] as const; test.each(SKINS)('Components in %s', async (skin) => { const page = await openStoryPage({ diff --git a/src/__stories__/logo-story.tsx b/src/__stories__/logo-story.tsx index ac374ac82a..25f1e77b32 100644 --- a/src/__stories__/logo-story.tsx +++ b/src/__stories__/logo-story.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import {BlauLogo, Logo, MovistarLogo, O2Logo, TelefonicaLogo, VivoLogo, TuLogo} from '../logo'; +import {BlauLogo, Logo, MovistarLogo, O2Logo, TelefonicaLogo, VivoLogo, TuLogo, O2NewLogo} from '../logo'; import {Box, ResponsiveLayout} from '../index'; export default { @@ -16,7 +16,7 @@ type Args = { inverse: boolean; action: 'none' | 'onPress' | 'href' | 'to'; forceBrandLogo: boolean; - brand: 'Movistar' | 'O2' | 'Vivo' | 'Telefonica' | 'Blau' | 'Tu'; + brand: 'Movistar' | 'O2' | 'O2-new' | 'Vivo' | 'Telefonica' | 'Blau' | 'Tu'; }; const getLogoActionProps = (action: string) => { @@ -54,6 +54,7 @@ export const Default: StoryComponent = ({type, size, inverse, action, forc Movistar: MovistarLogo, Vivo: VivoLogo, O2: O2Logo, + 'O2-new': O2NewLogo, Telefonica: TelefonicaLogo, Blau: BlauLogo, Tu: TuLogo, @@ -81,7 +82,7 @@ Default.args = { Default.argTypes = { brand: { - options: ['Movistar', 'O2', 'Vivo', 'Telefonica', 'Blau', 'Tu'], + options: ['Movistar', 'O2', 'O2-new', 'Vivo', 'Telefonica', 'Blau', 'Tu'], control: {type: 'select'}, if: {arg: 'forceBrandLogo'}, }, diff --git a/src/index.tsx b/src/index.tsx index 04e0132d46..15af8140b5 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -95,7 +95,7 @@ export { NavigationBarActionGroup, NavigationBarAction, } from './navigation-bar'; -export {Logo, MovistarLogo, VivoLogo, O2Logo, TelefonicaLogo, BlauLogo, TuLogo} from './logo'; +export {Logo, MovistarLogo, VivoLogo, O2Logo, O2NewLogo, TelefonicaLogo, BlauLogo, TuLogo} from './logo'; export {default as Image} from './image'; export {default as Chip} from './chip'; export {default as Video} from './video'; @@ -186,6 +186,7 @@ export { VIVO_SKIN, VIVO_NEW_SKIN, O2_SKIN, + O2_NEW_SKIN, MOVISTAR_SKIN, TELEFONICA_SKIN, BLAU_SKIN, @@ -196,12 +197,14 @@ export {getVivoSkin} from './skins/vivo'; export {getVivoNewSkin} from './skins/vivo-new'; export {getMovistarSkin} from './skins/movistar'; export {getO2Skin} from './skins/o2'; +export {getO2NewSkin} from './skins/o2-new'; export {getTelefonicaSkin} from './skins/telefonica'; export {getBlauSkin} from './skins/blau'; export {getTuSkin} from './skins/tu'; export {palette as vivoPalette} from './skins/vivo'; export {palette as movistarPalette} from './skins/movistar'; export {palette as o2Palette} from './skins/o2'; +export {palette as o2NewPalette} from './skins/o2-new'; export {palette as telefonicaPalette} from './skins/telefonica'; export {palette as blauPalette} from './skins/blau'; export {palette as tuPalette} from './skins/tu'; diff --git a/src/logo.tsx b/src/logo.tsx index 527ca7fb7a..09db4cc4d5 100644 --- a/src/logo.tsx +++ b/src/logo.tsx @@ -6,6 +6,7 @@ import Touchable from './touchable'; import {getMovistarSkin} from './skins/movistar'; import {getVivoSkin} from './skins/vivo'; import {getO2Skin} from './skins/o2'; +import {getO2NewSkin} from './skins/o2-new'; import {getBlauSkin} from './skins/blau'; import {getTuSkin} from './skins/tu'; import {getTelefonicaSkin} from './skins/telefonica'; @@ -150,38 +151,12 @@ const VivoLogoImage = ({size, type}: LogoImageProps) => { ); }; -const O2LogoImage = ({size, type}: LogoImageProps) => { +const O2BaseLogoImage = ({size, isO2NewSkin}: LogoImageProps & {isO2NewSkin?: boolean}) => { const {isDarkMode} = useTheme(); const isInverse = useIsInverseVariant(); - // todo WEB-761 what about classic? - const {colors} = getO2Skin(); - const color = isInverse && !isDarkMode ? colors.inverse : colors.brand; + const {colors} = isO2NewSkin ? getO2NewSkin() : getO2Skin(); - if (type === 'vertical') { - return ( - - - - ); - } - - if (type === 'imagotype') { - return ( - - - - ); - } + const color = isInverse && !isDarkMode ? colors.inverse : colors.brand; return ( { ); }; +const O2LogoImage = ({size, type}: LogoImageProps) => { + return ; +}; + +const O2NewLogoImage = ({size, type}: LogoImageProps) => { + return ; +}; + const TelefonicaLogoImage = ({size, type}: LogoImageProps) => { const {isDarkMode} = useTheme(); const isInverse = useIsInverseVariant(); @@ -371,6 +354,8 @@ const LogoBase: React.FC = ({size = 48, skinName, type = 'isotype return ; case 'O2': return ; + case 'O2-new': + return ; case 'Telefonica': return ; case 'Blau': @@ -494,6 +479,11 @@ export const O2Logo: React.FC = ({size, type = 'isotype', ...props}) ); +export const O2NewLogo: React.FC = ({size, type = 'isotype', ...props}) => ( + + + +); export const TelefonicaLogo: React.FC = ({size, type = 'isotype', ...props}) => ( diff --git a/src/skins/utils.tsx b/src/skins/utils.tsx index 33474ac72b..56e020b2a6 100644 --- a/src/skins/utils.tsx +++ b/src/skins/utils.tsx @@ -14,6 +14,7 @@ import {getTelefonicaSkin} from './telefonica'; import {getVivoSkin} from './vivo'; import {getVivoNewSkin} from './vivo-new'; import {getO2Skin} from './o2'; +import {getO2NewSkin} from './o2-new'; import {getMovistarSkin} from './movistar'; import {getTuSkin} from './tu'; @@ -32,8 +33,7 @@ export const getSkinByName = (name: KnownSkinName, variant?: SkinVariant): Known case O2_SKIN: return getO2Skin(variant); case O2_NEW_SKIN: - // TODO - return getO2Skin(variant); + return getO2NewSkin(variant); case MOVISTAR_SKIN: return getMovistarSkin(variant); case TU_SKIN: diff --git a/src/test-utils/index.tsx b/src/test-utils/index.tsx index cd9d41f59a..6cc636a8e0 100644 --- a/src/test-utils/index.tsx +++ b/src/test-utils/index.tsx @@ -172,7 +172,7 @@ export const openStoryPage = ({ id: string; device?: Device; viewport?: TestViewport; - skin?: 'Movistar' | 'Vivo' | 'Vivo-new' | 'O2' | 'Telefonica' | 'Blau' | 'Tu'; + skin?: 'Movistar' | 'Vivo' | 'Vivo-new' | 'O2' | 'O2-new' | 'Telefonica' | 'Blau' | 'Tu'; args?: StoryArgs; isDarkMode?: boolean; }): Promise =>