tidy

Author: Georges-GNM

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

@@ -522,20 +522,27 @@ export const Card = ({
 				`}
 			`}
 		>
-			{/* 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 */}
+			{/* Ordinarily, it's either the pill or the footer, but we want to display the date on these cards if they appear in the storylines section on tag pages.
+				Bit of padding to align with the start of the pill type. 
+			*/}
 			{storylinesStyle && (
-				<CardFooter
-					format={format}
-					age={decideAge()}
-					commentCount={<CommentCount />}
-					cardBranding={
-						isOnwardContent || !showLabsRedesign ? (
-							<LabsBranding />
-						) : undefined
-					}
-					showLivePlayable={showLivePlayable}
-				/>
+				<div
+					css={css`
+						padding-left: ${space[2]}px;
+					`}
+				>
+					<CardFooter
+						format={format}
+						age={decideAge()}
+						commentCount={<CommentCount />}
+						cardBranding={
+							isOnwardContent || !showLabsRedesign ? (
+								<LabsBranding />
+							) : undefined
+						}
+						showLivePlayable={showLivePlayable}
+					/>
+				</div>
 			)}
 
 			{mainMedia?.type === 'YoutubeVideo' && isVideoArticle && (
@@ -1245,7 +1252,11 @@ export const Card = ({
 							flex-grow: 1;
 						`}
 					>
-						{/* why is this needed, to hide the headline if we're in the splash? */}
+						{/* In the storylines section on tag pages, the flex splash is used to display key stories. 
+							This is shown as a large image taken from the first article in the group, and the  headlines of the first four key articles (include that of the first article).
+							Therefore, we don't display an article headline in the conventional sense, these are displayed as "supporting content". 
+							However, simply passing an empty string as the article headline still reserves space, so this check enables us to avoid rendering that space at all. 
+						*/}
 						{storylinesStyle && isFlexSplash
 							? null
 							: headlinePosition === 'inner' && (

dotcom-rendering/src/components/FlexibleGeneral.tsx

@@ -36,6 +36,7 @@ type Props = {
 	/** Feature flag for the labs redesign work */
 	showLabsRedesign?: boolean;
 	enableHls?: boolean;
+	/** Passed through to cards to enable tag page storyline section specific rendering */
 	storylinesStyle?: boolean;
 };
 

dotcom-rendering/src/components/StorylineSection.tsx

@@ -278,22 +278,6 @@ const sectionHeadlineUntilLeftCol = (isOpinion: boolean) => css`
 	}
 `;
 
-// const sectionHeadlineFromLeftCol = (borderColour: string) => css`
-// 	${from.leftCol} {
-// 		position: relative;
-// 		::after {
-// 			content: '';
-// 			display: block;
-// 			width: 1px;
-// 			top: 0;
-// 			height: 1.875rem;
-// 			right: -10px;
-// 			position: absolute;
-// 			background-color: ${borderColour};
-// 		}
-// 	}
-// `;
-
 const topPadding = css`
 	padding-top: ${space[2]}px;
 `;
@@ -424,6 +408,8 @@ const carouselNavigationPlaceholder = css`
 	}
 `;
 
+/// todo: finish mobile and tablet representation
+
 /**
  * # Front Container
  *
@@ -468,42 +454,37 @@ const carouselNavigationPlaceholder = css`
  *  1 2 3 4 5 6 7 8 9 a b c d e (14)
  * ┌───┬───────────────────┬─┐
  * │Tit│                   │X│
- * │Dat├───────────────────┴─┤
+ * │AI├───────────────────┴─┤
  * ├───┤▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│
  * │   │▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│
- * │Tre│▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│
- * │ats│▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│
+ * │Foo│▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│
+ * │ter│▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│
  * ├───┼─────────────────────┤
- * │   │Show More            │
- * └───┴─────────────────────┘
  *
  * on `leftCol` (1140) if component is not toggleable
  *
  *  1 2 3 4 5 6 7 8 9 a b c d e (14)
  * ┌───┬──────────────────────┐
  * │Tit│▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│
- * │Dat│▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│
+ * │AI │▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│
  * ├───┤▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│
  * │   │▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│
- * │Tre│▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│
- * │ats│▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│
+ * │Foo│▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│
+ * │ter │Content context line  │
  * ├───┼──────────────────────┤
- * │   │Show More             │
- * └───┴──────────────────────┘
  *
  * on `wide` (1300)
  *
  *  1 2 3 4 5 6 7 8 9 a b c d e f g (16)
- * ┌─────┬───────────────────────┬─┐
- * │Title│▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│X│
- * │Date │▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒└─┤
- * ├─────┤▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒  │
- * │     │▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒  │
- * │     │▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒  │
- * │Treat│▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒  │
- * ├─────┼─────────────────────────┤
- * │     │Show More                │
- * └─────┴─────────────────────────┘
+ * ┌──────┬───────────────────────┬─┐
+ * │Title │▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│X│
+ * │AI    │▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒└─┤
+ * │Notice│▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒  │
+ * ├─────-┤▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒  │
+ * │      │▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒  │
+ * │      │▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒  │
+ * │Footer│Content context line	    │
+ * ├────────────────────────────────┤
  *
  */
 
@@ -539,11 +520,6 @@ export const StorylineSection = ({
 	const isToggleable = toggleable && !!sectionId;
 	const isBetaContainer = !!containerLevel;
 
-	// These are for beta containers only
-	// const useLargeSpacingMobile = !!isNextCollectionPrimary || isAboveMobileAd;
-	// const useLargeSpacingDesktop =
-	// 	!!isNextCollectionPrimary || isAboveDesktopAd;
-
 	const showSectionColours = isNetworkFront(pageId ?? '');
 
 	/**
@@ -595,9 +571,6 @@ export const StorylineSection = ({
 				<div
 					css={[
 						sectionHeadlineUntilLeftCol(
-							// TODO FIXME:
-							// This relies on sections called "opinion"
-							// only ever having <CPScott> as the leftContent
 							title?.toLowerCase() === 'opinion',
 						),
 					]}
@@ -665,7 +638,6 @@ export const StorylineSection = ({
 						sectionContentHorizontalMargins,
 						sectionContentRow(toggleable),
 						topPadding,
-						// showVerticalRule &&
 						isBetaContainer && sectionContentBorderFromLeftCol,
 					]}
 					id={`container-${sectionId}`}

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

@@ -11,7 +11,7 @@ import {
 } from '@guardian/source/foundations';
 import { useState } from 'react';
 import type { EditionId } from '../lib/edition';
-import { parseStorylinesContentToStorylines } from '../model/enhanceAITagPageContent';
+import { parseStorylinesContentToStorylines } from '../model/enhanceTagPageStorylinesContent';
 import { palette } from '../palette';
 import type { StorylinesContent } from '../types/storylinesContent';
 import { FlexibleGeneral } from './FlexibleGeneral';
@@ -51,10 +51,10 @@ const tabsContainerStyles = css`
 	width: 100%;
 	${from.wide} {
 		width: 110%;
-	} /* bit hacky, but looks a touch better on wide. Maybe there's a better way though */
+	} /* bit hacky, but looks a touch better on wide. */
 	align-items: stretch; /* Makes all tabs the same height */
 	margin-bottom: ${space[6]}px;
-	margin-left: -${space[2]}px; /* on mobile at least */
+	margin-left: -${space[2]}px;
 `;
 
 const tabStyles = (isActive: boolean, isFirst: boolean) => css`
@@ -78,8 +78,6 @@ const contentStyles = css`
 	padding-top: ${space[0]}px 0;
 `;
 
-// ${textSans17};
-// 	font-weight: 700;
 const selectedTitleStyles = css`
 	${textSansBold34}
 	color: ${sourcePalette.news[400]};
@@ -147,33 +145,9 @@ export const StorylinesSection = ({
 	storylinesContent,
 	editionId,
 }: StorylinesSectionProps) => {
-	console.log('has StorylinesContent', !!storylinesContent);
-	// console.log('StorylinesContent', StorylinesContent);
-	// const [storylines, SetStorylines] = useState<StorylinesContent>();
-	const storylines = storylinesContent;
-
-	// useEffect(() => {
-	// 	fetch(
-	// 		`http://localhost:9000/api/tag-page-rendering/${tagPage.pageId}`,
-	// 		{
-	// 			headers: {
-	// 				'Content-Type': 'application/json',
-	// 			},
-	// 			credentials: 'include',
-	// 		},
-	// 	)
-	// 		.then((response) => {
-	// 			console.log('response', response);
-	// 			return response.json();
-	// 		})
-	// 		.then((data) => SetStorylines(data))
-	// 		.catch((error) => {
-	// 			console.error('Error fetching storylines data:', error);
-	// 		});
-	// }, []);
-
 	const parsedStorylines =
-		storylines && parseStorylinesContentToStorylines(storylines);
+		storylinesContent &&
+		parseStorylinesContentToStorylines(storylinesContent);
 
 	const [activeStorylineId, setActiveStorylineId] = useState<string>(
 		parsedStorylines?.[0]?.id ?? '',
@@ -187,14 +161,6 @@ export const StorylinesSection = ({
 		(s) => s.id === activeStorylineId,
 	);
 
-	/** frontsection with background, title, AI warning on the left,
-	 *
-	 * section - mostly a copy of frontsection - done?
-	 * tabs - tweak style
-	 * tab content
-	 *  -> container wrapper (category title or not)
-	 *  ---> decide container
-	 */
 	return (
 		<>
 			<StorylineSection
@@ -206,8 +172,6 @@ export const StorylinesSection = ({
 				ophanComponentLink={`container-${index} | ${containerId}`}
 				ophanComponentName={containerId}
 				sectionId={containerId}
-				toggleable={false} //maybe set to true if this still works?
-				// pageId={tagPage.pageId}
 				editionId={editionId}
 			>
 				{/* Tab selector */}
@@ -227,13 +191,9 @@ export const StorylinesSection = ({
 									activeStorylineId === storyline.id,
 									i === 0,
 								)}
-								onClick={() => {
-									console.log(
-										'clicked storyline',
-										storyline.id,
-									);
-									setActiveStorylineId(storyline.id);
-								}}
+								onClick={() =>
+									setActiveStorylineId(storyline.id)
+								}
 								type="button"
 							>
 								{activeStorylineId === storyline.id ? (
@@ -268,11 +228,11 @@ export const StorylinesSection = ({
 						))}
 					</ScrollableCarousel>
 				</div>
-				{/* Selected title */}
+				{/* Storyline title */}
 				{activeStoryline && (
 					<div css={selectedTitleStyles}>{activeStoryline.title}</div>
 				)}
-				{/* Tabs content */}
+				{/* Content by categories */}
 				<div css={contentStyles}>
 					{activeStoryline?.categories.map((category, idx) => (
 						<div key={idx} css={contentCss}>
@@ -290,12 +250,13 @@ export const StorylinesSection = ({
 						</div>
 					))}
 				</div>
+				{/* Context on article date range */}
 				<div css={articleCountAndDateRangeStyle}>
 					{`These storylines were curated from articles published ${formatDateRangeText(
-						storylines.earliestArticleTime,
-						storylines.latestArticleTime,
+						storylinesContent.earliestArticleTime,
+						storylinesContent.latestArticleTime,
 					)}. Some articles may be older to provide further context.`}
-				</div>{' '}
+				</div>
 			</StorylineSection>
 		</>
 	);

dotcom-rendering/src/components/SupportingContent.tsx

@@ -209,7 +209,7 @@ export const SupportingContent = ({
 									}}
 								/>
 								{/* {subLink.kickerText} 
-								card age below obviously istag page is a lie, I'll tweak that in a bit
+								todo: card age below obviously istag page is a lie, I'll tweak that in a bit
 								*/}
 								<CardAge
 									webPublication={{

dotcom-rendering/src/layouts/TagPageLayout.tsx

@@ -66,22 +66,6 @@ export const TagPageLayout = ({ tagPage, NAV }: Props) => {
 	const isAccessibilityPage =
 		tagPage.config.pageId === 'help/accessibility-help';
 
-	// const isSCTagPage = process.env.NODE_ENV === 'development';
-
-	// console.log(
-	// 	'isSCTagPage:',
-	// 	isSCTagPage,
-	// 	'tagPage.webURL:',
-	// 	tagPage.webURL,
-	// 	'isDev:', //isDev doesn't actually work?
-	// 	tagPage.config.isDev,
-	// 	'is node env',
-	// 	process.env.NODE_ENV,
-	// );
-
-	console.log('has tagPage.StorylinesContent:', !!tagPage.storylinesContent);
-	console.log('tagPage.StorylinesContent:', tagPage.storylinesContent);
-
 	return (
 		<>
 			<div data-print-layout="hide" id="bannerandheader">
@@ -126,7 +110,6 @@ export const TagPageLayout = ({ tagPage, NAV }: Props) => {
 					image={tagPage.header.image}
 				/>
 				{tagPage.groupedTrails.map((groupedTrails, index) => {
-					// console.log("groupedTrails in TagPageLayout:", groupedTrails);
 					const imageLoading = index > 0 ? 'lazy' : 'eager';
 
 					const title = isUndefined(groupedTrails.day)
@@ -154,7 +137,6 @@ export const TagPageLayout = ({ tagPage, NAV }: Props) => {
 
 					const insertSCSection =
 						tagPage.storylinesContent &&
-						// isSCTagPage &&
 						index == 1 &&
 						(!tagPage.pagination ||
 							tagPage.pagination.currentPage === 1);