Skip to content

Labs Galleries migration to DCR #14348

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 15 commits into from
Aug 18, 2025
Merged

Labs Galleries migration to DCR #14348

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
c4068b7
Add Labs header and fix fontStyles for Gallery Labs
deedeeh Jul 30, 2025
df31e72
Fix stylelint
deedeeh Jul 30, 2025
bab468f
Fix captionTextLight for Labs Gallery
deedeeh Aug 1, 2025
e5d6189
Fix caption and standfirst fonts for Labs Gallery
deedeeh Aug 5, 2025
fa86c04
Update Contributor font styles for Labs Galleries
deedeeh Aug 5, 2025
a4cfdde
Update logo label to be bold
deedeeh Aug 6, 2025
f0ce4ce
Add padding-top to gallery image captions
deedeeh Aug 6, 2025
ca06088
Remove duplicate padding-top
deedeeh Aug 6, 2025
1448372
Update headline and branding styling for Labs Galleries
deedeeh Aug 6, 2025
dcfd09f
Fix styling for end of Labs Galleries links in light mode
deedeeh Aug 11, 2025
efd0b62
fix the background image colour for sub meta
marjisound Aug 11, 2025
2a5baff
Fix share button hover colour for Labs Galleries
deedeeh Aug 12, 2025
663e892
Refactoring and increase caption size to 14 instead of 12
deedeeh Aug 12, 2025
0dc0e8c
Refactor to follow same code style
deedeeh Aug 18, 2025
f14e17f
Merge branch 'main' into md/labs-galleries-dcr
deedeeh Aug 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 32 additions & 19 deletions dotcom-rendering/src/components/ArticleHeadline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};
Expand Down Expand Up @@ -426,7 +439,7 @@ export const ArticleHeadline = ({
<h1
css={[
format.theme === ArticleSpecial.Labs
? labsFont
? labsFont(format.design)
: headlineFont(format),
invertedText,
css`
Expand Down Expand Up @@ -508,7 +521,7 @@ export const ArticleHeadline = ({
<h1
css={[
format.theme === ArticleSpecial.Labs
? labsFont
? labsFont(format.design)
: headlineFont(format),
topPadding,
css`
Expand Down Expand Up @@ -549,7 +562,7 @@ export const ArticleHeadline = ({
<h1
css={[
format.theme === ArticleSpecial.Labs
? labsFont
? labsFont(format.design)
: headlineFont(format),
topPadding,
css`
Expand Down Expand Up @@ -584,7 +597,7 @@ export const ArticleHeadline = ({
<h1
css={[
format.theme === ArticleSpecial.Labs
? labsFont
? labsFont(format.design)
: headlineFont(format),
topPadding,
css`
Expand Down Expand Up @@ -626,7 +639,7 @@ export const ArticleHeadline = ({
<h1
css={[
format.theme === ArticleSpecial.Labs
? labsFont
? labsFont(format.design)
: headlineFont(format),
topPadding,
css`
Expand Down Expand Up @@ -667,7 +680,7 @@ export const ArticleHeadline = ({
<h1
css={[
format.theme === ArticleSpecial.Labs
? labsFont
? labsFont(format.design)
: headlineFont(format),
invertedWrapper,
invertedFontLineHeight,
Expand Down Expand Up @@ -718,7 +731,7 @@ export const ArticleHeadline = ({
<h1
css={[
format.theme === ArticleSpecial.Labs
? labsFont
? labsFont(format.design)
: headlineFont(format),
topPadding,
css`
Expand Down Expand Up @@ -760,7 +773,7 @@ export const ArticleHeadline = ({
<h1
css={[
format.theme === ArticleSpecial.Labs
? labsFont
? labsFont(format.design)
: headlineFont(format),
css`
color: ${isMatch
Expand Down Expand Up @@ -805,7 +818,7 @@ export const ArticleHeadline = ({
}
css={[
format.theme === ArticleSpecial.Labs
? labsFont
? labsFont(format.design)
: headlineFont(format),
topPadding,
css`
Expand All @@ -832,7 +845,7 @@ export const ArticleHeadline = ({
<h1
css={[
format.theme === ArticleSpecial.Labs
? labsFont
? labsFont(format.design)
: headlineFont(format),
topPadding,
css`
Expand All @@ -859,7 +872,7 @@ export const ArticleHeadline = ({
<h1
css={[
format.theme === ArticleSpecial.Labs
? labsFont
? labsFont(format.design)
: headlineFont(format),
css`
color: ${themePalette(
Expand Down Expand Up @@ -905,7 +918,7 @@ export const ArticleHeadline = ({
<h1
css={[
format.theme === ArticleSpecial.Labs
? labsFont
? labsFont(format.design)
: headlineFont(format),
topPadding,
css`
Expand Down
21 changes: 13 additions & 8 deletions dotcom-rendering/src/components/Branding.importable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {
breakpoints,
from,
textSans12,
textSansBold12,
} from '@guardian/source/foundations';
import {
ArticleDesign,
Expand Down Expand Up @@ -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')};
Expand Down Expand Up @@ -234,7 +239,7 @@ export const Branding = ({ branding, format }: Props) => {
>
<div
css={[
labelStyle,
labelStyle(format.design),
isAdvertisingPartnerOrExclusive &&
labelAdvertisingPartnerStyle,
isLiveBlog && liveBlogLabelStyle,
Expand Down
4 changes: 3 additions & 1 deletion dotcom-rendering/src/components/Caption.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} {
Expand Down
18 changes: 13 additions & 5 deletions dotcom-rendering/src/components/Contributor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { css } from '@emotion/react';
import {
headlineMedium17,
palette as sourcePalette,
textEgyptianItalic17,
textSansItalic17,
until,
} from '@guardian/source/foundations';
Expand Down Expand Up @@ -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;
Expand All @@ -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,
]}
Expand Down
74 changes: 46 additions & 28 deletions dotcom-rendering/src/components/SeriesSectionLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
space,
textSans17,
textSans20,
textSansBold17,
textSansBold20,
until,
} from '@guardian/source/foundations';
Expand Down Expand Up @@ -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}
}
`;
}
}
};

Expand Down
6 changes: 6 additions & 0 deletions dotcom-rendering/src/components/Standfirst.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
textSans17,
textSans20,
textSans24,
textSansBold15,
} from '@guardian/source/foundations';
import sanitise from 'sanitize-html';
import { grid } from '../../src/grid';
Expand Down Expand Up @@ -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}
`;
Expand Down
Loading