Merge pull request #14561 from guardian/doml/us-masthead-articles

Add US masthead to articles

Author: domlander

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

@@ -30,6 +30,7 @@ const meta = {
 		},
 	},
 } satisfies Meta<typeof Masthead>;
+
 export default meta;
 
 export const WithoutSubnav = {};
@@ -49,3 +50,30 @@ export const WithPageSkin = {
 export const WithPageSkinAndContentSelfContstrain = {
 	args: { hasPageSkinContentSelfConstrain: true },
 };
+
+export const WithUsLogoAndWithoutSubnav = {
+	args: { wholePictureLogoSwitch: true, editionId: 'US' },
+};
+
+export const WithUsLogoAndSubnav = {
+	args: { ...WithUsLogoAndWithoutSubnav.args, showSubNav: true },
+};
+
+export const WithUsLogoAndSlimNav = {
+	args: {
+		...WithUsLogoAndWithoutSubnav.args,
+		showSlimNav: true,
+		displayRoundel: true,
+	},
+};
+
+export const WithUsLogoAndPageSkin = {
+	args: { ...WithUsLogoAndWithoutSubnav.args, hasPageSkin: true },
+};
+
+export const WithUsLogoAndPageSkinAndContentSelfContstrain = {
+	args: {
+		...WithUsLogoAndWithoutSubnav.args,
+		hasPageSkinContentSelfConstrain: true,
+	},
+};

dotcom-rendering/src/layouts/AllEditorialNewslettersPageLayout.tsx

@@ -44,6 +44,7 @@ export const AllEditorialNewslettersPageLayout = ({
 					showSlimNav={false}
 					hasPageSkin={false}
 					hasPageSkinContentSelfConstrain={false}
+					wholePictureLogoSwitch={config.switches.wholePictureLogo}
 				/>
 			</div>
 

dotcom-rendering/src/layouts/AudioLayout.tsx

@@ -184,6 +184,9 @@ export const AudioLayout = (props: WebProps) => {
 					showSlimNav={false}
 					hasPageSkinContentSelfConstrain={true}
 					pageId={article.pageId}
+					wholePictureLogoSwitch={
+						article.config.switches.wholePictureLogo
+					}
 				/>
 			</div>
 

dotcom-rendering/src/layouts/CommentLayout.tsx

@@ -335,6 +335,9 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
 						hasPageSkin={false}
 						hasPageSkinContentSelfConstrain={false}
 						pageId={article.pageId}
+						wholePictureLogoSwitch={
+							article.config.switches.wholePictureLogo
+						}
 					/>
 				</div>
 			)}

dotcom-rendering/src/layouts/CrosswordLayout.tsx

@@ -157,6 +157,9 @@ export const CrosswordLayout = (props: Props) => {
 					hasPageSkin={false}
 					hasPageSkinContentSelfConstrain={false}
 					pageId={article.pageId}
+					wholePictureLogoSwitch={
+						article.config.switches.wholePictureLogo
+					}
 				/>
 			</div>
 

dotcom-rendering/src/layouts/FullPageInteractiveLayout.tsx

@@ -181,6 +181,9 @@ const NavHeader = ({ article, NAV, renderAds }: HeaderProps) => {
 				hasPageSkin={false}
 				hasPageSkinContentSelfConstrain={false}
 				pageId={article.pageId}
+				wholePictureLogoSwitch={
+					article.config.switches.wholePictureLogo
+				}
 			/>
 		</section>
 	);

dotcom-rendering/src/layouts/GalleryLayout.tsx

@@ -181,6 +181,7 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 		frontendData.isCommentable && !frontendData.config.isPaidContent;
 
 	const { absoluteServerTimes = false } = switches;
+
 	return (
 		<>
 			{isWeb && (
@@ -213,6 +214,7 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 						hasPageSkin={false}
 						hasPageSkinContentSelfConstrain={false}
 						pageId={frontendData.pageId}
+						wholePictureLogoSwitch={switches.wholePictureLogo}
 					/>
 				</div>
 			)}

dotcom-rendering/src/layouts/ImmersiveLayout.tsx

@@ -326,6 +326,9 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => {
 					hasPageSkin={false}
 					hasPageSkinContentSelfConstrain={false}
 					pageId={article.pageId}
+					wholePictureLogoSwitch={
+						article.config.switches.wholePictureLogo
+					}
 				/>
 			)}
 

dotcom-rendering/src/layouts/InteractiveLayout.tsx

@@ -291,6 +291,9 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => {
 							hasPageSkin={false}
 							hasPageSkinContentSelfConstrain={false}
 							pageId={article.pageId}
+							wholePictureLogoSwitch={
+								article.config.switches.wholePictureLogo
+							}
 						/>
 					</div>
 

dotcom-rendering/src/layouts/LiveLayout.tsx

@@ -327,6 +327,9 @@ export const LiveLayout = (props: WebProps | AppsProps) => {
 						hasPageSkin={false}
 						hasPageSkinContentSelfConstrain={false}
 						pageId={article.pageId}
+						wholePictureLogoSwitch={
+							article.config.switches.wholePictureLogo
+						}
 					/>
 				</div>
 			)}