From b718bf627b69482ef6021ffe665f91f9e9f6e8f7 Mon Sep 17 00:00:00 2001
From: HarveyPeachey <harvey.peachey@bbc.co.uk>
Date: Tue, 18 Feb 2025 15:14:44 +0000
Subject: [PATCH 1/4] replaces childwrapper targetting method

---
 .../Curation/CurationGrid/index.styles.tsx           |  4 ----
 .../Curation/CurationPromo/index.styles.ts           |  6 ++++++
 src/app/components/Curation/CurationPromo/index.tsx  |  1 +
 src/app/legacy/components/Promo/image.jsx            | 12 ++++++++++--
 src/app/legacy/components/Promo/media-icon.jsx       |  2 +-
 5 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/app/components/Curation/CurationGrid/index.styles.tsx b/src/app/components/Curation/CurationGrid/index.styles.tsx
index f93860b14ae..bd6781afb06 100644
--- a/src/app/components/Curation/CurationGrid/index.styles.tsx
+++ b/src/app/components/Curation/CurationGrid/index.styles.tsx
@@ -13,10 +13,6 @@ const styles = {
             width: '100%',
             paddingInlineStart: 0,
           },
-
-          '[class*="ChildWrapper" i]': {
-            position: 'relative',
-          },
         },
       }),
     }),
diff --git a/src/app/components/Curation/CurationPromo/index.styles.ts b/src/app/components/Curation/CurationPromo/index.styles.ts
index 773c001388b..24924946165 100644
--- a/src/app/components/Curation/CurationPromo/index.styles.ts
+++ b/src/app/components/Curation/CurationPromo/index.styles.ts
@@ -9,4 +9,10 @@ export default {
         },
       }),
     }),
+  image: ({ isLite }: Theme) =>
+    css({
+      ...(isLite && {
+        position: 'relative',
+      }),
+    }),
 };
