Merge pull request #13475 from guardian/doml/cartoon-cards

Use lighter font for Cartoon front cards

Author: domlander

dotcom-rendering/src/components/Card/Card.tsx

@@ -100,6 +100,7 @@ export type Props = {
 	isCrossword?: boolean;
 	isNewsletter?: boolean;
 	isOnwardContent?: boolean;
+	isCartoon?: boolean;
 	trailText?: string;
 	avatarUrl?: string;
 	showClock?: boolean;
@@ -392,6 +393,7 @@ export const Card = ({
 	isCrossword,
 	isNewsletter = false,
 	isOnwardContent = false,
+	isCartoon = false,
 	isExternalLink,
 	slideshowImages,
 	showLivePlayable = false,
@@ -1093,6 +1095,7 @@ export const Card = ({
 										showByline={showByline}
 										isExternalLink={isExternalLink}
 										isBetaContainer={isBetaContainer}
+										isCartoon={isCartoon}
 										kickerImage={
 											showKickerImage &&
 											media?.type === 'podcast'

dotcom-rendering/src/components/CardHeadline.tsx

@@ -64,6 +64,7 @@ type Props = {
 	kickerColour?: string;
 	isBetaContainer?: boolean;
 	kickerImage?: PodcastSeriesImage;
+	isCartoon?: boolean;
 };
 
 const sublinkStyles = css`
@@ -182,15 +183,17 @@ const getFonts = (
 	format: ArticleFormat,
 	fontSizes: ResponsiveFontSize,
 	isBetaContainer: boolean,
+	isCartoon: boolean,
 ) => {
 	if (format.theme === ArticleSpecial.Labs) {
 		return getFontSize(fontSizes, FontFamily.TextSans);
 	}
 
 	if (
 		isBetaContainer &&
-		/** Any of these designs are considered an "opinion" */
-		(format.design === ArticleDesign.Comment ||
+		(isCartoon ||
+			/** Any of these designs are considered an "opinion" */
+			format.design === ArticleDesign.Comment ||
 			format.design === ArticleDesign.Editorial ||
 			format.design === ArticleDesign.Letter)
 	) {
@@ -234,11 +237,12 @@ export const CardHeadline = ({
 	kickerColour = palette('--card-kicker-text'),
 	isBetaContainer = false,
 	kickerImage,
+	isCartoon = false,
 }: Props) => {
 	// The link is only applied directly to the headline if it is a sublink
 	const isSublink = !!linkTo;
 
-	const fontStyles = getFonts(format, fontSizes, isBetaContainer);
+	const fontStyles = getFonts(format, fontSizes, isBetaContainer, isCartoon);
 
 	return (
 		<WithLink linkTo={linkTo}>

dotcom-rendering/src/components/FeatureCard.tsx

@@ -198,6 +198,7 @@ export type Props = {
 	 * Youtube requires a minimum width 200px.
 	 */
 	canPlayInline?: boolean;
+	isCartoon?: boolean;
 	kickerText?: string;
 	showPulsingDot?: boolean;
 	starRating?: Rating;
@@ -240,6 +241,7 @@ export const FeatureCard = ({
 	showClock,
 	mainMedia,
 	canPlayInline,
+	isCartoon,
 	kickerText,
 	showPulsingDot,
 	dataLinkName,
@@ -478,6 +480,7 @@ export const FeatureCard = ({
 													'--feature-card-kicker-text',
 												)}
 												isBetaContainer={true}
+												isCartoon={isCartoon}
 											/>
 										</div>
 

dotcom-rendering/src/components/FrontCard.tsx

@@ -43,6 +43,7 @@ export const FrontCard = (props: Props) => {
 		image: trail.image,
 		isCrossword: trail.isCrossword,
 		isNewsletter: trail.isNewsletter,
+		isCartoon: trail.isCartoon,
 		canPlayInline: true,
 		starRating: trail.starRating,
 		dataLinkName: trail.dataLinkName,

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

@@ -61,6 +61,7 @@ export const ScrollableFeature = ({
 							discussionId={card.discussionId}
 							mainMedia={card.mainMedia}
 							isExternalLink={card.isExternalLink}
+							isCartoon={card.isCartoon}
 							// branding={card.branding}
 							containerPalette={containerPalette}
 							absoluteServerTimes={absoluteServerTimes}

dotcom-rendering/src/components/StaticFeatureTwo.tsx

@@ -66,6 +66,7 @@ export const StaticFeatureTwo = ({
 							discussionId={card.discussionId}
 							mainMedia={card.mainMedia}
 							isExternalLink={card.isExternalLink}
+							isCartoon={card.isCartoon}
 							// branding={card.branding}
 							containerPalette={containerPalette}
 							trailText={undefined}

dotcom-rendering/src/model/enhanceCards.ts

@@ -269,6 +269,10 @@ export const enhanceCards = (
 				(type === 'Tone' && id === 'tone/newsletter-tone'),
 		);
 
+		const isCartoon = tags.some(
+			({ id, type }) => type === 'Tone' && id === 'tone/cartoons',
+		);
+
 		const branding = faciaCard.properties.editionBrandings.find(
 			(editionBranding) => editionBranding.edition.id === editionId,
 		)?.branding;
@@ -318,6 +322,7 @@ export const enhanceCards = (
 			boostLevel: faciaCard.display.boostLevel,
 			isCrossword: faciaCard.properties.isCrossword,
 			isNewsletter,
+			isCartoon,
 			showQuotedHeadline: faciaCard.display.showQuotedHeadline,
 			showLivePlayable: faciaCard.display.showLivePlayable,
 			avatarUrl:

dotcom-rendering/src/types/front.ts

@@ -341,6 +341,7 @@ export type DCRFrontCard = {
 	boostLevel?: BoostLevel;
 	isCrossword?: boolean;
 	isNewsletter?: boolean;
+	isCartoon?: boolean;
 	discussionId?: string;
 	byline?: string;
 	showByline?: boolean;