Merge pull request #14103 from guardian/add-age-warning-for-gallery

Add gallery design for age warning

Author: marjisound

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/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);