Add Hide from source components instead of DCRand polish PR

Author: deedeeh

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

@@ -951,7 +951,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/layouts/GalleryLayout.tsx

@@ -5,6 +5,7 @@ import {
 	palette as sourcePalette,
 	space,
 } from '@guardian/source/foundations';
+import { Hide } from '@guardian/source/react-components';
 import { Fragment } from 'react';
 import { AdSlot } from '../components/AdSlot.web';
 import { AppsFooter } from '../components/AppsFooter.importable';
@@ -17,7 +18,6 @@ import { Footer } from '../components/Footer';
 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,15 +278,15 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 							{isWeb && shouldShowAds && (
 								<div css={galleryItemAdvertStyles}>
 									<div css={galleryInlineAdContainerStyles}>
-										<Hide when="below" breakpoint="tablet">
+										<Hide until="tablet">
 											<DesktopAdSlot
 												renderAds={renderAds}
 												adSlotIndex={adPositions.indexOf(
 													index,
 												)}
 											/>
 										</Hide>
-										<Hide when="above" breakpoint="tablet">
+										<Hide from="tablet">
 											<MobileAdSlot
 												renderAds={renderAds}
 												adSlotIndex={adPositions.indexOf(
@@ -331,6 +331,7 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 					/>
 				</Section>
 			)}
+			{/** Most Popular container goes here */}
 			{isWeb && renderAds && !isLabs && (
 				<Section
 					fullWidth={true}