Further tweaks, inc: adding a beta label svg, tightening the spacing in the selected title, and removing the pillar colours to instead just use the main brand colour

Author: Georges-GNM

dotcom-rendering/src/components/StorylinesSection.tsx

@@ -1,11 +1,5 @@
 import { css } from '@emotion/react';
-import {
-	between,
-	from,
-	space,
-	textSans14,
-	until,
-} from '@guardian/source/foundations';
+import { between, from, space, textSans14 } from '@guardian/source/foundations';
 import { Hide } from '@guardian/source/react-components';
 import { submitComponentEvent } from '../client/ophan/ophan';
 import { type EditionId, isNetworkFront } from '../lib/edition';
@@ -18,6 +12,7 @@ import { Footer } from './ExpandableAtom/Footer';
 import { FrontPagination } from './FrontPagination';
 import { FrontSectionTitle } from './FrontSectionTitle';
 import { ShowHideButton } from './ShowHideButton';
+import { SvgBetaLabel } from './SvgBetaLabel';
 
 type Props = {
 	/** This text will be used as the h2 shown in the left column for the section */
@@ -265,22 +260,16 @@ const flexRowStyles = css`
 	justify-content: space-between;
 `;
 
-const sectionHeadlineUntilLeftCol = (isOpinion: boolean) => css`
+const sectionHeadlineUntilLeftCol = css`
 	grid-row: headline;
 	grid-column: title;
 	display: flex;
-	flex-direction: column;
+	flex-direction: row;
+	justify-content: space-between;
 
 	${between.tablet.and.leftCol} {
 		${flexRowStyles}
 	}
-
-	${isOpinion && until.mobileLandscape} {
-		flex-direction: column;
-	}
-	${isOpinion && between.mobileLandscape.and.tablet} {
-		${flexRowStyles}
-	}
 `;
 
 const topPadding = css`
@@ -580,13 +569,7 @@ export const StorylinesSection = ({
 					}}
 				/>
 
-				<div
-					css={[
-						sectionHeadlineUntilLeftCol(
-							title?.toLowerCase() === 'opinion',
-						),
-					]}
-				>
+				<div css={[sectionHeadlineUntilLeftCol]}>
 					<FrontSectionTitle
 						title={
 							<>
@@ -668,13 +651,34 @@ export const StorylinesSection = ({
 												}
 												storylinesStyle={true}
 											></Footer>
+											<div
+												css={css`
+													display: inline-block;
+													vertical-align: middle;
+													width: 75px;
+												`}
+											>
+												<SvgBetaLabel />
+											</div>
 										</div>
 									</Hide>
 								</div>
 							</>
 						}
 						collectionBranding={undefined}
 					/>
+					<Hide from="leftCol">
+						<div
+							css={css`
+								display: flex;
+								align-items: center;
+								height: 100%;
+								width: 48px;
+							`}
+						>
+							<SvgBetaLabel />
+						</div>
+					</Hide>
 				</div>
 
 				{(isToggleable || hasNavigationButtons) && (

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

@@ -8,6 +8,7 @@ import {
 	textSans17,
 	textSans20,
 	textSansBold34,
+	until,
 } from '@guardian/source/foundations';
 import { Hide } from '@guardian/source/react-components';
 import { useState } from 'react';
@@ -28,59 +29,29 @@ type StorylinesSectionProps = {
 	containerId?: string;
 	editionId: EditionId;
 	storylinesContent: StorylinesContent;
-	pillar?: string;
 	pagination?: TagPagePagination;
 	likeHandler?: () => void;
 	dislikeHandler?: () => void;
 };
 
-// AIStorylines: this would be better handled in paletteDeclarations by creating a new css variable if we keep this feature.
-const setSelectedStorylineColour = (pillar?: string) => {
-	switch (pillar?.toLowerCase()) {
-		case 'news':
-			return sourcePalette.news[400];
-		case 'opinion':
-			return sourcePalette.opinion[400];
-		case 'sport':
-			return sourcePalette.sport[400];
-		case 'culture':
-			return sourcePalette.culture[400];
-		case 'lifestyle':
-			return sourcePalette.lifestyle[400];
-		default:
-			return sourcePalette.news[400];
-	}
-};
-
-const selectedTitleStyles = (selectedStorylineColour: string) => css`
+const selectedTitleStyles = css`
 	${textSansBold34}
-	color: ${selectedStorylineColour};
-	margin-bottom: ${space[4]}px;
-	margin-top: ${space[2]}px;
-	padding-left: 10px; /* aligns with the headlines of the stories below */
-`;
-
-const setCategoryColour = (pillar?: string) => {
-	switch (pillar?.toLowerCase()) {
-		case 'news':
-			return sourcePalette.news[300];
-		case 'opinion':
-			return sourcePalette.opinion[400];
-		case 'sport':
-			return sourcePalette.sport[300];
-		case 'culture':
-			return sourcePalette.culture[300];
-		case 'lifestyle':
-			return sourcePalette.lifestyle[300];
-		default:
-			return sourcePalette.news[300];
+	color: ${sourcePalette.brand[400]};
+	margin-bottom: ${space[2]}px;
+	${until.tablet} {
+		line-height: 1.2;
+		padding-left: 0px;
 	}
-};
+	${from.tablet} {
+		line-height: 1.3;
+		padding-left: 10px; /* aligns with the headlines of the stories below */
+	}
+`;
 
-const categoryTitleCss = (pillarColour: string) => css`
+const categoryTitleCss = css`
 	${textSans20};
 	font-weight: 700;
-	color: ${pillarColour};
+	color: ${sourcePalette.brand[400]};
 	margin: ${space[2]}px 0;
 	padding: ${space[1]}px 0;
 	${from.tablet} {
@@ -101,10 +72,10 @@ const tabsContainerStyles = css`
 	display: flex;
 	width: 100%;
 	${from.wide} {
-		width: 110%;
-	} /* bit hacky, but looks a touch better on wide. */
+		width: 110%; /* bit hacky, but looks a touch better on wide. */
+		margin-bottom: ${space[2]}px;
+	}
 	align-items: stretch; /* Makes all tabs the same height */
-	margin-bottom: ${space[6]}px;
 	margin-left: -${space[2]}px;
 `;
 
@@ -196,7 +167,6 @@ export const StorylinesSectionContent = ({
 	containerId,
 	storylinesContent,
 	editionId,
-	pillar,
 	pagination,
 	dislikeHandler,
 	likeHandler,
@@ -216,10 +186,6 @@ export const StorylinesSectionContent = ({
 		(s) => s.id === activeStorylineId,
 	);
 
-	const selectedStorylineColour = setSelectedStorylineColour(pillar);
-
-	const categoryColour = setCategoryColour(pillar);
-
 	function handleStorylineChange(newStorylineId: string) {
 		const currentId = activeStorylineId;
 		setActiveStorylineId(newStorylineId);
@@ -291,18 +257,14 @@ export const StorylinesSectionContent = ({
 				</div>
 				{/* Active storyline title */}
 				{activeStoryline && (
-					<div css={selectedTitleStyles(selectedStorylineColour)}>
-						{activeStoryline.title}
-					</div>
+					<div css={selectedTitleStyles}>{activeStoryline.title}</div>
 				)}
 				{/* Content by categories */}
 				<div css={contentStyles}>
 					{activeStoryline?.categories.map((category, idx) => (
 						<div key={idx} css={contentCss}>
 							{category.title !== 'Key Stories' && (
-								<h2 css={categoryTitleCss(categoryColour)}>
-									{category.title}
-								</h2>
+								<h2 css={categoryTitleCss}>{category.title}</h2>
 							)}
 							<FlexibleGeneral
 								groupedTrails={category.groupedTrails}

dotcom-rendering/src/components/SvgBetaLabel.tsx

@@ -0,0 +1,105 @@
+/**
+ * Used to indicate a beta feature.
+ * At the moment this is just used for the AI storylines section on tag pages.
+ * If commonly reused in the future, might benefit from being uploaded to guim.co.uk or moved to source.
+ */
+export const SvgBetaLabel = () => (
+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 74.23 74.23">
+		<defs>
+			<style>
+				{`.cls-1 {
+					fill: #94daf8;
+				}
+
+				.cls-2 {
+					fill: #f9f9fa;
+				}
+
+				.cls-3 {
+					isolation: isolate;
+				}
+
+				.cls-4 {
+					mix-blend-mode: multiply;
+				}
+
+				.cls-5 {
+					fill: #1f2f60;
+					fill-rule: evenodd;
+				}`}
+			</style>
+		</defs>
+		<g className="cls-3">
+			<g id="Layer_1">
+				<g className="cls-4">
+					<path
+						className="cls-5"
+						d="M37.11,0C16.62,0,0,16.62,0,37.11s16.62,37.11,37.11,37.11,37.11-16.62,37.11-37.11S57.61,0,37.11,0Z"
+					/>
+				</g>
+				<polygon
+					className="cls-2"
+					points="17.72 31.92 18.95 31.28 18.95 21.62 18.02 21.62 15.75 24.63 15.49 24.63 15.64 21.27 25.49 21.27 25.63 24.63 25.36 24.63 23.14 21.62 22.18 21.62 22.18 31.26 23.42 31.92 23.42 32.24 17.72 32.24 17.72 31.92"
+				/>
+				<path
+					className="cls-2"
+					d="M26.76,31.5v-10.72l-.95-.38v-.2l3.46-.62h.36v5.07l.1-.08c.76-.67,1.86-1.1,2.96-1.1,1.51,0,2.18.85,2.18,2.44v5.58l.81.44v.32s-4.52,0-4.52,0v-.32l.81-.44v-5.6c0-.88-.38-1.23-1.1-1.23-.48,0-.89.15-1.19.39v6.45l.8.44v.31h-4.52v-.31l.81-.46Z"
+				/>
+				<path
+					className="cls-2"
+					d="M38.52,28.21c.09,1.77.89,3.14,2.77,3.14.91,0,1.55-.42,2.16-.74v.35c-.47.64-1.66,1.55-3.32,1.55-2.91,0-4.4-1.62-4.4-4.43s1.63-4.45,4.26-4.45c2.48,0,3.76,1.24,3.76,4.5v.08h-5.23ZM38.47,27.8l2.56-.16c0-2.19-.38-3.65-1.13-3.65-.8,0-1.44,1.69-1.44,3.81"
+				/>
+				<path
+					className="cls-2"
+					d="M1.46,36.53c0-4.66,3.09-6.32,6.53-6.32,1.46,0,2.84.23,3.61.55l.07,3.25h-.33l-2.02-3.15c-.35-.15-.67-.21-1.28-.21-1.83,0-2.76,2.11-2.73,5.58.03,4.14.75,6.02,2.43,6.02.44,0,.77-.07,1.01-.17v-4.44l-1.11-.63v-.37h5.35v.4l-1.09.61v4.38c-.91.35-2.43.69-4.04.69-3.91,0-6.39-1.81-6.39-6.19"
+				/>
+				<path
+					className="cls-2"
+					d="M12.93,34.36v-.27l3.6-.63.39.03v7.09c0,.85.41,1.12,1.1,1.12.44,0,.85-.17,1.17-.55v-6.36l-.99-.43v-.28l3.6-.63.36.03v8.13l.97.41v.26l-3.55.44-.36-.03v-1.07h-.1c-.66.61-1.58,1.13-2.7,1.13-1.73,0-2.52-1.02-2.52-2.56v-5.39l-.99-.43Z"
+				/>
+				<path
+					className="cls-2"
+					d="M35.94,33.44l.3.03v2.63s.08,0,.08,0c.38-1.93,1.23-2.64,2.27-2.64.16,0,.35.02.44.07v2.69c-.16-.05-.46-.07-.74-.07-.82,0-1.43.15-1.96.39v5.19s.82.45.82.45v.34s-4.67,0-4.67,0v-.33l.84-.46v-7.08l-.99-.29v-.24l3.6-.67Z"
+				/>
+				<path
+					className="cls-2"
+					d="M44.98,33.66v-2.77l-.99-.35v-.22l3.63-.67.35.05v11.9l1,.36v.31l-3.58.48-.28-.03v-.98h-.08c-.53.53-1.25,1-2.38,1-1.96,0-3.39-1.5-3.39-4.55,0-3.22,1.66-4.81,4.18-4.81.72,0,1.27.13,1.54.28M44.98,41.28v-7.11c-.23-.15-.4-.33-.99-.31-.97.03-1.57,1.5-1.57,4.11,0,2.35.43,3.66,1.73,3.62.36-.01.66-.14.84-.32"
+				/>
+				<path
+					className="cls-2"
+					d="M52.97,33.43l.31.03v8.26l.82.45v.34s-4.67,0-4.67,0v-.33l.84-.46v-6.95l-1-.39v-.28l3.7-.67ZM53.3,31.2c0,.87-.74,1.53-1.59,1.53s-1.58-.66-1.58-1.53.69-1.55,1.58-1.55,1.59.67,1.59,1.55"
+				/>
+				<path
+					className="cls-2"
+					d="M64.58,41.72v-7.03l-.99-.35v-.34l3.58-.67.36.03v1.05h.1c.77-.69,1.92-1.13,3.06-1.13,1.56,0,2.25.74,2.25,2.38v6.03l.84.47v.34s-4.67,0-4.67,0v-.33l.84-.46v-5.88c0-.9-.39-1.27-1.13-1.27-.48,0-.87.12-1.23.39v6.75l.82.46v.34h-4.67v-.33l.84-.46Z"
+				/>
+				<path
+					className="cls-2"
+					d="M59.4,37.3v-1.18c0-1.78-.39-2.36-1.49-2.36-.13,0-.24.02-.37.03l-1.95,2.65h-.27v-2.44c.84-.26,1.89-.57,3.28-.57,2.39,0,3.78.66,3.78,2.66v5.75l.86.23v.23c-.34.21-1.02.4-1.76.4-1.18,0-1.74-.39-2-1.03h-.08c-.5.68-1.21,1.07-2.32,1.07-1.42,0-2.39-.89-2.39-2.42s.92-2.29,2.79-2.65l1.94-.37ZM59.4,41.28v-3.55l-.6.05c-.94.08-1.28.68-1.28,2,0,1.44.47,1.81,1.13,1.81.37,0,.58-.11.74-.31"
+				/>
+				<path
+					className="cls-2"
+					d="M28.17,37.3v-1.18c0-1.78-.39-2.36-1.49-2.36-.13,0-.24.02-.37.03l-1.95,2.65h-.27v-2.44c.84-.26,1.89-.57,3.28-.57,2.39,0,3.78.66,3.78,2.66v5.75l.86.23v.23c-.34.21-1.02.4-1.76.4-1.18,0-1.74-.39-2-1.03h-.08c-.5.68-1.21,1.07-2.33,1.07-1.42,0-2.39-.89-2.39-2.42s.92-2.29,2.79-2.65l1.94-.37ZM28.17,41.28v-3.55l-.6.05c-.94.08-1.28.68-1.28,2,0,1.44.47,1.81,1.13,1.81.37,0,.58-.11.74-.31"
+				/>
+				<g>
+					<path
+						className="cls-1"
+						d="M18.84,55.85v-12.19h2.45v4.54h.08c.61-.62,1.33-1.07,2.53-1.07,1.5,0,3.14.87,3.14,4.01v.81c0,3.22-1.56,4.54-4.57,4.54-1.38,0-2.73-.26-3.63-.64ZM24.51,52.3v-.9c0-1.87-.54-2.25-1.79-2.25-.58,0-1.13.21-1.43.36v5c.28.13.67.28,1.33.28,1.09,0,1.89-.54,1.89-2.48Z"
+					/>
+					<path
+						className="cls-1"
+						d="M28.08,52.24v-.86c0-2.76,1.63-4.24,4.1-4.24,2.66,0,3.86,1.4,3.86,4.24v1.17h-5.46c.1,1.61.87,1.99,2.53,1.99,1.09,0,1.89-.23,2.61-.51v1.69c-.64.35-1.64.76-3.21.76-2.99,0-4.44-1.43-4.44-4.24ZM30.53,50.95h3.12c0-1.63-.56-2.07-1.5-2.07-.82,0-1.58.36-1.63,2.07Z"
+					/>
+					<path
+						className="cls-1"
+						d="M38.11,54.01v-4.84h-1.28v-1.88h1.28v-2.14h2.45v2.14h2.01v1.88h-2.01v4.46c0,.71.3.89,1.07.89.31,0,.74-.07,1.02-.15v1.66c-.36.2-1.05.41-1.92.41-1.64,0-2.61-.56-2.61-2.43Z"
+					/>
+					<path
+						className="cls-1"
+						d="M43.57,53.9c0-1.81,1.15-2.48,2.98-2.71l1.76-.25v-.54c0-.95-.46-1.23-1.81-1.23-.85,0-1.64.13-2.22.26v-1.78c.87-.35,1.91-.51,3.17-.51,2.15,0,3.31.81,3.31,2.85v6.33h-2.02l-.20-.87h-.10c-.38.59-1.12,1.04-2.19,1.04-1.6,0-2.68-.86-2.68-2.58ZM48.3,54.44v-2.12l-1.25.13c-.76.08-1.10.46-1.10,1.27s.48,1.15,1.12,1.15c.49,0,.99-.18,1.23-.43Z"
+					/>
+				</g>
+			</g>
+		</g>
+	</svg>
+);

dotcom-rendering/src/layouts/TagPageLayout.tsx

@@ -142,11 +142,11 @@ export const TagPageLayout = ({ tagPage, NAV }: Props) => {
 							tagPage.pagination.currentPage === 1) && // Only on the first page
 						index === 0; // Only after the first section
 
-/**
- * The pagination should appear at the bottom of the page; usually this is done by passing to FrontSection.
- * If the storylines section is being inserted when there's only one other container on the page,
- * we want to attach the pagination to it instead of the last trails section.
- */
+					/**
+					 * The pagination should appear at the bottom of the page; usually this is done by passing to FrontSection.
+					 * If the storylines section is being inserted when there's only one other container on the page,
+					 * we want to attach the pagination to it instead of the last trails section.
+					 */
 					const tagPagePagination =
 						index === tagPage.groupedTrails.length - 1 &&
 						tagPage.pagination &&
@@ -213,9 +213,6 @@ export const TagPageLayout = ({ tagPage, NAV }: Props) => {
 												tagPage.storylinesContent
 											}
 											containerId="storylines"
-											pillar={
-												tagPage.nav.currentPillarTitle
-											}
 											pagination={paginationForStorylines}
 										/>
 									</Island>