diff --git a/components/templates/NewsPage/NewsHero.js b/components/templates/NewsPage/NewsHero.js index bae03067..30123978 100644 --- 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 ( - - - + ); return ( - - - {children} - + {children} ); } diff --git a/components/templates/NewsPage/styles.js b/components/templates/NewsPage/styles.js index cb9681a0..baa04a4f 100644 --- 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);