add contextFormat to CardWrapper

We need to use this tyo distinguish between the format of the card article
and format of the article which holds the card

Author: marjisound

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

@@ -835,6 +835,7 @@ export const Card = ({
 			showTopBarMobile={showTopBarMobile}
 			isOnwardContent={isOnwardContent}
 			containerPalette={containerPalette}
+			contextFormat={contextFormat}
 		>
 			<CardLink
 				linkTo={linkTo}

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

@@ -13,6 +13,7 @@ type Props = {
 	showTopBarMobile: boolean;
 	isOnwardContent: boolean;
 	containerPalette?: DCRContainerPalette;
+	contextFormat?: ArticleFormat;
 };
 
 const baseCardStyles = css`
@@ -72,24 +73,27 @@ const hoverStyles = css`
 	}
 `;
 
-const topBarStyles = css`
+const topBarStyles = (isGalleryOnwardContent: boolean) => css`
 	::before {
-		border-top: 1px solid ${palette('--card-border-top')};
+		border-top: 1px solid
+			${isGalleryOnwardContent
+				? palette('--onward-content-border')
+				: palette('--card-border-top')};
 		content: '';
 		z-index: 2;
 		width: 100%;
 		padding-bottom: ${space[2]}px;
 		background-color: unset;
 	}
 `;
-const mobileTopBarStyles = css`
+const mobileTopBarStyles = (isGalleryOnwardContent: boolean) => css`
 	${until.tablet} {
-		${topBarStyles}
+		${topBarStyles(isGalleryOnwardContent)}
 	}
 `;
-const desktopTopBarStyles = css`
+const desktopTopBarStyles = (isGalleryOnwardContent: boolean) => css`
 	${from.tablet} {
-		${topBarStyles}
+		${topBarStyles(isGalleryOnwardContent)}
 	}
 `;
 
@@ -109,19 +113,22 @@ export const CardWrapper = ({
 	showTopBarMobile,
 	isOnwardContent,
 	containerPalette,
+	contextFormat,
 }: Props) => {
+	const isGalleryOnwardContent =
+		isOnwardContent && contextFormat?.design === ArticleDesign.Gallery;
 	return (
 		<FormatBoundary format={format}>
 			<ContainerOverrides containerPalette={containerPalette}>
 				<div
 					css={[
 						baseCardStyles,
 						hoverStyles,
-						showTopBarDesktop && desktopTopBarStyles,
-						showTopBarMobile && mobileTopBarStyles,
-						isOnwardContent &&
-							format.design !== ArticleDesign.Gallery &&
-							onwardContentStyles,
+						showTopBarDesktop &&
+							desktopTopBarStyles(isGalleryOnwardContent),
+						showTopBarMobile &&
+							mobileTopBarStyles(isGalleryOnwardContent),
+						!isGalleryOnwardContent && onwardContentStyles,
 					]}
 				>
 					{children}

dotcom-rendering/src/components/ScrollableSmallOnwards.tsx

@@ -233,6 +233,7 @@ const getDefaultCardProps = (
 		supportingContent: undefined,
 		canPlayInline: false,
 		onwardsSource,
+		isOnwardContent: true,
 	};
 	return defaultProps;
 };

dotcom-rendering/src/layouts/GalleryLayout.tsx

@@ -217,7 +217,7 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 				trails={gallery.storyPackage?.trails ?? []}
 				discussionApiUrl={discussionApiUrl}
 				format={format}
-				heading={gallery.storyPackage?.heading ?? 'Marjan'} // TODO
+				heading={gallery.storyPackage?.heading ?? 'More on this story'}
 				onwardsSource={'more-on-this-story'}
 			/>
 			<Island priority="feature" defer={{ until: 'visible' }}>