wip2

Author: Georges-GNM

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

@@ -4,11 +4,12 @@ import {
 	space,
 	textSans14,
 	textSans17,
+	textSans20,
 } from '@guardian/source/foundations';
 import { Hide } from '@guardian/source/react-components';
 import { palette } from '../../../palette';
 
-export type TrailTextSize = 'regular' | 'large';
+export type TrailTextSize = 'regular' | 'large' | 'xlarge';
 
 const trailTextStyles = css`
 	display: flex;
@@ -27,6 +28,7 @@ const fontStyles = (trailTextSize: TrailTextSize) => css`
 	${textSans14}
 	${from.desktop} {
 		${trailTextSize === 'large' && textSans17}
+		${trailTextSize === 'xlarge' && textSans20}
 	}
 	strong {
 		font-weight: bold;
@@ -54,12 +56,16 @@ export const TrailText = ({
 	padBottom = true,
 	padTop = false,
 }: Props) => {
+	const effectiveColour =
+		trailTextSize === 'xlarge'
+			? palette('--card-headline')
+			: trailTextColour;
 	const trailText = (
 		<div
 			css={[
 				trailTextStyles,
 				css`
-					color: ${trailTextColour};
+					color: ${effectiveColour};
 				`,
 				fontStyles(trailTextSize),
 				padBottom && bottomPadding,

dotcom-rendering/src/components/FlexibleSpecial.tsx

@@ -32,6 +32,7 @@ type Props = {
 	containerLevel?: DCRContainerLevel;
 	collectionId: number;
 	showLabsRedesign?: boolean;
+	SCStyle?: boolean;
 };
 
 type BoostProperties = {
@@ -54,6 +55,7 @@ const determineCardProperties = (
 	supportingContentLength: number,
 	mediaCard: boolean,
 	imageSuppressed: boolean,
+	SCStyle: boolean,
 ): BoostProperties => {
 	switch (boostLevel) {
 		// The default boost level is equal to no boost. It is the same as the default card layout.
@@ -134,6 +136,7 @@ type OneCardLayoutProps = {
 	containerLevel: DCRContainerLevel;
 	isSplashCard?: boolean;
 	showLabsRedesign?: boolean;
+	SCStyle?: boolean;
 };
 
 export const OneCardLayout = ({
@@ -148,6 +151,7 @@ export const OneCardLayout = ({
 	containerLevel,
 	isSplashCard,
 	showLabsRedesign,
+	SCStyle = false,
 }: OneCardLayoutProps) => {
 	const card = cards[0];
 	if (!card) return null;
@@ -166,6 +170,7 @@ export const OneCardLayout = ({
 		card.supportingContent?.length ?? 0,
 		isMediaCard(card.format),
 		!card.image,
+		SCStyle,
 	);
 
 	return (
@@ -231,6 +236,7 @@ type TwoOrFourCardLayoutProps = {
 	containerLevel: DCRContainerLevel;
 	/** Feature flag for the labs redesign work */
 	showLabsRedesign?: boolean;
+	SCStyle: boolean;
 };
 
 const TwoOrFourCardLayout = ({
@@ -244,12 +250,13 @@ const TwoOrFourCardLayout = ({
 	isFirstRow,
 	containerLevel,
 	showLabsRedesign,
+	SCStyle,
 }: TwoOrFourCardLayoutProps) => {
 	if (cards.length === 0) return null;
 	const hasTwoOrFewerCards = cards.length <= 2;
 
 	return (
-		<UL direction="row" showTopBar={true}>
+		<UL direction="row" showTopBar={!SCStyle}>
 			{cards.map((card, cardIndex) => {
 				return (
 					<LI
@@ -305,6 +312,7 @@ export const FlexibleSpecial = ({
 	containerLevel = 'Primary',
 	collectionId,
 	showLabsRedesign,
+	SCStyle = false,
 }: Props) => {
 	const snaps = [...groupedTrails.snap].slice(0, 1).map((snap) => ({
 		...snap,
@@ -349,6 +357,7 @@ export const FlexibleSpecial = ({
 					containerLevel={containerLevel}
 					isSplashCard={true}
 					showLabsRedesign={showLabsRedesign}
+					SCStyle={SCStyle}
 				/>
 			)}
 
@@ -362,6 +371,7 @@ export const FlexibleSpecial = ({
 				isFirstRow={!isNonEmptyArray(snaps) && !isNonEmptyArray(splash)}
 				containerLevel={containerLevel}
 				showLabsRedesign={showLabsRedesign}
+				SCStyle={SCStyle}
 			/>
 		</>
 	);

dotcom-rendering/src/components/StorylineSection.tsx

@@ -370,7 +370,6 @@ const sectionContentBorderFromLeftCol = css`
 			position: absolute;
 			top: ${space[2]}px;
 			bottom: 0;
-			border-left: 1px solid ${schemePalette('--section-border')};
 			transform: translateX(-50%);
 			/** Keeps the vertical divider ontop of carousel item dividers */
 			z-index: 1;
@@ -390,6 +389,7 @@ const sectionTreats = css`
 	display: none;
 
 	${from.leftCol} {
+		padding-bottom: ${space[3]}px;
 		display: block;
 		align-self: end;
 
@@ -426,7 +426,7 @@ const topBorder = css`
 `;
 
 const bottomPadding = css`
-	padding-bottom: ${space[9]}px;
+	padding-bottom: ${space[6]}px;
 `;
 
 const bottomPaddingBetaContainer = (
@@ -681,7 +681,7 @@ export const StorylineSection = ({
 								url={url}
 								showDateHeader={showDateHeader}
 								editionId={editionId}
-								containerLevel={containerLevel}
+								containerLevel={'Secondary'}
 							/>
 						}
 						collectionBranding={collectionBranding}

dotcom-rendering/src/components/StorylineTabContent.tsx

@@ -3,20 +3,36 @@ import { FlexibleGeneral } from './FlexibleGeneral';
 import { FlexibleSpecial } from './FlexibleSpecial';
 import { css } from '@emotion/react';
 import { palette } from '../palette';
+import {
+	space,
+	palette as sourcePalette,
+	textSans20,
+	from,
+} from '@guardian/source/foundations';
 import { Category } from './StorylinesSection.importable';
 
 const categoryTitleCss = css`
-	fontsize: 20px;
-	fontweight: 700;
-	color: #ab0613;
-	margin: 4px;
-	padding: 8px;
-	border-top: 1px solid ${palette('--section-border-primary')};
+	${textSans20};
+	font-weight: 700;
+	color: ${sourcePalette.news[300]};
+	padding: ${space[2]}px 0;
+	${from.tablet} {
+		padding: 10px;
+	}
+
+	border-top: 1px solid ${palette('--section-border-secondary')};
+`;
+
+const contentCss = css`
+	margin-bottom: ${space[4]}px;
+	${from.leftCol} {
+		border-left: 1px solid ${sourcePalette.neutral[86]};
+	}
 `;
 
 export const StorylineTabContent = ({ content }: { content: Category[] }) => {
 	// key stories - flexible general, megaboosted first standard card
-	// other categories - flex gen
+	// other categories - flex gen secondary
 	// explainers/multimedia with default
 	// opinion with default boost and design 8 (comment)
 	// deep reads/profiles with contents->display->is immersive true
@@ -35,6 +51,7 @@ export const StorylineTabContent = ({ content }: { content: Category[] }) => {
 						imageLoading={'eager'}
 						aspectRatio={'5:4'}
 						collectionId={0}
+						SCStyle={true}
 					/>
 				);
 			case 'flexible/general':
@@ -44,6 +61,7 @@ export const StorylineTabContent = ({ content }: { content: Category[] }) => {
 						imageLoading={'eager'}
 						aspectRatio={'5:4'}
 						collectionId={0}
+						containerLevel="Secondary"
 					/>
 				);
 			default:
@@ -58,7 +76,7 @@ export const StorylineTabContent = ({ content }: { content: Category[] }) => {
 	return (
 		<>
 			{content.map((category, idx) => (
-				<div key={idx}>
+				<div key={idx} css={contentCss}>
 					{category.title !== 'Key Stories' && (
 						<h2 css={categoryTitleCss}>{category.title}</h2>
 					)}

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

@@ -1,11 +1,16 @@
 import { TagPage } from 'src/types/tagPage';
-import { space } from '@guardian/source/foundations';
-import { palette } from '../palette';
+import { from } from '@guardian/source/foundations';
 import { css } from '@emotion/react';
 import { useState } from 'react';
 import { DCRFrontCard, DCRGroupedTrails, TreatType } from 'src/types/front';
 import { StorylineTabContent } from './StorylineTabContent';
 import { StorylineSection } from './StorylineSection';
+import {
+	space,
+	palette as sourcePalette,
+	textSans17,
+} from '@guardian/source/foundations';
+import { ScrollableCarousel } from './ScrollableCarousel';
 
 type Storyline = {
 	id: string;
@@ -29,31 +34,34 @@ type StorylinesSectionProps = {
 
 const tabsContainerStyles = css`
 	display: flex;
-	gap: ${space[2]}px;
-	border-bottom: 1px solid ${palette('--section-border-primary')};
-	margin-bottom: ${space[4]}px;
+	width: 100%;
+	align-items: stretch; /* Makes all tabs the same height */
+	margin-bottom: ${space[2]}px;
+	margin-left: -${space[2]}px; /* on mobile at least */
 `;
 
-const tabStyles = (isActive: boolean) => css`
-	background: none;
-	border: none;
-	padding: ${space[2]}px ${space[3]}px;
+const tabStyles = (isActive: boolean, isFirst: boolean) => css`
+	${textSans17};
+	font-weight: 700;
+	text-align: start;
+	padding: ${space[0]}px ${space[0]}px ${space[0]}px ${space[2]}px;
 	cursor: pointer;
-	border-bottom: ${isActive
-		? `4px solid ${palette('--section-border-primary')}`
-		: 'none'};
-	font-weight: ${isActive ? 'bold' : 'normal'};
+	border: none;
+	${!isFirst && `border-left: 1px ${sourcePalette.neutral[86]} solid;`}
 	color: ${isActive
-		? `${palette('--section-border-news')}`
-		: `${palette('--section-border-primary')}`};
-
-	&:hover {
-		color: ${palette('--section-border-news')};
-	}
+		? `${sourcePalette.news[400]}`
+		: `${sourcePalette.neutral[38]}`};
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	align-items: flex-start; /* Aligns text to the top of each tab */
 `;
+// &:hover {
+// 		color: ${palette('--section-border-news')};
+// 	}
 
 const contentStyles = css`
-	padding: ${space[3]}px 0;
+	padding-top: ${space[0]}px 0;
 `;
 
 // importable because we need js to handle the tabs
@@ -77,7 +85,7 @@ export const StorylinesSection = ({
 			{
 				format: { design: 0, display: 0, theme: 0 },
 				dataLinkName: 'news | group-0 | card-@1',
-				url: '/uk-news/2025/oct/31/andrew-in-line-for-six-figure-payment-and-annual-stipend-from-king-sources-say',
+				url: '',
 				headline: '',
 				trailText:
 					'The former prince remains under scrutiny as Buckingham Palace finalises plans for his future as a commoner',
@@ -620,12 +628,22 @@ export const StorylinesSection = ({
 	const testStorylines: Storyline[] = [
 		{
 			id: 'storyline-1',
-			title: 'Storyline 1',
+			title: 'Russian drone incursions in NATO airspace',
 			categories: categories1Test,
 		},
 		{
 			id: 'storyline-2',
-			title: 'Storyline 2',
+			title: 'Zaporizhzhia nuclear plant power crisis',
+			categories: categories2Test,
+		},
+		{
+			id: 'storyline-3',
+			title: 'Ukrainian energy infrastructure under sustained Russian attack',
+			categories: categories2Test,
+		},
+		{
+			id: 'storyline-4',
+			title: `Trump's evolving approach to ending the war`,
 			categories: categories2Test,
 		},
 	];
@@ -681,16 +699,30 @@ export const StorylinesSection = ({
 			>
 				{/* Tab selector */}
 				<div css={tabsContainerStyles}>
-					{testStorylines.map((storyline) => (
-						<button
-							key={storyline.id}
-							css={tabStyles(activeStorylineId === storyline.id)}
-							onClick={() => setActiveStorylineId(storyline.id)}
-							type="button"
-						>
-							{storyline.title}
-						</button>
-					))}
+					<ScrollableCarousel
+						carouselLength={Math.ceil(testStorylines.length / 2)}
+						visibleCarouselSlidesOnMobile={2}
+						visibleCarouselSlidesOnTablet={4}
+						sectionId={'sectionId'}
+						shouldStackCards={{ desktop: false, mobile: false }}
+						gapSizes={{ column: 'large', row: 'medium' }}
+					>
+						{testStorylines.map((storyline, index) => (
+							<button
+								key={storyline.id}
+								css={tabStyles(
+									activeStorylineId === storyline.id,
+									index === 0,
+								)}
+								onClick={() =>
+									setActiveStorylineId(storyline.id)
+								}
+								type="button"
+							>
+								{storyline.title}
+							</button>
+						))}
+					</ScrollableCarousel>
 				</div>
 
 				{/* Tabs content */}