Make styling tweaks for more galleries and scrollable small onwards components

Author: marjisound

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

@@ -562,6 +562,7 @@ export const Card = ({
 		);
 	}
 
+	// Determine if the card is used within a gallery article
 	const isInGalleryContext = contextFormat?.design === ArticleDesign.Gallery;
 
 	// This is due to a re-design for onwards content.
@@ -861,6 +862,7 @@ export const Card = ({
 	return (
 		<CardWrapper
 			format={format}
+			contextFormat={contextFormat}
 			showTopBarDesktop={showTopBarDesktop}
 			showTopBarMobile={showTopBarMobile}
 			isOnwardContent={isOnwardContent}
@@ -1111,10 +1113,7 @@ export const Card = ({
 											loading={imageLoading}
 											roundedCorners={
 												isOnwardContent &&
-												!(
-													isMoreGalleriesOnwardContent ||
-													isGallerySecondaryOnward
-												)
+												!isInGalleryContext
 											}
 											aspectRatio={aspectRatio}
 										/>
@@ -1130,11 +1129,7 @@ export const Card = ({
 									alt={media.imageAltText}
 									loading={imageLoading}
 									roundedCorners={
-										isOnwardContent &&
-										!(
-											isMoreGalleriesOnwardContent ||
-											isGallerySecondaryOnward
-										)
+										isOnwardContent && !isInGalleryContext
 									}
 									aspectRatio={aspectRatio}
 								/>
@@ -1179,10 +1174,7 @@ export const Card = ({
 											loading={imageLoading}
 											roundedCorners={
 												isOnwardContent &&
-												!(
-													isMoreGalleriesOnwardContent ||
-													isGallerySecondaryOnward
-												)
+												!isInGalleryContext
 											}
 											aspectRatio="1:1"
 										/>

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

@@ -1,6 +1,6 @@
 import { isNonNullable, isObject } from '@guardian/libs';
 import { useEffect, useState } from 'react';
-import { decideFormat } from '../lib/articleFormat';
+import { type ArticleFormat, decideFormat } from '../lib/articleFormat';
 import { getDataLinkNameCard } from '../lib/getDataLinkName';
 import { addDiscussionIds } from '../lib/useCommentCount';
 import { palette } from '../palette';
@@ -16,6 +16,7 @@ type Props = {
 	isAdFreeUser: boolean;
 	ajaxUrl: string;
 	guardianBaseUrl: string;
+	format: ArticleFormat;
 };
 
 type MoreGalleriesResponse = {
@@ -90,6 +91,7 @@ export const FetchMoreGalleriesData = ({
 	isAdFreeUser,
 	ajaxUrl,
 	guardianBaseUrl,
+	format,
 }: Props) => {
 	const [data, setData] = useState<MoreGalleriesResponse | undefined>(
 		undefined,
@@ -151,6 +153,7 @@ export const FetchMoreGalleriesData = ({
 			trails={buildTrails(data.trails, 5, isAdFreeUser)}
 			discussionApiUrl={discussionApiUrl}
 			guardianBaseUrl={guardianBaseUrl}
+			format={format}
 		/>
 	);
 };

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

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { galleryOnwardsTrails } from '../../fixtures/manual/onwardsTrails';
+import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
 import { MoreGalleries as MoreGalleriesComponent } from './MoreGalleries';
 
 const meta = {
@@ -16,5 +17,10 @@ export const MoreGalleries = {
 		discussionApiUrl: 'https://discussion.theguardian.com/discussion-api',
 		guardianBaseUrl: 'https://www.theguardian.com',
 		trails: galleryOnwardsTrails,
+		format: {
+			design: ArticleDesign.Gallery,
+			display: ArticleDisplay.Standard,
+			theme: Pillar.Culture,
+		},
 	},
 } satisfies Story;

dotcom-rendering/src/components/MoreGalleries.tsx

@@ -8,6 +8,7 @@ import {
 } from '@guardian/source/foundations';
 import { StraightLines } from '@guardian/source-development-kitchen/react-components';
 import { grid } from '../grid';
+import type { ArticleFormat } from '../lib/articleFormat';
 import { palette } from '../palette';
 import { type TrailType } from '../types/trails';
 import { Card } from './Card/Card';
@@ -18,6 +19,7 @@ type Props = {
 	trails: TrailType[];
 	discussionApiUrl: string;
 	guardianBaseUrl: string;
+	format: ArticleFormat;
 };
 
 const standardCardStyles = css`
@@ -81,11 +83,13 @@ const cardsContainerStyles = css`
 const getDefaultCardProps = (
 	trail: TrailType,
 	discussionApiUrl: string,
+	format: ArticleFormat,
 	serverTime?: number,
 ) => {
 	const defaultProps: CardProps = {
 		linkTo: trail.url,
 		format: trail.format,
+		contextFormat: format,
 		headlineText: trail.headline,
 		byline: trail.byline,
 		showByline: trail.showByline,
@@ -100,7 +104,9 @@ const getDefaultCardProps = (
 		dataLinkName: trail.dataLinkName,
 		snapData: trail.snapData,
 		discussionApiUrl,
-		discussionId: trail.discussion?.discussionId,
+		discussionId: trail.discussion?.isCommentable
+			? trail.discussion.discussionId
+			: undefined,
 		avatarUrl: trail.avatarUrl,
 		mainMedia: trail.mainMedia,
 		isExternalLink: false,
@@ -151,6 +157,7 @@ export const MoreGalleries = (props: Props) => {
 					defaultProps={getDefaultCardProps(
 						firstTrail,
 						props.discussionApiUrl,
+						props.format,
 						props.serverTime,
 					)}
 				/>
@@ -173,6 +180,7 @@ export const MoreGalleries = (props: Props) => {
 								{...getDefaultCardProps(
 									trail,
 									props.discussionApiUrl,
+									props.format,
 									props.serverTime,
 								)}
 								mediaSize="medium"

dotcom-rendering/src/components/ScrollableSmallOnwards.tsx

@@ -102,7 +102,7 @@ export const ScrollableSmallOnwards = (props: Props) => {
 						desktop: true,
 						mobile: true,
 					}}
-					gapSizes={{ column: 'large', row: 'medium' }}
+					gapSizes={{ column: 'large', row: 'small' }}
 				>
 					{trails.map((trail, index) => {
 						return (

dotcom-rendering/src/layouts/GalleryLayout.tsx

@@ -203,6 +203,7 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 						discussionApiUrl={discussionApiUrl}
 						serverTime={serverTime}
 						isAdFreeUser={frontendData.isAdFreeUser}
+						format={format}
 					/>
 				</Island>
 			</main>