refactor sublink rendering

guardian · Sep 17, 2024 · 807309d · 807309d
1 parent 0898a19
commit 807309d
Showing 1 changed file with 6 additions and 28 deletions.
diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
@@ -420,19 +420,8 @@ export const Card = ({
 				/>
 			);
 		}
-		if (isFlexibleContainer) {
-			return (
-				<Hide from="tablet">
-					<SupportingContent
-						supportingContent={supportingContent}
-						containerPalette={containerPalette}
-						alignment={supportingContentAlignment}
-					/>
-				</Hide>
-			);
-		}
 		return (
-			<Hide from="desktop">
+			<Hide from={isFlexibleContainer ? 'tablet' : 'desktop'}>
 				<SupportingContent
 					supportingContent={supportingContent}
 					containerPalette={containerPalette}
@@ -445,22 +434,8 @@ export const Card = ({
 	const decideInnerSublinks = () => {
 		if (!hasSublinks) return null;
 		if (sublinkPosition !== 'inner') return null;
-		if (isFlexibleContainer) {
-			return (
-				<Hide until="tablet">
-					<SupportingContent
-						supportingContent={supportingContent}
-						alignment={
-							'vertical'
-						} /* inner links are always vertically stacked */
-						containerPalette={containerPalette}
-					/>
-				</Hide>
-			);
-		}
-
 		return (
-			<Hide until="desktop">
+			<Hide until={isFlexibleContainer ? 'tablet' : 'desktop'}>
 				<SupportingContent
 					supportingContent={supportingContent}
 					alignment={
@@ -776,7 +751,10 @@ export const Card = ({
 							)}
 							{sublinkPosition === 'outer' &&
 								supportingContentAlignment === 'horizontal' &&
-								imageSize !== 'jumbo' && <HorizontalDivider />}
+								(imagePositionOnDesktop === 'right' ||
+									imagePositionOnDesktop === 'left') && (
+									<HorizontalDivider />
+								)}
 						</div>
 
 						{/* This div is needed to push this content to the bottom of the card */}