2-step banner: hide ticker + image when collapsed (#14432)

* 2-step banner: hide ticker + image when collapsed

* also hide article count

Author: tomrf1

dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx

@@ -345,7 +345,7 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 							}
 						/>
 					</div>
-					{showAboveArticleCount && (
+					{showAboveArticleCount && !isCollapsed && (
 						<div css={styles.articleCountContainer}>
 							<DesignableBannerArticleCount
 								numArticles={articleCounts.forTargetedWeeks}
@@ -355,6 +355,7 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 						</div>
 					)}
 					{tickerSettings?.tickerData &&
+						!isCollapsed &&
 						templateSettings.tickerStylingSettings && (
 							<div css={templateSpacing.bannerTicker}>
 								<Ticker
@@ -389,7 +390,7 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 					)}
 				</div>
 
-				{templateSettings.imageSettings && (
+				{templateSettings.imageSettings && !isCollapsed && (
 					<div css={styles.bannerVisualContainer}>
 						<DesignableBannerVisual
 							settings={templateSettings.imageSettings}

dotcom-rendering/src/components/marketing/banners/designableBanner/stories/DesignableBanner.stories.tsx

@@ -357,5 +357,24 @@ export const CollapsableWithThreeTierChoiceCards: Story = {
 		},
 		choiceCardAmounts: regularChoiceCardAmounts,
 		choiceCardsSettings,
+		tickerSettings,
+		separateArticleCountSettings: {
+			type: 'above',
+		},
+	},
+};
+
+export const CollapsableWithMainImage: Story = {
+	name: 'Collapsable with main image',
+	args: {
+		...meta.args,
+		design: {
+			...design,
+			visual: regularImage,
+		},
+		tracking: {
+			...tracking,
+			abTestVariant: 'COLLAPSABLE_V1',
+		},
 	},
 };