Scrollable small stacked redesign (#13789)

* Add ability to stack cards into 2 rows in the scrollable carousel

* Always stack cards on mobile and stack cards on desktop if there are more than 2 cards

* Display a top bar on desktop and mobile for the cards in the bottom row

* Round up carousel column card such that 3 cards === 2 columns and 1 card  === 1 column

* use column auto-flow from tablet and above if the consumer does not want to stack cards

* Remove multicard story as this is not longer relevant as the container cannot have more than 4 cards

Author: abeddow91

dotcom-rendering/src/components/ScrollableCarousel.tsx

@@ -11,6 +11,7 @@ type Props = {
 	visibleCardsOnMobile: number;
 	visibleCardsOnTablet: number;
 	sectionId?: string;
+	shouldStackCards?: { desktop: boolean; mobile: boolean };
 };
 
 /**
@@ -103,6 +104,20 @@ const itemStyles = css`
 	}
 `;
 
+const stackedCardRowsStyles = ({
+	mobile,
+	desktop,
+}: {
+	mobile: boolean;
+	desktop: boolean;
+}) => css`
+	grid-template-rows: ${mobile ? `1fr 1fr` : `1fr`};
+	${from.tablet} {
+		grid-auto-flow: ${desktop ? `row` : `column`};
+		grid-template-rows: ${desktop ? `1fr 1fr` : `1fr`};
+	}
+`;
+
 /**
  * Generates CSS styles for a grid layout used in a carousel.
  *
@@ -168,6 +183,7 @@ export const ScrollableCarousel = ({
 	visibleCardsOnMobile,
 	visibleCardsOnTablet,
 	sectionId,
+	shouldStackCards = { desktop: false, mobile: false },
 }: Props) => {
 	const carouselRef = useRef<HTMLOListElement | null>(null);
 	const [previousButtonEnabled, setPreviousButtonEnabled] = useState(false);
@@ -253,6 +269,7 @@ export const ScrollableCarousel = ({
 						visibleCardsOnMobile,
 						visibleCardsOnTablet,
 					),
+					stackedCardRowsStyles(shouldStackCards),
 				]}
 				data-heatphan-type="carousel"
 			>

dotcom-rendering/src/components/ScrollableSmall.importable.tsx

@@ -35,14 +35,17 @@ export const ScrollableSmall = ({
 	aspectRatio,
 	sectionId,
 }: Props) => {
+	const mobileBottomCards = [1, 3];
+	const desktopBottomCards = [2, 3];
 	return (
 		<ScrollableCarousel
-			carouselLength={trails.length}
+			carouselLength={Math.ceil(trails.length / 2)}
 			visibleCardsOnMobile={1}
 			visibleCardsOnTablet={2}
 			sectionId={sectionId}
+			shouldStackCards={{ desktop: trails.length > 2, mobile: true }}
 		>
-			{trails.map((trail) => {
+			{trails.map((trail, index) => {
 				return (
 					<ScrollableCarousel.Item key={trail.url}>
 						<FrontCard
@@ -64,8 +67,10 @@ export const ScrollableSmall = ({
 							aspectRatio={aspectRatio}
 							kickerText={trail.kickerText}
 							showLivePlayable={trail.showLivePlayable}
-							showTopBarDesktop={false}
-							showTopBarMobile={false}
+							showTopBarDesktop={desktopBottomCards.includes(
+								index,
+							)}
+							showTopBarMobile={mobileBottomCards.includes(index)}
 							canPlayInline={false}
 						/>
 					</ScrollableCarousel.Item>

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

@@ -43,8 +43,6 @@ export default meta;
 
 type Story = StoryObj<typeof ScrollableSmall>;
 
-export const WithMultipleCards = {};
-
 export const WithFourCards = {
 	args: {
 		trails: trails.slice(0, 4),
@@ -57,15 +55,15 @@ export const WithThreeCards = {
 	},
 };
 
-export const WithOneCard = {
+export const WithTwoCards = {
 	args: {
-		trails: trails.slice(0, 1),
+		trails: trails.slice(0, 2),
 	},
 };
 
-export const WithTwoCards = {
+export const WithOneCard = {
 	args: {
-		trails: trails.slice(0, 2),
+		trails: trails.slice(0, 1),
 	},
 };