feat(SW-365): Implemented focal point

components/ContentType/ContentPage/index.tsx

@@ -44,6 +44,7 @@ export default async function ContentPage() {
             <Hero
               alt={hero_image.meta.alt || hero_image.meta.caption || ""}
               src={hero_image.url}
+              focalPoint={hero_image.focalPoint}
             />
           </div>
         ) : null}

components/DeprecatedJsonToHtml/renderOptions.tsx

@@ -397,6 +397,7 @@ export const renderOptions: RenderOptions = {
               height={365}
               src={image.url}
               width={width}
+              focalPoint={image.focalPoint}
               {...props}
             />
             <Caption>{image.meta.caption}</Caption>

components/Hero/hero.ts

@@ -1,4 +1,7 @@
+import type { FocalPoint } from "@/types/components/image"
+
 export interface HeroProps {
   alt: string
   src: string
+  focalPoint?: FocalPoint
 }

components/Hero/index.tsx

@@ -4,7 +4,7 @@ import { HeroProps } from "./hero"
 
 import styles from "./hero.module.css"
 
-export default async function Hero({ alt, src }: HeroProps) {
+export default async function Hero({ alt, src, focalPoint }: HeroProps) {
   return (
     <Image
       className={styles.hero}
@@ -12,6 +12,7 @@ export default async function Hero({ alt, src }: HeroProps) {
       height={480}
       width={1196}
       src={src}
+      focalPoint={focalPoint}
     />
   )
 }

components/ImageContainer/index.tsx

@@ -18,6 +18,7 @@ export default function ImageContainer({
           height={365}
           width={600}
           alt={leftImage.meta.alt || leftImage.title}
+          focalPoint={leftImage.focalPoint}
         />
         <Caption>{leftImage.meta.caption}</Caption>
       </article>
@@ -28,6 +29,7 @@ export default function ImageContainer({
           height={365}
           width={600}
           alt={rightImage.meta.alt || rightImage.title}
+          focalPoint={rightImage.focalPoint}
         />
         <Caption>{leftImage.meta.caption}</Caption>
       </article>

components/JsonToHtml/renderOptions.tsx

@@ -396,6 +396,7 @@ export const renderOptions: RenderOptions = {
               height={365}
               src={image.url}
               width={width}
+              focalPoint={image.focalPoint}
               {...props}
             />
             <Caption>{image.meta.caption}</Caption>

components/TempDesignSystem/Card/CardImage/index.tsx

@@ -24,6 +24,7 @@ export default function CardImage({
                 alt={backgroundImage.title}
                 width={180}
                 height={180}
+                focalPoint={backgroundImage.focalPoint}
               />
             )
         )}

components/TempDesignSystem/Card/index.tsx

@@ -53,6 +53,7 @@ export default function Card({
             alt={backgroundImage.meta.alt || backgroundImage.title}
             width={imageWidth}
             height={imageHeight}
+            focalPoint={backgroundImage.focalPoint}
           />
         </div>
       )}

components/TempDesignSystem/LoyaltyCard/index.tsx

@@ -32,6 +32,7 @@ export default function LoyaltyCard({
           height={160}
           className={styles.image}
           alt={image.meta.alt || image.title}
+          focalPoint={image.focalPoint}
         />
       ) : null}
       <Title as="h5" level="h3" textAlign="center">

components/TempDesignSystem/TeaserCard/index.tsx

@@ -35,6 +35,7 @@ export default function TeaserCard({
             className={styles.backgroundImage}
             width={399}
             height={201}
+            focalPoint={image.focalPoint}
           />
         </div>
       )}

types/components/image.ts

@@ -30,5 +30,3 @@ export interface ApiImage {
 export interface ImageProps extends NextImageProps {
   focalPoint?: FocalPoint
 }
-
-export type ImageType = ImageVaultAsset | ApiImage