Add stories. Update space for live updates

Author: domlander

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

@@ -666,7 +666,7 @@ export const Card = ({
 			imagePositionOnMobile === 'bottom'
 		) {
 			return {
-				row: 'tiny',
+				row: showLivePlayable ? 'small' : 'tiny',
 				column: 'large',
 			};
 		}

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',
+			})),
 		},
 	},
 };
@@ -415,6 +420,35 @@ export const SplashWithLiveUpdates: Story = {
 	},
 };
 
+export const BigWithLiveUpdates: Story = {
+	name: 'Big with live updates',
+	args: {
+		groupedTrails: {
+			...emptyGroupedTrails,
+			splash: [{ ...splashCard, image: undefined }],
+		},
+	},
+	render: (args) => {
+		global.fetch = mockLatestLinksReqFetch;
+		return (
+			<FrontSection
+				title="Boosted"
+				discussionApiUrl={discussionApiUrl}
+				editionId="UK"
+				showTopBorder={true}
+			>
+				<FlexibleGeneral
+					{...args}
+					groupedTrails={{
+						...emptyGroupedTrails,
+						standard: [{ ...liveUpdatesCard, boostLevel: 'boost' }],
+					}}
+				/>
+			</FrontSection>
+		);
+	},
+};
+
 const slideshowCard = {
 	...liveUpdatesCard,
 	mainMedia: undefined,