fix: use priority image loading for heroes (#591)

lsst-epo · Oct 22, 2024 · 3eb0b3b · 3eb0b3b
1 parent 9761263
commit 3eb0b3b
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 43 deletions.
diff --git a/components/templates/NewsPage/NewsHero.js b/components/templates/NewsPage/NewsHero.js
@@ -1,6 +1,7 @@
 import PropTypes from "prop-types";
 import imageShape from "@/shapes/image";
 import * as Styled from "./styles";
+import Hero from "@/components/molecules/Hero";
 
 export default function NewsHero({
   data,
@@ -17,27 +18,13 @@ export default function NewsHero({
   if (caption)
     return (
       <Styled.HeroFigure className={className}>
-        <Styled.HeroImageContainer data-cy="hero">
-          <Styled.HeroImage
-            image={{ ...imageData, priority: true }}
-            $focalPointX={focalPointX || 50}
-            $focalPointY={focalPointY || 50}
-          />
-        </Styled.HeroImageContainer>
+        <Hero {...{ className, data, focalPointX, focalPointY }} />
         <Styled.HeroFigCaption dangerouslySetInnerHTML={{ __html: caption }} />
       </Styled.HeroFigure>
     );
 
   return (
-    <Styled.Hero className={className} data-cy="hero">
-      <Styled.HeroImage
-        role="presentation"
-        image={{ ...imageData, priority: true }}
-        $focalPointX={focalPointX || 50}
-        $focalPointY={focalPointY || 50}
-      />
-      {children}
-    </Styled.Hero>
+    <Hero {...{ className, data, focalPointX, focalPointY }}>{children}</Hero>
   );
 }
 

diff --git a/components/templates/NewsPage/styles.js b/components/templates/NewsPage/styles.js
@@ -2,20 +2,12 @@ import styled from "styled-components";
 import {
   containerWide,
   containerFullBleed,
-  fluidScale,
   ptToEm,
   respond,
   tokens,
 } from "@/styles/globalStyles";
 import { aHidden } from "@/styles/mixins/appearance";
-import { IconComposer, Image, token } from "@rubin-epo/epo-react-lib";
-
-export const Hero = styled.div`
-  ${containerFullBleed("CONTAINER_FULL")}
-  position: relative;
-  height: var(--Hero-height, ${fluidScale("540px", "400px")});
-  overflow: auto;
-`;
+import { IconComposer, token } from "@rubin-epo/epo-react-lib";
 
 export const HeroFigure = styled.figure`
   ${containerFullBleed("CONTAINER_FULL")}
@@ -27,13 +19,6 @@ export const HeroFigure = styled.figure`
   }
 `;
 
-export const HeroImageContainer = styled.div`
-  ${containerFullBleed("CONTAINER_FULL")}
-  position: relative;
-  height: var(--Hero-height, ${fluidScale("540px", "400px")});
-  overflow: auto;
-`;
-
 export const HeroFigCaption = styled.figcaption`
   ${aHidden}
 `;
@@ -45,17 +30,6 @@ export const HeroCaption = styled.div`
   line-height: 1.428;
 `;
 
-export const HeroImage = styled(Image)`
-  --Hero-object-position: ${({ $focalPointX, $focalPointY }) =>
-    `${$focalPointX}% ${$focalPointY}%;`}
-
-  width: 100%;
-  /* stylelint-disable declaration-no-important */
-  height: 100% !important;
-  object-fit: cover;
-  object-position: var(--Hero-object-position, center);
-`;
-
 export const Article = styled.article`
   z-index: 1;
   margin-top: var(--Hero-caption-offset);