Merge branch 'main' into ih/hosted-article-layout

Author: i-hardy

ab-testing/frontend/src/lib/components/TestVariants.svelte

@@ -20,6 +20,7 @@
 			<li>
 				<a
 					href={`https://www.theguardian.com/ab-tests/opt/in/${testName}:${group}`}
+					target="_blank"
 				>
 					{group} ({formatter.format(
 						((1 / testGroups.length) * size) / 100,

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

@@ -20,8 +20,8 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof SelfHostedVideo>;
 
-export const Loop4to5: Story = {
-	name: 'Looping video in 4:5 aspect ratio',
+export const Loop5to4: Story = {
+	name: 'Looping video in 5:4 aspect ratio',
 	args: {
 		sources: [
 			{
@@ -31,6 +31,7 @@ export const Loop4to5: Story = {
 		],
 		uniqueId: 'test-video-1',
 		atomId: 'test-atom-1',
+		videoStyle: 'Loop',
 		height: 720,
 		width: 900,
 		posterImage:
@@ -59,7 +60,7 @@ export const Loop4to5: Story = {
 export const Loop16to9: Story = {
 	name: 'Looping video in 16:9 aspect ratio',
 	args: {
-		...Loop4to5.args,
+		...Loop5to4.args,
 		sources: [
 			{
 				src: 'https://uploads.guim.co.uk/2024/10/01/241001HeleneLoop_2.mp4',
@@ -73,13 +74,13 @@ export const Loop16to9: Story = {
 
 export const WithCinemagraph: Story = {
 	args: {
-		...Loop4to5.args,
+		...Loop5to4.args,
 		videoStyle: 'Cinemagraph',
 	},
 };
 
 export const PausePlay: Story = {
-	...Loop4to5,
+	...Loop5to4,
 	name: 'Pause and play interaction',
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
@@ -100,7 +101,7 @@ export const PausePlay: Story = {
 };
 
 export const UnmuteMute: Story = {
-	...Loop4to5,
+	...Loop5to4,
 	name: 'Unmute and mute interaction',
 	parameters: {
 		test: {
@@ -127,7 +128,7 @@ function sleep(ms: number) {
 }
 
 export const InteractionObserver: Story = {
-	...Loop4to5,
+	...Loop5to4,
 	name: 'Interaction observer',
 	render: (args) => (
 		<div data-testid="test-container">

dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx

@@ -101,8 +101,8 @@ type Props = {
 	sources: Source[];
 	atomId: string;
 	uniqueId: string;
-	width: number;
 	height: number;
+	width: number;
 	videoStyle: VideoPlayerFormat;
 	FallbackImageComponent: ReactElement;
 	isPlayable: boolean;
@@ -143,8 +143,8 @@ export const SelfHostedVideoPlayer = forwardRef(
 			sources,
 			atomId,
 			uniqueId,
-			width,
 			height,
+			width,
 			videoStyle,
 			FallbackImageComponent,
 			posterImage,

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

@@ -424,7 +424,10 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 				<div
 					css={
 						isCollapsableBanner
-							? styles.closeAndCollapseButtonContainer
+							? styles.closeAndCollapseButtonContainer(
+									isCollapsed,
+									isMaybeLaterVariant,
+							  )
 							: styles.closeButtonContainer
 					}
 				>
@@ -437,9 +440,11 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 								onClick={() =>
 									handleSetIsCollapsed(!isCollapsed)
 								}
-								cssOverrides={styles.iconOverrides(
-									templateSettings.closeButtonSettings,
-								)}
+								cssOverrides={[
+									styles.iconOverrides(
+										templateSettings.closeButtonSettings,
+									),
+								]}
 								priority="secondary"
 								icon={
 									isCollapsed ? (
@@ -679,7 +684,7 @@ const styles = {
 		${from.desktop} {
 			max-width: 980px;
 			padding: ${space[1]}px ${space[1]}px 0 ${space[3]}px;
-			grid-template-columns: auto 380px auto;
+			grid-template-columns: auto 380px minmax(100px, auto);
 			grid-template-rows: auto auto;
 
 			grid-template-areas:
@@ -743,7 +748,10 @@ const styles = {
 			padding-left: ${space[8]}px;
 		}
 	`,
-	closeAndCollapseButtonContainer: css`
+	closeAndCollapseButtonContainer: (
+		isCollapsed: boolean,
+		isMaybeLaterVariant: boolean,
+	) => css`
 		/* Layout changes only here */
 		grid-area: close-button;
 		display: flex;
@@ -761,7 +769,10 @@ const styles = {
 			margin-top: ${space[2]}px;
 		}
 		${from.desktop} {
-			margin-top: ${space[5]}px;
+			flex-direction: ${isCollapsed ? 'row' : 'row-reverse'};
+			margin-top: ${isCollapsed && isMaybeLaterVariant
+				? space[9]
+				: space[6]}px;
 		}
 
 		.maybe-later & {
@@ -940,6 +951,7 @@ const styles = {
 		}
 		${from.desktop} {
 			justify-self: end;
+			padding-right: ${space[8]}px;
 			width: 299px;
 		}
 		${between.desktop.and.wide} {
@@ -976,7 +988,7 @@ const styles = {
 		.maybe-later & {
 			flex-direction: row;
 			flex-wrap: wrap;
-			padding: ${space[3]}px;
+			padding: ${space[3]}px 0;
 		}
 
 		${until.phablet} {
@@ -1052,7 +1064,7 @@ const styles = {
 	collapsableButtonContainer: css`
 		margin-left: ${space[2]}px;
 		${from.desktop} {
-			margin-top: ${space[1]}px;
+			margin: 0;
 		}
 	`,
 	iconOverrides: (ctaSettings?: CtaSettings) => css`
@@ -1063,6 +1075,10 @@ const styles = {
 		}
 		margin-top: ${space[1]}px;
 		margin-right: ${space[1]}px;
+
+		${from.desktop} {
+			margin: 0;
+		}
 	`,
 };
 

dotcom-rendering/src/components/marketing/gutters/GutterAsk.tsx

@@ -36,6 +36,7 @@ const textBlock = css`
 	align-items: flex-start;
 	padding: ${space[2]}px;
 	gap: ${space[1]}px;
+	max-width: 100%;
 `;
 const bodySection = css`
 	color: ${palette.neutral[0]};
@@ -46,6 +47,7 @@ const ctaSection = css`
 	color: ${palette.neutral[0]};
 	margin-top: ${space[3]}px;
 	margin-bottom: ${space[4]}px;
+	max-width: 100%;
 `;
 const cta = css`
 	left: ${space[2]}px;