diff --git a/src/app/components/Curation/CurationPromo/index.tsx b/src/app/components/Curation/CurationPromo/index.tsx
index 7b03da57c2a..d1b6eef3f0a 100644
--- a/src/app/components/Curation/CurationPromo/index.tsx
+++ b/src/app/components/Curation/CurationPromo/index.tsx
@@ -55,6 +55,7 @@ const CurationPromo = ({
           alt={imageAlt}
           lazyLoad={lazy}
           isAmp={isAmp}
+          css={styles.image}
         >
           {isMedia && (
             <Promo.MediaIcon css={styles.promo} type={type}>
diff --git a/src/app/legacy/components/Promo/image.jsx b/src/app/legacy/components/Promo/image.jsx
index 8d824ad0a34..5a89d4d8b83 100644
--- a/src/app/legacy/components/Promo/image.jsx
+++ b/src/app/legacy/components/Promo/image.jsx
@@ -58,7 +58,13 @@ const createSizes = (useLargeImages, isProgrammeImage) => {
 };
 
 const Image = props => {
-  const { children = null, src, useLargeImages = false, ...rest } = props;
+  const {
+    children = null,
+    src,
+    useLargeImages = false,
+    className,
+    ...rest
+  } = props;
   const isProgrammeImage = src.startsWith(
     'https://ichef.bbci.co.uk/images/ic/',
   );
@@ -83,7 +89,9 @@ const Image = props => {
         sizes={sizes}
         aspectRatio={[16, 9]}
       />
-      {children && <ChildWrapper>{children}</ChildWrapper>}
+      {children && (
+        <ChildWrapper className={className}>{children}</ChildWrapper>
+      )}
     </Wrapper>
   );
 };
diff --git a/src/app/legacy/components/Promo/media-icon.jsx b/src/app/legacy/components/Promo/media-icon.jsx
index 97de63f155b..6d8a1172aed 100644
--- a/src/app/legacy/components/Promo/media-icon.jsx
+++ b/src/app/legacy/components/Promo/media-icon.jsx
@@ -51,8 +51,8 @@ const MediaIcon = ({
     <Wrapper
       script={script}
       service={service}
-      className={className}
       aria-hidden="true"
+      className={className}
     >
       {mediaIcons[type]}
       {formatChildren(children)}

From 8b1fc0ae4aff4ef0e9ac6e5cc344cc2fe9f5bbd1 Mon Sep 17 00:00:00 2001
From: HarveyPeachey <harvey.peachey@bbc.co.uk>
Date: Tue, 18 Feb 2025 15:27:51 +0000
Subject: [PATCH 2/4] filname change to .ts

---
 .../Curation/CurationGrid/{index.styles.tsx => index.styles.ts}   | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/app/components/Curation/CurationGrid/{index.styles.tsx => index.styles.ts} (100%)

diff --git a/src/app/components/Curation/CurationGrid/index.styles.tsx b/src/app/components/Curation/CurationGrid/index.styles.ts
similarity index 100%
rename from src/app/components/Curation/CurationGrid/index.styles.tsx
rename to src/app/components/Curation/CurationGrid/index.styles.ts

From 35c8432841dbef2ad36dc5b6fff107601d40fa11 Mon Sep 17 00:00:00 2001
From: HarveyPeachey <harvey.peachey@bbc.co.uk>
Date: Wed, 19 Feb 2025 11:47:41 +0000
Subject: [PATCH 3/4] adds styling to hide promo image element on lite

---
 .../Curation/CurationPromo/index.styles.ts       | 16 +++++++++++-----
 .../components/Curation/CurationPromo/index.tsx  |  8 ++++----
 src/app/legacy/components/Promo/index.jsx        |  4 ++--
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/app/components/Curation/CurationPromo/index.styles.ts b/src/app/components/Curation/CurationPromo/index.styles.ts
index 24924946165..e91b24e7194 100644
--- a/src/app/components/Curation/CurationPromo/index.styles.ts
+++ b/src/app/components/Curation/CurationPromo/index.styles.ts
@@ -1,18 +1,24 @@
 import { css, Theme } from '@emotion/react';
 
 export default {
-  promo: ({ isLite, spacings, mq }: Theme) =>
+  promo: ({ isLite }: Theme) =>
     css({
       ...(isLite && {
-        [mq.GROUP_2_MAX_WIDTH]: {
-          marginTop: `${spacings.FULL}rem`,
+        '.promo-image': {
+          display: 'none',
         },
       }),
     }),
-  image: ({ isLite }: Theme) =>
+  icon: ({ isLite, spacings, mq }: Theme) =>
     css({
       ...(isLite && {
-        position: 'relative',
+        [mq.GROUP_2_MAX_WIDTH]: {
+          marginTop: `${spacings.FULL}rem`,
+        },
       }),
     }),
+  image: () =>
+    css({
+      position: 'relative',
+    }),
 };
diff --git a/src/app/components/Curation/CurationPromo/index.tsx b/src/app/components/Curation/CurationPromo/index.tsx
index d1b6eef3f0a..a91c320b60f 100644
--- a/src/app/components/Curation/CurationPromo/index.tsx
+++ b/src/app/components/Curation/CurationPromo/index.tsx
@@ -26,7 +26,7 @@ const CurationPromo = ({
   headingLevel = 2,
   isLive,
 }: Summary) => {
-  const { isAmp } = useContext(RequestContext);
+  const { isAmp, isLite } = useContext(RequestContext);
   const { translations } = useContext(ServiceContext);
 
   const audioTranslation = path(['media', 'audio'], translations);
@@ -48,17 +48,17 @@ const CurationPromo = ({
     (type === 'photogallery' && `${photoGalleryTranslation}, `);
 
   return (
-    <Promo>
+    <Promo css={styles.promo} className="">
       {imageUrl && (
         <Promo.Image
           src={imageUrl}
           alt={imageAlt}
           lazyLoad={lazy}
           isAmp={isAmp}
-          css={styles.image}
+          {...(isLite && { css: styles.image })}
         >
           {isMedia && (
-            <Promo.MediaIcon css={styles.promo} type={type}>
+            <Promo.MediaIcon css={styles.icon} type={type}>
               {showDuration ? mediaDuration : ''}
             </Promo.MediaIcon>
           )}
diff --git a/src/app/legacy/components/Promo/index.jsx b/src/app/legacy/components/Promo/index.jsx
index d62503b20ef..e7b8bfceba7 100644
--- a/src/app/legacy/components/Promo/index.jsx
+++ b/src/app/legacy/components/Promo/index.jsx
@@ -23,7 +23,7 @@ const Wrapper = styled.div`
   position: relative;
 `;
 
-const Promo = ({ children }) => {
+const Promo = ({ children, className }) => {
   const { script, service } = useContext(ServiceContext);
 
   // Image components are moved to a left column on mobile
@@ -39,7 +39,7 @@ const Promo = ({ children }) => {
     [script, service],
   );
   return (
-    <Wrapper>
+    <Wrapper className={className}>
       <PromoContext.Provider value={promoValue}>
         {leftChildren && <div className="promo-image">{leftChildren}</div>}
         {rightChildren && <div className="promo-text">{rightChildren}</div>}

From 4391ae4b26336f589a70fa7a78fbce5acb89d67b Mon Sep 17 00:00:00 2001
From: HarveyPeachey <harvey.peachey@bbc.co.uk>
Date: Wed, 19 Feb 2025 11:53:11 +0000
Subject: [PATCH 4/4] adds classname attribute

---
 src/app/components/Curation/HierarchicalGrid/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/Curation/HierarchicalGrid/index.tsx b/src/app/components/Curation/HierarchicalGrid/index.tsx
index 4bc83fb4df8..b69ba04e229 100644
--- a/src/app/components/Curation/HierarchicalGrid/index.tsx
+++ b/src/app/components/Curation/HierarchicalGrid/index.tsx
@@ -84,7 +84,7 @@ const HiearchicalGrid = ({
                 getStyles(promoItems.length, i, mq),
               ]}
             >
-              <Promo>
+              <Promo className="">
                 <Promo.Image
                   useLargeImages={useLargeImages}
                   src={promo.imageUrl || null}