Merge pull request #14346 from guardian/doml/flex-splash-column-gap

Align flex splash image

Author: domlander

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

@@ -638,13 +638,6 @@ export const Card = ({
 			};
 		}
 
-		if (isFlexSplash) {
-			return {
-				row: 'small',
-				column: 'none',
-			};
-		}
-
 		if (!isBetaContainer) {
 			/**
 			 * Media cards have 4px padding around the content so we have a
@@ -673,7 +666,7 @@ export const Card = ({
 			imagePositionOnMobile === 'bottom'
 		) {
 			return {
-				row: 'tiny',
+				row: showLivePlayable ? 'small' : 'tiny',
 				column: 'large',
 			};
 		}
@@ -1092,11 +1085,6 @@ export const Card = ({
 							isBetaContainer,
 							isOnwardContent,
 						)}
-						padRight={
-							!!isFlexSplash &&
-							image &&
-							imagePositionOnDesktop === 'right'
-						}
 					>
 						{/* This div is needed to keep the headline and trail text justified at the start */}
 						<div

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

@@ -99,12 +99,6 @@ const paddingBetaContainerStyles = (
 	}
 `;
 
-const padRightStyles = css`
-	${from.tablet} {
-		padding-right: ${space[5]}px;
-	}
-`;
-
 const getImageDirection = (
 	imagePosition: ImagePositionType,
 ): ImageDirection => {
@@ -127,7 +121,6 @@ type Props = {
 	imagePositionOnDesktop: ImagePositionType;
 	imagePositionOnMobile: ImagePositionType;
 	padContent?: 'small' | 'large';
-	padRight?: boolean;
 };
 
 export const ContentWrapper = ({
@@ -138,7 +131,6 @@ export const ContentWrapper = ({
 	imagePositionOnDesktop,
 	imagePositionOnMobile,
 	padContent,
-	padRight = false,
 }: Props) => {
 	const imageDirectionDesktop = getImageDirection(imagePositionOnDesktop);
 	const paddingSpace = padContent === 'small' ? 1 : 2;
@@ -161,7 +153,6 @@ export const ContentWrapper = ({
 						imagePositionOnDesktop,
 						paddingSpace,
 					),
-				padRight && padRightStyles,
 			]}
 		>
 			{children}

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

@@ -39,7 +39,8 @@ const splashCard = {
 	kickerText: 'Kicker for splash card',
 };
 
-/** This creates a list of 8 standard cards which contain:
+/**
+ * This creates a list of 8 standard cards which contain:
  * - a card with sublinks
  * - a media card
  * - a boosted card
@@ -173,13 +174,17 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const SplashWithStandards: Story = {
-	name: 'Splash with standard cards',
+	name: 'Splash with big and standard cards',
 	args: {
-		frontSectionTitle: 'Splash with stardards',
+		frontSectionTitle: 'Splash with standards',
 		groupedTrails: {
 			...emptyGroupedTrails,
 			splash: [{ ...splashCard, supportingContent: [] }],
-			standard: standardCards,
+			standard: standardCards.map((card, index) => ({
+				...card,
+				isBoosted: index === 0,
+				boostLevel: index === 0 ? 'boost' : 'default',
+			})),
 		},
 	},
 };
@@ -373,12 +378,6 @@ export const SplashWithImageSupression: Story = {
 
 export const SplashWithLiveUpdates: Story = {
 	name: 'Splash with live updates',
-	args: {
-		groupedTrails: {
-			...emptyGroupedTrails,
-			splash: [{ ...splashCard, image: undefined }],
-		},
-	},
 	render: (args) => {
 		global.fetch = mockLatestLinksReqFetch;
 		const Section = ({
@@ -415,6 +414,42 @@ export const SplashWithLiveUpdates: Story = {
 	},
 };
 
+export const StandardBoostedWithLiveUpdates: Story = {
+	name: 'Standard boosted with live updates',
+	render: (args) => {
+		global.fetch = mockLatestLinksReqFetch;
+		const Section = ({
+			title,
+			boostLevel,
+		}: {
+			title: string;
+			boostLevel: BoostLevel;
+		}) => (
+			<FrontSection
+				title={title}
+				discussionApiUrl={discussionApiUrl}
+				editionId="UK"
+				showTopBorder={true}
+			>
+				<FlexibleGeneral
+					{...args}
+					groupedTrails={{
+						...emptyGroupedTrails,
+						standard: [{ ...liveUpdatesCard, boostLevel }],
+					}}
+				/>
+			</FrontSection>
+		);
+
+		return (
+			<>
+				<Section title="Boosted" boostLevel="boost" />
+				<Section title="Megaboosted" boostLevel="megaboost" />
+			</>
+		);
+	},
+};
+
 const slideshowCard = {
 	...liveUpdatesCard,
 	mainMedia: undefined,