fix flexible general stories

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

@@ -32,6 +32,19 @@ 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([

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 !== 'default') {
+		if (card.boostLevel && card.boostLevel !== 'default') {
 			return [...acc, createNewRow('oneCardBoosted', card)];
 		}
 
@@ -64,22 +64,21 @@ export const decideCardPositions = (cards: DCRFrontCard[]): GroupedCards => {
 	}, []);
 };
 
-/**
- * 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 = {
+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 = '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':
@@ -89,8 +88,7 @@ const decideSplashCardProperties = (
 				headlineSizeOnTablet: 'tiny',
 				imagePositionOnDesktop: 'right',
 				imagePositionOnMobile: 'bottom',
-				supportingContentAlignment:
-					supportingContentLength >= 4 ? 'horizontal' : 'vertical',
+				supportingContentAlignment: 'horizontal',
 			};
 		case 'boost':
 			return {
@@ -99,8 +97,7 @@ const decideSplashCardProperties = (
 				headlineSizeOnTablet: 'small',
 				imagePositionOnDesktop: 'right',
 				imagePositionOnMobile: 'bottom',
-				supportingContentAlignment:
-					supportingContentLength >= 4 ? 'horizontal' : 'vertical',
+				supportingContentAlignment: 'horizontal',
 			};
 		case 'megaboost':
 			return {
@@ -146,10 +143,8 @@ export const SplashCardLayout = ({
 		imagePositionOnDesktop,
 		imagePositionOnMobile,
 		supportingContentAlignment,
-	} = decideSplashCardProperties(
-		card.boostLevel,
-		card?.supportingContent?.length ?? 0,
-	);
+	} = decideSplashCardProperties(card.boostLevel);
+
 	return (
 		<UL padBottom={true}>
 			<LI padSides={true}>
@@ -179,19 +174,19 @@ export const SplashCardLayout = ({
 	);
 };
 
-/**
- * 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 = {
+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 {
@@ -318,7 +313,7 @@ export const FlexibleGeneral = ({
 	imageLoading,
 }: Props) => {
 	const splash = [...groupedTrails.splash].slice(0, 1);
-	const cards = [...groupedTrails.standard].slice(0, 8); // TODO check maximum number of cards
+	const cards = [...groupedTrails.standard].slice(0, 8);
 	const groupedCards = decideCardPositions(cards);
 
 	return (