Update card headline font for Labs splash cards and feature cards (#14633)

* use alternative card headline font for labs redesign on feature cards

* use alternative card headline font for labs redesign on splash cards

* update grid area and margins to align the container branding with card edges from tablet

Author: cemms1

dotcom-rendering/src/components/DecideContainer.tsx

@@ -349,6 +349,7 @@ export const DecideContainer = ({
 						absoluteServerTimes={absoluteServerTimes}
 						aspectRatio={aspectRatio}
 						collectionId={collectionId}
+						showLabsRedesign={showLabsRedesign}
 					/>
 				</Island>
 			);
@@ -361,6 +362,7 @@ export const DecideContainer = ({
 					imageLoading={imageLoading}
 					aspectRatio={aspectRatio}
 					collectionId={collectionId}
+					showLabsRedesign={showLabsRedesign}
 				/>
 			);
 		default:

dotcom-rendering/src/components/FeatureCard.tsx

@@ -335,6 +335,8 @@ export type Props = {
 	 */
 	isImmersive?: boolean;
 	showVideo?: boolean;
+	/** Feature flag for the labs redesign work */
+	showLabsRedesign?: boolean;
 };
 
 export const FeatureCard = ({
@@ -370,6 +372,7 @@ export const FeatureCard = ({
 	isNewsletter = false,
 	isImmersive = false,
 	showVideo = false,
+	showLabsRedesign = false,
 }: Props) => {
 	const hasSublinks = supportingContent && supportingContent.length > 0;
 
@@ -611,6 +614,9 @@ export const FeatureCard = ({
 												quoteColour={palette(
 													'--feature-card-quote-icon',
 												)}
+												showLabsRedesign={
+													showLabsRedesign
+												}
 											/>
 										</div>
 

dotcom-rendering/src/components/FlexibleGeneral.tsx

@@ -640,6 +640,7 @@ export const FlexibleGeneral = ({
 					isLastRow={cards.length === 0}
 					containerLevel={containerLevel}
 					collectionId={collectionId}
+					showLabsRedesign={showLabsRedesign}
 				/>
 			)}
 			{groupedCards.map((row, i) => {

dotcom-rendering/src/components/FlexibleSpecial.tsx

@@ -355,6 +355,7 @@ export const FlexibleSpecial = ({
 					isFirstRow={!isNonEmptyArray(snaps)}
 					containerLevel={containerLevel}
 					isSplashCard={true}
+					showLabsRedesign={showLabsRedesign}
 				/>
 			)}
 

dotcom-rendering/src/components/FrontSection.tsx

@@ -497,6 +497,16 @@ const labsSectionHeaderStyles = css`
 
 const sponsoredContentLabelWrapper = css`
 	grid-row: bottom-content;
+	grid-column: content;
+
+	margin: ${space[1]}px 0 0;
+	${from.tablet} {
+		/*
+		* side margins of 10px due to the -10px margins on the
+		* grid area for content, to align with the card edges
+		*/
+		margin: ${space[1]}px 10px 0;
+	}
 `;
 
 /**
@@ -815,6 +825,7 @@ export const FrontSection = ({
 							/>
 						</Island>
 					) : null}
+
 					{isLabs &&
 						collectionBranding?.kind === 'paid-content' &&
 						!collectionBranding.hasMultipleBranding && (
@@ -831,6 +842,7 @@ export const FrontSection = ({
 								/>
 							</div>
 						)}
+
 					{pagination && (
 						<FrontPagination
 							sectionName={pagination.sectionName}

dotcom-rendering/src/components/ScrollableFeature.importable.tsx

@@ -14,6 +14,8 @@ type Props = {
 	imageLoading: 'lazy' | 'eager';
 	aspectRatio: AspectRatio;
 	collectionId: number;
+	/** Feature flag for the labs redesign work */
+	showLabsRedesign?: boolean;
 };
 
 /**
@@ -30,6 +32,7 @@ export const ScrollableFeature = ({
 	imageLoading,
 	aspectRatio,
 	collectionId,
+	showLabsRedesign = false,
 }: Props) => {
 	return (
 		<ScrollableCarousel
@@ -79,6 +82,7 @@ export const ScrollableFeature = ({
 							isNewsletter={card.isNewsletter}
 							showQuotes={card.showQuotedHeadline}
 							showVideo={card.showVideo}
+							showLabsRedesign={showLabsRedesign}
 						/>
 					</ScrollableCarousel.Item>
 				);

dotcom-rendering/src/components/StaticFeatureTwo.tsx

@@ -16,6 +16,8 @@ type Props = {
 	absoluteServerTimes: boolean;
 	aspectRatio: AspectRatio;
 	collectionId: number;
+	/** Feature flag for the labs redesign work */
+	showLabsRedesign?: boolean;
 };
 
 /**
@@ -31,6 +33,7 @@ export const StaticFeatureTwo = ({
 	imageLoading,
 	aspectRatio,
 	collectionId,
+	showLabsRedesign = false,
 }: Props) => {
 	const cards = trails.slice(0, 2);
 	return (
@@ -80,6 +83,7 @@ export const StaticFeatureTwo = ({
 							isNewsletter={card.isNewsletter}
 							showQuotes={card.showQuotedHeadline}
 							showVideo={card.showVideo}
+							showLabsRedesign={showLabsRedesign}
 						/>
 					</LI>
 				);