tweak opinion/media articles and add date

Author: Georges-GNM

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

@@ -423,8 +423,6 @@ export const Card = ({
 	subtitleSize = 'small',
 	SCStyle = false,
 }: Props) => {
-	console.log('article headline, mainMedia:', headlineText, mainMedia);
-
 	const hasSublinks = supportingContent && supportingContent.length > 0;
 	const sublinkPosition = decideSublinkPosition(
 		supportingContent,
@@ -465,7 +463,10 @@ export const Card = ({
 		const withinTwelveHours = isWithinTwelveHours(webPublicationDate);
 
 		const shouldShowAge =
-			isTagPage || !!onwardsSource || (showAge && withinTwelveHours);
+			SCStyle ||
+			isTagPage ||
+			!!onwardsSource ||
+			(showAge && withinTwelveHours);
 
 		if (!shouldShowAge) return undefined;
 
@@ -708,8 +709,6 @@ export const Card = ({
 		if (!hasSublinks) return null;
 		if (sublinkPosition === 'none') return null;
 
-		console.log('supportingContent:', supportingContent);
-
 		const Sublinks = () => (
 			<SupportingContent
 				supportingContent={supportingContent}

dotcom-rendering/src/components/FlexibleGeneral.tsx

@@ -430,6 +430,7 @@ type FullWidthCardLayoutProps = {
 	collectionId: number;
 	/** Feature flag for the labs redesign work */
 	showLabsRedesign?: boolean;
+	SCStyle?: boolean;
 };
 
 const FullWidthCardLayout = ({
@@ -444,6 +445,7 @@ const FullWidthCardLayout = ({
 	containerLevel,
 	collectionId,
 	showLabsRedesign,
+	SCStyle,
 }: FullWidthCardLayoutProps) => {
 	const card = cards[0];
 	if (!card) return null;
@@ -520,6 +522,7 @@ const FullWidthCardLayout = ({
 					showKickerImage={card.format.design === ArticleDesign.Audio}
 					showLabsRedesign={showLabsRedesign}
 					subtitleSize={subtitleSize}
+					SCStyle={SCStyle}
 				/>
 			</LI>
 		</UL>
@@ -539,6 +542,7 @@ type HalfWidthCardLayoutProps = {
 	containerLevel: DCRContainerLevel;
 	/** Feature flag for the labs redesign work */
 	showLabsRedesign?: boolean;
+	SCStyle?: boolean;
 };
 
 const HalfWidthCardLayout = ({
@@ -553,6 +557,7 @@ const HalfWidthCardLayout = ({
 	isLastRow,
 	containerLevel,
 	showLabsRedesign,
+	SCStyle,
 }: HalfWidthCardLayoutProps) => {
 	if (cards.length === 0) return null;
 
@@ -608,6 +613,7 @@ const HalfWidthCardLayout = ({
 							headlineSizes={undefined}
 							canPlayInline={false}
 							showLabsRedesign={showLabsRedesign}
+							SCStyle={SCStyle}
 						/>
 					</LI>
 				);
@@ -680,6 +686,7 @@ export const FlexibleGeneral = ({
 								containerLevel={containerLevel}
 								collectionId={collectionId}
 								showLabsRedesign={showLabsRedesign}
+								SCStyle={SCStyle}
 							/>
 						);
 
@@ -700,6 +707,7 @@ export const FlexibleGeneral = ({
 								isLastRow={i === groupedCards.length - 1}
 								containerLevel={containerLevel}
 								showLabsRedesign={showLabsRedesign}
+								SCStyle={SCStyle}
 							/>
 						);
 				}

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

@@ -42,6 +42,7 @@ type StorylinesSectionProps = {
 type ImageData = {
 	src: string;
 	altText: string;
+	isAvatar: boolean;
 	mediaData: MainMedia | null;
 };
 
@@ -941,11 +942,6 @@ export const StorylinesSection = ({
 		article: ArticleData,
 	): DCRFrontCard {
 		const format = decideFormatForArticle(category);
-		console.log(
-			'article headline and mediaData here',
-			article.headline,
-			article.image?.mediaData,
-		);
 		return {
 			format: format,
 			dataLinkName: '',
@@ -958,7 +954,7 @@ export const StorylinesSection = ({
 				'https://discussion.theguardian.com/discussion-api',
 			byline: article.byline || '',
 			showByline:
-				category.category === 'Contrasting Opinions' ? true : false, // could be true if opinion?
+				category.category === 'Contrasting opinions' ? true : false, // could be true if opinion?
 			boostLevel:
 				category.category === 'Profiles and Interviews' ||
 				category.category === 'Deep Reads'
@@ -971,12 +967,16 @@ export const StorylinesSection = ({
 					: false, //would be true for profiles/deep reads?
 			showQuotedHeadline: false,
 			showLivePlayable: false,
-			avatarUrl: undefined, // will need to be set for opinion pieces
+			avatarUrl:
+				category.category === 'Contrasting opinions' &&
+				article.image?.isAvatar
+					? article.image?.src
+					: undefined, // will need to be set for opinion pieces
 			// mainMedia: undefined, // ought to be set for multimedia pieces, but missing the extra info like count?
 			mainMedia:
 				category.category === 'Find multimedia' &&
 				article.image?.mediaData
-					? article.image.mediaData
+					? article.image?.mediaData
 					: undefined,
 			isExternalLink: false,
 			image: article.image