use ContainerTitle to ensure use of h2 consistently as well as automatically inheriting the ability to click through to the section front using the url

Author: cemms1

dotcom-rendering/src/components/ContainerTitle.tsx

@@ -26,6 +26,7 @@ type Props = {
 	editionId?: EditionId;
 	lightweightHeader?: boolean;
 	containerLevel?: DCRContainerLevel;
+	isLabs?: boolean;
 };
 
 const linkStyles = css`
@@ -49,6 +50,11 @@ const secondaryTitleStyles = css`
 	}
 `;
 
+const labsTitleStyles = css`
+	${textSansBold20};
+	color: ${schemePalette('--labs-header-title')};
+`;
+
 const headerStylesWithUrl = css`
 	:hover {
 		text-decoration: underline;
@@ -111,6 +117,7 @@ export const ContainerTitle = ({
 	editionId,
 	fontColour = schemePalette('--article-section-title'),
 	containerLevel,
+	isLabs = false,
 }: Props) => {
 	if (!title) return null;
 
@@ -135,6 +142,7 @@ export const ContainerTitle = ({
 							containerLevel === 'Primary' && primaryTitleStyles,
 							containerLevel === 'Secondary' &&
 								secondaryTitleStyles,
+							isLabs && labsTitleStyles,
 						]}
 					>
 						{localisedTitle(title, editionId)}
@@ -148,6 +156,7 @@ export const ContainerTitle = ({
 						lightweightHeader && article17,
 						containerLevel === 'Primary' && primaryTitleStyles,
 						containerLevel === 'Secondary' && secondaryTitleStyles,
+						isLabs && labsTitleStyles,
 					]}
 				>
 					{localisedTitle(title, editionId)}

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

@@ -87,6 +87,7 @@ export default {
 		discussionApiUrl,
 		editionId: 'UK',
 		children: <Placeholder />,
+		url: '/',
 	},
 	render: (args) => <FrontSection {...args} />,
 } satisfies Meta<typeof FrontSection>;

dotcom-rendering/src/components/FrontSection.tsx

@@ -721,6 +721,7 @@ export const FrontSection = ({
 									showDateHeader={showDateHeader}
 									editionId={editionId}
 									containerLevel={containerLevel}
+									isLabs={isLabs && showLabsRedesign}
 								/>
 							}
 							collectionBranding={collectionBranding}

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

@@ -13,6 +13,7 @@ const meta = {
 	title: 'Components/LabsSectionHeader',
 	args: {
 		title: 'Container Title',
+		url: '/',
 	},
 	render: (args) => <LabsSectionHeader {...args} />,
 	decorators: [

dotcom-rendering/src/components/LabsSectionHeader.tsx

@@ -4,19 +4,22 @@ import {
 	space,
 	textSans14,
 	textSansBold15,
-	textSansBold20,
 	until,
 } from '@guardian/source/foundations';
 import {
 	LinkButton,
 	SvgArrowRightStraight,
 } from '@guardian/source/react-components';
 import { palette as schemePalette } from '../palette';
+import { ContainerTitle } from './ContainerTitle';
 import { Details } from './Details';
 import { LabsLogo } from './LabsLogo';
 
 type Props = {
-	title: string;
+	/** This text will be used as the h2 shown in the left column for the section */
+	title?: string;
+	/** The title can be made into a link using this property */
+	url?: string;
 };
 
 const headerStyles = css`
@@ -79,18 +82,13 @@ const aboutStyles = css`
 	${textSans14}
 `;
 
-const titleStyles = css`
-	${textSansBold20};
-	color: ${schemePalette('--labs-header-title')};
-`;
-
 const detailsStyles = css`
 	background-color: ${schemePalette('--labs-about-dropdown-background')};
 	color: ${schemePalette('--labs-about-dropdown-text')};
 	padding: ${space[5]}px;
 `;
 
-export const LabsSectionHeader = ({ title }: Props) => (
+export const LabsSectionHeader = ({ title, url }: Props) => (
 	<div css={headerStyles}>
 		<div css={[logoStyles, dividerStylesUntilLeftCol]}>
 			<LabsLogo />
@@ -133,7 +131,12 @@ export const LabsSectionHeader = ({ title }: Props) => (
 				</div>
 			</div>
 
-			<div css={titleStyles}>{title}</div>
+			<ContainerTitle
+				title={title}
+				url={url}
+				fontColour={schemePalette('--labs-header-title')}
+				isLabs={true}
+			/>
 		</div>
 	</div>
 );