From c4068b7caf4857daa0a76005ab858c81b2b6f277 Mon Sep 17 00:00:00 2001 From: Dina Hafez Date: Wed, 30 Jul 2025 15:30:49 +0100 Subject: [PATCH 01/14] Add Labs header and fix fontStyles for Gallery Labs Co-authored-by: Marjan Kalanaki --- .../src/components/SeriesSectionLink.tsx | 74 ++++++++++++------- .../src/layouts/GalleryLayout.tsx | 24 ++++-- 2 files changed, 63 insertions(+), 35 deletions(-) diff --git a/dotcom-rendering/src/components/SeriesSectionLink.tsx b/dotcom-rendering/src/components/SeriesSectionLink.tsx index c45fb8c6792..0cf2ce6b7f0 100644 --- a/dotcom-rendering/src/components/SeriesSectionLink.tsx +++ b/dotcom-rendering/src/components/SeriesSectionLink.tsx @@ -8,6 +8,7 @@ import { space, textSans17, textSans20, + textSansBold17, textSansBold20, until, } from '@guardian/source/foundations'; @@ -101,43 +102,60 @@ const invertedStyle = (design: ArticleDesign) => { }; const fontStyles = (format: ArticleFormat) => { - if (format.design === ArticleDesign.Gallery) { - return css` - ${headlineBold17} - ${from.desktop} { - ${headlineBold20} - line-height: 36px; - } - line-height: 36px; - `; - } - switch (format.theme) { - case ArticleSpecial.Labs: - switch (format.display) { - case ArticleDisplay.Immersive: + switch (format.design) { + case ArticleDesign.Gallery: + switch (format.theme) { + case ArticleSpecial.Labs: return css` - ${textSansBold20}; - line-height: 23px; - ${from.leftCol} { - line-height: 20px; + ${textSansBold17}; + line-height: 36px; + ${from.desktop} { + ${textSansBold20}; + // This is added again because there is a line-height in textSansBold20 so we are overriding it + line-height: 36px; } `; default: return css` - ${textSans20}; - line-height: 23px; - ${from.leftCol} { - line-height: 20px; + ${headlineBold17} + line-height: 36px; + + ${from.desktop} { + ${headlineBold20} + // This is added again because there is a line-height in textSansBold20 so we are overriding it + line-height: 36px; } `; } default: - return css` - ${headlineBold17} - ${from.wide} { - ${headlineBold20} - } - `; + switch (format.theme) { + case ArticleSpecial.Labs: + switch (format.display) { + case ArticleDisplay.Immersive: + return css` + ${textSansBold20}; + line-height: 23px; + ${from.leftCol} { + line-height: 20px; + } + `; + default: + return css` + ${textSans20}; + line-height: 23px; + ${from.leftCol} { + line-height: 20px; + } + `; + } + default: + return css` + ${headlineBold17} + ${from.wide} { + ${headlineBold20} + } + `; + } } }; diff --git a/dotcom-rendering/src/layouts/GalleryLayout.tsx b/dotcom-rendering/src/layouts/GalleryLayout.tsx index bcb9e35095a..cebcbe0abc2 100644 --- a/dotcom-rendering/src/layouts/GalleryLayout.tsx +++ b/dotcom-rendering/src/layouts/GalleryLayout.tsx @@ -19,6 +19,7 @@ import { DesktopAdSlot, MobileAdSlot } from '../components/GalleryAdSlots'; import { GalleryImage } from '../components/GalleryImage'; import { HeaderAdSlot } from '../components/HeaderAdSlot'; import { Island } from '../components/Island'; +import { LabsHeader } from '../components/LabsHeader'; import { MainMediaGallery } from '../components/MainMediaGallery'; import { Masthead } from '../components/Masthead/Masthead'; import { Section } from '../components/Section'; @@ -51,12 +52,6 @@ interface AppProps extends Props { renderingTarget: 'Apps'; } -const border = css({ - borderWidth: 1, - borderStyle: 'solid', - color: '#ccc', -}); - const headerStyles = css` ${grid.container} background-color: ${themePalette('--article-inner-background')}; @@ -200,12 +195,27 @@ export const GalleryLayout = (props: WebProps | AppProps) => { /> )} + + {format.theme === ArticleSpecial.Labs && ( + +
+ +
+ + )} +
-
Labs header
Date: Wed, 30 Jul 2025 15:54:29 +0100 Subject: [PATCH 02/14] Fix stylelint --- dotcom-rendering/src/components/SeriesSectionLink.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/dotcom-rendering/src/components/SeriesSectionLink.tsx b/dotcom-rendering/src/components/SeriesSectionLink.tsx index 0cf2ce6b7f0..601f5087e07 100644 --- a/dotcom-rendering/src/components/SeriesSectionLink.tsx +++ b/dotcom-rendering/src/components/SeriesSectionLink.tsx @@ -111,7 +111,7 @@ const fontStyles = (format: ArticleFormat) => { line-height: 36px; ${from.desktop} { ${textSansBold20}; - // This is added again because there is a line-height in textSansBold20 so we are overriding it + /* This is added again because there is a line-height in textSansBold20 so we are overriding it */ line-height: 36px; } `; @@ -122,7 +122,7 @@ const fontStyles = (format: ArticleFormat) => { ${from.desktop} { ${headlineBold20} - // This is added again because there is a line-height in textSansBold20 so we are overriding it + /* This is added again because there is a line-height in textSansBold20 so we are overriding it */ line-height: 36px; } `; From bab468f511ca56cacc85f7d2f48c9c6e9d9533e6 Mon Sep 17 00:00:00 2001 From: Dina Hafez Date: Fri, 1 Aug 2025 15:48:19 +0100 Subject: [PATCH 03/14] Fix captionTextLight for Labs Gallery --- dotcom-rendering/src/layouts/GalleryLayout.tsx | 2 +- dotcom-rendering/src/paletteDeclarations.ts | 7 ++++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/dotcom-rendering/src/layouts/GalleryLayout.tsx b/dotcom-rendering/src/layouts/GalleryLayout.tsx index cebcbe0abc2..8a8668369c5 100644 --- a/dotcom-rendering/src/layouts/GalleryLayout.tsx +++ b/dotcom-rendering/src/layouts/GalleryLayout.tsx @@ -187,7 +187,7 @@ export const GalleryLayout = (props: WebProps | AppProps) => { contributionsServiceUrl={ frontendData.contributionsServiceUrl } - showSubNav={false} + showSubNav={!isLabs} showSlimNav={true} hasPageSkin={false} hasPageSkinContentSelfConstrain={false} diff --git a/dotcom-rendering/src/paletteDeclarations.ts b/dotcom-rendering/src/paletteDeclarations.ts index 90e0161f076..74e2c18df06 100644 --- a/dotcom-rendering/src/paletteDeclarations.ts +++ b/dotcom-rendering/src/paletteDeclarations.ts @@ -2672,7 +2672,12 @@ const captionTextLight: PaletteFunction = ({ design, theme }) => { return sourcePalette.neutral[7]; } case ArticleSpecial.Labs: - return sourcePalette.neutral[20]; + switch (design) { + case ArticleDesign.Gallery: + return sourcePalette.neutral[86]; + default: + return sourcePalette.neutral[20]; + } default: switch (design) { case ArticleDesign.PhotoEssay: From e5d6189fd9d662cafc09a5c61eb3f309bbf416c5 Mon Sep 17 00:00:00 2001 From: Dina Hafez Date: Tue, 5 Aug 2025 13:21:44 +0100 Subject: [PATCH 04/14] Fix caption and standfirst fonts for Labs Gallery Co-authored-by: Marjan Kalanaki --- dotcom-rendering/src/components/Caption.tsx | 4 +++- dotcom-rendering/src/components/Standfirst.tsx | 6 ++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/dotcom-rendering/src/components/Caption.tsx b/dotcom-rendering/src/components/Caption.tsx index 038657fc690..a12f9d62910 100644 --- a/dotcom-rendering/src/components/Caption.tsx +++ b/dotcom-rendering/src/components/Caption.tsx @@ -211,7 +211,9 @@ const captionLink = css` `; const galleryStyles = css` - ${grid.column.centre} + ${grid.column.centre}; + ${textSans12}; + margin-bottom: 0; padding-bottom: 6px; ${from.leftCol} { diff --git a/dotcom-rendering/src/components/Standfirst.tsx b/dotcom-rendering/src/components/Standfirst.tsx index 53b59a5092e..916d8eee27b 100644 --- a/dotcom-rendering/src/components/Standfirst.tsx +++ b/dotcom-rendering/src/components/Standfirst.tsx @@ -12,6 +12,7 @@ import { textSans17, textSans20, textSans24, + textSansBold15, } from '@guardian/source/foundations'; import sanitise from 'sanitize-html'; import { grid } from '../../src/grid'; @@ -83,6 +84,11 @@ const decideFont = ({ display, design, theme }: ArticleFormat) => { const isLabs = theme === ArticleSpecial.Labs; switch (design) { case ArticleDesign.Gallery: + if (isLabs) { + return css` + ${textSansBold15}; + `; + } return css` ${headlineBold17} `; From fa86c04866d60443014541e24ec499a1905c6d4e Mon Sep 17 00:00:00 2001 From: Dina Hafez Date: Tue, 5 Aug 2025 15:08:10 +0100 Subject: [PATCH 05/14] Update Contributor font styles for Labs Galleries Co-authored-by: Onye Anuna --- .../src/components/Contributor.tsx | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/dotcom-rendering/src/components/Contributor.tsx b/dotcom-rendering/src/components/Contributor.tsx index 141d94a2847..dd43ae0b5d5 100644 --- a/dotcom-rendering/src/components/Contributor.tsx +++ b/dotcom-rendering/src/components/Contributor.tsx @@ -2,6 +2,7 @@ import { css } from '@emotion/react'; import { headlineMedium17, palette as sourcePalette, + textEgyptianItalic17, textSansItalic17, until, } from '@guardian/source/foundations'; @@ -69,10 +70,16 @@ const bylineStyles = (format: ArticleFormat) => { } }; -const labsBylineStyles = css` - ${textSansItalic17}; - line-height: 1.4; -`; +const labsBylineStyles = (design: ArticleDesign) => { + const textStyle = + design === ArticleDesign.Gallery + ? textEgyptianItalic17 + : textSansItalic17; + return css` + ${textStyle}; + line-height: 1.4; + `; +}; type Props = { byline?: string; @@ -96,7 +103,8 @@ export const Contributor = ({ byline, tags, format, source }: Props) => ( } css={[ bylineStyles(format), - format.theme === ArticleSpecial.Labs && labsBylineStyles, + format.theme === ArticleSpecial.Labs && + labsBylineStyles(format.design), format.design === ArticleDesign.LiveBlog && standfirstColourBelowDesktop, ]} From a4cfdde51589487f5e27186a61b7b3891b7c505f Mon Sep 17 00:00:00 2001 From: Dina Hafez Date: Wed, 6 Aug 2025 10:19:22 +0100 Subject: [PATCH 06/14] Update logo label to be bold --- .../src/components/Branding.importable.tsx | 21 ++++++++++++------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/dotcom-rendering/src/components/Branding.importable.tsx b/dotcom-rendering/src/components/Branding.importable.tsx index 291e73b4262..f536e42dcf3 100644 --- a/dotcom-rendering/src/components/Branding.importable.tsx +++ b/dotcom-rendering/src/components/Branding.importable.tsx @@ -4,6 +4,7 @@ import { breakpoints, from, textSans12, + textSansBold12, } from '@guardian/source/foundations'; import { ArticleDesign, @@ -50,14 +51,18 @@ const labelAdvertisingPartnerStyle = css` padding-bottom: 1px; `; -const labelStyle = css` - ${textSans12} - color: ${palette('--branding-label-text')}; +const labelStyle = (design: ArticleDesign) => { + const fontStyle = + design === ArticleDesign.Gallery ? textSansBold12 : textSans12; + return css` + ${fontStyle} + color: ${palette('--branding-label-text')}; - a { - color: inherit; - } -`; + a { + color: inherit; + } + `; +}; const liveBlogLabelStyle = css` color: ${palette('--standfirst-text')}; @@ -234,7 +239,7 @@ export const Branding = ({ branding, format }: Props) => { >
Date: Wed, 6 Aug 2025 11:36:17 +0100 Subject: [PATCH 07/14] Add padding-top to gallery image captions --- dotcom-rendering/src/components/GalleryCaption.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/dotcom-rendering/src/components/GalleryCaption.tsx b/dotcom-rendering/src/components/GalleryCaption.tsx index f9e8d3da7a2..16e0ba31630 100644 --- a/dotcom-rendering/src/components/GalleryCaption.tsx +++ b/dotcom-rendering/src/components/GalleryCaption.tsx @@ -20,6 +20,7 @@ const styles = css` ${grid.column.centre} color: ${palette('--caption-text')}; ${textSans12} + padding-top: ${space[2]}px; padding-bottom: ${space[6]}px; padding-top: ${space[5]}px; From ca06088c90dc167237eaa78299f7e3f2a7def8ed Mon Sep 17 00:00:00 2001 From: Dina Hafez Date: Wed, 6 Aug 2025 11:54:19 +0100 Subject: [PATCH 08/14] Remove duplicate padding-top --- dotcom-rendering/src/components/GalleryCaption.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/dotcom-rendering/src/components/GalleryCaption.tsx b/dotcom-rendering/src/components/GalleryCaption.tsx index 16e0ba31630..f9e8d3da7a2 100644 --- a/dotcom-rendering/src/components/GalleryCaption.tsx +++ b/dotcom-rendering/src/components/GalleryCaption.tsx @@ -20,7 +20,6 @@ const styles = css` ${grid.column.centre} color: ${palette('--caption-text')}; ${textSans12} - padding-top: ${space[2]}px; padding-bottom: ${space[6]}px; padding-top: ${space[5]}px; From 1448372e4a798e66190c5590e0f7ddaa6cdc16b2 Mon Sep 17 00:00:00 2001 From: Dina Hafez Date: Wed, 6 Aug 2025 15:52:29 +0100 Subject: [PATCH 09/14] Update headline and branding styling for Labs Galleries Co-authored-by: Marjan Kalanaki --- .../src/components/ArticleHeadline.tsx | 51 ++++++++++++------- dotcom-rendering/src/paletteDeclarations.ts | 8 +-- 2 files changed, 37 insertions(+), 22 deletions(-) diff --git a/dotcom-rendering/src/components/ArticleHeadline.tsx b/dotcom-rendering/src/components/ArticleHeadline.tsx index 72d9fe5b720..59447581444 100644 --- a/dotcom-rendering/src/components/ArticleHeadline.tsx +++ b/dotcom-rendering/src/components/ArticleHeadline.tsx @@ -143,14 +143,27 @@ const invertedFontLineHeight = css` } `; -const labsFont = css` - ${textSansBold28}; - line-height: 2rem; - ${from.tablet} { - ${textSansBold34}; - line-height: 2.375rem; +const labsFont = (design: ArticleDesign) => { + if (design === ArticleDesign.Gallery) { + return css` + ${textSansBold34}; + line-height: 2.1875rem; + ${from.desktop} { + ${textSansBold34}; + font-size: 50px; + line-height: 3.125rem; + } + `; } -`; + return css` + ${textSansBold28}; + line-height: 2rem; + ${from.tablet} { + ${textSansBold34}; + line-height: 2.375rem; + } + `; +}; const jumboLabsFont = css` ${textSansBold34}; @@ -426,7 +439,7 @@ export const ArticleHeadline = ({

{ case Pillar.Lifestyle: return pillarPalette(theme, 500); case ArticleSpecial.Labs: - return sourcePalette.specialReport[500]; + return sourcePalette.neutral[73]; case ArticleSpecial.SpecialReport: return sourcePalette.specialReport[500]; case ArticleSpecial.SpecialReportAlt: @@ -3854,6 +3854,9 @@ const liveBlockBorderBottomDark: PaletteFunction = () => const subMetaLabelTextLight: PaletteFunction = ({ theme, design }) => { switch (theme) { case ArticleSpecial.Labs: + if (design === ArticleDesign.Gallery) { + return sourcePalette.neutral[60]; + } return sourcePalette.neutral[7]; case ArticleSpecial.SpecialReport: return sourcePalette.specialReport[300]; @@ -3870,9 +3873,8 @@ const subMetaLabelTextLight: PaletteFunction = ({ theme, design }) => { case ArticleDesign.Picture: case ArticleDesign.Video: case ArticleDesign.Audio: - return sourcePalette.neutral[60]; case ArticleDesign.Gallery: - return sourcePalette.neutral[73]; + return sourcePalette.neutral[60]; default: return sourcePalette.neutral[46]; } From dcfd09f13fda5562f68b90a8851a9fc0c3044059 Mon Sep 17 00:00:00 2001 From: Dina Hafez Date: Mon, 11 Aug 2025 12:40:11 +0100 Subject: [PATCH 10/14] Fix styling for end of Labs Galleries links in light mode --- dotcom-rendering/src/components/SubMeta.tsx | 16 ---------------- dotcom-rendering/src/paletteDeclarations.ts | 14 ++++++++++++-- 2 files changed, 12 insertions(+), 18 deletions(-) diff --git a/dotcom-rendering/src/components/SubMeta.tsx b/dotcom-rendering/src/components/SubMeta.tsx index 80cc0dcd8a2..aed1f4a6ccb 100644 --- a/dotcom-rendering/src/components/SubMeta.tsx +++ b/dotcom-rendering/src/components/SubMeta.tsx @@ -62,22 +62,6 @@ const listStyles = css` display: flex; flex-wrap: wrap; gap: 1.5rem 0.25rem; - background-image: repeating-linear-gradient( - to bottom, - ${palette('--sub-meta-background')} 0px, - ${palette('--sub-meta-background')} 2.25rem, - transparent 2.25rem, - transparent 2.3125rem, - ${palette('--sub-meta-background')} 2.3125rem, - ${palette('--sub-meta-background')} 3rem - ), - repeating-linear-gradient( - to right, - ${palette('--article-border')} 0px, - ${palette('--article-border')} 0.1875rem, - transparent 0.1875rem, - transparent 0.3125rem - ); background-position: top; background-repeat: no-repeat; `; diff --git a/dotcom-rendering/src/paletteDeclarations.ts b/dotcom-rendering/src/paletteDeclarations.ts index 7d8100a0164..e5808044e38 100644 --- a/dotcom-rendering/src/paletteDeclarations.ts +++ b/dotcom-rendering/src/paletteDeclarations.ts @@ -3977,7 +3977,12 @@ const subMetaBackgroundDark: PaletteFunction = ({ design, theme }) => { const subMetaTextLight: PaletteFunction = ({ design, theme }) => { switch (theme) { case ArticleSpecial.Labs: - return sourcePalette.neutral[7]; + switch (design) { + case ArticleDesign.Gallery: + return sourcePalette.neutral[86]; + default: + return sourcePalette.neutral[7]; + } case ArticleSpecial.SpecialReport: return sourcePalette.specialReport[100]; default: @@ -4053,7 +4058,12 @@ const subMetaTextHoverLight: PaletteFunction = ({ design, theme }) => { case ArticleDesign.Picture: switch (theme) { case ArticleSpecial.Labs: - return sourcePalette.neutral[100]; + switch (design) { + case ArticleDesign.Gallery: + return sourcePalette.neutral[7]; + default: + return sourcePalette.neutral[100]; + } default: return sourcePalette.neutral[7]; } From efd0b6253fa4026225aeb4cbc75bc59989a51efc Mon Sep 17 00:00:00 2001 From: Marjan Kalanaki Date: Mon, 11 Aug 2025 16:29:48 +0100 Subject: [PATCH 11/14] fix the background image colour for sub meta Co-authored-by: Dina Hafez --- dotcom-rendering/src/components/SubMeta.tsx | 16 ++++++++++++++++ dotcom-rendering/src/paletteDeclarations.ts | 4 +++- 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/dotcom-rendering/src/components/SubMeta.tsx b/dotcom-rendering/src/components/SubMeta.tsx index aed1f4a6ccb..80cc0dcd8a2 100644 --- a/dotcom-rendering/src/components/SubMeta.tsx +++ b/dotcom-rendering/src/components/SubMeta.tsx @@ -62,6 +62,22 @@ const listStyles = css` display: flex; flex-wrap: wrap; gap: 1.5rem 0.25rem; + background-image: repeating-linear-gradient( + to bottom, + ${palette('--sub-meta-background')} 0px, + ${palette('--sub-meta-background')} 2.25rem, + transparent 2.25rem, + transparent 2.3125rem, + ${palette('--sub-meta-background')} 2.3125rem, + ${palette('--sub-meta-background')} 3rem + ), + repeating-linear-gradient( + to right, + ${palette('--article-border')} 0px, + ${palette('--article-border')} 0.1875rem, + transparent 0.1875rem, + transparent 0.3125rem + ); background-position: top; background-repeat: no-repeat; `; diff --git a/dotcom-rendering/src/paletteDeclarations.ts b/dotcom-rendering/src/paletteDeclarations.ts index e5808044e38..c6a2ee056f4 100644 --- a/dotcom-rendering/src/paletteDeclarations.ts +++ b/dotcom-rendering/src/paletteDeclarations.ts @@ -3919,13 +3919,15 @@ const subMetaBackgroundLight: PaletteFunction = ({ case ArticleDesign.Picture: case ArticleDesign.Video: case ArticleDesign.Audio: - case ArticleDesign.Gallery: switch (theme) { case ArticleSpecial.Labs: return sourcePalette.neutral[86]; default: return sourcePalette.neutral[7]; } + case ArticleDesign.Gallery: + return sourcePalette.neutral[7]; + default: switch (theme) { case ArticleSpecial.SpecialReport: From 2a5baff22c284994deb7b00267bf350b0e7870e1 Mon Sep 17 00:00:00 2001 From: Dina Hafez Date: Tue, 12 Aug 2025 10:54:07 +0100 Subject: [PATCH 12/14] Fix share button hover colour for Labs Galleries --- dotcom-rendering/src/paletteDeclarations.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/dotcom-rendering/src/paletteDeclarations.ts b/dotcom-rendering/src/paletteDeclarations.ts index c6a2ee056f4..d88d438bf94 100644 --- a/dotcom-rendering/src/paletteDeclarations.ts +++ b/dotcom-rendering/src/paletteDeclarations.ts @@ -3645,7 +3645,6 @@ const shareButtonLiveBlogMobileMetaLight: PaletteFunction = ({ const shareButtonHoverLight: PaletteFunction = ({ design, theme }) => { switch (design) { - case ArticleDesign.Gallery: case ArticleDesign.Audio: case ArticleDesign.Video: case ArticleDesign.Picture: @@ -3655,6 +3654,8 @@ const shareButtonHoverLight: PaletteFunction = ({ design, theme }) => { default: return sourcePalette.neutral[7]; } + case ArticleDesign.Gallery: + return sourcePalette.neutral[7]; default: return sourcePalette.neutral[100]; } From 663e892c4c282ee5712a5ff864d2ecdaa08a5918 Mon Sep 17 00:00:00 2001 From: Dina Hafez Date: Tue, 12 Aug 2025 14:26:05 +0100 Subject: [PATCH 13/14] Refactoring and increase caption size to 14 instead of 12 --- .../src/components/ArticleHeadline.tsx | 61 +++++++++---------- .../src/components/Branding.importable.tsx | 24 ++++---- dotcom-rendering/src/components/Caption.tsx | 2 +- .../src/components/SeriesSectionLink.tsx | 4 +- .../src/layouts/GalleryLayout.tsx | 57 +++++++++-------- 5 files changed, 77 insertions(+), 71 deletions(-) diff --git a/dotcom-rendering/src/components/ArticleHeadline.tsx b/dotcom-rendering/src/components/ArticleHeadline.tsx index 59447581444..88ff86f6230 100644 --- a/dotcom-rendering/src/components/ArticleHeadline.tsx +++ b/dotcom-rendering/src/components/ArticleHeadline.tsx @@ -143,27 +143,24 @@ const invertedFontLineHeight = css` } `; -const labsFont = (design: ArticleDesign) => { - if (design === ArticleDesign.Gallery) { - return css` - ${textSansBold34}; - line-height: 2.1875rem; - ${from.desktop} { - ${textSansBold34}; - font-size: 50px; - line-height: 3.125rem; - } - `; +const labsFont = css` + ${textSansBold28}; + line-height: 2rem; + ${from.tablet} { + ${textSansBold34}; + line-height: 2.375rem; } - return css` - ${textSansBold28}; - line-height: 2rem; - ${from.tablet} { - ${textSansBold34}; - line-height: 2.375rem; - } - `; -}; +`; + +const labsGalleryFont = css` + ${textSansBold34}; + line-height: 2.1875rem; + ${from.desktop} { + ${textSansBold34}; + font-size: 50px; + line-height: 3.125rem; + } +`; const jumboLabsFont = css` ${textSansBold34}; @@ -439,7 +436,7 @@ export const ArticleHeadline = ({

{ - const fontStyle = - design === ArticleDesign.Gallery ? textSansBold12 : textSans12; - return css` - ${fontStyle} - color: ${palette('--branding-label-text')}; +const labelStyle = css` + ${textSans12} + color: ${palette('--branding-label-text')}; - a { - color: inherit; - } - `; -}; + a { + color: inherit; + } +`; const liveBlogLabelStyle = css` color: ${palette('--standfirst-text')}; @@ -239,7 +235,11 @@ export const Branding = ({ branding, format }: Props) => { >
{ line-height: 36px; ${from.desktop} { ${textSansBold20}; - /* This is added again because there is a line-height in textSansBold20 so we are overriding it */ + /* Overrides the line-height from the font preset */ line-height: 36px; } `; @@ -122,7 +122,7 @@ const fontStyles = (format: ArticleFormat) => { ${from.desktop} { ${headlineBold20} - /* This is added again because there is a line-height in textSansBold20 so we are overriding it */ + /* Overrides the line-height from the font preset */ line-height: 36px; } `; diff --git a/dotcom-rendering/src/layouts/GalleryLayout.tsx b/dotcom-rendering/src/layouts/GalleryLayout.tsx index 8a8668369c5..3079fa02fa3 100644 --- a/dotcom-rendering/src/layouts/GalleryLayout.tsx +++ b/dotcom-rendering/src/layouts/GalleryLayout.tsx @@ -135,6 +135,23 @@ const galleryBorder = css` export const GalleryLayout = (props: WebProps | AppProps) => { const { gallery, renderingTarget } = props; + + const { + config: { + abTests, + idUrl, + mmaUrl, + discussionApiUrl, + idApiUrl, + shortUrlId, + isPreview, + isSensitive, + section, + switches, + }, + editionId, + } = gallery.frontendData; + const frontendData = gallery.frontendData; const isWeb = renderingTarget === 'Web'; @@ -171,19 +188,17 @@ export const GalleryLayout = (props: WebProps | AppProps) => { padSides={false} shouldCenter={false} > - + )} { sectionId="labs-header" element="aside" > - + )} @@ -267,10 +282,8 @@ export const GalleryLayout = (props: WebProps | AppProps) => { frontendData.webPublicationSecondaryDateDisplay } isCommentable={frontendData.isCommentable} - discussionApiUrl={ - frontendData.config.discussionApiUrl - } - shortUrlId={frontendData.config.shortUrlId} + discussionApiUrl={discussionApiUrl} + shortUrlId={shortUrlId} /> ) : null} {isApps ? ( @@ -291,10 +304,8 @@ export const GalleryLayout = (props: WebProps | AppProps) => { frontendData.webPublicationSecondaryDateDisplay } isCommentable={frontendData.isCommentable} - discussionApiUrl={ - frontendData.config.discussionApiUrl - } - shortUrlId={frontendData.config.shortUrlId} + discussionApiUrl={discussionApiUrl} + shortUrlId={shortUrlId} /> ) : null}
@@ -406,23 +417,21 @@ export const GalleryLayout = (props: WebProps | AppProps) => { contributionsServiceUrl={ contributionsServiceUrl } - idApiUrl={frontendData.config.idApiUrl} + idApiUrl={idApiUrl} isMinuteArticle={ frontendData.pageType.isMinuteArticle } isPaidContent={ frontendData.pageType.isPaidContent } - isPreview={!!frontendData.config.isPreview} - isSensitive={frontendData.config.isSensitive} + isPreview={!!isPreview} + isSensitive={isSensitive} pageId={frontendData.pageId} - sectionId={frontendData.config.section} + sectionId={section} shouldHideReaderRevenue={ frontendData.shouldHideReaderRevenue } - remoteBannerSwitch={ - !!frontendData.config.switches.remoteBanner - } + remoteBannerSwitch={!!switches.remoteBanner} tags={frontendData.tags} /> From 0dc0e8ca6387b2d0eb43897db249c798a742c7a3 Mon Sep 17 00:00:00 2001 From: Dina Hafez Date: Mon, 18 Aug 2025 11:17:46 +0100 Subject: [PATCH 14/14] Refactor to follow same code style --- .../src/components/Branding.importable.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/dotcom-rendering/src/components/Branding.importable.tsx b/dotcom-rendering/src/components/Branding.importable.tsx index 511788e6dc1..8f2b02b69e3 100644 --- a/dotcom-rendering/src/components/Branding.importable.tsx +++ b/dotcom-rendering/src/components/Branding.importable.tsx @@ -68,6 +68,10 @@ const liveBlogLabelStyle = css` } `; +const galleryLabelStyle = css` + ${textSansBold12} +`; + const brandingLogoAdvertisingPartnerStyle = css` padding: 0; & img { @@ -209,6 +213,7 @@ type Props = { export const Branding = ({ branding, format }: Props) => { const isLiveBlog = format.design === ArticleDesign.LiveBlog; const isInteractive = format.design === ArticleDesign.Interactive; + const isGallery = format.design === ArticleDesign.Gallery; const { ophanComponentName, ophanComponentLink } = getOphanComponents({ branding, @@ -236,10 +241,7 @@ export const Branding = ({ branding, format }: Props) => {