Skip to content

Commit bdf2f4b

Browse files
juabarajuabara
authored
Merge branch 'main' into jm/feat-sign-in-gate-v2
2 parents 0e694f0 + 3c623cb commit bdf2f4b

17 files changed

+454
-61
lines changed

‎dotcom-rendering/src/components/ArticleHeadline.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -397,6 +397,8 @@ const galleryStyles = css`
397397
${grid.between('grid-start', 'centre-column-end')}
398398
399399
grid-row: 7/9;
400+
position: relative;
401+
z-index: ${getZIndex('articleHeadline')};
400402
401403
${from.tablet} {
402404
${grid.between('centre-column-start', 'grid-end')};

‎dotcom-rendering/src/components/ContainerTitle.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ type Props = {
2626
editionId?: EditionId;
2727
lightweightHeader?: boolean;
2828
containerLevel?: DCRContainerLevel;
29+
isLabs?: boolean;
2930
};
3031

3132
const linkStyles = css`
@@ -49,6 +50,11 @@ const secondaryTitleStyles = css`
4950
}
5051
`;
5152

53+
const labsTitleStyles = css`
54+
${textSansBold20};
55+
color: ${schemePalette('--labs-header-title')};
56+
`;
57+
5258
const headerStylesWithUrl = css`
5359
:hover {
5460
text-decoration: underline;
@@ -111,6 +117,7 @@ export const ContainerTitle = ({
111117
editionId,
112118
fontColour = schemePalette('--article-section-title'),
113119
containerLevel,
120+
isLabs = false,
114121
}: Props) => {
115122
if (!title) return null;
116123

@@ -135,6 +142,7 @@ export const ContainerTitle = ({
135142
containerLevel === 'Primary' && primaryTitleStyles,
136143
containerLevel === 'Secondary' &&
137144
secondaryTitleStyles,
145+
isLabs && labsTitleStyles,
138146
]}
139147
>
140148
{localisedTitle(title, editionId)}
@@ -148,6 +156,7 @@ export const ContainerTitle = ({
148156
lightweightHeader && article17,
149157
containerLevel === 'Primary' && primaryTitleStyles,
150158
containerLevel === 'Secondary' && secondaryTitleStyles,
159+
isLabs && labsTitleStyles,
151160
]}
152161
>
153162
{localisedTitle(title, editionId)}

‎dotcom-rendering/src/components/FrontSection.stories.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ export default {
8787
discussionApiUrl,
8888
editionId: 'UK',
8989
children: <Placeholder />,
90+
url: '/',
9091
},
9192
render: (args) => <FrontSection {...args} />,
9293
} satisfies Meta<typeof FrontSection>;
@@ -376,6 +377,30 @@ export const WithPaidContentForWholeFront = {
376377
},
377378
};
378379

380+
export const GuardianLabs = {
381+
name: 'Guardian Labs',
382+
args: {
383+
title: 'Section',
384+
collectionBranding: {
385+
kind: 'paid-content',
386+
isFrontBranding: false,
387+
branding: {
388+
brandingType: {
389+
name: 'paid-content',
390+
},
391+
sponsorName: 'guardian.org',
392+
logo,
393+
aboutThisLink:
394+
'https://www.theguardian.com/global-development/2021/feb/21/about-the-rights-and-freedom-series',
395+
},
396+
isContainerBranding: true,
397+
hasMultipleBranding: false,
398+
},
399+
isLabs: true,
400+
showLabsRedesign: true,
401+
},
402+
};
403+
379404
export const PageSkinStory = {
380405
name: 'with page skin',
381406
args: {

‎dotcom-rendering/src/components/FrontSection.tsx‎

Lines changed: 63 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { between, from, space, until } from '@guardian/source/foundations';
44
import { pageSkinContainer } from '../layouts/lib/pageSkin';
55
import { type EditionId, isNetworkFront } from '../lib/edition';
66
import { hideAge } from '../lib/hideAge';
7-
import { palette, palette as schemePalette } from '../palette';
7+
import { palette as schemePalette } from '../palette';
88
import type { CollectionBranding } from '../types/branding';
99
import type {
1010
DCRContainerLevel,
@@ -19,6 +19,7 @@ import { ContainerTitle } from './ContainerTitle';
1919
import { FrontPagination } from './FrontPagination';
2020
import { FrontSectionTitle } from './FrontSectionTitle';
2121
import { Island } from './Island';
22+
import { LabsSectionHeader } from './LabsSectionHeader';
2223
import { ShowHideButton } from './ShowHideButton';
2324
import { ShowMore } from './ShowMore.importable';
2425
import { Treats } from './Treats';
@@ -482,6 +483,16 @@ const carouselNavigationPlaceholder = css`
482483
}
483484
`;
484485

486+
const labsSectionStyles = css`
487+
grid-row: headline;
488+
grid-column: title;
489+
margin-top: ${space[2]}px;
490+
${from.leftCol} {
491+
grid-row: content;
492+
grid-column: title;
493+
}
494+
`;
495+
485496
/**
486497
* # Front Container
487498
*
@@ -667,57 +678,58 @@ export const FrontSection = ({
667678
]}
668679
/>
669680

670-
<div
671-
css={[
672-
sectionHeadlineUntilLeftCol(
673-
// TODO FIXME:
674-
// This relies on sections called "opinion"
675-
// only ever having <CPScott> as the leftContent
676-
title?.toLowerCase() === 'opinion',
677-
),
678-
showVerticalRule &&
679-
!isBetaContainer &&
680-
sectionHeadlineFromLeftCol(
681-
schemePalette('--section-border'),
681+
{isLabs && showLabsRedesign ? (
682+
<div css={labsSectionStyles}>
683+
<LabsSectionHeader title={title} />
684+
</div>
685+
) : (
686+
<div
687+
css={[
688+
sectionHeadlineUntilLeftCol(
689+
// TODO FIXME:
690+
// This relies on sections called "opinion"
691+
// only ever having <CPScott> as the leftContent
692+
title?.toLowerCase() === 'opinion',
682693
),
683-
]}
684-
>
685-
{!isLabs && !showLabsRedesign && (
686-
<>
687-
<FrontSectionTitle
688-
title={
689-
<ContainerTitle
690-
title={title}
691-
lightweightHeader={isTagPage}
692-
description={description}
693-
fontColour={
694-
containerLevel === 'Secondary'
695-
? schemePalette(
696-
'--article-section-secondary-title',
697-
)
698-
: articleSectionTitleStyles(
699-
title,
700-
showSectionColours,
701-
)
702-
}
703-
// On paid fronts the title is not treated as a link
704-
url={
705-
!isOnPaidContentFront
706-
? url
707-
: undefined
708-
}
709-
showDateHeader={showDateHeader}
710-
editionId={editionId}
711-
containerLevel={containerLevel}
712-
/>
713-
}
714-
collectionBranding={collectionBranding}
715-
/>
694+
showVerticalRule &&
695+
!isBetaContainer &&
696+
sectionHeadlineFromLeftCol(
697+
schemePalette('--section-border'),
698+
),
699+
]}
700+
>
701+
<FrontSectionTitle
702+
title={
703+
<ContainerTitle
704+
title={title}
705+
lightweightHeader={isTagPage}
706+
description={description}
707+
fontColour={
708+
containerLevel === 'Secondary'
709+
? schemePalette(
710+
'--article-section-secondary-title',
711+
)
712+
: articleSectionTitleStyles(
713+
title,
714+
showSectionColours,
715+
)
716+
}
717+
// On paid fronts the title is not treated as a link
718+
url={
719+
!isOnPaidContentFront ? url : undefined
720+
}
721+
showDateHeader={showDateHeader}
722+
editionId={editionId}
723+
containerLevel={containerLevel}
724+
isLabs={isLabs && showLabsRedesign}
725+
/>
726+
}
727+
collectionBranding={collectionBranding}
728+
/>
716729

717-
{leftContent}
718-
</>
719-
)}
720-
</div>
730+
{leftContent}
731+
</div>
732+
)}
721733

722734
{(isToggleable || hasNavigationButtons) && (
723735
<div css={sectionControls}>
@@ -801,7 +813,7 @@ export const FrontSection = ({
801813
<div css={[sectionTreats, topPadding]}>
802814
<Treats
803815
treats={treats}
804-
borderColour={palette('--section-border')}
816+
borderColour={schemePalette('--section-border')}
805817
/>
806818
</div>
807819
)}

dotcom-rendering/src/components/LabsLogo/LabsLogo.stories.tsx renamed to dotcom-rendering/src/components/LabsLogo.stories.tsx

File renamed without changes.

dotcom-rendering/src/components/LabsLogo/LabsLogo.tsx renamed to dotcom-rendering/src/components/LabsLogo.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { css } from '@emotion/react';
2-
import { palette } from '@guardian/source/foundations';
2+
import { palette as schemePalette } from '../palette';
33

44
const labsLogoContainer = css`
5-
background-color: ${palette.labs[100]};
5+
background-color: ${schemePalette('--labs-logo-background')};
66
border-radius: 50%;
77
position: relative;
88
`;
@@ -30,7 +30,7 @@ export const LabsLogo = ({ size = 71 }: LabsLogoProps) => {
3030
<svg
3131
xmlns="http://www.w3.org/2000/svg"
3232
viewBox="0 0 89 47"
33-
fill="white"
33+
fill={schemePalette('--labs-logo-text')}
3434
css={labsLogoSvgText}
3535
>
3636
<title>Guardian Labs</title>

‎dotcom-rendering/src/components/LabsSectionHeader.stories.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import type { Meta, StoryObj } from '@storybook/react';
2+
import { userEvent, within } from '@storybook/test';
3+
import { splitTheme } from '../../.storybook/decorators/splitThemeDecorator';
4+
import {
5+
ArticleDesign,
6+
ArticleDisplay,
7+
ArticleSpecial,
8+
} from '../lib/articleFormat';
9+
import { LabsSectionHeader } from './LabsSectionHeader';
10+
11+
const meta = {
12+
component: LabsSectionHeader,
13+
title: 'Components/LabsSectionHeader',
14+
args: {
15+
title: 'Container Title',
16+
url: '/',
17+
},
18+
render: (args) => <LabsSectionHeader {...args} />,
19+
decorators: [
20+
splitTheme(
21+
[
22+
{
23+
theme: ArticleSpecial.Labs,
24+
design: ArticleDesign.Feature,
25+
display: ArticleDisplay.Standard,
26+
},
27+
],
28+
{ orientation: 'vertical' },
29+
),
30+
],
31+
} satisfies Meta<typeof LabsSectionHeader>;
32+
export default meta;
33+
34+
type Story = StoryObj<typeof meta>;
35+
36+
export const WithDetailsOpen: Story = {
37+
play: async ({ canvasElement }) => {
38+
const canvas = within(canvasElement);
39+
const expandDetailsButtons = canvas.getAllByText('About');
40+
await Promise.all(
41+
expandDetailsButtons.map((button) => userEvent.click(button)),
42+
);
43+
},
44+
};

0 commit comments

Comments
 (0)