✨ Add big title option to 50-50 banner #1887

sanityv3/schemas/documents/header/sharedHeaderFields.ts

@@ -1,9 +1,13 @@
-import { Rule, ValidationContext } from 'sanity'
+import { PortableTextBlock, Rule, ValidationContext } from 'sanity'
 import CompactBlockEditor from '../../components/CompactBlockEditor'
 import { configureBlockContent, configureTitleBlockContent } from '../../editors'
 import { HeroTypes } from '../../HeroTypes'
 
-type DocumentType = { parent: { heroType?: string } }
+type DocumentType = { parent: Hero }
+type Hero = {
+  heroType?: string
+  isBigTitle?: boolean
+}
 
 const titleContentType = configureTitleBlockContent()
 const ingressContentType = configureBlockContent({
@@ -14,6 +18,29 @@ const ingressContentType = configureBlockContent({
   attachment: false,
 })
 
+const isBigTitle = {
+  title: 'Big title',
+  name: 'isBigTitle',
+  type: 'boolean',
+  fieldset: 'header',
+  hidden: ({ parent }: DocumentType) => {
+    return parent?.heroType !== HeroTypes.FIFTY_FIFTY
+  },
+}
+
+const heroBigTitle = {
+  name: 'heroBigTitle',
+  title: 'Big Title',
+  type: 'array',
+  fieldset: 'header',
+  of: [titleContentType],
+  hidden: ({ parent }: DocumentType) => !parent.isBigTitle,
+  validation: (Rule: Rule) =>
+    Rule.custom((value: PortableTextBlock[], ctx: ValidationContext) =>
+      !value && (ctx.parent as Hero)?.isBigTitle ? 'Title is required' : true,
+    ),
+}
+
 const title = {
   name: 'title',
   type: 'array',
@@ -76,7 +103,9 @@ const heroTitle = {
   of: [titleContentType],
   fieldset: 'header',
   hidden: ({ parent }: DocumentType) => {
-    return parent?.heroType !== HeroTypes.FIFTY_FIFTY
+    return (
+      parent?.heroType !== HeroTypes.FIFTY_FIFTY || (parent?.heroType === HeroTypes.FIFTY_FIFTY && parent.isBigTitle)
+    )
   },
   validation: (Rule: Rule) =>
     Rule.custom((value: string, context: ValidationContext) => {
@@ -92,7 +121,9 @@ const heroIngress = {
   type: 'array',
   of: [ingressContentType],
   hidden: ({ parent }: DocumentType) => {
-    return parent?.heroType !== HeroTypes.FIFTY_FIFTY
+    return (
+      parent?.heroType !== HeroTypes.FIFTY_FIFTY || (parent?.heroType === HeroTypes.FIFTY_FIFTY && parent.isBigTitle)
+    )
   },
   fieldset: 'header',
 }
@@ -104,7 +135,9 @@ const heroLink = {
   type: 'array',
   of: [{ type: 'linkSelector', title: 'Link' }],
   hidden: ({ parent }: DocumentType) => {
-    return parent?.heroType !== HeroTypes.FIFTY_FIFTY
+    return (
+      parent?.heroType !== HeroTypes.FIFTY_FIFTY || (parent?.heroType === HeroTypes.FIFTY_FIFTY && parent.isBigTitle)
+    )
   },
   fieldset: 'header',
   validation: (Rule: Rule) => Rule.max(1).error('Only one action is permitted'),
@@ -179,10 +212,12 @@ const heroLoopingVideoRatio = {
 }
 
 export default [
+  isBigTitle,
   title,
   heroType,
   heroRatio,
   heroTitle,
+  heroBigTitle,
   heroIngress,
   heroLink,
   background,

web/components/src/Heading/Heading.tsx

@@ -65,7 +65,7 @@ const fontWeights = {
   md: 'var(--fontWeight-regular)',
   lg: 'var(--fontWeight-regular)',
   xl: 'var(--fontWeight-regular)',
-  '2xl': 'var(--fontWeidht-regular)',
+  '2xl': 'var(--fontWeight-regular)',
   '3xl': 'var(--fontWeight-regular)',
 }
 

web/lib/queries/common/heroFields.ts

@@ -3,7 +3,8 @@ import linkSelectorFields from './actions/linkSelectorFields'
 export const heroFields = /* groq */ `{
     "type": coalesce(heroType, 'default'),
     "ratio": heroRatio,
-    "title": heroTitle,
+    "isBigTitle":isBigTitle,
+    "title": select(isBigTitle => heroBigTitle , heroTitle),
     "ingress": heroIngress,
     "background": coalesce(heroBackground.title, 'White'),
     "figure":  select(

web/pageComponents/pageTemplates/shared/SharedBanner.tsx

@@ -32,6 +32,7 @@ export const SharedBanner = ({ title, hero, hideImageCaption, captionBg }: Banne
           link={hero.link}
           ingress={hero.ingress}
           background={hero.background}
+          isBigTitle={hero.isBigTitle}
         />
       )
     case HeroTypes.LOOPING_VIDEO:

web/pageComponents/shared/Hero/FiftyFiftyHero.tsx

@@ -80,7 +80,7 @@ const HeroActionLink = ({ action, ...rest }: { action: LinkData }) => {
   )
 }
 
-export const FiftyFiftyHero = ({ title, ingress, link, background, figure }: HeroType) => {
+export const FiftyFiftyHero = ({ title, ingress, link, background, figure, isBigTitle }: HeroType) => {
   return (
     <>
       <StyledHero background={background}>
@@ -97,8 +97,9 @@ export const FiftyFiftyHero = ({ title, ingress, link, background, figure }: Her
           )}
         </StyledMedia>
         <StyledContent>
-          {title && <StyledHeroTitle value={title} level="h1" size="xl" />}
-          {ingress && (
+          {isBigTitle}
+          {title && <StyledHeroTitle value={title} level="h1" size={isBigTitle ? '2xl' : 'xl'} />}
+          {ingress && !isBigTitle && (
             <StyledIngress>
               <IngressText
                 value={ingress}
@@ -114,7 +115,7 @@ export const FiftyFiftyHero = ({ title, ingress, link, background, figure }: Her
               />
             </StyledIngress>
           )}
-          {link && <HeroActionLink action={link} />}
+          {link && !isBigTitle && <HeroActionLink action={link} />}
         </StyledContent>
       </StyledHero>
     </>

web/types/types.ts

@@ -179,6 +179,7 @@ export enum HeroTypes {
 
 export type HeroType = {
   figure?: ImageWithCaptionData
+  isBigTitle?: boolean
   title?: PortableTextBlock[]
   ingress?: PortableTextBlock[]
   link?: LinkData