Revert "[Fairground 🎡] Redesign sublinks as grid layout (#12346)" (#1…

…2431) This reverts commit 531a63a.
guardian · Sep 20, 2024 · ae9de73 · ae9de73
1 parent 531a63a
commit ae9de73
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 195 deletions.
diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
@@ -139,25 +139,6 @@ const StarRatingComponent = ({
 	</div>
 );
 
-const HorizontalDivider = () => (
-	<div
-		css={css`
-			${from.tablet} {
-				border-top: 1px solid ${themePalette('--card-border-top')};
-				height: 1px;
-				width: 50%;
-				${from.tablet} {
-					width: 100px;
-				}
-				${from.desktop} {
-					width: 140px;
-				}
-				margin-top: ${space[3]}px;
-			}
-		`}
-	/>
-);
-
 const getMedia = ({
 	imageUrl,
 	imageAltText,
@@ -410,7 +391,7 @@ export const Card = ({
 	 *
 	 */
 	const decideOuterSublinks = () => {
-		if (!hasSublinks) return null;
+		if (!supportingContent) return null;
 		if (sublinkPosition === 'none') return null;
 		if (sublinkPosition === 'outer') {
 			return (
@@ -419,35 +400,16 @@ export const Card = ({
 					containerPalette={containerPalette}
 					alignment={supportingContentAlignment}
 					isDynamo={isDynamo}
-					fillBackground={isFlexibleContainer}
 				/>
 			);
 		}
 		return (
-			<Hide from={isFlexibleContainer ? 'tablet' : 'desktop'}>
+			<Hide from="tablet">
 				<SupportingContent
 					supportingContent={supportingContent}
 					containerPalette={containerPalette}
 					alignment={supportingContentAlignment}
 					isDynamo={isDynamo}
-					fillBackground={isFlexibleContainer}
-				/>
-			</Hide>
-		);
-	};
-
-	const decideInnerSublinks = () => {
-		if (!hasSublinks) return null;
-		if (sublinkPosition !== 'inner') return null;
-		return (
-			<Hide until={isFlexibleContainer ? 'tablet' : 'desktop'}>
-				<SupportingContent
-					supportingContent={supportingContent}
-					/* inner links are always vertically stacked */
-					alignment="vertical"
-					containerPalette={containerPalette}
-					isDynamo={isDynamo}
-					fillBackground={isFlexibleContainer}
 				/>
 			</Hide>
 		);
@@ -758,12 +720,6 @@ export const Card = ({
 									showLivePlayable={showLivePlayable}
 								/>
 							)}
-							{sublinkPosition === 'outer' &&
-								supportingContentAlignment === 'horizontal' &&
-								(imagePositionOnDesktop === 'right' ||
-									imagePositionOnDesktop === 'left') && (
-									<HorizontalDivider />
-								)}
 						</div>
 
 						{/* This div is needed to push this content to the bottom of the card */}
@@ -787,7 +743,16 @@ export const Card = ({
 								</Island>
 							)}
 
-							{decideInnerSublinks()}
+							{hasSublinks && sublinkPosition === 'inner' && (
+								<Hide until="tablet">
+									<SupportingContent
+										supportingContent={supportingContent}
+										alignment="vertical"
+										containerPalette={containerPalette}
+										isDynamo={isDynamo}
+									/>
+								</Hide>
+							)}
 						</div>
 					</ContentWrapper>
 				)}

diff --git a/dotcom-rendering/src/components/CardHeadline.tsx b/dotcom-rendering/src/components/CardHeadline.tsx
@@ -235,6 +235,9 @@ const sublinkStyles = css`
 	font-family: inherit;
 	font-size: inherit;
 	line-height: inherit;
+	@media (pointer: coarse) {
+		min-height: 44px;
+	}
 
 	/* This css is used to remove any underline from the kicker but still
 	 * have it applied to the headline when the kicker is hovered */

diff --git a/dotcom-rendering/src/components/FlexibleGeneral.test.tsx b/dotcom-rendering/src/components/FlexibleGeneral.test.tsx
@@ -32,19 +32,6 @@ describe('FlexibleGeneral', () => {
 		]);
 	});
 
-	it('Should return a one card row layout if one card without boost level is provided', () => {
-		const cardWithoutBoostLevel = {
-			...standardCard,
-			boostLevel: undefined,
-		};
-		expect(decideCardPositions([cardWithoutBoostLevel])).toEqual([
-			{
-				layout: 'oneCard',
-				cards: [cardWithoutBoostLevel],
-			},
-		]);
-	});
-
 	it('Should return two rows of two card row layouts if four standard cards are provided', () => {
 		expect(
 			decideCardPositions([

diff --git a/dotcom-rendering/src/components/FlexibleGeneral.tsx b/dotcom-rendering/src/components/FlexibleGeneral.tsx
@@ -46,7 +46,7 @@ export const decideCardPositions = (cards: DCRFrontCard[]): GroupedCards => {
 
 	return cards.reduce<GroupedCards>((acc, card) => {
 		// Early return if the card is boosted since it takes up a whole row
-		if (card.boostLevel && card.boostLevel !== 'default') {
+		if (card.boostLevel !== 'default') {
 			return [...acc, createNewRow('oneCardBoosted', card)];
 		}
 
@@ -64,22 +64,22 @@ export const decideCardPositions = (cards: DCRFrontCard[]): GroupedCards => {
 	}, []);
 };
 
-type BoostedSplashProperties = {
+/**
+ * Boosting a splash card will affect the layout and style of the card. This function will determine the properties of the card based on the boost level.
+ */
+
+type boostedSplashProperties = {
 	headlineSize: SmallHeadlineSize;
 	headlineSizeOnMobile: SmallHeadlineSize;
 	headlineSizeOnTablet: SmallHeadlineSize;
 	imagePositionOnDesktop: ImagePositionType;
 	imagePositionOnMobile: ImagePositionType;
 	supportingContentAlignment: Alignment;
 };
-
-/**
- * Boosting a splash card will affect the layout and style of the card. This function will determine the properties of the card based on the boost level.
- */
 const decideSplashCardProperties = (
-	boostLevel: BoostLevel,
+	boostLevel: BoostLevel = 'default',
 	supportingContentLength: number,
-): BoostedSplashProperties => {
+): boostedSplashProperties => {
 	switch (boostLevel) {
 		// The default boost level is equal to no boost. It is the same as the default card layout.
 		case 'default':
@@ -147,10 +147,9 @@ export const SplashCardLayout = ({
 		imagePositionOnMobile,
 		supportingContentAlignment,
 	} = decideSplashCardProperties(
-		card.boostLevel ?? 'default',
-		card.supportingContent?.length ?? 0,
+		card.boostLevel,
+		card?.supportingContent?.length ?? 0,
 	);
-
 	return (
 		<UL padBottom={true}>
 			<LI padSides={true}>
@@ -180,19 +179,19 @@ export const SplashCardLayout = ({
 	);
 };
 
-type BoostedCardProperties = {
+/**
+ * Boosting a splash card will affect the layout and style of the card. This function will determine the properties of the card based on the boost level.
+ */
+
+type boostedCardProperties = {
 	headlineSize: SmallHeadlineSize;
 	headlineSizeOnMobile: SmallHeadlineSize;
 	headlineSizeOnTablet: SmallHeadlineSize;
 	imageSize: ImageSizeType;
 };
-
-/**
- * Boosting a standard card will affect the layout and style of the card. This function will determine the properties of the card based on the boost level.
- */
 const decideCardProperties = (
 	boostLevel: BoostLevel = 'boost',
-): BoostedCardProperties => {
+): boostedCardProperties => {
 	switch (boostLevel) {
 		case 'megaboost':
 			return {
@@ -319,7 +318,7 @@ export const FlexibleGeneral = ({
 	imageLoading,
 }: Props) => {
 	const splash = [...groupedTrails.splash].slice(0, 1);
-	const cards = [...groupedTrails.standard].slice(0, 8);
+	const cards = [...groupedTrails.standard].slice(0, 8); // TODO check maximum number of cards
 	const groupedCards = decideCardPositions(cards);
 
 	return (

diff --git a/dotcom-rendering/src/components/FlexibleSpecial.tsx b/dotcom-rendering/src/components/FlexibleSpecial.tsx
@@ -19,7 +19,7 @@ type Props = {
 	absoluteServerTimes: boolean;
 };
 
-type BoostProperties = {
+type boostProperties = {
 	headlineSize: SmallHeadlineSize;
 	headlineSizeOnMobile: SmallHeadlineSize;
 	headlineSizeOnTablet: SmallHeadlineSize;
@@ -32,9 +32,9 @@ type BoostProperties = {
  * Boosting a card will affect the layout and style of the card. This function will determine the properties of the card based on the boost level.
  */
 const determineCardProperties = (
-	boostLevel: BoostLevel,
+	boostLevel: BoostLevel = 'default',
 	supportingContentLength: number,
-): BoostProperties => {
+): boostProperties => {
 	switch (boostLevel) {
 		// The default boost level is equal to no boost. It is the same as the default card layout.
 		case 'default':
@@ -43,7 +43,7 @@ const determineCardProperties = (
 				headlineSizeOnMobile: 'tiny',
 				headlineSizeOnTablet: 'small',
 				imagePositionOnDesktop: 'right',
-				imagePositionOnMobile: 'bottom',
+				imagePositionOnMobile: 'top',
 				supportingContentAlignment:
 					supportingContentLength >= 3 ? 'horizontal' : 'vertical',
 			};
@@ -53,7 +53,7 @@ const determineCardProperties = (
 				headlineSizeOnMobile: 'small',
 				headlineSizeOnTablet: 'medium',
 				imagePositionOnDesktop: 'right',
-				imagePositionOnMobile: 'bottom',
+				imagePositionOnMobile: 'top',
 				supportingContentAlignment:
 					supportingContentLength >= 3 ? 'horizontal' : 'vertical',
 			};
@@ -63,7 +63,7 @@ const determineCardProperties = (
 				headlineSizeOnMobile: 'medium',
 				headlineSizeOnTablet: 'medium',
 				imagePositionOnDesktop: 'bottom',
-				imagePositionOnMobile: 'bottom',
+				imagePositionOnMobile: 'top',
 				supportingContentAlignment: 'horizontal',
 			};
 		case 'gigaboost':
@@ -72,7 +72,7 @@ const determineCardProperties = (
 				headlineSizeOnMobile: 'large',
 				headlineSizeOnTablet: 'large',
 				imagePositionOnDesktop: 'bottom',
-				imagePositionOnMobile: 'bottom',
+				imagePositionOnMobile: 'top',
 				supportingContentAlignment: 'horizontal',
 			};
 	}
@@ -101,8 +101,8 @@ export const OneCardLayout = ({
 		imagePositionOnMobile,
 		supportingContentAlignment,
 	} = determineCardProperties(
-		card.boostLevel ?? 'default',
-		card.supportingContent?.length ?? 0,
+		card.boostLevel,
+		card?.supportingContent?.length ?? 0,
 	);
 	return (
 		<UL padBottom={true}>