Merge pull request #13505 from guardian/dh-ds/reduce-slot1-grey-space

Reduce grey space in first slot to be the same as the other slots

Author: deedeeh

dotcom-rendering/src/components/AdPortals.importable.tsx

@@ -44,10 +44,10 @@ const positionsEqual = (a: BridgetRect, b: BridgetRect): boolean =>
 
 const calculateAdPositions = (adSlots: HTMLDivElement[]): BridgetAdSlot[] =>
 	adSlots.map(
-		(slot, index) =>
+		(slot) =>
 			new BridgetAdSlot({
 				rect: calculateAdPosition(slot),
-				isSquare: index === 0,
+				isSquare: false,
 			}),
 	);
 
@@ -217,10 +217,9 @@ export const AdPortals = ({
 		return () => resizeObserver?.disconnect();
 	}, [adPlaceholders, rightAdPlaceholder, tryRightAligned]);
 
-	const renderAdSlot = (id: string, index: number) => (
+	const renderAdSlot = (id: string) => (
 		<AdSlot
 			key={id}
-			isFirstAdSlot={index === 0}
 			ref={(node) => {
 				if (node !== null) {
 					adSlots.current = [...adSlots.current, node];
@@ -231,18 +230,12 @@ export const AdPortals = ({
 
 	if (tryRightAligned && rightAdPlaceholder) {
 		return createPortal(
-			<>
-				{adPlaceholders.map((ad, index) => renderAdSlot(ad.id, index))}
-			</>,
+			<>{adPlaceholders.map((ad) => renderAdSlot(ad.id))}</>,
 			rightAdPlaceholder,
 		);
 	}
 
 	return (
-		<>
-			{adPlaceholders.map((ad, index) =>
-				createPortal(renderAdSlot(ad.id, index), ad),
-			)}
-		</>
+		<>{adPlaceholders.map((ad) => createPortal(renderAdSlot(ad.id), ad))}</>
 	);
 };

dotcom-rendering/src/components/AdSlot.apps.stories.tsx

@@ -24,14 +24,4 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const FirstSlot = {
-	args: {
-		isFirstAdSlot: true,
-	},
-} satisfies Story;
-
-export const OtherSlots = {
-	args: {
-		isFirstAdSlot: false,
-	},
-} satisfies Story;
+export const Slots = {} satisfies Story;

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

@@ -3,11 +3,6 @@ import { remSpace, textSans14, until } from '@guardian/source/foundations';
 import { forwardRef } from 'react';
 import { palette } from '../palette';
 
-// Exported for Storybook use
-export interface Props {
-	isFirstAdSlot: boolean;
-}
-
 const adHeightPx = 250;
 
 const styles = css`
@@ -42,19 +37,6 @@ const adSlotStyles = css`
 	width: 100%;
 `;
 
-const adSlotSquareStyles = css`
-	${adSlotStyles}
-	${until.phablet} {
-		width: 320px;
-		margin-left: 10px;
-		margin-right: 10px;
-	}
-
-	height: 344px;
-	width: 300px;
-	padding-bottom: 0;
-`;
-
 /**
  * AdSlot component for in-article ads **on apps only**
  *
@@ -63,16 +45,11 @@ const adSlotSquareStyles = css`
  * The ref is important so that we can provide the location of the slot to
  * the native layer, for it to "paint" an advert over the top of it.
  */
-export const AdSlot = forwardRef<HTMLDivElement, Props>(
-	({ isFirstAdSlot }, ref) => (
-		<aside css={styles}>
-			<div css={adLabelsStyles}>
-				<p>Advertisement</p>
-			</div>
-			<div
-				css={isFirstAdSlot ? adSlotSquareStyles : adSlotStyles}
-				ref={ref}
-			></div>
-		</aside>
-	),
-);
+export const AdSlot = forwardRef<HTMLDivElement>((_, ref) => (
+	<aside css={styles}>
+		<div css={adLabelsStyles}>
+			<p>Advertisement</p>
+		</div>
+		<div css={adSlotStyles} ref={ref}></div>
+	</aside>
+));