From d7f4289560d8cf9550474256a50d9c5675cce8d2 Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Tue, 23 Jun 2026 19:20:51 +0100 Subject: [PATCH 01/13] Absorb PictureLayout into grid --- .../src/components/DecideLines.tsx | 28 +- dotcom-rendering/src/components/MainMedia.tsx | 7 + dotcom-rendering/src/layouts/DecideLayout.tsx | 20 - .../src/layouts/PictureLayout.tsx | 786 ------------------ .../src/layouts/StandardLayoutArticleGrid.tsx | 211 ++++- .../src/layouts/lib/articleArrangements.ts | 39 +- 6 files changed, 228 insertions(+), 863 deletions(-) delete mode 100644 dotcom-rendering/src/layouts/PictureLayout.tsx diff --git a/dotcom-rendering/src/components/DecideLines.tsx b/dotcom-rendering/src/components/DecideLines.tsx index 5d356323691..6927a3b4186 100644 --- a/dotcom-rendering/src/components/DecideLines.tsx +++ b/dotcom-rendering/src/components/DecideLines.tsx @@ -43,18 +43,20 @@ const DottedLines = ({ export const DecideLines = ({ format, color }: Props) => { const count = format.design === ArticleDesign.Comment ? 8 : 4; - switch (format.theme) { - case Pillar.Sport: - return ; - default: - return ( - - ); + if ( + format.theme === Pillar.Sport && + format.design !== ArticleDesign.Picture + ) { + return ; } + + return ( + + ); }; diff --git a/dotcom-rendering/src/components/MainMedia.tsx b/dotcom-rendering/src/components/MainMedia.tsx index 871c4606715..6d6ae4bd8a5 100644 --- a/dotcom-rendering/src/components/MainMedia.tsx +++ b/dotcom-rendering/src/components/MainMedia.tsx @@ -75,6 +75,13 @@ const chooseWrapper = (format: ArticleFormat) => { return noGutters; } } + case ArticleDisplay.Showcase: + switch (format.design) { + case ArticleDesign.Picture: + return ''; + default: + return noGutters; + } default: return noGutters; } diff --git a/dotcom-rendering/src/layouts/DecideLayout.tsx b/dotcom-rendering/src/layouts/DecideLayout.tsx index 77803138313..3dd8aae0ba2 100644 --- a/dotcom-rendering/src/layouts/DecideLayout.tsx +++ b/dotcom-rendering/src/layouts/DecideLayout.tsx @@ -13,7 +13,6 @@ import { ImmersiveLayout } from './ImmersiveLayout'; import { InteractiveLayout } from './InteractiveLayout'; import { LiveLayout } from './LiveLayout'; import { NewsletterSignupLayout } from './NewsletterSignupLayout'; -import { PictureLayout } from './PictureLayout'; import { StandardLayout } from './StandardLayout'; interface BaseProps { @@ -89,15 +88,6 @@ const DecideLayoutApps = ({ article, renderingTarget }: AppProps) => { serverTime={serverTime} /> ); - case ArticleDesign.Picture: - return ( - - ); default: return ( { serverTime={serverTime} /> ); - case ArticleDesign.Picture: - return ( - - ); default: return ( ( -
- {children} -
-); - -const maxWidth = css` - ${from.desktop} { - max-width: 620px; - } -`; - -const stretchLines = css` - ${until.phablet} { - margin-left: -20px; - margin-right: -20px; - } - ${until.mobileLandscape} { - margin-left: -10px; - margin-right: -10px; - } -`; - -const mainMediaWrapper = (displayAvatarUrl: boolean) => css` - position: relative; - ${until.phablet} { - margin-left: 20px; - margin-right: 20px; - } - ${until.mobileLandscape} { - margin-left: 10px; - margin-right: 10px; - } - ${displayAvatarUrl - ? css` - margin-top: 8px; - ` - : ``} -`; - -const avatarHeadlineWrapper = css` - display: flex; - flex-direction: column; - justify-content: space-between; -`; - -// This styling taken from the similar approach in CommentLayout.tsx -// If in mobile increase the margin top and margin right deficit -const avatarPositionStyles = css` - display: flex; - justify-content: flex-end; - position: relative; - margin-bottom: -29px; - pointer-events: none; - ${from.desktop} { - margin-top: -50px; - } - ${until.tablet} { - overflow: hidden; - } - - /* Why target img element? - - Because only in this context, where we have overflow: hidden - and the margin-bottom and margin-top of avatarPositionStyles - do we also want to apply our margin-right. These styles - are tightly coupled in this context, and so it does not - make sense to move them to the avatar component. - - It's imperfect from the perspective of DCR, the alternative is to bust - the combined elements into a separate component (with the - relevant stories) and couple them that way, which might be what - you want to do if you find yourself adding more styles - to this section. For now, this works without making me 🤢. - */ - - ${from.mobile} { - img { - margin-right: -1.85rem; - } - } - ${from.mobileLandscape} { - img { - margin-right: -1.25rem; - } - } -`; - -const LeftColLines = (displayAvatarUrl: boolean) => css` - margin-bottom: 4px; - ${displayAvatarUrl - ? css` - margin-top: -29px; - ` - : ''} -`; - -interface CommonProps { - article: ArticleDeprecated; - format: ArticleFormat; - renderingTarget: RenderingTarget; - serverTime?: number; -} - -interface WebProps extends CommonProps { - NAV: NavType; - renderingTarget: 'Web'; -} - -interface AppsProps extends CommonProps { - renderingTarget: 'Apps'; -} - -export const PictureLayout = (props: WebProps | AppsProps) => { - const { article, format, renderingTarget, serverTime } = props; - - const { - config: { isPaidContent, host, hasSurveyAd }, - } = article; - - const isWeb = renderingTarget === 'Web'; - const isApps = renderingTarget === 'Apps'; - - // TODO: - // 1) Read 'forceEpic' value from URL parameter and use it to force the slot to render - // 2) Otherwise, ensure slot only renders if `article.config.shouldHideReaderRevenue` equals false. - - const showComments = article.isCommentable && !isPaidContent; - - const { branding } = article.commercialProperties[article.editionId]; - - const contributionsServiceUrl = getContributionsServiceUrl(article); - - const renderAds = canRenderAds(article); - - const isWorldCup2026 = article.tags.some((tag) => tag.id === worldCupTagId); - - const avatarUrl = getSoleContributor( - article.tags, - article.byline, - )?.bylineLargeImageUrl; - - const displayAvatarUrl = avatarUrl ? true : false; - - return ( - <> - {isWeb && ( -
- {renderAds && ( - -
- -
- - )} - tag.id)} - sectionId={article.config.section} - contentType={article.contentType} - /> -
- )} - - {isWeb && renderAds && hasSurveyAd && ( - - )} - -
- {isApps && renderAds && ( - - - - )} - -
- - - - - - - - - {displayAvatarUrl ? ( - -
-
- -
- -
- {!!avatarUrl && ( -
- -
- )} - -
-
- - ) : ( - -
- -
- - )} - - - - -
- -
- - -
- -
-
- {isApps ? ( - <> - - - - - - - - ) : ( - - )} -
- - - - - - - - -
- - {isWeb && renderAds && ( -
- -
- )} - - {article.storyPackage && ( -
- - - -
- )} - - {isWeb && ( - - - - )} - {showComments && ( -
- -
- )} - - {!isPaidContent && ( -
- - - - - -
- )} - - {isWeb && renderAds && ( -
- -
- )} -
- - {isWeb && props.NAV.subNavSections && ( -
- - - -
- )} - - {isWeb && ( - <> -
-
-
- - - - - - - {renderAds && ( - - )} - - )} - {isApps && ( -
- - - -
- )} - - ); -}; diff --git a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx index 84fb7928e6d..bb8d92e064d 100644 --- a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx +++ b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx @@ -11,6 +11,7 @@ import { ArticleHeadline } from '../components/ArticleHeadline'; import { ArticleMetaApps } from '../components/ArticleMeta.apps'; import { ArticleMeta } from '../components/ArticleMeta.web'; import { ArticleTitle } from '../components/ArticleTitle'; +import { ContributorAvatar } from '../components/ContributorAvatar'; import { DecideLines } from '../components/DecideLines'; import { FootballMatchInfoWrapper } from '../components/FootballMatchInfoWrapper.island'; import { GuardianLabsLines } from '../components/GuardianLabsLines'; @@ -28,6 +29,7 @@ import { type ArticleFormat, ArticleSpecial, } from '../lib/articleFormat'; +import { getSoleContributor } from '../lib/byline'; import { getContributionsServiceUrl } from '../lib/contributions'; import { safeParseURL } from '../lib/parse'; import { parse } from '../lib/slot-machine-flags'; @@ -51,6 +53,54 @@ const stretchLines = css` } `; +const avatarHeadlineWrapper = css` + display: flex; + flex-direction: column; + justify-content: space-between; +`; + +// This styling taken from the similar approach in CommentLayout.tsx +// If in mobile increase the margin top and margin right deficit +const avatarPositionStyles = css` + display: flex; + justify-content: flex-end; + position: relative; + margin-bottom: -29px; + pointer-events: none; + ${from.desktop} { + margin-top: -50px; + } + ${until.tablet} { + overflow: hidden; + } + + /* Why target img element? + + Because only in this context, where we have overflow: hidden + and the margin-bottom and margin-top of avatarPositionStyles + do we also want to apply our margin-right. These styles + are tightly coupled in this context, and so it does not + make sense to move them to the avatar component. + + It's imperfect from the perspective of DCR, the alternative is to bust + the combined elements into a separate component (with the + relevant stories) and couple them that way, which might be what + you want to do if you find yourself adding more styles + to this section. For now, this works without making me 🤢. + */ + + ${from.mobile} { + img { + margin-right: -1.85rem; + } + } + ${from.mobileLandscape} { + img { + margin-right: -1.25rem; + } + } +`; + interface GridItemProps { area: Area; layoutType: LayoutType; @@ -110,6 +160,7 @@ export const StandardLayoutArticleGrid = ({ format.design === ArticleDesign.Video || format.design === ArticleDesign.Audio; const isShowcase = format.display === ArticleDisplay.Showcase; + const isPicture = format.design === ArticleDesign.Picture; const footballMatchUrl = article.matchType === 'FootballMatchType' @@ -121,9 +172,18 @@ export const StandardLayoutArticleGrid = ({ const layoutType: LayoutType = isMedia ? 'media' - : isShowcase - ? 'showcase' - : 'standard'; + : isPicture + ? 'picture' + : isShowcase + ? 'showcase' + : 'standard'; + + const avatarUrl = getSoleContributor( + article.tags, + article.byline, + )?.bylineLargeImageUrl; + + const displayAvatarUrl = avatarUrl ? true : false; return (
- + - + + {displayAvatarUrl && ( + + + + )} - - - + {displayAvatarUrl ? ( + +
+ + +
+ {!!avatarUrl && ( +
+ +
+ )} + +
+
+ + ) : ( + + + + )} @@ -191,12 +317,12 @@ export const StandardLayoutArticleGrid = ({ format.theme === ArticleSpecial.Labs && format.design !== ArticleDesign.Video ? ( - ) : ( + ) : !displayAvatarUrl ? ( - )} + ) : null} )} {isApps ? ( @@ -401,30 +527,29 @@ export const StandardLayoutArticleGrid = ({ } `} > - - - - - + {!isPicture && ( + + + + + + )}
); diff --git a/dotcom-rendering/src/layouts/lib/articleArrangements.ts b/dotcom-rendering/src/layouts/lib/articleArrangements.ts index 2cf5fb6843f..d8b858caffa 100644 --- a/dotcom-rendering/src/layouts/lib/articleArrangements.ts +++ b/dotcom-rendering/src/layouts/lib/articleArrangements.ts @@ -2,7 +2,7 @@ import { css, type SerializedStyles } from '@emotion/react'; import { from, until } from '@guardian/source/foundations'; import { grid } from '../../grid'; -export type LayoutType = 'standard' | 'showcase' | 'media'; +export type LayoutType = 'standard' | 'showcase' | 'media' | 'picture'; export type Area = | 'title' @@ -149,10 +149,47 @@ const mediaCss: LayoutCssMap = { }, }; +const pictureCss: LayoutCssMap = { + title: { + mobile: 'grid-row: 1;', + tablet: 'grid-row: 1;', + leftCol: `grid-row: 1; ${grid.column.left}`, + }, + headline: { + mobile: 'grid-row: 2;', + tablet: 'grid-row: 2;', + leftCol: 'grid-row: 1;', + }, + standfirst: { + mobile: 'grid-row: 4;', + tablet: 'grid-row: 4;', + desktop: 'grid-row: 4;', + leftCol: 'grid-row: 2;', + }, + media: { + mobile: 'grid-row: 5;', + tablet: 'grid-row: 5;', + desktop: `grid-row: 5; ${grid.between('centre-column-start', 'right-column-end')};`, + leftCol: `grid-row: 3; ${grid.between('centre-column-start', 'right-column-end')};`, + }, + meta: { + mobile: 'grid-row: 3;', + tablet: 'grid-row: 3;', + desktop: `grid-row: 3; ${grid.between('centre-column-start', 'right-column-end')};`, + leftCol: `grid-row: 3 / span 2; ${grid.column.left};`, + }, + body: { + tablet: 'grid-row: 6;', + desktop: `grid-row: 6; ${grid.between('centre-column-start', 'right-column-end')};`, + leftCol: `grid-row: 5; ${grid.between('centre-column-start', 'right-column-end')};`, + }, +}; + const layoutCssMaps: Record = { standard: standardCss, showcase: showcaseCss, media: mediaCss, + picture: pictureCss, }; /** From 17d4f135d284faa913b6dc10dde228e8fece5819 Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Sun, 28 Jun 2026 23:49:15 +0100 Subject: [PATCH 02/13] Handle author/artist avatars --- dotcom-rendering/src/components/ArticleHeadline.tsx | 13 +++++++++---- .../src/layouts/lib/articleArrangements.ts | 1 + 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/dotcom-rendering/src/components/ArticleHeadline.tsx b/dotcom-rendering/src/components/ArticleHeadline.tsx index 3b0c141fc86..c06bb27a5e2 100644 --- a/dotcom-rendering/src/components/ArticleHeadline.tsx +++ b/dotcom-rendering/src/components/ArticleHeadline.tsx @@ -874,10 +874,15 @@ export const ArticleHeadline = ({ case ArticleDesign.Picture: return (

Date: Wed, 22 Jul 2026 13:01:57 +0100 Subject: [PATCH 03/13] Update dotcom-rendering/src/layouts/lib/articleArrangements.ts Co-authored-by: Jamie B <53781962+JamieB-gu@users.noreply.github.com> --- dotcom-rendering/src/layouts/lib/articleArrangements.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dotcom-rendering/src/layouts/lib/articleArrangements.ts b/dotcom-rendering/src/layouts/lib/articleArrangements.ts index 00e4ec032cc..ab93a791776 100644 --- a/dotcom-rendering/src/layouts/lib/articleArrangements.ts +++ b/dotcom-rendering/src/layouts/lib/articleArrangements.ts @@ -182,7 +182,7 @@ const pictureCss: LayoutCssMap = { body: { tablet: 'grid-row: 6;', desktop: `grid-row: 6; ${grid.between('centre-column-start', 'right-column-end')};`, - leftCol: `grid-row: 5; ${grid.between('centre-column-start', 'right-column-end')};`, + leftCol: `grid-row: 5;`, }, }; From c05ca0e40ced0f5dbcdd2e75f99d020c36d5b1d8 Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Wed, 22 Jul 2026 13:02:19 +0100 Subject: [PATCH 04/13] Update dotcom-rendering/src/layouts/lib/articleArrangements.ts Co-authored-by: Jamie B <53781962+JamieB-gu@users.noreply.github.com> --- dotcom-rendering/src/layouts/lib/articleArrangements.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dotcom-rendering/src/layouts/lib/articleArrangements.ts b/dotcom-rendering/src/layouts/lib/articleArrangements.ts index ab93a791776..f5c40808d87 100644 --- a/dotcom-rendering/src/layouts/lib/articleArrangements.ts +++ b/dotcom-rendering/src/layouts/lib/articleArrangements.ts @@ -153,7 +153,7 @@ const pictureCss: LayoutCssMap = { title: { mobile: 'grid-row: 1;', tablet: 'grid-row: 1;', - leftCol: `grid-row: 1; ${grid.column.left}`, + leftCol: grid.column.left, }, headline: { mobile: 'grid-row: 2;', From 8d60c2b214e81e3f60eaf1e533446278db2fe44f Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Wed, 22 Jul 2026 13:02:30 +0100 Subject: [PATCH 05/13] Update dotcom-rendering/src/layouts/lib/articleArrangements.ts Co-authored-by: Jamie B <53781962+JamieB-gu@users.noreply.github.com> --- dotcom-rendering/src/layouts/lib/articleArrangements.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dotcom-rendering/src/layouts/lib/articleArrangements.ts b/dotcom-rendering/src/layouts/lib/articleArrangements.ts index f5c40808d87..a2423703b37 100644 --- a/dotcom-rendering/src/layouts/lib/articleArrangements.ts +++ b/dotcom-rendering/src/layouts/lib/articleArrangements.ts @@ -176,7 +176,7 @@ const pictureCss: LayoutCssMap = { meta: { mobile: 'grid-row: 3;', tablet: 'grid-row: 3;', - desktop: `grid-row: 3; ${grid.between('centre-column-start', 'right-column-end')};`, + desktop: grid.between('centre-column-start', 'right-column-end'), leftCol: `grid-row: 3 / span 2; ${grid.column.left};`, }, body: { From 447de56c3d45dcb80731ed4e19c54f42ffd6f46e Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Wed, 22 Jul 2026 13:02:45 +0100 Subject: [PATCH 06/13] Update dotcom-rendering/src/layouts/lib/articleArrangements.ts Co-authored-by: Jamie B <53781962+JamieB-gu@users.noreply.github.com> --- dotcom-rendering/src/layouts/lib/articleArrangements.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dotcom-rendering/src/layouts/lib/articleArrangements.ts b/dotcom-rendering/src/layouts/lib/articleArrangements.ts index a2423703b37..4338c91c1bf 100644 --- a/dotcom-rendering/src/layouts/lib/articleArrangements.ts +++ b/dotcom-rendering/src/layouts/lib/articleArrangements.ts @@ -170,7 +170,7 @@ const pictureCss: LayoutCssMap = { media: { mobile: 'grid-row: 5;', tablet: 'grid-row: 5;', - desktop: `grid-row: 5; ${grid.between('centre-column-start', 'right-column-end')};`, + desktop: grid.between('centre-column-start', 'right-column-end'), leftCol: `grid-row: 3; ${grid.between('centre-column-start', 'right-column-end')};`, }, meta: { From 4cf0666f941b3b1f9e8ddc2b15276bcde16839b4 Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Wed, 22 Jul 2026 13:02:57 +0100 Subject: [PATCH 07/13] Update dotcom-rendering/src/layouts/lib/articleArrangements.ts Co-authored-by: Jamie B <53781962+JamieB-gu@users.noreply.github.com> --- dotcom-rendering/src/layouts/lib/articleArrangements.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dotcom-rendering/src/layouts/lib/articleArrangements.ts b/dotcom-rendering/src/layouts/lib/articleArrangements.ts index 4338c91c1bf..2dda4c68763 100644 --- a/dotcom-rendering/src/layouts/lib/articleArrangements.ts +++ b/dotcom-rendering/src/layouts/lib/articleArrangements.ts @@ -181,7 +181,7 @@ const pictureCss: LayoutCssMap = { }, body: { tablet: 'grid-row: 6;', - desktop: `grid-row: 6; ${grid.between('centre-column-start', 'right-column-end')};`, + desktop: grid.between('centre-column-start', 'right-column-end'), leftCol: `grid-row: 5;`, }, }; From 7dedfd241565b6a09c11ae41fdee01f9d0023dcc Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Wed, 22 Jul 2026 13:03:08 +0100 Subject: [PATCH 08/13] Update dotcom-rendering/src/layouts/lib/articleArrangements.ts Co-authored-by: Jamie B <53781962+JamieB-gu@users.noreply.github.com> --- dotcom-rendering/src/layouts/lib/articleArrangements.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/dotcom-rendering/src/layouts/lib/articleArrangements.ts b/dotcom-rendering/src/layouts/lib/articleArrangements.ts index 2dda4c68763..ff69b9bfe5c 100644 --- a/dotcom-rendering/src/layouts/lib/articleArrangements.ts +++ b/dotcom-rendering/src/layouts/lib/articleArrangements.ts @@ -164,7 +164,6 @@ const pictureCss: LayoutCssMap = { standfirst: { mobile: 'grid-row: 4;', tablet: 'grid-row: 4;', - desktop: 'grid-row: 4;', leftCol: 'grid-row: 2;', }, media: { From a70d20701d886584dd09cf7c349c5d582423aa49 Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Wed, 22 Jul 2026 13:03:50 +0100 Subject: [PATCH 09/13] Update dotcom-rendering/src/layouts/lib/articleArrangements.ts Co-authored-by: Jamie B <53781962+JamieB-gu@users.noreply.github.com> --- dotcom-rendering/src/layouts/lib/articleArrangements.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dotcom-rendering/src/layouts/lib/articleArrangements.ts b/dotcom-rendering/src/layouts/lib/articleArrangements.ts index ff69b9bfe5c..42f0326d3e8 100644 --- a/dotcom-rendering/src/layouts/lib/articleArrangements.ts +++ b/dotcom-rendering/src/layouts/lib/articleArrangements.ts @@ -158,7 +158,7 @@ const pictureCss: LayoutCssMap = { headline: { mobile: 'grid-row: 2;', tablet: 'grid-row: 2;', - desktop: `grid-row: 2; ${grid.between('centre-column-start', 'right-column-end')};`, + desktop: grid.between('centre-column-start', 'right-column-end'), leftCol: 'grid-row: 1;', }, standfirst: { From a2d2ee4e112fd5ad6709929467a89db37cb9073c Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Wed, 22 Jul 2026 13:04:21 +0100 Subject: [PATCH 10/13] Update dotcom-rendering/src/layouts/lib/articleArrangements.ts Co-authored-by: Jamie B <53781962+JamieB-gu@users.noreply.github.com> --- dotcom-rendering/src/layouts/lib/articleArrangements.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dotcom-rendering/src/layouts/lib/articleArrangements.ts b/dotcom-rendering/src/layouts/lib/articleArrangements.ts index 42f0326d3e8..7cdc106e726 100644 --- a/dotcom-rendering/src/layouts/lib/articleArrangements.ts +++ b/dotcom-rendering/src/layouts/lib/articleArrangements.ts @@ -170,7 +170,7 @@ const pictureCss: LayoutCssMap = { mobile: 'grid-row: 5;', tablet: 'grid-row: 5;', desktop: grid.between('centre-column-start', 'right-column-end'), - leftCol: `grid-row: 3; ${grid.between('centre-column-start', 'right-column-end')};`, + leftCol: `grid-row: 3;`, }, meta: { mobile: 'grid-row: 3;', From 7f5fb72fe0b66f142384236a768b28fbc372e131 Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Tue, 28 Jul 2026 14:33:41 +0100 Subject: [PATCH 11/13] Properly nest headline elements --- .../src/layouts/StandardLayoutArticleGrid.tsx | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx index bb8d92e064d..5eabc901ed0 100644 --- a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx +++ b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx @@ -274,23 +274,23 @@ export const StandardLayoutArticleGrid = ({ starRating={article.starRating} /> -
- {!!avatarUrl && ( + {!!avatarUrl && ( + <>
- )} - -
+ + + )}

) : ( From a2ef0b6a47ccfb4dcc6212326add308791f4e3af Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Tue, 28 Jul 2026 14:53:48 +0100 Subject: [PATCH 12/13] Tidying --- .../src/components/ArticleHeadline.tsx | 4 +- .../src/components/DecideLines.tsx | 39 ++++++++++++------- .../src/layouts/StandardLayoutArticleGrid.tsx | 35 ++++++----------- 3 files changed, 36 insertions(+), 42 deletions(-) diff --git a/dotcom-rendering/src/components/ArticleHeadline.tsx b/dotcom-rendering/src/components/ArticleHeadline.tsx index c06bb27a5e2..3dde08ed9b2 100644 --- a/dotcom-rendering/src/components/ArticleHeadline.tsx +++ b/dotcom-rendering/src/components/ArticleHeadline.tsx @@ -879,9 +879,7 @@ export const ArticleHeadline = ({ format, hasAvatar, }), - css` - max-width: 620px; - `, + maxWidth, ]} > diff --git a/dotcom-rendering/src/components/DecideLines.tsx b/dotcom-rendering/src/components/DecideLines.tsx index 6927a3b4186..3cc0a039e59 100644 --- a/dotcom-rendering/src/components/DecideLines.tsx +++ b/dotcom-rendering/src/components/DecideLines.tsx @@ -43,20 +43,29 @@ const DottedLines = ({ export const DecideLines = ({ format, color }: Props) => { const count = format.design === ArticleDesign.Comment ? 8 : 4; - if ( - format.theme === Pillar.Sport && - format.design !== ArticleDesign.Picture - ) { - return ; + switch (format.theme) { + case Pillar.Sport: + if (format.design !== ArticleDesign.Picture) { + return ; + } + return ( + + ); + default: + return ( + + ); } - - return ( - - ); }; diff --git a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx index 5eabc901ed0..cc7785715a6 100644 --- a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx +++ b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx @@ -205,9 +205,9 @@ export const StandardLayoutArticleGrid = ({ area="media" layoutType={layoutType} css={ - displayAvatarUrl + displayAvatarUrl && isPicture ? css` - margin-top: 8px; + margin-top: ${space[2]}px; ` : undefined } @@ -247,20 +247,9 @@ export const StandardLayoutArticleGrid = ({ guardianBaseURL={article.guardianBaseURL} isMatch={!!footballMatchUrl} /> - {displayAvatarUrl && ( - - - - )} - {displayAvatarUrl ? ( - + + {displayAvatarUrl && isPicture ? (
- {!!avatarUrl && ( + {!!avatarUrl && isPicture && ( <>
)}
- - ) : ( - + ) : ( - - )} + )} + @@ -317,12 +304,12 @@ export const StandardLayoutArticleGrid = ({ format.theme === ArticleSpecial.Labs && format.design !== ArticleDesign.Video ? ( - ) : !displayAvatarUrl ? ( + ) : ( - ) : null} + )}
)} {isApps ? ( From c75a9d35b4478d43e9c7bb41f2e43b40fc103cfe Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Wed, 29 Jul 2026 17:03:58 +0100 Subject: [PATCH 13/13] Use switch to decide grid arrangement --- .../src/layouts/StandardLayoutArticleGrid.tsx | 26 +++++++++++++------ 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx index cc7785715a6..b8bd6fee064 100644 --- a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx +++ b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx @@ -159,7 +159,6 @@ export const StandardLayoutArticleGrid = ({ const isMedia = format.design === ArticleDesign.Video || format.design === ArticleDesign.Audio; - const isShowcase = format.display === ArticleDisplay.Showcase; const isPicture = format.design === ArticleDesign.Picture; const footballMatchUrl = @@ -170,13 +169,24 @@ export const StandardLayoutArticleGrid = ({ const isFootballMatchReport = format.design === ArticleDesign.MatchReport && !!footballMatchUrl; - const layoutType: LayoutType = isMedia - ? 'media' - : isPicture - ? 'picture' - : isShowcase - ? 'showcase' - : 'standard'; + const getLayoutType = (articleFormat: ArticleFormat): LayoutType => { + switch (articleFormat.display) { + case ArticleDisplay.Showcase: + return 'showcase'; + default: + switch (articleFormat.design) { + case ArticleDesign.Video: + case ArticleDesign.Audio: + return 'media'; + case ArticleDesign.Picture: + return 'picture'; + default: + return 'standard'; + } + } + }; + + const layoutType: LayoutType = getLayoutType(format); const avatarUrl = getSoleContributor( article.tags,