Use new Whole Picture logo in US when switch isON

Author: domlander

dotcom-rendering/src/components/Masthead/Masthead.tsx

@@ -22,6 +22,7 @@ type Props = {
 	hasPageSkin?: boolean;
 	hasPageSkinContentSelfConstrain?: boolean;
 	pageId?: string;
+	wholePictureLogoSwitch?: boolean;
 };
 
 /**
@@ -56,6 +57,7 @@ export const Masthead = ({
 	hasPageSkin = false,
 	hasPageSkinContentSelfConstrain = false,
 	pageId,
+	wholePictureLogoSwitch = false,
 }: Props) => (
 	<header data-component="header">
 		<Section
@@ -112,6 +114,7 @@ export const Masthead = ({
 				showSlimNav={showSlimNav}
 				hasPageSkin={hasPageSkin}
 				pageId={pageId}
+				wholePictureLogoSwitch={wholePictureLogoSwitch}
 			/>
 		</Island>
 	</header>

dotcom-rendering/src/components/Masthead/Titlepiece/Logo.tsx

@@ -1,8 +1,10 @@
 import { css } from '@emotion/react';
 import { from, space, visuallyHidden } from '@guardian/source/foundations';
-import { SvgGuardianLogo } from '@guardian/source/react-components';
+import { Hide, SvgGuardianLogo } from '@guardian/source/react-components';
 import { nestedOphanComponents } from '../../../lib/ophan-helpers';
 import { palette } from '../../../palette';
+import TheWholePictureGuardianLogoSmall from '../../../static/icons/the-guardian-whole-picture-logo-small.svg';
+import TheWholePictureGuardianLogo from '../../../static/icons/the-guardian-whole-picture-logo.svg';
 
 const gridMainColumn = css`
 	grid-column: main-column-start / main-column-end;
@@ -20,6 +22,7 @@ const logoStyles = css`
 	margin-top: ${space[2]}px;
 	margin-bottom: 6px;
 	right: ${veggieBurgerDiameter + space[3]}px;
+
 	${from.mobileMedium} {
 		right: 0;
 	}
@@ -49,6 +52,22 @@ const logoStylesFromLeftCol = css`
 	}
 `;
 
+const theWholePictureStyles = css`
+	margin-bottom: 2px;
+	${from.tablet} {
+		margin-top: 10px;
+		margin-bottom: 6px;
+	}
+
+	svg {
+		height: auto;
+		width: 173px;
+		${from.tablet} {
+			width: 246px;
+		}
+	}
+`;
+
 const slimNavLogoOverrides = css`
 	position: relative;
 	margin-top: ${space[2]}px;
@@ -83,15 +102,25 @@ const slimNavLogoOverrides = css`
 `;
 
 type Props = {
+	/**
+	 * We are running a campaign in the US called "The Whole Picture"
+	 * We will use a different logo for the US edition for the duration of this campaign.
+	 */
+	showWholePictureLogo: boolean;
 	hasPageSkin: boolean;
 	showSlimNav: boolean;
 };
 
-export const Logo = ({ hasPageSkin, showSlimNav }: Props) => (
+export const Logo = ({
+	showWholePictureLogo,
+	hasPageSkin,
+	showSlimNav,
+}: Props) => (
 	<div
 		css={[
 			logoStyles,
 			!hasPageSkin && logoStylesFromLeftCol,
+			!showWholePictureLogo && theWholePictureStyles,
 			showSlimNav && slimNavLogoOverrides,
 		]}
 	>
@@ -103,7 +132,21 @@ export const Logo = ({ hasPageSkin, showSlimNav }: Props) => (
 			>
 				The Guardian - Back to home
 			</span>
-			<SvgGuardianLogo textColor={palette('--masthead-nav-link-text')} />
+
+			{!showWholePictureLogo ? (
+				<>
+					<Hide from="tablet">
+						<TheWholePictureGuardianLogoSmall />
+					</Hide>
+					<Hide until="tablet">
+						<TheWholePictureGuardianLogo />
+					</Hide>
+				</>
+			) : (
+				<SvgGuardianLogo
+					textColor={palette('--masthead-nav-link-text')}
+				/>
+			)}
 		</a>
 	</div>
 );

dotcom-rendering/src/components/Titlepiece.importable.tsx

@@ -33,6 +33,7 @@ interface Props {
 	showSlimNav?: boolean;
 	hasPageSkin?: boolean;
 	pageId?: string;
+	wholePictureLogoSwitch?: boolean;
 }
 
 const gridContent = css`
@@ -238,6 +239,7 @@ export const Titlepiece = ({
 	showSlimNav,
 	hasPageSkin,
 	pageId = '',
+	wholePictureLogoSwitch,
 }: Props) => {
 	const { showBanner } = useEditionSwitcherBanner(pageId, editionId);
 
@@ -419,7 +421,13 @@ export const Titlepiece = ({
 			</div>
 
 			{/* Guardian logo */}
-			<Logo hasPageSkin={!!hasPageSkin} showSlimNav={!!showSlimNav} />
+			<Logo
+				showWholePictureLogo={
+					!!wholePictureLogoSwitch && editionId === 'US'
+				}
+				hasPageSkin={!!hasPageSkin}
+				showSlimNav={!!showSlimNav}
+			/>
 
 			{/** Expanded menu checkbox */}
 			<input

dotcom-rendering/src/layouts/FrontLayout.tsx

@@ -227,6 +227,9 @@ export const FrontLayout = ({ front, NAV }: Props) => {
 					hasPageSkin={hasPageSkin}
 					hasPageSkinContentSelfConstrain={true}
 					pageId={pageId}
+					wholePictureLogoSwitch={
+						front.config.switches.wholePictureLogo
+					}
 				/>
 
 				{isPaidContent && (