Merge pull request #12424 from bbc/WORLDSERVICE-66-fix-lite-wrapper-t…

…argeting-styles WORLDSERVICE-66: Replaces ChildWrapper style targeting method
bbc · Feb 19, 2025 · a0c9f54 · a0c9f54
2 parents e8f9915 + 379d5c2
commit a0c9f54
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 14 deletions.
diff --git a/...ts/Curation/CurationGrid/index.styles.tsx → ...nts/Curation/CurationGrid/index.styles.ts b/...ts/Curation/CurationGrid/index.styles.tsx → ...nts/Curation/CurationGrid/index.styles.ts
@@ -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
@@ -1,12 +1,24 @@
 import { css, Theme } from '@emotion/react';
 
 export default {
-  promo: ({ isLite, spacings, mq }: Theme) =>
+  promo: ({ isLite }: Theme) =>
+    css({
+      ...(isLite && {
+        '.promo-image': {
+          display: 'none',
+        },
+      }),
+    }),
+  icon: ({ isLite, spacings, mq }: Theme) =>
     css({
       ...(isLite && {
         [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
@@ -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,16 +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}
+          {...(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/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}

diff --git 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/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>}

diff --git 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)}