Merge branch 'main' into link-to-rss-feeds-from-head

Author: SiAdcock

dotcom-rendering/src/components/ArticleHeadline.tsx

@@ -247,8 +247,11 @@ const zIndex = css`
 	z-index: 1;
 `;
 
-const ageWarningMargins = (format: ArticleFormat) =>
-	format.display === ArticleDisplay.Immersive
+const ageWarningMargins = (format: ArticleFormat) => {
+	if (format.design === ArticleDesign.Gallery) {
+		return '';
+	}
+	return format.display === ArticleDisplay.Immersive
 		? css`
 				margin-left: 0px;
 				margin-bottom: 0px;
@@ -275,6 +278,7 @@ const ageWarningMargins = (format: ArticleFormat) =>
 					margin-top: 0;
 				}
 		  `;
+};
 
 const backgroundStyles = css`
 	background-color: ${themePalette('--age-warning-wrapper-background')};

dotcom-rendering/src/components/marketing/banners/ThreeTierChoiceCardsV2.tsx

@@ -87,6 +87,7 @@ const styles = {
 	container: css`
 		display: flex;
 		gap: ${space[5]}px;
+		background-color: inherit;
 	`,
 
 	choiceCardStyles: css`

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

@@ -746,15 +746,15 @@ const styles = {
 			max-width: ${phabletContentMaxWidth};
 		}
 		${from.desktop} {
-			margin: 0 ${space[3]}px;
 			justify-self: end;
+			width: 299px;
 		}
 		${between.desktop.and.wide} {
-			max-width: 380px;
+			width: 380px;
 		}
 		${from.wide} {
-			max-width: 485px;
 			align-self: start;
+			width: 380px;
 		}
 	`,
 	guardianLogoContainer: css`
@@ -813,6 +813,8 @@ const styles = {
 			margin-bottom: ${space[6]}px;
 			gap: 0;
 			margin-top: ${space[3]}px;
+			margin-right: 0;
+			margin-left: 0;
 
 			a {
 				width: 100%;

dotcom-rendering/src/layouts/GalleryLayout.stories.tsx

@@ -20,6 +20,7 @@ const addBranding = (gallery: Gallery): Gallery => ({
 	...gallery,
 	frontendData: {
 		...gallery.frontendData,
+		webPublicationDateDeprecated: '2020-03-28T07:27:19.000Z',
 		commercialProperties: {
 			...gallery.frontendData.commercialProperties,
 			UK: {

dotcom-rendering/src/paletteDeclarations.ts

@@ -3002,6 +3002,8 @@ const articleBackgroundDark: PaletteFunction = ({ design, theme }) => {
 			return sourcePalette.neutral[7];
 		case ArticleDesign.LiveBlog:
 			return sourcePalette.neutral[0];
+		case ArticleDesign.Gallery:
+			return sourcePalette.neutral[10];
 		case ArticleDesign.Standard:
 		case ArticleDesign.Review:
 		case ArticleDesign.Explainer:
@@ -4266,6 +4268,7 @@ const linkKickerTextDark: PaletteFunction = ({ theme }) => {
 const ageWarningWrapperBackground: PaletteFunction = (format) => {
 	switch (format.design) {
 		case ArticleDesign.Interview:
+		case ArticleDesign.Gallery:
 			return 'transparent';
 		default:
 			return headlineBackgroundLight(format);