Skip to content

Commit d3e5715

Browse files
committed
Merge branch 'bose/3542' into staging
2 parents 6b66f76 + 94bac1a commit d3e5715

File tree

4 files changed

+35
-15
lines changed

4 files changed

+35
-15
lines changed

sanityv3/schemas/documents/header/sharedHeaderFields.ts

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,6 @@ type Hero = {
2323
}
2424

2525
const titleContentType = configureTitleBlockContent()
26-
const titleWithDisplay = configureTitleBlockContent({
27-
largeText: true,
28-
extraLargeText: true,
29-
})
3026

3127
const ingressContentType = configureBlockContent({
3228
h2: false,
@@ -233,7 +229,7 @@ const heroImage = {
233229
const heroMobileImage = {
234230
title: 'Hero mobile image',
235231
name: 'heroMobileImage',
236-
type: 'imageWithAltAndCaption',
232+
type: 'imageWithAlt',
237233
hidden: ({ parent }: DocumentType) => {
238234
return parent?.heroType !== HeroTypes.BACKGROUND_IMAGE
239235
},
@@ -347,6 +343,25 @@ const layoutGrid = {
347343
},
348344
}
349345

346+
const alignContentY = {
347+
title: 'Vertical content alignment',
348+
name: 'alignContentY',
349+
type: 'string',
350+
fieldset: 'header',
351+
description: 'Align content vertical',
352+
initialValue: 'center', // default
353+
options: {
354+
list: [
355+
{ title: 'Top', value: 'top' },
356+
{ title: 'Center', value: 'center' },
357+
{ title: 'Bottom', value: 'bottom' },
358+
],
359+
},
360+
hidden: ({ parent }: DocumentType) => {
361+
return parent?.heroType !== HeroTypes.BACKGROUND_IMAGE
362+
},
363+
}
364+
350365
const useBrandTheme = {
351366
title: 'Apply red brand text color',
352367
name: 'heroUseBrandTheme',
@@ -371,6 +386,7 @@ export default [
371386
heroBigTitleFiftyFifty,
372387
heroIngress,
373388
heroLink,
389+
alignContentY,
374390
background,
375391
heroImage,
376392
heroMobileImage,

web/lib/queries/common/heroFields.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export const heroFields = /* groq */ `{
1616
displayTextVariant,
1717
layoutGrid,
1818
useBlurCenter,
19+
alignContentY,
1920
"ingress": heroIngress,
2021
"background": coalesce(heroBackground.title, 'White'),
2122
"figure": select(

web/pageComponents/pageTemplates/shared/SharedBanner.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ type BannerProps = {
1717
}
1818

1919
export const SharedBanner = ({ title, hero, hideImageCaption, captionBg, tags, publishedDate }: BannerProps) => {
20-
console.log('hero', hero)
2120
switch (hero?.type) {
2221
case HeroTypes.FULL_WIDTH_IMAGE:
2322
return (

web/sections/Hero/TextOnBackgroundImageHero.tsx

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ type TextOnBackgroundImageHeroProps = {
1515
title: PortableTextBlock[]
1616
background?: string
1717
backgroundGradient?: 'none' | 'dark' | 'light'
18+
alignContentY?: 'top' | 'center' | 'bottom'
1819
layoutGrid?: 'sm' | 'md' | 'lg'
1920
useBrandTheme?: boolean
2021
useBlurCenter?: boolean
@@ -31,6 +32,7 @@ export const TextOnBackgroundImageHero = ({
3132
layoutGrid = 'lg',
3233
useBlurCenter,
3334
heroMobileImage,
35+
alignContentY = 'center',
3436
}: TextOnBackgroundImageHeroProps) => {
3537
//@ts-ignore:todo
3638
const imageProps = useSanityLoader(figure?.image, 2560, mapSanityImageRatio('10:3'))
@@ -47,12 +49,18 @@ export const TextOnBackgroundImageHero = ({
4749
xl: 'h2_xl',
4850
}
4951

52+
const contentAligment = {
53+
top: 'items-start',
54+
center: 'items-center',
55+
bottom: 'items-end',
56+
}
57+
5058
return (
5159
<div
5260
className={twMerge(
53-
`relative flex items-center lg:min-h-[28vh] ${backgroundGradient === 'dark' ? 'dark' : ''} ${
54-
figure && imageProps?.src ? 'bg-center bg-cover bg-no-repeat' : ''
55-
} ${px}`,
61+
`relative flex py-12 ${contentAligment[alignContentY ?? 'center']} lg:min-h-[clamp(350px,35vh,40vh)] ${
62+
backgroundGradient === 'dark' ? 'dark' : ''
63+
} ${figure && imageProps?.src ? 'bg-center bg-cover bg-no-repeat' : ''} ${px}`,
5664
className,
5765
)}
5866
{...(url && {
@@ -61,18 +69,14 @@ export const TextOnBackgroundImageHero = ({
6169
},
6270
})}
6371
>
64-
<div
65-
className={`flex max-w-text flex-col justify-center pt-12 pb-40 md:pt-20 md:pb-26 ${
66-
useBrandTheme ? '*:text-energy-red-100' : ''
67-
}`}
68-
>
72+
<div className={`flex max-w-text flex-col ${useBrandTheme ? '*:text-energy-red-100' : ''}`}>
6973
<Heading
7074
value={title}
7175
id="mainTitle"
7276
as="h1"
7377
group={displayTextVariant !== 'none' ? 'display' : `heading`}
7478
variant={displayTextVariant !== 'none' ? (typographyVariant[displayTextVariant] as TypographyVariants) : `h1`}
75-
className={`z-10 w-fit max-w-prose pb-0`}
79+
className={`z-10 w-fit max-w-prose pb-0 lg:pb-0`}
7680
/>
7781
</div>
7882
{useBlurCenter && <div className={`centerBlur absolute inset-0 z-1`}></div>}

0 commit comments

Comments
 (0)