Merge pull request #13652 from guardian/doml/dividing-line-editorials

Display line between cards in secondary Flexible General containers on mobile

Author: domlander

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

@@ -62,7 +62,7 @@ const sublinkHoverStyles = css`
 	}
 `;
 
-const desktopTopBarStyles = css`
+const topBarStyles = css`
 	:before {
 		border-top: 1px solid ${palette('--card-border-top')};
 		content: '';
@@ -72,12 +72,14 @@ const desktopTopBarStyles = css`
 		background-color: unset;
 	}
 `;
-
 const mobileTopBarStyles = css`
 	${until.tablet} {
-		${desktopTopBarStyles}
+		${topBarStyles}
 	}
 `;
+const desktopTopBarStyles = css`
+	${topBarStyles}
+`;
 
 const onwardContentStyles = css`
 	border-radius: ${space[2]}px;

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

@@ -502,3 +502,15 @@ export const WithSpecialPaletteVariations = {
 		</>
 	),
 } satisfies Story;
+
+export const SecondaryContainerStandardCards: Story = {
+	name: 'Secondary container with standard cards',
+	args: {
+		frontSectionTitle: 'Secondary container standard cards',
+		containerLevel: 'Secondary',
+		groupedTrails: {
+			...defaultGroupedTrails,
+			standard: standardCards.slice(0, 4),
+		},
+	},
+};

dotcom-rendering/src/components/FlexibleGeneral.tsx

@@ -504,7 +504,8 @@ const StandardCardLayout = ({
 							showTopBarMobile={
 								!isFirstRow ||
 								(containerLevel === 'Primary' &&
-									!isMediaCard(card.format))
+									!isMediaCard(card.format)) ||
+								(containerLevel !== 'Primary' && cardIndex > 0)
 							}
 							trailText={undefined}
 							// On standard cards, we increase the headline size if the trail image has been hidden