Merge branch 'main' into cc/move-ticker-on-banner

guardian · Oct 9, 2024 · 8593d74 · 8593d74
2 parents cce5475 + 4f75a0d
commit 8593d74
Show file tree

Hide file tree

Showing 9 changed files with 124 additions and 71 deletions.
diff --git a/dotcom-rendering/package.json b/dotcom-rendering/package.json
@@ -41,7 +41,7 @@
 		"@guardian/bridget": "7.0.0",
 		"@guardian/browserslist-config": "6.1.0",
 		"@guardian/cdk": "50.13.0",
-		"@guardian/commercial": "22.1.0",
+		"@guardian/commercial": "22.3.0",
 		"@guardian/core-web-vitals": "7.0.0",
 		"@guardian/eslint-config": "7.0.1",
 		"@guardian/eslint-config-typescript": "9.0.1",

diff --git a/dotcom-rendering/src/components/Card/Card.stories.tsx b/dotcom-rendering/src/components/Card/Card.stories.tsx
@@ -1575,6 +1575,8 @@ export const WithALargeGap = () => {
 							design: ArticleDesign.Comment,
 							theme: Pillar.Opinion,
 						}}
+						showTopBarDesktop={false}
+						showTopBarMobile={true}
 					/>
 				</div>
 			</CardWrapper>

diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
@@ -116,6 +116,8 @@ export type Props = {
 	index?: number;
 	/** The Splash card in a flexible container gets a different visual treatment to other cards*/
 	isFlexSplash?: boolean;
+	showTopBarDesktop?: boolean;
+	showTopBarMobile?: boolean;
 };
 
 const starWrapper = (cardHasImage: boolean) => css`
@@ -268,6 +270,8 @@ export const Card = ({
 	boostedFontSizes,
 	index = 0,
 	isFlexSplash,
+	showTopBarDesktop = true,
+	showTopBarMobile = false,
 }: Props) => {
 	const hasSublinks = supportingContent && supportingContent.length > 0;
 	const sublinkPosition = decideSublinkPosition(
@@ -454,8 +458,8 @@ export const Card = ({
 	return (
 		<CardWrapper
 			format={format}
-			showTopBar={!isOnwardContent && !isFlexibleSpecialContainer}
-			showMobileTopBar={isFlexibleSpecialContainer}
+			showTopBarDesktop={!isOnwardContent && showTopBarDesktop}
+			showTopBarMobile={showTopBarMobile}
 			containerPalette={containerPalette}
 			isOnwardContent={isOnwardContent}
 		>
@@ -759,8 +763,7 @@ export const Card = ({
 							)}
 							{sublinkPosition === 'outer' &&
 								supportingContentAlignment === 'horizontal' &&
-								(imagePositionOnDesktop === 'right' ||
-									imagePositionOnDesktop === 'left') && (
+								imagePositionOnDesktop === 'right' && (
 									<HorizontalDivider />
 								)}
 						</div>

diff --git a/dotcom-rendering/src/components/Card/components/CardWrapper.tsx b/dotcom-rendering/src/components/Card/components/CardWrapper.tsx
@@ -14,8 +14,8 @@ type Props = {
 	children: React.ReactNode;
 	format: ArticleFormat;
 	containerPalette?: DCRContainerPalette;
-	showTopBar?: boolean;
-	showMobileTopBar?: boolean;
+	showTopBarDesktop?: boolean;
+	showTopBarMobile?: boolean;
 	isOnwardContent?: boolean;
 };
 
@@ -70,7 +70,7 @@ const sublinkHoverStyles = css`
 	}
 `;
 
-const topBarStyles = css`
+const desktopTopBarStyles = css`
 	:before {
 		border-top: 1px solid ${palette('--card-border-top')};
 		content: '';
@@ -83,7 +83,7 @@ const topBarStyles = css`
 
 const mobileTopBarStyles = css`
 	${until.tablet} {
-		${topBarStyles}
+		${desktopTopBarStyles}
 	}
 `;
 
