more tidy

Author: Georges-GNM

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

@@ -519,8 +519,9 @@ export const Card = ({
 				`}
 			`}
 		>
-			{/* 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.
+			{/* Usually, we either display the pill or the footer,
+				but if the card appears in the storylines section on tag pages
+				then we do want to display the date on these cards as well as the media pill.
 			*/}
 			{storylinesStyle && (
 				<CardFooter
@@ -765,7 +766,7 @@ export const Card = ({
 				<SupportingKeyStoriesContent
 					supportingContent={supportingContent}
 					containerPalette={containerPalette}
-					alignment={supportingContentAlignment}
+					alignment="vertical"
 					isMedia={isMediaCard(format)}
 					fillBackgroundOnMobile={false}
 					fillBackgroundOnDesktop={
@@ -1250,12 +1251,12 @@ export const Card = ({
 						isOnwardContent,
 					)}
 				>
-					{/* This div is needed to keep the headline and trail text justified at the start */}
 					{/* 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. 
-						*/}
+						We don't display an article headline in the conventional sense, the key stories are instead displayed as "supporting content". 
+						However, simply passing an empty string as the article headline still reserves space. 
+						The storylines check enables us to avoid rendering that space at all. 
+					*/}
+					{/* the div is needed to keep the headline and trail text justified at the start */}
 					{!(storylinesStyle && isFlexSplash) && (
 						<div
 							css={css`

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

@@ -30,7 +30,6 @@ type Props = {
 	isTagPage: boolean;
 	showClock?: boolean;
 	colour?: string;
-	// We use storylinesStyle to force the desired appearance of the CardAge in storylines sections on tag pages
 	storylinesStyle?: boolean;
 };
 

dotcom-rendering/src/components/FlexibleGeneral.tsx

@@ -209,7 +209,7 @@ const decideSplashCardProperties = (
 					? 'horizontal'
 					: 'vertical',
 				liveUpdatesAlignment: 'vertical',
-				trailTextSize: storylinesStyle ? 'large' : 'regular',
+				trailTextSize: 'regular',
 				subtitleSize: 'medium',
 			};
 		case 'megaboost':

dotcom-rendering/src/components/StorylinesSection.tsx

@@ -10,7 +10,6 @@ import { Hide } from '@guardian/source/react-components';
 import { submitComponentEvent } from '../client/ophan/ophan';
 import { type EditionId, isNetworkFront } from '../lib/edition';
 import { palette as schemePalette } from '../palette';
-import type { CollectionBranding } from '../types/branding';
 import type { DCRContainerLevel, DCRContainerPalette } from '../types/front';
 import { ContainerOverrides } from './ContainerOverrides';
 import { ContainerTitle } from './ContainerTitle';
@@ -31,8 +30,6 @@ type Props = {
 	pageId?: string;
 	/** Defaults to `true`. If we should render the top border */
 	showTopBorder?: boolean;
-	/** A React component can be passed to be inserted inside the left column */
-	leftContent?: React.ReactNode;
 	children?: React.ReactNode;
 	/** The string used to set the `data-component` Ophan attribute */
 	ophanComponentName?: string;
@@ -58,7 +55,6 @@ type Props = {
 	showDateHeader?: boolean;
 	/** Used in partnership with `showDateHeader` to localise the date string */
 	editionId: EditionId;
-	collectionBranding?: CollectionBranding;
 	isTagPage?: boolean;
 	hasNavigationButtons?: boolean;
 	likeHandler?: () => void;
@@ -409,12 +405,11 @@ const carouselNavigationPlaceholder = css`
 	}
 `;
 
-/// todo: finish mobile and tablet representation
-
 /**
  * # Front Container
  *
- * A container for fronts, which generally contains sets of cards.
+ * A container for the storylines content on tag pages,
+ * which contains sets of cards.
  *
  * Provides borders, spacing, colours, a title and features specific to fronts
  * such as show/hide toggle button. Content slotted as `children` is placed
@@ -433,33 +428,33 @@ const carouselNavigationPlaceholder = css`
  * │▒▒▒▒▒▒▒│
  * │▒▒▒▒▒▒▒│
  * ├───────┤
- * │Show   │
- * |More   │
+ * │AI Note│
+ * │Context│
+ * │Footer │
  * └───────┘
  *
  * from `tablet` (740) to `desktop` (980)
  *
  *  1 2 3 4 5 6 7 8 9 a b c (12)
  * ┌───────────────────────┐
  * │Title                  │
- * │Date                   │
  * ├───────────────────────┤
  * │▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│
  * │▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│
  * ├───────────────────────┤
- * │Show More              │
+ * │AI note,context,footer │
  * └───────────────────────┘
  *
  * on `leftCol` (1140) if component is toggleable
  *
  *  1 2 3 4 5 6 7 8 9 a b c d e (14)
  * ┌───┬───────────────────┬─┐
  * │Tit│                   │X│
- * │AI├───────────────────┴─┤
+ * │AI ├───────────────────┴─┤
  * ├───┤▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│
  * │   │▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│
  * │Foo│▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│
- * │ter│▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│
+ * │ter│Content context info │
  * ├───┼─────────────────────┤
  *
  * on `leftCol` (1140) if component is not toggleable
@@ -471,7 +466,7 @@ const carouselNavigationPlaceholder = css`
  * ├───┤▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│
  * │   │▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│
  * │Foo│▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│
- * │ter │Content context line  │
+ * │ter│Content context info  │
  * ├───┼──────────────────────┤
  *
  * on `wide` (1300)
@@ -484,15 +479,17 @@ const carouselNavigationPlaceholder = css`
  * ├─────-┤▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒  │
  * │      │▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒  │
  * │      │▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒  │
- * │Footer│Content context line	    │
+ * │Footer│Content context info	    │
  * ├────────────────────────────────┤
  *
  */
 
-/** 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
+/**
+ * This is based on @see {FrontSection.tsx} but with some modifications:
+ * - Some text has been added regarding the use of AI in this section
+ * - 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
+ * - Instead of treats, we have a footer with like/dislike buttons
+ * - A portion of the props and logic in frontsection aren't relevant here
  */
 export const StorylinesSection = ({
 	title,
@@ -502,7 +499,6 @@ export const StorylinesSection = ({
 	containerLevel,
 	description,
 	editionId,
-	leftContent,
 	ophanComponentLink,
 	ophanComponentName,
 	sectionId = '',
@@ -511,20 +507,20 @@ export const StorylinesSection = ({
 	showTopBorder = true,
 	toggleable = false,
 	url,
-	collectionBranding,
 	isTagPage = false,
 	hasNavigationButtons = false,
 	dislikeHandler,
 	likeHandler,
 }: Props) => {
-	const id = sectionId || 'unknown-id'; //todo: figure out what this should be
+	const id = sectionId || 'unknown-id'; //gltodo: figure out what this should be
 	const isToggleable = toggleable && !!sectionId;
 	const isBetaContainer = !!containerLevel;
 
 	const showSectionColours = isNetworkFront(pageId ?? '');
 
 	/**
-	 * id is being used to set the containerId in @see {ShowMore.importable.tsx}
+	 * In a front section, id is being used to set the containerId in @see {ShowMore.importable.tsx}
+	 * We don't use show more here, however as noted in the front section component:
 	 * this id pre-existed showMore so is probably also being used for something else.
 	 */
 	return (
@@ -616,10 +612,8 @@ export const StorylinesSection = ({
 								</div>
 							</>
 						}
-						collectionBranding={collectionBranding}
+						collectionBranding={undefined}
 					/>
-
-					{leftContent}
 				</div>
 
 				{(isToggleable || hasNavigationButtons) && (

dotcom-rendering/src/components/SupportingKeyStoriesContent.tsx

@@ -7,7 +7,7 @@ import { CardAge } from './Card/components/CardAge';
 import { CardHeadline } from './CardHeadline';
 import { ContainerOverrides } from './ContainerOverrides';
 import { FormatBoundary } from './FormatBoundary';
-import { Alignment } from './SupportingContent';
+import type { Alignment } from './SupportingContent';
 
 type Props = {
 	supportingContent: DCRSupportingContent[];
@@ -126,9 +126,6 @@ const backgroundFillDesktop = (isMedia: boolean) => css`
 			: palette('--card-sublinks-background')};
 	}
 `;
-4;
-//gltodo: remove horizontal alignment option?
-//what about on tablet?
 
 /** 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).

dotcom-rendering/src/layouts/TagPageLayout.tsx

@@ -135,11 +135,10 @@ export const TagPageLayout = ({ tagPage, NAV }: Props) => {
 						  )
 						: undefined;
 
-					//gltodo: check the pagination if it works as expected on single container tag pages
-					// also
+					// We insert the storylines section after the first section or if there's only one section
 					const insertStorylinesSection =
 						tagPage.storylinesContent &&
-						index == 1 &&
+						(index === 1 || tagPage.groupedTrails.length === 1) &&
 						(!tagPage.pagination ||
 							tagPage.pagination.currentPage === 1);