Replace css with Hide component

Author: deedeeh

dotcom-rendering/src/components/AdSlot.web.tsx

@@ -421,20 +421,6 @@ const crosswordBannerMobileAdStyles = css`
 	min-height: ${getMinHeight(adSizes.mobilesticky.height)}px;
 `;
 
-const galleryInlineAdContainerStyles = css`
-	${until.tablet} {
-		margin: 0 auto;
-		display: none;
-	}
-`;
-
-const galleryInlineAdMobileContainerStyles = css`
-	${from.tablet} {
-		margin: 0 auto;
-		display: none;
-	}
-`;
-
 const galleryInlineAdStyles = css`
 	margin: ${space[3]}px auto;
 	min-height: ${getMinHeight(adSizes.mpu.height)}px;
@@ -948,13 +934,7 @@ export const AdSlot = ({
 		case 'gallery-inline': {
 			const advertId = `inline${index + 1}`;
 			return (
-				<AdSlotWrapper
-					css={[
-						galleryInlineAdContainerStyles,
-						labelStyles,
-						galleryInlineAdLabelStyles,
-					]}
-				>
+				<AdSlotWrapper css={[labelStyles, galleryInlineAdLabelStyles]}>
 					<div
 						id={`dfp-ad--${advertId}`}
 						className={[
@@ -979,13 +959,7 @@ export const AdSlot = ({
 		case 'gallery-inline-mobile': {
 			const advertId = index === 0 ? 'top-above-nav' : `inline${index}`;
 			return (
-				<AdSlotWrapper
-					css={[
-						galleryInlineAdMobileContainerStyles,
-						labelStyles,
-						galleryInlineAdLabelStyles,
-					]}
-				>
+				<AdSlotWrapper css={[labelStyles, galleryInlineAdLabelStyles]}>
 					<div
 						id={`dfp-ad--${advertId}--mobile`}
 						className={[
@@ -1003,7 +977,7 @@ export const AdSlot = ({
 						data-name={advertId}
 						aria-hidden="true"
 						data-label-show="true"
-						data-testid="slot" //doesn't exist in Frontend so do we need it in DCR?
+						data-testid="slot"
 					/>
 				</AdSlotWrapper>
 			);

dotcom-rendering/src/components/GalleryAdSlots.tsx

@@ -18,7 +18,7 @@ export const MobileAdSlot = ({
 	);
 };
 
-export const GalleryDesktopAdSlot = ({
+export const DesktopAdSlot = ({
 	renderAds,
 	adSlotIndex,
 }: {

dotcom-rendering/src/layouts/GalleryLayout.tsx

@@ -14,12 +14,10 @@ import { ArticleMeta } from '../components/ArticleMeta.web';
 import { ArticleTitle } from '../components/ArticleTitle';
 import { Caption } from '../components/Caption';
 import { Footer } from '../components/Footer';
-import {
-	GalleryDesktopAdSlot,
-	MobileAdSlot,
-} from '../components/GalleryAdSlots';
+import { DesktopAdSlot, MobileAdSlot } from '../components/GalleryAdSlots';
 import { GalleryImage } from '../components/GalleryImage';
 import { HeaderAdSlot } from '../components/HeaderAdSlot';
+import { Hide } from '../components/Hide';
 import { Island } from '../components/Island';
 import { MainMediaGallery } from '../components/MainMediaGallery';
 import { Masthead } from '../components/Masthead/Masthead';
@@ -278,29 +276,24 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 								webTitle={frontendData.webTitle}
 							/>
 							{isWeb && shouldShowAds && (
-								<div
-									className={[
-										'gallery__item gallery__item--advert',
-									].join(' ')}
-									css={galleryItemAdvertStyles}
-								>
-									<div
-										className="gallery__img-container"
-										css={galleryInlineAdContainerStyles}
-									>
-										<GalleryDesktopAdSlot
-											renderAds={renderAds}
-											adSlotIndex={adPositions.indexOf(
-												index,
-											)}
-										/>
-
-										<MobileAdSlot
-											renderAds={renderAds}
-											adSlotIndex={adPositions.indexOf(
-												index,
-											)}
-										/>
+								<div css={galleryItemAdvertStyles}>
+									<div css={galleryInlineAdContainerStyles}>
+										<Hide when="below" breakpoint="tablet">
+											<DesktopAdSlot
+												renderAds={renderAds}
+												adSlotIndex={adPositions.indexOf(
+													index,
+												)}
+											/>
+										</Hide>
+										<Hide when="above" breakpoint="tablet">
+											<MobileAdSlot
+												renderAds={renderAds}
+												adSlotIndex={adPositions.indexOf(
+													index,
+												)}
+											/>
+										</Hide>
 									</div>
 									<div css={galleryBorder}></div>
 								</div>

dotcom-rendering/src/lib/getGalleryAdPositions.ts

@@ -1,10 +1,10 @@
 import type { ImageBlockElement } from '../types/content';
 
 /**
- * @param images - An array of ImageBlockElement objects representing the images in the gallery.
- * @description This function calculates the positions in the gallery where ads should be placed.
+ * This function calculates the positions in the gallery where ads should be placed.
  * The ad position will be the same for all breakpoints, after every 4 images will have an ad slot.
- * What make the difference between mobile and desktop slot ids are in GalleryAdSlots.tsx and AdSlot.web.tsx.
+ * The logic difference between mobile and desktop slot ids is in GalleryAdSlots.tsx and AdSlot.web.tsx.
+ * @param images - An array of ImageBlockElement objects representing the images in the gallery.
  * @returns An array of numbers representing the positions where ads should be placed.
  */
 const getAdPositions = (images: ImageBlockElement[]): number[] => {