use alternative card headline font for labs redesign on feature cards

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/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>
 				);