diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-inverse-with-large-menu-in-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-inverse-with-large-menu-in-desktop-1-snap.png index a6f0fb95b0..fb21f8d6e2 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-inverse-with-large-menu-in-desktop-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-inverse-with-large-menu-in-desktop-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-large-menu-and-custom-content-in-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-large-menu-and-custom-content-in-desktop-1-snap.png index f44ef82731..bd52937220 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-large-menu-and-custom-content-in-desktop-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-large-menu-and-custom-content-in-desktop-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-large-menu-and-default-content-in-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-large-menu-and-default-content-in-desktop-1-snap.png index 440fb9d18b..270c526448 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-large-menu-and-default-content-in-desktop-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-large-menu-and-default-content-in-desktop-1-snap.png differ diff --git a/src/__screenshot_tests__/navigation-bar-screenshot-test.tsx b/src/__screenshot_tests__/navigation-bar-screenshot-test.tsx index 156d0484cc..f2b57c1b28 100644 --- a/src/__screenshot_tests__/navigation-bar-screenshot-test.tsx +++ b/src/__screenshot_tests__/navigation-bar-screenshot-test.tsx @@ -247,6 +247,5 @@ test.each(['large' /* 'small' */])('MainNavigationBar inverse with %s menu in DE const startButton = await screen.findByRole('button', {name: 'Start'}); await page.click(startButton); - await startButton.hover(); // Make sure menu is expanded expect(await page.screenshot()).toMatchImageSnapshot({failureThreshold: 0.00002}); }); diff --git a/src/logo-blau-shell.tsx b/src/logo-blau-shell.tsx new file mode 100644 index 0000000000..3d33642c7b --- /dev/null +++ b/src/logo-blau-shell.tsx @@ -0,0 +1,30 @@ +import * as React from 'react'; +import * as styles from './logo.css'; +import {calcInlineVars} from './logo-common'; +import {applyCssVars} from './utils/css'; + +import type {ByBreakpoint} from './utils/types'; +import type {LogoType} from './logo-common'; + +type Props = { + size: ByBreakpoint; + type: LogoType; + children: React.ReactNode; +}; + +const BlauLogoShell = ({size, type, children}: Props): JSX.Element => { + const viewBox = type === 'imagotype' ? '0 0 138 72' : type === 'vertical' ? '0 0 73 72' : '0 0 72 72'; + + return ( + + {children} + + ); +}; + +export default BlauLogoShell; diff --git a/src/logo-blau.tsx b/src/logo-blau.tsx index 8d0c7a7ca7..e3457d9a96 100644 --- a/src/logo-blau.tsx +++ b/src/logo-blau.tsx @@ -1,18 +1,9 @@ import * as React from 'react'; -import * as styles from './logo.css'; import {getBlauSkin} from './skins/blau'; -import {applyCssVars} from './utils/css'; -import {calcInlineVars} from './logo-common'; import type {LogoImageProps} from './logo-common'; -const BlauLogoImage = ({ - size, - type, - isDarkMode, - themeVariant, - color: colorProp, -}: LogoImageProps): JSX.Element => { +const BlauLogoImage = ({type, isDarkMode, themeVariant, color: colorProp}: LogoImageProps): JSX.Element => { const {colors} = getBlauSkin(); const color = colorProp || @@ -39,48 +30,30 @@ const BlauLogoImage = ({ if (type === 'vertical') { return ( - + - + ); } if (type === 'imagotype') { return ( - + - + ); } return ( - + - + ); }; diff --git a/src/logo-common.tsx b/src/logo-common.tsx index 144b473b45..569c16cb9f 100644 --- a/src/logo-common.tsx +++ b/src/logo-common.tsx @@ -6,7 +6,6 @@ import type {ByBreakpoint} from './utils/types'; export type LogoType = 'isotype' | 'imagotype' | 'vertical'; export type LogoImageProps = { - size: ByBreakpoint; type: LogoType; isDarkMode: boolean; themeVariant: NonDeprecatedVariant; diff --git a/src/logo-esimflag-shell.tsx b/src/logo-esimflag-shell.tsx new file mode 100644 index 0000000000..15212d6bd4 --- /dev/null +++ b/src/logo-esimflag-shell.tsx @@ -0,0 +1,30 @@ +import * as React from 'react'; +import * as styles from './logo.css'; +import {calcInlineVars} from './logo-common'; +import {applyCssVars} from './utils/css'; + +import type {LogoType} from './logo-common'; +import type {ByBreakpoint} from './utils/types'; + +type Props = { + size: ByBreakpoint; + type: LogoType; + children: React.ReactNode; +}; + +const EsimflagLogoShell = ({size, type, children}: Props): JSX.Element => { + const viewBox = type === 'imagotype' ? '0 0 195 72' : '0 0 72 72'; + + return ( + + {children} + + ); +}; + +export default EsimflagLogoShell; diff --git a/src/logo-esimflag.tsx b/src/logo-esimflag.tsx index cdaf61dd88..d6c17a1bed 100644 --- a/src/logo-esimflag.tsx +++ b/src/logo-esimflag.tsx @@ -1,13 +1,9 @@ import * as React from 'react'; -import * as styles from './logo.css'; import {getEsimflagSkin} from './skins/esimflag'; -import {applyCssVars} from './utils/css'; -import {calcInlineVars} from './logo-common'; import type {LogoImageProps} from './logo-common'; const EsimflagLogoImage = ({ - size, type, isDarkMode, themeVariant, @@ -28,27 +24,15 @@ const EsimflagLogoImage = ({ if (type === 'vertical') { return ( - + - + ); } if (type === 'imagotype') { return ( - + @@ -58,20 +42,14 @@ const EsimflagLogoImage = ({ - + ); } return ( - + - + ); }; diff --git a/src/logo-movistar-new-shell.tsx b/src/logo-movistar-new-shell.tsx new file mode 100644 index 0000000000..a097e850fa --- /dev/null +++ b/src/logo-movistar-new-shell.tsx @@ -0,0 +1,30 @@ +import * as React from 'react'; +import * as styles from './logo.css'; +import {calcInlineVars} from './logo-common'; +import {applyCssVars} from './utils/css'; + +import type {LogoType} from './logo-common'; +import type {ByBreakpoint} from './utils/types'; + +type Props = { + size: ByBreakpoint; + type: LogoType; + children: React.ReactNode; +}; + +const MovistarNewLogoShell = ({size, type, children}: Props): JSX.Element => { + const viewBox = type === 'imagotype' ? '0 0 203 72' : '0 0 72 72'; + + return ( + + {children} + + ); +}; + +export default MovistarNewLogoShell; diff --git a/src/logo-movistar-new.tsx b/src/logo-movistar-new.tsx index 04711cdd63..c69a3c08ec 100644 --- a/src/logo-movistar-new.tsx +++ b/src/logo-movistar-new.tsx @@ -1,13 +1,9 @@ import * as React from 'react'; -import * as styles from './logo.css'; import {getMovistarNewSkin} from './skins/movistar-new'; -import {applyCssVars} from './utils/css'; -import {calcInlineVars} from './logo-common'; import type {LogoImageProps} from './logo-common'; const MovistarNewLogoImage = ({ - size, type, isDarkMode, themeVariant, @@ -39,112 +35,50 @@ const MovistarNewLogoImage = ({ if (type === 'vertical') { return ( - - - - - - - - - - - - + <> + + + + + + + + + + + + + + + ); } if (type === 'imagotype') { return ( - - - - - - - - - - - - + <> + + + + + + + + + + + + + + + ); } return ( - + - + ); }; diff --git a/src/logo-movistar-shell.tsx b/src/logo-movistar-shell.tsx new file mode 100644 index 0000000000..630219621b --- /dev/null +++ b/src/logo-movistar-shell.tsx @@ -0,0 +1,30 @@ +import * as React from 'react'; +import * as styles from './logo.css'; +import {calcInlineVars} from './logo-common'; +import {applyCssVars} from './utils/css'; + +import type {LogoType} from './logo-common'; +import type {ByBreakpoint} from './utils/types'; + +type Props = { + size: ByBreakpoint; + type: LogoType; + children: React.ReactNode; +}; + +const MovistarLogoShell = ({size, type, children}: Props): JSX.Element => { + const viewBox = type === 'imagotype' ? '0 0 195 72' : '0 0 72 72'; + + return ( + + {children} + + ); +}; + +export default MovistarLogoShell; diff --git a/src/logo-movistar.tsx b/src/logo-movistar.tsx index 25ca3ae7ff..483d709fe7 100644 --- a/src/logo-movistar.tsx +++ b/src/logo-movistar.tsx @@ -1,13 +1,9 @@ import * as React from 'react'; -import * as styles from './logo.css'; import {getMovistarSkin} from './skins/movistar'; -import {applyCssVars} from './utils/css'; -import {calcInlineVars} from './logo-common'; import type {LogoImageProps} from './logo-common'; const MovistarLogoImage = ({ - size, type, isDarkMode, themeVariant, @@ -27,13 +23,7 @@ const MovistarLogoImage = ({ }[themeVariant]); if (type === 'vertical') { return ( - + @@ -43,19 +33,13 @@ const MovistarLogoImage = ({ - + ); } if (type === 'imagotype') { return ( - + @@ -65,20 +49,14 @@ const MovistarLogoImage = ({ - + ); } return ( - + - + ); }; diff --git a/src/logo-o2-new-shell.tsx b/src/logo-o2-new-shell.tsx new file mode 100644 index 0000000000..e3e1a78686 --- /dev/null +++ b/src/logo-o2-new-shell.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; +import * as styles from './logo.css'; +import {calcInlineVars} from './logo-common'; +import {applyCssVars} from './utils/css'; + +import type {ByBreakpoint} from './utils/types'; + +type Props = { + size: ByBreakpoint; + children: React.ReactNode; +}; + +const O2NewLogoShell = ({size, children}: Props): JSX.Element => { + return ( + + {children} + + ); +}; + +export default O2NewLogoShell; diff --git a/src/logo-o2-new.tsx b/src/logo-o2-new.tsx index 91afa29936..73b2bc112f 100644 --- a/src/logo-o2-new.tsx +++ b/src/logo-o2-new.tsx @@ -1,12 +1,9 @@ import * as React from 'react'; -import * as styles from './logo.css'; import {getO2NewSkin} from './skins/o2-new'; -import {applyCssVars} from './utils/css'; -import {calcInlineVars} from './logo-common'; import type {LogoImageProps} from './logo-common'; -const O2NewLogoImage = ({size, isDarkMode, themeVariant, color: colorProp}: LogoImageProps): JSX.Element => { +const O2NewLogoImage = ({isDarkMode, themeVariant, color: colorProp}: LogoImageProps): JSX.Element => { const {colors} = getO2NewSkin(); const color = colorProp || @@ -21,15 +18,9 @@ const O2NewLogoImage = ({size, isDarkMode, themeVariant, color: colorProp}: Logo }[themeVariant]); return ( - + - + ); }; diff --git a/src/logo-o2-shell.tsx b/src/logo-o2-shell.tsx new file mode 100644 index 0000000000..1010cdddab --- /dev/null +++ b/src/logo-o2-shell.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; +import * as styles from './logo.css'; +import {calcInlineVars} from './logo-common'; +import {applyCssVars} from './utils/css'; + +import type {ByBreakpoint} from './utils/types'; + +type Props = { + size: ByBreakpoint; + children: React.ReactNode; +}; + +const O2LogoShell = ({size, children}: Props): JSX.Element => { + return ( + + {children} + + ); +}; + +export default O2LogoShell; diff --git a/src/logo-o2.tsx b/src/logo-o2.tsx index dc039d48fb..77632bcaa5 100644 --- a/src/logo-o2.tsx +++ b/src/logo-o2.tsx @@ -1,12 +1,9 @@ import * as React from 'react'; -import * as styles from './logo.css'; import {getO2Skin} from './skins/o2'; -import {applyCssVars} from './utils/css'; -import {calcInlineVars} from './logo-common'; import type {LogoImageProps} from './logo-common'; -const O2LogoImage = ({size, isDarkMode, themeVariant, color: colorProp}: LogoImageProps): JSX.Element => { +const O2LogoImage = ({isDarkMode, themeVariant, color: colorProp}: LogoImageProps): JSX.Element => { const {colors} = getO2Skin(); const color = colorProp || @@ -21,15 +18,9 @@ const O2LogoImage = ({size, isDarkMode, themeVariant, color: colorProp}: LogoIma }[themeVariant]); return ( - + - + ); }; diff --git a/src/logo-telefonica-shell.tsx b/src/logo-telefonica-shell.tsx new file mode 100644 index 0000000000..a693c0bf44 --- /dev/null +++ b/src/logo-telefonica-shell.tsx @@ -0,0 +1,30 @@ +import * as React from 'react'; +import * as styles from './logo.css'; +import {calcInlineVars} from './logo-common'; +import {applyCssVars} from './utils/css'; + +import type {LogoType} from './logo-common'; +import type {ByBreakpoint} from './utils/types'; + +type Props = { + size: ByBreakpoint; + type: LogoType; + children: React.ReactNode; +}; + +const TelefonicaLogoShell = ({size, type, children}: Props): JSX.Element => { + const viewBox = type === 'imagotype' ? '0 0 195 72' : type === 'vertical' ? '0 0 73 72' : '0 0 72 72'; + + return ( + + {children} + + ); +}; + +export default TelefonicaLogoShell; diff --git a/src/logo-telefonica.tsx b/src/logo-telefonica.tsx index b6aeeed1d4..1f0fc9997b 100644 --- a/src/logo-telefonica.tsx +++ b/src/logo-telefonica.tsx @@ -1,13 +1,9 @@ import * as React from 'react'; -import * as styles from './logo.css'; import {getTelefonicaSkin} from './skins/telefonica'; -import {applyCssVars} from './utils/css'; -import {calcInlineVars} from './logo-common'; import type {LogoImageProps} from './logo-common'; const TelefonicaLogoImage = ({ - size, type, isDarkMode, themeVariant, @@ -27,13 +23,7 @@ const TelefonicaLogoImage = ({ }[themeVariant]); if (type === 'vertical') { return ( - + @@ -51,19 +41,13 @@ const TelefonicaLogoImage = ({ - + ); } if (type === 'imagotype') { return ( - + @@ -81,18 +65,12 @@ const TelefonicaLogoImage = ({ - + ); } return ( - + @@ -110,7 +88,7 @@ const TelefonicaLogoImage = ({ - + ); }; diff --git a/src/logo-tu-shell.tsx b/src/logo-tu-shell.tsx new file mode 100644 index 0000000000..05c8377b4d --- /dev/null +++ b/src/logo-tu-shell.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; +import * as styles from './logo.css'; +import {calcInlineVars} from './logo-common'; +import {applyCssVars} from './utils/css'; + +import type {ByBreakpoint} from './utils/types'; + +type Props = { + size: ByBreakpoint; + children: React.ReactNode; +}; + +const TuLogoShell = ({size, children}: Props): JSX.Element => { + return ( + + {children} + + ); +}; + +export default TuLogoShell; diff --git a/src/logo-tu.tsx b/src/logo-tu.tsx index 460c32cfd9..7b9f8d691c 100644 --- a/src/logo-tu.tsx +++ b/src/logo-tu.tsx @@ -1,12 +1,9 @@ import * as React from 'react'; -import * as styles from './logo.css'; import {getTuSkin} from './skins/tu'; -import {applyCssVars} from './utils/css'; -import {calcInlineVars} from './logo-common'; import type {LogoImageProps} from './logo-common'; -const TuLogoImage = ({size, isDarkMode, themeVariant, color: colorProp}: LogoImageProps): JSX.Element => { +const TuLogoImage = ({isDarkMode, themeVariant, color: colorProp}: LogoImageProps): JSX.Element => { const {colors} = getTuSkin(); const color = colorProp || @@ -20,14 +17,11 @@ const TuLogoImage = ({size, isDarkMode, themeVariant, color: colorProp}: LogoIma negative: colors.neutralHighNegative, }[themeVariant]); return ( - - - + <> + + + + ); }; diff --git a/src/logo-vivo-shell.tsx b/src/logo-vivo-shell.tsx new file mode 100644 index 0000000000..c1ba1843be --- /dev/null +++ b/src/logo-vivo-shell.tsx @@ -0,0 +1,30 @@ +import * as React from 'react'; +import * as styles from './logo.css'; +import {calcInlineVars} from './logo-common'; +import {applyCssVars} from './utils/css'; + +import type {LogoType} from './logo-common'; +import type {ByBreakpoint} from './utils/types'; + +type Props = { + size: ByBreakpoint; + type: LogoType; + children: React.ReactNode; +}; + +const VivoLogoShell = ({size, type, children}: Props): JSX.Element => { + const viewBox = type === 'imagotype' ? '0 0 195 72' : '0 0 72 72'; + + return ( + + {children} + + ); +}; + +export default VivoLogoShell; diff --git a/src/logo-vivo.tsx b/src/logo-vivo.tsx index 32b7c1d5ae..241a739531 100644 --- a/src/logo-vivo.tsx +++ b/src/logo-vivo.tsx @@ -1,18 +1,9 @@ import * as React from 'react'; -import * as styles from './logo.css'; import {getVivoSkin} from './skins/vivo'; -import {applyCssVars} from './utils/css'; -import {calcInlineVars} from './logo-common'; import type {LogoImageProps} from './logo-common'; -const VivoLogoImage = ({ - size, - type, - themeVariant, - isDarkMode, - color: colorProp, -}: LogoImageProps): JSX.Element => { +const VivoLogoImage = ({type, isDarkMode, themeVariant, color: colorProp}: LogoImageProps): JSX.Element => { const {colors} = getVivoSkin(); const color = colorProp || @@ -28,52 +19,34 @@ const VivoLogoImage = ({ if (type === 'vertical') { return ( - + - + ); } if (type === 'imagotype') { return ( - + - + ); } return ( - + - + ); }; diff --git a/src/logo.tsx b/src/logo.tsx index 0cbe906a07..b1a33f8e5e 100644 --- a/src/logo.tsx +++ b/src/logo.tsx @@ -5,8 +5,15 @@ import {useThemeVariant} from './theme-variant-context'; import Touchable from './touchable'; import {getPrefixedDataAttributes} from './utils/dom'; import * as styles from './logo.css'; -import {calcInlineVars} from './logo-common'; -import {applyCssVars} from './utils/css'; +import MovistarLogoShell from './logo-movistar-shell'; +import MovistarNewLogoShell from './logo-movistar-new-shell'; +import VivoLogoShell from './logo-vivo-shell'; +import O2LogoShell from './logo-o2-shell'; +import O2NewLogoShell from './logo-o2-new-shell'; +import TelefonicaLogoShell from './logo-telefonica-shell'; +import BlauLogoShell from './logo-blau-shell'; +import TuLogoShell from './logo-tu-shell'; +import EsimflagLogoShell from './logo-esimflag-shell'; import type {LogoType} from './logo-common'; import type {TouchableComponentProps} from './touchable'; @@ -100,94 +107,121 @@ const LogoBase = ({size, skinName, type = 'isotype', color}: LogoBaseProps): JSX switch (skinName) { case 'Movistar': return ( - + + + + + ); case 'Movistar-new': return ( - + + + + + ); case 'Vivo': case 'Vivo-new': return ( - + + + + + ); case 'O2': return ( - + + + + + ); case 'O2-new': return ( - + + + + + ); case 'Telefonica': return ( - + + + + + ); case 'Blau': return ( - + + + + + ); case 'Tu': return ( - + + + + + ); case 'Esimflag': return ( - + + + + + ); default: return <>; @@ -215,134 +249,65 @@ const MaybeTouchableLogo = ( } return ( - - } - > -
- {props.children} -
- +
+ {props.children} +
); }; -export const Logo = ({ +const LogoInternal = ({ size = DEFAULT_HEIGHT_PX, type = 'isotype', color, + skinName, ...props -}: LogoProps): JSX.Element => { - const {skinName} = useTheme(); +}: LogoProps & {skinName: KnownSkinName}): JSX.Element => { return ( - + ); }; -export const MovistarLogo = ({ - size = DEFAULT_HEIGHT_PX, - type = 'isotype', - color, - ...props -}: LogoProps): JSX.Element => ( - - - +export const Logo = ({size, type, color, ...props}: LogoProps): JSX.Element => { + const {skinName} = useTheme(); + return ( + + ); +}; + +export const MovistarLogo = ({size, type, color, ...props}: LogoProps): JSX.Element => ( + ); -export const MovistarNewLogo = ({ - size = DEFAULT_HEIGHT_PX, - type = 'isotype', - color, - ...props -}: LogoProps): JSX.Element => ( - - - +export const MovistarNewLogo = ({size, type, color, ...props}: LogoProps): JSX.Element => ( + ); -export const VivoLogo = ({ - size = DEFAULT_HEIGHT_PX, - type = 'isotype', - color, - ...props -}: LogoProps): JSX.Element => ( - - - +export const VivoLogo = ({size, type, color, ...props}: LogoProps): JSX.Element => ( + ); -export const O2Logo = ({ - size = DEFAULT_HEIGHT_PX, - type = 'isotype', - color, - ...props -}: LogoProps): JSX.Element => ( - - - +export const O2Logo = ({size, type, color, ...props}: LogoProps): JSX.Element => ( + ); -export const O2NewLogo = ({ - size = DEFAULT_HEIGHT_PX, - type = 'isotype', - color, - ...props -}: LogoProps): JSX.Element => ( - - - +export const O2NewLogo = ({size, type, color, ...props}: LogoProps): JSX.Element => ( + ); -export const TelefonicaLogo = ({ - size = DEFAULT_HEIGHT_PX, - type = 'isotype', - color, - ...props -}: LogoProps): JSX.Element => ( - - - +export const TelefonicaLogo = ({size, type, color, ...props}: LogoProps): JSX.Element => ( + ); -export const BlauLogo = ({ - size = DEFAULT_HEIGHT_PX, - type = 'isotype', - color, - ...props -}: LogoProps): JSX.Element => ( - - - +export const BlauLogo = ({size, type, color, ...props}: LogoProps): JSX.Element => ( + ); -export const TuLogo = ({ - size = DEFAULT_HEIGHT_PX, - type = 'isotype', - color, - ...props -}: LogoProps): JSX.Element => ( - - - +export const TuLogo = ({size, type, color, ...props}: LogoProps): JSX.Element => ( + ); -export const EsimflagLogo = ({ - size = DEFAULT_HEIGHT_PX, - type = 'isotype', - color, - ...props -}: LogoProps): JSX.Element => ( - - - +export const EsimflagLogo = ({size, type, color, ...props}: LogoProps): JSX.Element => ( + );