@@ -100,8 +100,8 @@ export const CardWrapper = ({
 	children,
 	format,
 	containerPalette,
-	showTopBar = true,
-	showMobileTopBar = false,
+	showTopBarDesktop = true,
+	showTopBarMobile = false,
 	isOnwardContent = false,
 }: Props) => {
 	return (
@@ -112,8 +112,8 @@ export const CardWrapper = ({
 						baseCardStyles,
 						hoverStyles,
 						sublinkHoverStyles,
-						showTopBar && topBarStyles,
-						showMobileTopBar && mobileTopBarStyles,
+						showTopBarDesktop && desktopTopBarStyles,
+						showTopBarMobile && mobileTopBarStyles,
 						isOnwardContent && onwardContentStyles,
 					]}
 				>

diff --git a/dotcom-rendering/src/components/Carousel.importable.tsx b/dotcom-rendering/src/components/Carousel.importable.tsx
@@ -540,6 +540,8 @@ const CarouselCard = ({
 				absoluteServerTimes={absoluteServerTimes}
 				starRating={starRating}
 				index={index}
+				showTopBarDesktop={!isOnwardContent}
+				showTopBarMobile={false}
 			/>
 		</LI>
 	);

diff --git a/dotcom-rendering/src/components/FlexibleGeneral.tsx b/dotcom-rendering/src/components/FlexibleGeneral.tsx
@@ -181,6 +181,8 @@ export const SplashCardLayout = ({
 					showLivePlayable={card.showLivePlayable}
 					boostedFontSizes={true}
 					isFlexSplash={true}
+					showTopBarDesktop={false}
+					showTopBarMobile={true}
 				/>
 			</LI>
 		</UL>
@@ -242,7 +244,7 @@ export const BoostedCardLayout = ({
 		imageSize,
 	} = decideCardProperties(card.boostLevel);
 	return (
-		<UL padBottom={true} isFlexibleContainer={true}>
+		<UL padBottom={true} isFlexibleContainer={true} showTopBar={true}>
 			<LI padSides={true}>
 				<FrontCard
 					trail={card}
@@ -262,6 +264,8 @@ export const BoostedCardLayout = ({
 					aspectRatio="5:4"
 					kickerText={card.kickerText}
 					showLivePlayable={card.showLivePlayable}
+					showTopBarDesktop={false}
+					showTopBarMobile={true}
 				/>
 			</LI>
 		</UL>
@@ -284,7 +288,12 @@ export const StandardCardLayout = ({
 	showImage?: boolean;
 }) => {
 	return (
-		<UL direction="row" padBottom={true} isFlexibleContainer={true}>
+		<UL
+			direction="row"
+			padBottom={true}
+			isFlexibleContainer={true}
+			showTopBar={true}
+		>
 			{cards.map((card, cardIndex) => {
 				return (
 					<LI
@@ -304,10 +313,13 @@ export const StandardCardLayout = ({
 							imageLoading={imageLoading}
 							imagePositionOnDesktop={'left'}
 							supportingContent={card.supportingContent}
+							supportingContentAlignment="horizontal"
 							imageSize={'medium'}
 							aspectRatio="5:4"
 							kickerText={card.kickerText}
 							showLivePlayable={false}
+							showTopBarDesktop={false}
+							showTopBarMobile={true}
 						/>
 					</LI>
 				);

diff --git a/dotcom-rendering/src/components/FlexibleSpecial.tsx b/dotcom-rendering/src/components/FlexibleSpecial.tsx
@@ -137,6 +137,8 @@ export const OneCardLayout = ({
 					showLivePlayable={card.showLivePlayable}
 					boostedFontSizes={true}
 					isFlexSplash={true}
+					showTopBarDesktop={false}
+					showTopBarMobile={true}
 				/>
 			</LI>
 		</UL>
@@ -192,6 +194,8 @@ const TwoCardOrFourCardLayout = ({
 							aspectRatio="5:4"
 							kickerText={card.kickerText}
 							showLivePlayable={false}
+							showTopBarDesktop={false}
+							showTopBarMobile={true}
 						/>
 					</LI>
 				);

diff --git a/dotcom-rendering/src/components/ScrollableSmallContainer.importable.tsx b/dotcom-rendering/src/components/ScrollableSmallContainer.importable.tsx
@@ -1,5 +1,10 @@
 import { css } from '@emotion/react';
-import { from, space, until } from '@guardian/source/foundations';
+import {
+	from,
+	headlineMedium24Object,
+	space,
+	until,
+} from '@guardian/source/foundations';
 import {
 	Button,
 	Hide,
@@ -24,6 +29,27 @@ type Props = {
 	containerType: DCRContainerType;
 };
 
+/**
+ * This needs to match the `FrontSection` title font and is used to calculate
+ * the negative margin that aligns the navigation buttons with the title.
+ */
+const titlePreset = headlineMedium24Object;
+
+/**
+ * Grid sizing to calculate negative margin used to pull navigation buttons
+ * out side of `FrontSection` container at `wide` breakpoint.
+ */
+const gridColumnWidth = '60px';
+const gridGap = '20px';
+
+const carouselContainerStyles = css`
+	display: flex;
+	flex-direction: column-reverse;
+	${from.wide} {
+		flex-direction: row;
+	}
+`;
+
 const carouselStyles = css`
 	display: grid;
 	grid-auto-columns: 1fr;
@@ -51,11 +77,6 @@ const itemStyles = css`
 	grid-area: span 1;
 	position: relative;
 	margin: ${space[3]}px 10px;
-	:first-child {
-		${from.tablet} {
-			margin-left: 0px;
-		}
-	}
 `;
 
 const verticalLineStyles = css`
@@ -71,6 +92,28 @@ const verticalLineStyles = css`
 	}
 `;
 
+const buttonContainerStyles = css`
+	margin-left: auto;
+	${from.tablet} {
+		margin-top: calc(
+			(-${titlePreset.fontSize} * ${titlePreset.lineHeight}) -
+				${space[3]}px
+		);
+	}
+	${from.leftCol} {
+		margin-top: 0;
+	}
+	${from.wide} {
+		margin-left: ${space[2]}px;
+		margin-right: calc(${space[2]}px - ${gridColumnWidth} - ${gridGap});
+	}
+`;
+
+const buttonLayoutStyles = css`
+	display: flex;
+	gap: ${space[1]}px;
+`;
+
 /**
  * Generates CSS styles for a grid layout used in a carousel.
  *
@@ -161,7 +204,7 @@ export const ScrollableSmallContainer = ({
 	}, []);
 
 	return (
-		<div>
+		<div css={carouselContainerStyles}>
 			<ol
 				// TODO
 				// data-component=""
@@ -196,18 +239,18 @@ export const ScrollableSmallContainer = ({
 								aspectRatio="5:4"
 								kickerText={trail.kickerText}
 								showLivePlayable={trail.showLivePlayable}
-								// TODO - specify card props
+								showTopBarDesktop={false}
+								showTopBarMobile={false}
 							/>
 						</li>
 					);
 				})}
 			</ol>
 
-			{/** TODO - put these buttons on the top right of the container */}
-			<Hide until={'tablet'}>
-				{carouselLength > 2 && (
-					<>
-						<div>
+			<div css={buttonContainerStyles}>
+				<Hide until={'tablet'}>
+					{carouselLength > 2 && (
+						<div css={buttonLayoutStyles}>
 							<Button
 								hideLabel={true}
 								iconSide="left"
@@ -227,9 +270,7 @@ export const ScrollableSmallContainer = ({
 								// data-link-name="container left chevron"
 								size="small"
 							/>
-						</div>
 
-						<div>
 							<Button
 								hideLabel={true}
 								iconSide="left"
@@ -250,9 +291,9 @@ export const ScrollableSmallContainer = ({
 								size="small"
 							/>
 						</div>
-					</>
-				)}
-			</Hide>
+					)}
+				</Hide>
+			</div>
 		</div>
 	);
 };