Merge pull request #13168 from guardian/fp/add-stories

Add stories for cards with a vertical gap
guardian · Jan 16, 2025 · 6c807d6 · 6c807d6
2 parents 098fcb5 + 45d5010
commit 6c807d6
Showing 1 changed file with 103 additions and 0 deletions.
diff --git a/dotcom-rendering/src/components/Card/Card.stories.tsx b/dotcom-rendering/src/components/Card/Card.stories.tsx
@@ -1611,3 +1611,106 @@ export const WithALargeGap = () => {
 		</>
 	);
 };
+
+export const WithNoVerticalGap = () => {
+	return (
+		<>
+			<CardWrapper>
+				<div
+					css={css`
+						width: 280px;
+					`}
+				>
+					<Card
+						{...basicCardProps}
+						isOnwardContent={true}
+						imagePositionOnDesktop="bottom"
+						format={{
+							display: ArticleDisplay.Standard,
+							design: ArticleDesign.Standard,
+							theme: Pillar.Opinion,
+						}}
+					/>
+				</div>
+			</CardWrapper>
+		</>
+	);
+};
+
+export const WithAVerticalGapWhenLegacyContainer = () => {
+	return (
+		<>
+			<CardWrapper>
+				<div
+					css={css`
+						width: 280px;
+					`}
+				>
+					<Card
+						{...basicCardProps}
+						containerType={'dynamic/fast'}
+						imagePositionOnDesktop="bottom"
+						format={{
+							display: ArticleDisplay.Standard,
+							design: ArticleDesign.Standard,
+							theme: Pillar.Opinion,
+						}}
+						discussionId={'p/d8ex5'}
+					/>
+				</div>
+			</CardWrapper>
+		</>
+	);
+};
+
+export const WithAVerticalGapWhenBetaContainer = () => {
+	return (
+		<>
+			<CardWrapper>
+				<div
+					css={css`
+						width: 280px;
+					`}
+				>
+					<Card
+						{...basicCardProps}
+						containerType={'flexible/special'}
+						imagePositionOnDesktop="bottom"
+						format={{
+							display: ArticleDisplay.Standard,
+							design: ArticleDesign.Standard,
+							theme: Pillar.Opinion,
+						}}
+						discussionId={'p/d8ex5'}
+					/>
+				</div>
+			</CardWrapper>
+		</>
+	);
+};
+
+export const WithAVerticalGapWhenScrollableSmallContainer = () => {
+	return (
+		<>
+			<CardWrapper>
+				<div
+					css={css`
+						width: 280px;
+					`}
+				>
+					<Card
+						{...basicCardProps}
+						containerType={'scrollable/small'}
+						imagePositionOnDesktop="bottom"
+						format={{
+							display: ArticleDisplay.Standard,
+							design: ArticleDesign.Standard,
+							theme: Pillar.Opinion,
+						}}
+						discussionId={'p/d8ex5'}
+					/>
+				</div>
+			</CardWrapper>
+		</>
+	);
+};