Merge branch 'bose/3542' into staging

Author: BorghildSelle

sanityv3/schemas/documents/header/sharedHeaderFields.ts

@@ -23,10 +23,6 @@ type Hero = {
 }
 
 const titleContentType = configureTitleBlockContent()
-const titleWithDisplay = configureTitleBlockContent({
-  largeText: true,
-  extraLargeText: true,
-})
 
 const ingressContentType = configureBlockContent({
   h2: false,
@@ -233,7 +229,7 @@ const heroImage = {
 const heroMobileImage = {
   title: 'Hero mobile image',
   name: 'heroMobileImage',
-  type: 'imageWithAltAndCaption',
+  type: 'imageWithAlt',
   hidden: ({ parent }: DocumentType) => {
     return parent?.heroType !== HeroTypes.BACKGROUND_IMAGE
   },
@@ -347,6 +343,25 @@ const layoutGrid = {
   },
 }
 
+const alignContentY = {
+  title: 'Vertical content alignment',
+  name: 'alignContentY',
+  type: 'string',
+  fieldset: 'header',
+  description: 'Align content vertical',
+  initialValue: 'center', // default
+  options: {
+    list: [
+      { title: 'Top', value: 'top' },
+      { title: 'Center', value: 'center' },
+      { title: 'Bottom', value: 'bottom' },
+    ],
+  },
+  hidden: ({ parent }: DocumentType) => {
+    return parent?.heroType !== HeroTypes.BACKGROUND_IMAGE
+  },
+}
+
 const useBrandTheme = {
   title: 'Apply red brand text color',
   name: 'heroUseBrandTheme',
@@ -371,6 +386,7 @@ export default [
   heroBigTitleFiftyFifty,
   heroIngress,
   heroLink,
+  alignContentY,
   background,
   heroImage,
   heroMobileImage,

web/lib/queries/common/heroFields.ts

@@ -16,6 +16,7 @@ export const heroFields = /* groq */ `{
     displayTextVariant,
     layoutGrid,
     useBlurCenter,
+    alignContentY,
     "ingress": heroIngress,
     "background": coalesce(heroBackground.title, 'White'),
     "figure":  select(

web/pageComponents/pageTemplates/shared/SharedBanner.tsx

@@ -17,7 +17,6 @@ type BannerProps = {
 }
 
 export const SharedBanner = ({ title, hero, hideImageCaption, captionBg, tags, publishedDate }: BannerProps) => {
-  console.log('hero', hero)
   switch (hero?.type) {
     case HeroTypes.FULL_WIDTH_IMAGE:
       return (

web/sections/Hero/TextOnBackgroundImageHero.tsx

@@ -15,6 +15,7 @@ type TextOnBackgroundImageHeroProps = {
   title: PortableTextBlock[]
   background?: string
   backgroundGradient?: 'none' | 'dark' | 'light'
+  alignContentY?: 'top' | 'center' | 'bottom'
   layoutGrid?: 'sm' | 'md' | 'lg'
   useBrandTheme?: boolean
   useBlurCenter?: boolean
@@ -31,6 +32,7 @@ export const TextOnBackgroundImageHero = ({
   layoutGrid = 'lg',
   useBlurCenter,
   heroMobileImage,
+  alignContentY = 'center',
 }: TextOnBackgroundImageHeroProps) => {
   //@ts-ignore:todo
   const imageProps = useSanityLoader(figure?.image, 2560, mapSanityImageRatio('10:3'))
@@ -47,12 +49,18 @@ export const TextOnBackgroundImageHero = ({
     xl: 'h2_xl',
   }
 
+  const contentAligment = {
+    top: 'items-start',
+    center: 'items-center',
+    bottom: 'items-end',
+  }
+
   return (
     <div
       className={twMerge(
-        `relative flex items-center lg:min-h-[28vh] ${backgroundGradient === 'dark' ? 'dark' : ''} ${
-          figure && imageProps?.src ? 'bg-center bg-cover bg-no-repeat' : ''
-        } ${px}`,
+        `relative flex py-12 ${contentAligment[alignContentY ?? 'center']} lg:min-h-[clamp(350px,35vh,40vh)] ${
+          backgroundGradient === 'dark' ? 'dark' : ''
+        } ${figure && imageProps?.src ? 'bg-center bg-cover bg-no-repeat' : ''} ${px}`,
         className,
       )}
       {...(url && {
@@ -61,18 +69,14 @@ export const TextOnBackgroundImageHero = ({
         },
       })}
     >
-      <div
-        className={`flex max-w-text flex-col justify-center pt-12 pb-40 md:pt-20 md:pb-26 ${
-          useBrandTheme ? '*:text-energy-red-100' : ''
-        }`}
-      >
+      <div className={`flex max-w-text flex-col ${useBrandTheme ? '*:text-energy-red-100' : ''}`}>
         <Heading
           value={title}
           id="mainTitle"
           as="h1"
           group={displayTextVariant !== 'none' ? 'display' : `heading`}
           variant={displayTextVariant !== 'none' ? (typographyVariant[displayTextVariant] as TypographyVariants) : `h1`}
-          className={`z-10 w-fit max-w-prose pb-0`}
+          className={`z-10 w-fit max-w-prose pb-0 lg:pb-0`}
         />
       </div>
       {useBlurCenter && <div className={`centerBlur absolute inset-0 z-1`}></div>}