Add split theme to carousel stories

guardian · Nov 29, 2023 · 9be27c2 · 9be27c2
1 parent 3877af5
commit 9be27c2
Showing 1 changed file with 14 additions and 10 deletions.
diff --git a/dotcom-rendering/src/components/Carousel.stories.tsx b/dotcom-rendering/src/components/Carousel.stories.tsx
@@ -244,6 +244,9 @@ export const SingleItemCarousel = () => (
 );
 
 SingleItemCarousel.storyName = 'Carousel with single item';
+SingleItemCarousel.decorators = [
+	splitTheme([defaultFormat], { orientation: 'vertical' }),
+];
 
 export const Immersive = () => (
 	<>
@@ -280,15 +283,17 @@ export const Immersive = () => (
 
 Immersive.storyName = 'Immersive carousel';
 
+const specialReportAltFormat = {
+	theme: ArticleSpecial.SpecialReportAlt,
+	design: ArticleDesign.Standard,
+	display: ArticleDisplay.Standard,
+};
+
 export const SpecialReportAlt = () => {
 	const specialReportTrails = [...trails];
 
 	for (const trail of specialReportTrails)
-		trail.format = {
-			theme: ArticleSpecial.SpecialReportAlt,
-			design: ArticleDesign.Standard,
-			display: ArticleDisplay.Standard,
-		};
+		trail.format = specialReportAltFormat;
 
 	return (
 		<>
@@ -297,11 +302,7 @@ export const SpecialReportAlt = () => {
 					heading="SpecialReportAlt"
 					trails={specialReportTrails}
 					onwardsSource="curated-content"
-					format={{
-						theme: ArticleSpecial.SpecialReportAlt,
-						design: ArticleDesign.Standard,
-						display: ArticleDisplay.Standard,
-					}}
+					format={specialReportAltFormat}
 					leftColSize={'compact'}
 					discussionApiUrl={discussionApiUrl}
 				/>
@@ -311,6 +312,9 @@ export const SpecialReportAlt = () => {
 };
 
 SpecialReportAlt.storyName = 'SpecialReportAlt';
+SpecialReportAlt.decorators = [
+	splitTheme([specialReportAltFormat], { orientation: 'vertical' }),
+];
 
 export const FrontCarousel = () => (
 	<>