Refactor MoreGalleries

Removed and re-organised the styles, and shortened the components. Also
hardcoded the heading, data attributes and links because they won't
change.

Co-authored-by: Marjan Kalanaki <[email protected]>

Author: JamieB-gu

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

@@ -166,7 +166,7 @@ export const FetchMoreGalleriesData = ({
 				absoluteServerTimes={absoluteServerTimes}
 				trails={buildTrails(data.trails, limit, isAdFreeUser)}
 				discussionApiUrl={discussionApiUrl}
-				headingLink={`${guardianBaseUrl}/inpictures/all`}
+				guardianBaseUrl={guardianBaseUrl}
 			/>
 		</div>
 	);

dotcom-rendering/src/components/MoreGalleries.stories.tsx

@@ -16,7 +16,7 @@ export const MoreGalleries = {
 	args: {
 		absoluteServerTimes: false,
 		discussionApiUrl: 'https://discussion.theguardian.com/discussion-api',
-		headingLink: 'https://www.theguardian.com/inpictures/all',
+		guardianBaseUrl: 'https://www.theguardian.com',
 		trails: [
 			{
 				url: 'https://www.theguardian.com/environment/gallery/2025/aug/22/week-in-wildlife-a-clumsy-fox-swinging-orangutang-and-rescued-jaguarundi-cub',

dotcom-rendering/src/components/MoreGalleries.tsx

@@ -8,9 +8,7 @@ import {
 } from '@guardian/source/foundations';
 import { StraightLines } from '@guardian/source-development-kitchen/react-components';
 import { grid } from '../grid';
-import { formatAttrString } from '../lib/formatAttrString';
 import { palette } from '../palette';
-import { type OnwardsSource } from '../types/onwards';
 import { type TrailType } from '../types/trails';
 import { Card } from './Card/Card';
 import type { Props as CardProps } from './Card/Card';
@@ -19,53 +17,41 @@ type Props = {
 	absoluteServerTimes: boolean;
 	trails: TrailType[];
 	discussionApiUrl: string;
-	headingLink?: string;
+	guardianBaseUrl: string;
 };
 
 const standardCardStyles = css`
 	flex: 1;
-
 	position: relative;
 	display: flex;
 	padding: ${space[2]}px;
 	background-color: ${palette('--onward-card-background')};
 
-	:not(:first-child)::before {
-		content: '';
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		left: -10px; /* shift into the gap */
-		width: 1px;
-		background: ${palette('--onward-content-border')};
-	}
-`;
-
-const titleGridStyle = css`
-	${grid.column.centre}
-	color: ${palette('--caption-text')};
-	align-self: start;
-
-	${from.leftCol} {
-		${grid.column.left}
+	${from.tablet} {
+		:not(:first-child)::before {
+			content: '';
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			left: -10px; /* shift into the gap */
+			width: 1px;
+			background: ${palette('--onward-content-border')};
+		}
 	}
 `;
 
 const standardCardsListStyles = css`
 	width: 100%;
 	display: flex;
-	flex-direction: row;
+	flex-direction: column;
 	gap: 20px;
 	margin-bottom: ${space[6]}px;
 
 	${from.tablet} {
+		flex-direction: row;
 		padding-top: ${space[2]}px;
 	}
 
-	${until.tablet} {
-		flex-direction: column;
-		width: 100%;
-	}
 	${from.leftCol} {
 		&::before {
 			content: '';
@@ -80,9 +66,8 @@ const standardCardsListStyles = css`
 `;
 
 const cardsContainerStyles = css`
-	display: inline;
-	position: relative;
 	${grid.column.centre}
+	position: relative;
 
 	${from.desktop} {
 		${grid.between('centre-column-start', 'right-column-end')}
@@ -93,29 +78,6 @@ const cardsContainerStyles = css`
 	}
 `;
 
-const headerStyles = css`
-	color: ${palette('--carousel-text')};
-	${headlineBold24};
-	padding-bottom: ${space[3]}px;
-	padding-top: ${space[1]}px;
-	margin-left: 0;
-
-	${from.tablet} {
-		${headlineBold28};
-	}
-`;
-
-const headerStylesWithUrl = css`
-	:hover {
-		text-decoration: underline;
-	}
-`;
-
-const titleStyle = css`
-	color: ${palette('--onward-text')};
-	display: inline-block;
-`;
-
 const getDefaultCardProps = (
 	trail: TrailType,
 	absoluteServerTimes: boolean,
@@ -159,39 +121,40 @@ export const MoreGalleries = (props: Props) => {
 	const [firstTrail, ...standardCards] = props.trails;
 	if (!firstTrail) return null;
 
-	const heading = 'More galleries';
-	const onwardsSource: OnwardsSource = 'more-galleries';
-
-	const defaultProps = getDefaultCardProps(
-		firstTrail,
-		props.absoluteServerTimes,
-		props.discussionApiUrl,
-	);
-
 	return (
 		<section
-			data-component={onwardsSource}
-			data-link={formatAttrString(heading)}
+			data-component="more-galleries"
+			data-link="more-galleries"
 			css={css`
 				${grid.paddedContainer}
-
 				background-color: ${palette('--onward-background')};
-
-				${until.tablet} {
-					padding-top: ${space[1]}px;
-				}
+				padding-top: ${space[1]}px;
 
 				${from.tablet} {
+					padding-top: 0;
 					border-left: 1px solid ${palette('--onward-content-border')};
 					border-right: 1px solid
 						${palette('--onward-content-border')};
 				}
 			`}
 		>
-			<Title title={heading} url={props.headingLink} />
-			<MoreGalleriesSplashCard defaultProps={defaultProps} />
+			<Title guardianBaseUrl={props.guardianBaseUrl} />
+			<MoreGalleriesSplashCard
+				defaultProps={getDefaultCardProps(
+					firstTrail,
+					props.absoluteServerTimes,
+					props.discussionApiUrl,
+				)}
+			/>
 			<StraightLines
-				cssOverrides={cardsContainerStyles}
+				cssOverrides={[
+					cardsContainerStyles,
+					css`
+						${until.tablet} {
+							display: none;
+						}
+					`,
+				]}
 				count={1}
 				color={palette('--onward-content-border')}
 			/>
@@ -209,19 +172,6 @@ export const MoreGalleries = (props: Props) => {
 					</li>
 				))}
 			</ul>
-			<StraightLines
-				cssOverrides={css`
-					${grid.column.all}
-					padding-left: ${space[5]}px;
-					padding-right: ${space[5]}px;
-					${from.leftCol} {
-						padding-left: ${space[2]}px;
-						padding-right: ${space[2]}px;
-					}
-				`}
-				count={1}
-				color={palette('--onward-content-border')}
-			/>
 		</section>
 	);
 };
@@ -271,24 +221,36 @@ const MoreGalleriesSplashCard = ({
 	);
 };
 
-const Title = ({ title, url }: { title: string; url?: string }) =>
-	url ? (
-		<a
-			css={[
-				titleGridStyle,
-				css`
-					text-decoration: none;
-				`,
-			]}
-			href={url}
-			data-link-name="section heading"
-		>
-			<h2 css={headerStyles}>
-				<span css={[headerStylesWithUrl, titleStyle]}>{title}</span>
-			</h2>
-		</a>
-	) : (
-		<h2 css={[titleGridStyle, headerStyles]}>
-			<span css={titleStyle}>{title}</span>
-		</h2>
-	);
+const Title = ({ guardianBaseUrl }: { guardianBaseUrl: string }) => (
+	<a
+		css={css`
+			${grid.column.centre}
+			color: ${palette('--caption-text')};
+			text-decoration: none;
+			align-self: start;
+
+			${from.leftCol} {
+				${grid.column.left}
+			}
+		`}
+		href={`${guardianBaseUrl}/inpictures/all`}
+		data-link-name="section heading"
+	>
+		<h2 css={headerStyles}>More galleries</h2>
+	</a>
+);
+
+const headerStyles = css`
+	color: ${palette('--carousel-text')};
+	${headlineBold24};
+	padding-bottom: ${space[3]}px;
+	padding-top: ${space[1]}px;
+
+	:hover {
+		text-decoration: underline;
+	}
+
+	${from.tablet} {
+		${headlineBold28};
+	}
+`;