From 743d70c2d7817ff9c56be6de0c78ef732d275690 Mon Sep 17 00:00:00 2001
From: Borghild Selle <104756130+BorghildSelle@users.noreply.github.com>
Date: Fri, 16 Aug 2024 12:03:43 +0200
Subject: [PATCH] :sparkles: Add tall hero instead of fullscreen and 2to1
 (#2454)

* :sparkles: Add tall hero instead of fullscreen and 2to1

* :art: merge main and lock

* :art: remove the ratio
---
 sanityv3/pnpm-lock.yaml                       |  8 ++---
 .../documents/header/sharedHeaderFields.ts    |  4 +--
 .../shared/Hero/FullImageHero.tsx             | 29 +++++++------------
 3 files changed, 17 insertions(+), 24 deletions(-)

diff --git a/sanityv3/pnpm-lock.yaml b/sanityv3/pnpm-lock.yaml
index fc3779908..2b915a14f 100644
--- a/sanityv3/pnpm-lock.yaml
+++ b/sanityv3/pnpm-lock.yaml
@@ -1,9 +1,5 @@
 lockfileVersion: '6.0'
 
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
 dependencies:
   '@equinor/document-internationalization':
     specifier: ^3.0.0
@@ -11700,3 +11696,7 @@ packages:
   /zod@3.22.4:
     resolution: {integrity: sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==}
     dev: false
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
diff --git a/sanityv3/schemas/documents/header/sharedHeaderFields.ts b/sanityv3/schemas/documents/header/sharedHeaderFields.ts
index 2e7847e99..27e623df3 100644
--- a/sanityv3/schemas/documents/header/sharedHeaderFields.ts
+++ b/sanityv3/schemas/documents/header/sharedHeaderFields.ts
@@ -111,9 +111,9 @@ const heroRatio = {
   type: 'string',
   options: {
     list: [
-      { title: '2:1', value: '0.5' },
+      { title: 'Tall', value: 'tall' },
+      { title: '2:1(deprecated)', value: '0.5' },
       { title: 'Narrow', value: 'narrow' },
-      { title: 'Full screen', value: 'fullScreen' },
     ],
   },
   hidden: ({ parent }: DocumentType) => {
diff --git a/web/pageComponents/shared/Hero/FullImageHero.tsx b/web/pageComponents/shared/Hero/FullImageHero.tsx
index 04e25258f..80b655d7c 100644
--- a/web/pageComponents/shared/Hero/FullImageHero.tsx
+++ b/web/pageComponents/shared/Hero/FullImageHero.tsx
@@ -1,14 +1,8 @@
-import styled from 'styled-components'
 import type { HeroType, ImageWithCaptionData } from 'types'
 import { useSanityLoader } from '../../../lib/hooks/useSanityLoader'
 import Image, { Ratios } from '../SanityImage'
 import { StyledCaption } from '../image/StyledCaption'
 
-const ImgWrapper = styled.div`
-  height: calc(100vh - var(--topbar-height));
-  position: relative;
-`
-
 type FullImageHeroType = {
   figure: ImageWithCaptionData
   ratio?: string
@@ -16,17 +10,9 @@ type FullImageHeroType = {
 
 const imageSizes = '100vw'
 
-const FullScreenHero = ({ figure }: FullImageHeroType) => {
-  return (
-    <ImgWrapper>
-      <Image maxWidth={4096} image={figure.image} fill sizes={imageSizes} priority />
-    </ImgWrapper>
-  )
-}
-
 const NarrowHero = ({ figure }: FullImageHeroType) => {
   // 4:3 for small screens and 10:3 for large screens
-  const desktopUrl = useSanityLoader(figure.image, 4096, Ratios.THREE_TO_TEN)
+  const desktopUrl = useSanityLoader(figure.image, 2560, Ratios.THREE_TO_TEN)
 
   // Using picture with mobile and dekstop source to avoid initial load layout shift between aspect ratio
   return (
@@ -36,11 +22,18 @@ const NarrowHero = ({ figure }: FullImageHeroType) => {
     </picture>
   )
 }
+const TallHero = ({ figure }: FullImageHeroType) => {
+  return (
+    <div className="relative w-full h-[53dvh] lg:h-[65dvh] 4xl:h-[67dvh]">
+      <Image maxWidth={2560} fill aspectRatio={Ratios.FOUR_TO_FIVE} image={figure.image} sizes={imageSizes} priority />
+    </div>
+  )
+}
 
 const RatioHero = ({ ratio, figure }: FullImageHeroType) => {
   return (
     <Image
-      maxWidth={4096}
+      maxWidth={2560}
       aspectRatio={Number(ratio) || Ratios.ONE_TO_TWO}
       image={figure.image}
       sizes={imageSizes}
@@ -53,10 +46,10 @@ export const FullImageHero = ({ ratio, figure, hideImageCaption, captionBg }: He
   const getHero = () => {
     if (figure)
       switch (ratio) {
-        case 'fullScreen':
-          return <FullScreenHero figure={figure} />
         case 'narrow':
           return <NarrowHero figure={figure} />
+        case 'tall':
+          return <TallHero figure={figure} />
         default:
           return <RatioHero figure={figure} ratio={ratio} />
       }