Add dates to multimedia and feature cards, and tweak storyline title

Author: Georges-GNM

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

@@ -519,8 +519,30 @@ export const Card = ({
 			css={css`
 				margin-top: auto;
 				display: flex;
+				${SCStyle &&
+				`
+					flex-direction: column;
+					gap: ${space[1]}px;
+					align-items: flex-start;
+				`}
 			`}
 		>
+			{/* We add this card footer here because ordinarily, it's either the pill or the footer, but
+		 we need to display the date on these cards if they appear in the storylines section */}
+			{SCStyle && (
+				<CardFooter
+					format={format}
+					age={decideAge()}
+					commentCount={<CommentCount />}
+					cardBranding={
+						isOnwardContent || !showLabsRedesign ? (
+							<LabsBranding />
+						) : undefined
+					}
+					showLivePlayable={showLivePlayable}
+				/>
+			)}
+
 			{isVideoArticle && (
 				<>
 					{mainMedia.duration === 0 ? (
@@ -1182,6 +1204,7 @@ export const Card = ({
 							flex-grow: 1;
 						`}
 					>
+						{/* why is this needed, sublinks? */}
 						{SCStyle && isFlexSplash
 							? null
 							: headlinePosition === 'inner' && (
@@ -1214,12 +1237,6 @@ export const Card = ({
 											}
 											showLabsRedesign={showLabsRedesign}
 										/>
-										{!isUndefined(starRating) ? (
-											<StarRatingComponent
-												rating={starRating}
-												cardHasImage={!!image}
-											/>
-										) : null}
 									</HeadlineWrapper>
 							  )}
 

dotcom-rendering/src/components/FeatureCard.tsx

@@ -344,6 +344,7 @@ export type Props = {
 	showVideo?: boolean;
 	/** Feature flag for the labs redesign work */
 	showLabsRedesign?: boolean;
+	SCStyle?: boolean;
 };
 
 export const FeatureCard = ({
@@ -380,6 +381,7 @@ export const FeatureCard = ({
 	isImmersive = false,
 	showVideo = false,
 	showLabsRedesign = false,
+	SCStyle = false,
 }: Props) => {
 	const hasSublinks = supportingContent && supportingContent.length > 0;
 
@@ -667,6 +669,7 @@ export const FeatureCard = ({
 														}
 														showClock={!!showClock}
 														serverTime={serverTime}
+														SCStyle={SCStyle}
 													/>
 												) : undefined
 											}

dotcom-rendering/src/components/FeatureCardCardAge.tsx

@@ -6,15 +6,18 @@ type Props = {
 	showClock: boolean;
 	serverTime?: number;
 	webPublicationDate: string;
+	SCStyle?: boolean;
 };
 
 export const FeatureCardCardAge = ({
 	showClock,
 	serverTime,
 	webPublicationDate,
+	SCStyle,
 }: Props) => {
+	console.log('FeatureCardCardAge webPublicationDate:', webPublicationDate);
 	const withinTwelveHours = isWithinTwelveHours(webPublicationDate);
-	if (withinTwelveHours) {
+	if (withinTwelveHours || SCStyle) {
 		return (
 			<CardAge
 				webPublication={{

dotcom-rendering/src/components/FlexibleGeneral.tsx

@@ -91,6 +91,7 @@ type ImmersiveCardLayoutProps = {
 	imageLoading: Loading;
 	collectionId: number;
 	showLabsRedesign?: boolean;
+	SCStyle?: boolean;
 };
 
 /**
@@ -106,6 +107,7 @@ const ImmersiveCardLayout = ({
 	imageLoading,
 	collectionId,
 	showLabsRedesign,
+	SCStyle,
 }: ImmersiveCardLayoutProps) => {
 	const isLoopingVideo =
 		card.mainMedia?.type === 'SelfHostedVideo' &&
@@ -145,6 +147,7 @@ const ImmersiveCardLayout = ({
 					isImmersive={true}
 					showVideo={card.showVideo}
 					showLabsRedesign={showLabsRedesign}
+					SCStyle={SCStyle}
 				/>
 			</LI>
 		</UL>
@@ -473,6 +476,7 @@ const FullWidthCardLayout = ({
 				imageLoading={imageLoading}
 				collectionId={collectionId}
 				showLabsRedesign={showLabsRedesign}
+				SCStyle={SCStyle}
 			/>
 		);
 	}

dotcom-rendering/src/components/StorylineSection.tsx

@@ -359,15 +359,7 @@ const sectionContentBorderFromLeftCol = css`
 	}
 `;
 
-// const sectionBottomContent = css`
-// 	grid-row: bottom-content;
-// 	grid-column: content;
-// 	.hidden > & {
-// 		display: none;
-// 	}
-// `;
-
-const sectionTreats = css`
+const sectionFooter = css`
 	/* Mobile: treats appear at the bottom */
 	grid-row: bottom-content;
 	grid-column: content;
@@ -411,26 +403,6 @@ const topBorder = css`
 	border-top-style: solid;
 `;
 
-// const bottomPadding = css`
-// 	padding-bottom: ${space[4]}px;
-// `;
-
-// const bottomPaddingBetaContainer = (
-// 	useLargeSpacingMobile: boolean,
-// 	useLargeSpacingDesktop: boolean,
-// ) => css`
-// 	${until.tablet} {
-// 		padding-bottom: ${useLargeSpacingMobile
-// 			? `${space[8]}px`
-// 			: `${space[4]}px`};
-// 	}
-// 	${from.tablet} {
-// 		padding-bottom: ${useLargeSpacingDesktop
-// 			? `${space[8]}px`
-// 			: `${space[4]}px`};
-// 	}
-// `;
-
 const primaryLevelTopBorder = (
 	title?: string,
 	showSectionColours?: boolean,
@@ -541,11 +513,11 @@ const carouselNavigationPlaceholder = css`
  *
  */
 
-// largely a copy of front section
-// can probably be trimmed down further once we are sure of requirements
-// mainly needed for a couple of reasons:
-// -- so we can have just the section with the gray background (in frontsection this takes up the full screen width)
-// -- so we can tweak the look and positioning of the treat (the "AI use" line) to line up with the bottom of the cards -- todo
+/** This is largely a copy of front section (notably re the grid layout), but with some modifications:
+ * Some text has been added below the title about AI use
+ * In a frontsection, the background normally takes up the full width of the page, but we want just the section to have the grey background
+ * A portion of the props and logic in frontsection aren't relevant here
+ */
 export const StorylineSection = ({
 	title,
 	children,
@@ -635,11 +607,6 @@ export const StorylineSection = ({
 							// only ever having <CPScott> as the leftContent
 							title?.toLowerCase() === 'opinion',
 						),
-						// showVerticalRule &&
-						// 	!isBetaContainer &&
-						// 	sectionHeadlineFromLeftCol(
-						// 		schemePalette('--section-border'),
-						// 	),
 					]}
 				>
 					<FrontSectionTitle
@@ -662,7 +629,7 @@ export const StorylineSection = ({
 									url={url}
 									showDateHeader={showDateHeader}
 									editionId={editionId}
-									containerLevel={'Secondary'}
+									containerLevel={'Primary'}
 								/>
 								<div
 									css={css`
@@ -672,7 +639,9 @@ export const StorylineSection = ({
 									Dive deeper into the Guardian's archive.
 									This product uses GenAI. Learn more about
 									how it works{' '}
-									<a href="https://theguardian.com">here.</a>
+									<a href="https://www.theguardian.com/help/insideguardian/2023/jun/16/the-guardians-approach-to-generative-ai">
+										here.
+									</a>
 								</div>
 							</>
 						}
@@ -711,48 +680,42 @@ export const StorylineSection = ({
 					{children}
 				</div>
 
-				{treats && (
-					<div css={[sectionTreats]}>
-						{/* <Treats
-							treats={treats}
-							borderColour={schemePalette('--section-border')}
-						/> */}
-						<Footer
-							dislikeHandler={
-								dislikeHandler ??
-								(() =>
-									submitComponentEvent(
-										{
-											component: {
-												componentType: 'QANDA_ATOM',
-												id,
-												products: [],
-												labels: [],
-											},
-											action: 'DISLIKE',
+				<div css={[sectionFooter]}>
+					<Footer
+						dislikeHandler={
+							dislikeHandler ??
+							(() =>
+								submitComponentEvent(
+									{
+										component: {
+											componentType: 'QANDA_ATOM',
+											id,
+											products: [],
+											labels: [],
 										},
-										'Web',
-									))
-							}
-							likeHandler={
-								likeHandler ??
-								(() =>
-									submitComponentEvent(
-										{
-											component: {
-												componentType: 'QANDA_ATOM', //todo: update ophan component types to include storyline?
-												id,
-												products: [],
-												labels: [],
-											},
-											action: 'LIKE',
+										action: 'DISLIKE',
+									},
+									'Web',
+								))
+						}
+						likeHandler={
+							likeHandler ??
+							(() =>
+								submitComponentEvent(
+									{
+										component: {
+											componentType: 'QANDA_ATOM', //todo: update ophan component types to include storyline?
+											id,
+											products: [],
+											labels: [],
 										},
-										'Web',
-									))
-							}
-						></Footer>
-					</div>
-				)}
+										action: 'LIKE',
+									},
+									'Web',
+								))
+						}
+					></Footer>
+				</div>
 			</section>
 		</ContainerOverrides>
 	);

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

@@ -86,10 +86,12 @@ const selectedTitleStyles = css`
 	color: ${sourcePalette.news[400]};
 	margin-bottom: ${space[4]}px;
 	margin-top: ${space[2]}px;
+	padding-left: 10px; /* aligns with the headlines of the stories below */
 `;
 
 const numberStyles = () => css`
 	${headlineLight50}
+	line-height: 2rem; /* to align the number with the top of the text */
 	margin-left: -${space[1]}px;
 	margin-right: ${space[2]}px;
 `;
@@ -219,23 +221,37 @@ export const StorylinesSection = ({
 									activeStorylineId === storyline.id,
 									i === 0,
 								)}
-								onClick={() =>
-									setActiveStorylineId(storyline.id)
-								}
+								onClick={() => {
+									console.log(
+										'clicked storyline',
+										storyline.id,
+									);
+									setActiveStorylineId(storyline.id);
+								}}
 								type="button"
 							>
 								{activeStorylineId === storyline.id ? (
-									<span
-										css={[
-											numberStyles,
-											css`
+									<>
+										<span
+											css={[
+												numberStyles,
+												css`
+													color: ${sourcePalette
+														.neutral[60]};
+												`,
+											]}
+										>
+											{i + 1}
+										</span>
+										<span
+											css={css`
 												color: ${sourcePalette
-													.news[400]};
-											`,
-										]}
-									>
-										{i + 1}
-									</span>
+													.neutral[60]};
+											`}
+										>
+											{storyline.title}
+										</span>
+									</>
 								) : (
 									<>
 										<span css={numberStyles}>{i + 1}</span>

dotcom-rendering/src/model/enhanceAITagPageContent.ts

@@ -175,7 +175,7 @@ export function parseTPSGContentToStorylines(data: TPSGContent): Storyline[] {
 	function decideCategoryTitle(category: CategoryContent): string {
 		switch (category.category) {
 			case 'Key Stories':
-				return '';
+				return 'Key Stories';
 			case 'Contrasting opinions':
 				return 'Opinions';
 			case 'Find multimedia':

dotcom-rendering/src/paletteDeclarations.ts

@@ -2520,8 +2520,14 @@ const cardMetaTextDark: PaletteFunction = () => sourcePalette.neutral[60];
 const cardBackgroundLight: PaletteFunction = () => 'transparent';
 const cardBackgroundDark: PaletteFunction = () => 'transparent';
 
-const cardMediaBackgroundLight: PaletteFunction = () =>
-	sourcePalette.neutral[97];
+const cardMediaBackgroundLight: PaletteFunction = (format) => {
+	switch (format.theme) {
+		case ArticleSpecial.SpecialReportAlt:
+			return sourcePalette.neutral[93];
+		default:
+			return sourcePalette.neutral[97];
+	}
+};
 
 const cardMediaBackgroundDark: PaletteFunction = () =>
 	sourcePalette.neutral[20];