fetch local data

Author: Georges-GNM

dotcom-rendering/src/components/FlexibleGeneral.tsx

@@ -35,6 +35,7 @@ type Props = {
 	collectionId: number;
 	/** Feature flag for the labs redesign work */
 	showLabsRedesign?: boolean;
+	SCStyle?: boolean;
 };
 
 type RowLayout = 'oneCardHalfWidth' | 'oneCardFullWidth' | 'twoCard';
@@ -172,6 +173,7 @@ const decideSplashCardProperties = (
 	mediaCard: boolean,
 	useLargerHeadlineSizeDesktop: boolean,
 	avatarUrl: boolean,
+	SCStyle?: boolean,
 ): BoostedSplashProperties => {
 	switch (boostLevel) {
 		// The default boost level is equal to no boost. It is the same as the default card layout.
@@ -201,10 +203,13 @@ const decideSplashCardProperties = (
 				mediaPositionOnDesktop: 'right',
 				mediaPositionOnMobile: mediaCard ? 'top' : 'bottom',
 				mediaSize: avatarUrl ? 'large' : 'xlarge',
-				supportingContentAlignment:
-					supportingContentLength >= 4 ? 'horizontal' : 'vertical',
+				supportingContentAlignment: SCStyle
+					? 'vertical'
+					: supportingContentLength >= 4
+					? 'horizontal'
+					: 'vertical',
 				liveUpdatesAlignment: 'vertical',
-				trailTextSize: 'regular',
+				trailTextSize: SCStyle ? 'large' : 'regular',
 				subtitleSize: 'medium',
 			};
 		case 'megaboost':
@@ -256,6 +261,7 @@ type SplashCardLayoutProps = {
 	collectionId: number;
 	/** Feature flag for the labs redesign work */
 	showLabsRedesign?: boolean;
+	SCStyle?: boolean;
 };
 
 const SplashCardLayout = ({
@@ -269,6 +275,7 @@ const SplashCardLayout = ({
 	containerLevel,
 	collectionId,
 	showLabsRedesign,
+	SCStyle,
 }: SplashCardLayoutProps) => {
 	const card = cards[0];
 	if (!card) return null;
@@ -308,6 +315,7 @@ const SplashCardLayout = ({
 		isMediaCard(card.format),
 		useLargerHeadlineSizeDesktop,
 		!!card.avatarUrl,
+		SCStyle,
 	);
 
 	return (
@@ -617,12 +625,17 @@ export const FlexibleGeneral = ({
 	containerLevel = 'Primary',
 	collectionId,
 	showLabsRedesign,
+	SCStyle = false,
 }: Props) => {
 	const splash = [...groupedTrails.splash].slice(0, 1).map((snap) => ({
 		...snap,
 		uniqueId: `collection-${collectionId}-splash-0`,
 	}));
 
+	splash[0]?.headline.includes('Senate') &&
+		containerLevel === 'Primary' &&
+		console.dir({ groupedTrails }, { depth: null });
+
 	const cards = [...groupedTrails.standard]
 		.slice(0, 19)
 		.map((standard, i) => ({
@@ -646,6 +659,7 @@ export const FlexibleGeneral = ({
 					containerLevel={containerLevel}
 					collectionId={collectionId}
 					showLabsRedesign={showLabsRedesign}
+					SCStyle={SCStyle}
 				/>
 			)}
 			{groupedCards.map((row, i) => {

dotcom-rendering/src/components/StorylineTabContent.tsx

@@ -32,10 +32,10 @@ const contentCss = css`
 `;
 
 export const StorylineTabContent = ({ content }: { content: Category[] }) => {
-	// key stories - flexible general, megaboosted first standard card
+	// key stories - flexible general, megaboosted first standard card - done?
 	// other categories - flex gen secondary
 	// explainers/multimedia with default
-	// opinion with default boost and design 8 (comment)
+	// opinion with default boost and design 8 (comment) - missing avatar url
 	// deep reads/profiles with contents->display->is immersive true
 	const DecideContainer = ({
 		containerType,
@@ -64,6 +64,7 @@ export const StorylineTabContent = ({ content }: { content: Category[] }) => {
 						aspectRatio={'5:4'}
 						collectionId={0}
 						containerLevel="Secondary"
+						SCStyle={true}
 					/>
 				);
 			default: