Fix rounded images for gallery onwards

Author: marjisound

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

@@ -1073,7 +1073,10 @@ export const Card = ({
 											loading={imageLoading}
 											roundedCorners={
 												isOnwardContent &&
-												!isMoreGalleriesOnwardContent
+												!(
+													isMoreGalleriesOnwardContent ||
+													isGallerySecondaryOnward
+												)
 											}
 											aspectRatio={aspectRatio}
 										/>
@@ -1090,7 +1093,10 @@ export const Card = ({
 									loading={imageLoading}
 									roundedCorners={
 										isOnwardContent &&
-										!isMoreGalleriesOnwardContent
+										!(
+											isMoreGalleriesOnwardContent ||
+											isGallerySecondaryOnward
+										)
 									}
 									aspectRatio={aspectRatio}
 								/>
@@ -1135,7 +1141,10 @@ export const Card = ({
 											loading={imageLoading}
 											roundedCorners={
 												isOnwardContent &&
-												!isMoreGalleriesOnwardContent
+												!(
+													isMoreGalleriesOnwardContent ||
+													isGallerySecondaryOnward
+												)
 											}
 											aspectRatio="1:1"
 										/>

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

@@ -73,10 +73,10 @@ const hoverStyles = css`
 	}
 `;
 
-const topBarStyles = (isGalleryOnwardContent: boolean) => css`
+const topBarStyles = (isOnwardContent: boolean) => css`
 	::before {
 		border-top: 1px solid
-			${isGalleryOnwardContent
+			${isOnwardContent
 				? palette('--onward-content-border')
 				: palette('--card-border-top')};
 		content: '';
@@ -86,14 +86,14 @@ const topBarStyles = (isGalleryOnwardContent: boolean) => css`
 		background-color: unset;
 	}
 `;
-const mobileTopBarStyles = (isGalleryOnwardContent: boolean) => css`
+const mobileTopBarStyles = (isOnwardContent: boolean) => css`
 	${until.tablet} {
-		${topBarStyles(isGalleryOnwardContent)}
+		${topBarStyles(isOnwardContent)}
 	}
 `;
-const desktopTopBarStyles = (isGalleryOnwardContent: boolean) => css`
+const desktopTopBarStyles = (isOnwardContent: boolean) => css`
 	${from.tablet} {
-		${topBarStyles(isGalleryOnwardContent)}
+		${topBarStyles(isOnwardContent)}
 	}
 `;
 
@@ -115,8 +115,7 @@ export const CardWrapper = ({
 	containerPalette,
 	contextFormat,
 }: Props) => {
-	const isGalleryOnwardContent =
-		isOnwardContent && contextFormat?.design === ArticleDesign.Gallery;
+	const isGalleryContext = contextFormat?.design === ArticleDesign.Gallery;
 	return (
 		<FormatBoundary format={format}>
 			<ContainerOverrides containerPalette={containerPalette}>
@@ -125,10 +124,12 @@ export const CardWrapper = ({
 						baseCardStyles,
 						hoverStyles,
 						showTopBarDesktop &&
-							desktopTopBarStyles(isGalleryOnwardContent),
+							desktopTopBarStyles(isGalleryContext),
 						showTopBarMobile &&
-							mobileTopBarStyles(isGalleryOnwardContent),
-						!isGalleryOnwardContent && onwardContentStyles,
+							mobileTopBarStyles(isGalleryContext),
+						isOnwardContent &&
+							!isGalleryContext &&
+							onwardContentStyles,
 					]}
 				>
 					{children}

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

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

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,
@@ -151,6 +155,7 @@ export const MoreGalleries = (props: Props) => {
 					defaultProps={getDefaultCardProps(
 						firstTrail,
 						props.discussionApiUrl,
+						props.format,
 						props.serverTime,
 					)}
 				/>
@@ -173,6 +178,7 @@ export const MoreGalleries = (props: Props) => {
 								{...getDefaultCardProps(
 									trail,
 									props.discussionApiUrl,
+									props.format,
 									props.serverTime,
 								)}
 								mediaSize="medium"

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>