Merge Aa/portrait layout continued into 'portrait layout'

dotcom-rendering/src/components/ArticleHeadline.tsx

@@ -18,6 +18,7 @@
 	until,
 } from '@guardian/source/foundations';
 import { grid } from '../../src/grid';
+import { type LayoutType } from '../layouts/lib/articleArrangements';
 import { interactiveLegacyClasses } from '../layouts/lib/interactiveLegacyStyling';
 import { getAgeWarning } from '../lib/age-warning';
 import {
@@ -38,13 +39,14 @@
 type Props = {
 	headlineString: string;
 	format: ArticleFormat;
+	layoutType?: LayoutType;
 	byline?: string;
 	tags: TagType[];
 	webPublicationDateDeprecated: string;
 	hasAvatar?: boolean;
 	isMatch?: boolean;
 	starRating?: Rating;
 	isInverted?: boolean;
 };
 
 const topPadding = css`
@@ -393,14 +395,18 @@
 export const ArticleHeadline = ({
 	headlineString,
 	format,
+	layoutType,
 	tags,
 	byline,
 	webPublicationDateDeprecated,
 	hasAvatar,
 	isMatch,
 	starRating,
-	isInverted,
 }: Props) => {
+	const isInverted =
+		format.display === ArticleDisplay.Immersive &&
+		format.design === ArticleDesign.Standard &&
+		layoutType === 'immersiveLandscapeDefault';
 	switch (format.display) {
 		case ArticleDisplay.Immersive: {
 			switch (format.design) {

dotcom-rendering/src/components/ArticleMeta.apps.tsx

@@ -4,6 +4,7 @@ import { from, space, until } from '@guardian/source/foundations';
 import { StraightLines } from '@guardian/source-development-kitchen/react-components';
 import type { ReactNode } from 'react';
 import { grid } from '../grid';
+import type { LayoutType } from '../layouts/lib/articleArrangements';
 import { interactiveLegacyClasses } from '../layouts/lib/interactiveLegacyStyling';
 import {
 	ArticleDesign,
@@ -36,6 +37,7 @@ import { PodcastMeta } from './PodcastMeta';
 
 type Props = {
 	format: ArticleFormat;
+	layoutType?: LayoutType;
 	byline?: string;
 	tags: TagType[];
 	primaryDateline: string;
@@ -242,6 +244,7 @@ const galleryMetaContainer = css`
 export const ArticleMetaApps = ({
 	branding,
 	format,
+	layoutType,
 	byline,
 	tags,
 	primaryDateline,
@@ -255,7 +258,7 @@ export const ArticleMetaApps = ({
 }: Props) => {
 	const soleContributor = getSoleContributor(tags, byline);
 	const authorName = soleContributor?.title ?? 'Author Image';
-	const avatarUrl = shouldShowAvatar(format)
+	const avatarUrl = shouldShowAvatar(format, layoutType)
 		? soleContributor?.bylineLargeImageUrl
 		: undefined;
 
@@ -328,7 +331,7 @@ export const ArticleMetaApps = ({
 					</MetaGridAvatar>
 				)}
 				<MetaGridByline isComment={isComment}>
-					{shouldShowContributor(format) && !!byline && (
+					{shouldShowContributor(format, layoutType) && !!byline && (
 						<Contributor
 							byline={byline}
 							tags={tags}

dotcom-rendering/src/components/ArticleMeta.web.tsx

@@ -5,6 +5,7 @@ import { Hide } from '@guardian/source/react-components';
 import { StraightLines } from '@guardian/source-development-kitchen/react-components';
 import type { CSSProperties } from 'react';
 import type { FEArticle } from '../frontend/feArticle';
+import type { LayoutType } from '../layouts/lib/articleArrangements';
 import { interactiveLegacyClasses } from '../layouts/lib/interactiveLegacyStyling';
 import {
 	ArticleDesign,
@@ -43,6 +44,7 @@ import { TimeDateline } from './TimeDateline';
 
 type Props = {
 	format: ArticleFormat;
+	layoutType?: LayoutType;
 	pageId: string;
 	webTitle: string;
 	byline?: string;
@@ -109,11 +111,7 @@ const metaFlex = css`
 `;
 
 const preferredSourceMetaFlex = (hasButton: boolean): CSSProperties =>
-	hasButton
-		? {
-				marginBottom: 8,
-			}
-		: {};
+	hasButton ? { marginBottom: 8 } : {};
 
 const stretchLines = css`
 	display: block;
@@ -152,11 +150,7 @@ const metaExtras = (isPictureContent: boolean) => css`
 `;
 
 const preferredSourceMetaExtras = (hasButton: boolean): CSSProperties =>
-	hasButton
-		? {
-				paddingTop: 8,
-			}
-		: {};
+	hasButton ? { paddingTop: 8 } : {};
 
 const metaNumbers = (isPictureContent: boolean) => css`
 	border-top: 1px solid ${themePalette('--article-border')};
@@ -249,6 +243,25 @@ const MetaAvatarContainer = ({ children }: { children: React.ReactNode }) => (
 	</div>
 );
 
+const ImmersiveMetaAvatarContainer = ({
+	children,
+}: {
+	children: React.ReactNode;
+}) => (
+	<div
+		css={css`
+			width: 60px;
+			height: 60px;
+			margin-top: 3px;
+			margin-right: 10px;
+			margin-bottom: 12px;
+			margin-left: 0px;
+		`}
+	>
+		{children}
+	</div>
+);
+
 const RowBelowLeftCol = ({ children }: { children: React.ReactNode }) => (
 	<div
 		css={css`
@@ -279,6 +292,7 @@ const metaNumbersExtrasLiveBlog = css`
 export const ArticleMeta = ({
 	branding,
 	format,
+	layoutType,
 	pageId,
 	webTitle,
 	byline,
@@ -301,13 +315,21 @@ export const ArticleMeta = ({
 	const soleContributor = getSoleContributor(tags, byline);
 	const authorName = soleContributor?.title ?? 'Author Image';
 
-	const avatarUrl = shouldShowAvatar(format)
+	const avatarUrl = shouldShowAvatar(format, layoutType)
 		? soleContributor?.bylineLargeImageUrl
 		: undefined;
 	const isInteractive = format.design === ArticleDesign.Interactive;
 
 	const isPictureContent = format.design === ArticleDesign.Picture;
 
+	const isImmersive = format.display === ArticleDisplay.Immersive;
+
+	const isPortraitOrLandscapeImmersive =
+		layoutType === 'immersiveLandscapeDefault' ||
+		layoutType === 'immersivePortraitDefault' ||
+		layoutType === 'immersiveLandscapeFeature' ||
+		layoutType === 'immersivePortraitFeature';
+
 	const isAudio = format.design === ArticleDesign.Audio;
 
 	const seriesTag = getSeriesTag(tags);
@@ -350,12 +372,17 @@ export const ArticleMeta = ({
 				) : (
 					''
 				)}
-				<RowBelowLeftCol>
-					<>
+				{isImmersive && isPortraitOrLandscapeImmersive ? (
+					<div
+						css={css`
+							display: flex;
+							flex-direction: row;
+						`}
+					>
 						{!!avatarUrl && (
-							<MetaAvatarContainer>
+							<ImmersiveMetaAvatarContainer>
 								<Avatar src={avatarUrl} alt={authorName} />
-							</MetaAvatarContainer>
+							</ImmersiveMetaAvatarContainer>
 						)}
 						<div>
 							{isAudio && podcast && seriesTag && (
@@ -372,7 +399,7 @@ export const ArticleMeta = ({
 								/>
 							)}
 
-							{shouldShowContributor(format) && (
+							{shouldShowContributor(format, layoutType) && (
 								<Contributor
 									byline={byline}
 									tags={tags}
@@ -403,9 +430,66 @@ export const ArticleMeta = ({
 								/>
 							)}
 						</div>
-					</>
-				</RowBelowLeftCol>
+					</div>
+				) : (
+					<RowBelowLeftCol>
+						<>
+							{!!avatarUrl && (
+								<MetaAvatarContainer>
+									<Avatar src={avatarUrl} alt={authorName} />
+								</MetaAvatarContainer>
+							)}
+							<div>
+								{isAudio && podcast && seriesTag && (
+									<PodcastMeta
+										series={seriesTag}
+										format={format}
+										image={podcast.image}
+										spotifyUrl={podcast.spotifyUrl}
+										subscriptionUrl={
+											podcast.subscriptionUrl
+										}
+										audioDownloadUrl={
+											audioData?.audioDownloadUrl
+										}
+										rssFeedUrl={rssFeedUrl}
+									/>
+								)}
 
+								{shouldShowContributor(format, layoutType) && (
+									<Contributor
+										byline={byline}
+										tags={tags}
+										format={format}
+										source={source}
+									/>
+								)}
+
+								{crossword?.creator && (
+									<CrosswordSetter
+										setter={crossword.creator.name}
+										profileUrl={crossword.creator.webUrl}
+									/>
+								)}
+
+								{!isUndefined(webPublicationDate) &&
+								isFilterArticle ? (
+									<TimeDateline
+										primaryDateline={primaryDateline}
+										webPublicationDate={webPublicationDate}
+										format={format}
+									/>
+								) : (
+									<Dateline
+										primaryDateline={primaryDateline}
+										secondaryDateline={secondaryDateline}
+										format={format}
+									/>
+								)}
+							</div>
+						</>
+					</RowBelowLeftCol>
+				)}
 				<div
 					data-print-layout="hide"
 					css={metaFlex}

dotcom-rendering/src/components/ArticleTitle.tsx

@@ -1,6 +1,7 @@
 import { css } from '@emotion/react';
 import { from } from '@guardian/source/foundations';
 import { grid } from '../../src/grid';
+import type { LayoutType } from '../layouts/lib/articleArrangements';
 import {
 	ArticleDesign,
 	ArticleDisplay,
@@ -11,8 +12,9 @@ import { SeriesSectionLink } from './SeriesSectionLink';
 
 type Props = {
 	format: ArticleFormat;
-	tags: TagType[];
+	layoutType?: LayoutType;
 	sectionLabel: string;
+	tags: TagType[];
 	sectionUrl: string;
 	guardianBaseURL: string;
 	isMatch?: boolean;
@@ -51,6 +53,7 @@ const galleryStyles = css`
 
 export const ArticleTitle = ({
 	format,
+	layoutType,
 	tags,
 	sectionLabel,
 	sectionUrl,
@@ -74,6 +77,7 @@ export const ArticleTitle = ({
 		>
 			<SeriesSectionLink
 				format={format}
+				layoutType={layoutType}
 				tags={tags}
 				sectionLabel={sectionLabel}
 				sectionUrl={sectionUrl}

dotcom-rendering/src/components/SeriesSectionLink.tsx

@@ -11,6 +11,7 @@ import {
 	textSansBold20,
 	until,
 } from '@guardian/source/foundations';
+import type { LayoutType } from '../layouts/lib/articleArrangements';
 import { interactiveLegacyClasses } from '../layouts/lib/interactiveLegacyStyling';
 import {
 	ArticleDesign,
@@ -26,6 +27,7 @@ import { PulsingDot } from './PulsingDot.island';
 
 type Props = {
 	format: ArticleFormat;
+	layoutType?: LayoutType;
 	tags: TagType[];
 	sectionLabel: string;
 	sectionUrl: string;
@@ -190,6 +192,7 @@ const sectionPadding = css`
 
 export const SeriesSectionLink = ({
 	format,
+	layoutType,
 	tags,
 	sectionLabel,
 	sectionUrl,
@@ -376,7 +379,38 @@ export const SeriesSectionLink = ({
 				</div>
 			);
 		}
-		// Immersives show nothing at all if there's no series tag
+		if (
+			layoutType === 'immersivePortraitDefault' ||
+			layoutType === 'immersivePortraitFeature' ||
+			layoutType === 'immersiveLandscapeDefault' ||
+			layoutType === 'immersiveLandscapeFeature'
+		) {
+			return (
+				<>
+					<a
+						href={`${guardianBaseURL}/${sectionUrl}`}
+						css={[
+							sectionLabelLink,
+							css`
+								color: ${titleColour};
+								background-color: ${themePalette(
+									'--section-title-background',
+								)};
+							`,
+							marginRight,
+							fontStyles(format),
+							breakWord,
+						]}
+						data-component="section"
+						data-link-name="article section"
+						className={interactiveLegacyClasses.labelLink}
+					>
+						<span>{sectionLabel}</span>
+					</a>
+				</>
+			);
+		}
+		// Other types of immersives show nothing at all if there's no series tag
 		return null;
 	}
 	if (tag) {