feat: newspaper thankyou image component complete

guardian · Oct 23, 2024 · 83b730c · 83b730c
1 parent 7713804
commit 83b730c
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 43 deletions.
diff --git a/support-frontend/assets/components/thankYou/newspaperArchive/newspaperArchiveImage.tsx b/support-frontend/assets/components/thankYou/newspaperArchive/newspaperArchiveImage.tsx
@@ -4,7 +4,6 @@ import GridImage from 'components/gridImage/gridImage';
 
 const mobileImg = css`
 	display: block;
-	max-width: 230px;
 	height: auto;
 	margin: auto;
 
@@ -20,18 +19,15 @@ const mobileImg = css`
 		width: 100%;
 		display: block;
 		margin: auto;
-
-		${from.mobileMedium} {
-			margin-left: 64px;
-		}
 	}
 `;
 
 const desktopImg = css`
 	display: none;
-	//max-width: 220px;
 	height: auto;
 	margin-left: auto;
+	margin-top: -${space[4]}px;
+	margin-bottom: -${space[5]}px;
 
 	& img {
 		width: 100%;
@@ -40,39 +36,20 @@ const desktopImg = css`
 
 	${from.tablet} {
 		display: block;
+		width: 270px;
 	}
 
 	${between.desktop.and.leftCol} {
 		display: none;
 	}
 `;
 
-// will need to tweak the offset margins here if the image or copy is updated
-// to ensure this image lines up correctly with the app download badges
-const container = css`
-	/* ${from.tablet} {
-		margin-top: -${space[9]}px;
-	} */
-
-	/* ${between.leftCol.and.wide} {
-		margin-top: 0;
-		margin-left: ${space[5]}px;
-	} */
-
-	/* ${from.wide} {
-		margin-top: -32px;
-	} */
-`;
-
 function NewspaperArchiveImage(): JSX.Element {
 	return (
-		<div css={container}>
+		<>
 			<div css={mobileImg}>
 				<GridImage
 					classModifiers={['']}
-					/////////////////////////
-					// PLACEHOLDER GRID ID //
-					/////////////////////////
 					gridId={'newspaperArchivesPackshotMobile'}
 					srcSizes={[500, 140]}
 					sizes="(min-width: 1140px) 100%,
@@ -83,17 +60,14 @@ function NewspaperArchiveImage(): JSX.Element {
 			<div css={desktopImg}>
 				<GridImage
 					classModifiers={['']}
-					/////////////////////////
-					// PLACEHOLDER GRID ID //
-					/////////////////////////
 					gridId={'newspaperArchivesPackshotDesktop'}
 					srcSizes={[500, 140]}
 					sizes="(min-width: 1140px) 100%,
           500px"
 					imgType="png"
 				/>
 			</div>
-		</div>
+		</>
 	);
 }
 

diff --git a/support-frontend/assets/components/thankYou/thankYouModule.tsx b/support-frontend/assets/components/thankYou/thankYouModule.tsx
@@ -97,10 +97,22 @@ const headerContainer = css`
 		margin-top: 2px;
 	}
 `;
-
 const bodyContainer = css`
 	grid-area: body;
 `;
+const sizeContainer = css`
+	z-index: 1;
+	width: 100%;
+	${between.tablet.and.desktop} {
+		width: 330px;
+	}
+	${between.leftCol.and.wide} {
+		width: 330px;
+	}
+	${from.wide} {
+		width: 350px;
+	}
+`;
 
 const bodyApps = css`
 	display: flex;
@@ -145,7 +157,8 @@ const imgContainer = css`
 	grid-area: img;
 	align-self: flex-end;
 	margin-top: ${space[2]}px;
-
+`;
+const sizeImgContainer = css`
 	${until.tablet} {
 		margin-top: ${space[4]}px;
 	}
@@ -186,10 +199,6 @@ const hideBelowTablet = css`
 	}
 `;
 
-const marginTop = css`
-	margin-top: ${space[6]}px;
-`;
-
 const ctaContainerApps = css`
 	margin-top: ${space[4]}px;
 
@@ -252,7 +261,6 @@ function ThankYouModule({
 	const hasImagery = ['appDownload', 'newspaperArchiveBenefit'].includes(
 		moduleType,
 	);
-	const isNewspaperArchiveBenefit = moduleType === 'newspaperArchiveBenefit';
 
 	const gridContainer =
 		hasImagery || hasQrCodes
@@ -262,12 +270,23 @@ function ThankYouModule({
 	const maybePaddingRight =
 		!hasImagery && (isDownloadModules ? paddingRightApps : paddingRight);
 
+	const isNewspaperArchiveBenefit = moduleType === 'newspaperArchiveBenefit';
+	const resizeContainer = isNewspaperArchiveBenefit ? sizeContainer : css``;
+	const resizeImgContainer = !isNewspaperArchiveBenefit
+		? sizeImgContainer
+		: css``;
+	const resizeMarginTop = !isNewspaperArchiveBenefit
+		? css`
+				margin-top: ${space[6]}px;
+		  `
+		: css``;
+
 	return (
 		<section css={[container, maybePaddingRight, hasImagery && imageryPadding]}>
 			<div css={gridContainer}>
 				<div css={iconContainer}>{icon}</div>
-				<div css={headerContainer}>{header}</div>
-				<div css={bodyContainer}>
+				<div css={[headerContainer, resizeContainer]}>{header}</div>
+				<div css={[bodyContainer, resizeContainer]}>
 					{isDownloadModules ? (
 						<>
 							<div css={[bodyApps, bodyAppsTop]}>
@@ -292,13 +311,13 @@ function ThankYouModule({
 					) : (
 						<>
 							<p css={[bodyCopyStyle, bodyCopyMarginTop]}>{bodyCopy}</p>
-							<div css={marginTop}>{ctas}</div>
+							<div css={resizeMarginTop}>{ctas}</div>
 						</>
 					)}
 				</div>
 
 				{hasImagery ? (
-					<div css={[imgContainer]}>
+					<div css={[imgContainer, resizeImgContainer]}>
 						{isNewspaperArchiveBenefit ? (
 							<NewspaperArchiveImage />
 						) : (

diff --git a/support-frontend/assets/helpers/images/imageCatalogue.json b/support-frontend/assets/helpers/images/imageCatalogue.json
@@ -3,7 +3,7 @@
 	"benefitsPackshotBulletsDesktopUK": "7d07783449430b9a37f23a6d82f6198f7d4ccff6/0_0_519_435",
 	"benefitsPackshotParaMobAndDesktopUK": "6faea782717c5a1058fcfc3afff5cde3fa36cf25/0_0_603_363",
 	"newspaperArchivesPackshotDesktop": "ca7f1ea06f4f4968d5a976658eaec39eb473fc02/0_0_1120_1053",
-	"newspaperArchivesPackshotMobile": "ca7f1ea06f4f4968d5a976658eaec39eb473fc02/0_0_1120_1053",
+	"newspaperArchivesPackshotMobile": "ed3a33f8dd8b261b120008b0419617a280075cdd/0_0_1361_741",
 	"checkoutPackshotWeekly": "a9fb03da0efd8e4bc19c48cdcbacc659d887ae4a/0_0_900_600",
 	"checkoutPackshotWeeklyGifting": "a9fb03da0efd8e4bc19c48cdcbacc659d887ae4a/0_0_900_600",
 	"digitalSubscriptionHeaderDesktop": "f9665e14b5927ee8ed94cc92204831b4f792c6dc/1407_0_7856_4260",