✨ Add big text teaser component #1890

sanityv3/schemas/editors/blockContentType.tsx

@@ -17,6 +17,11 @@ export type BlockContentProps = {
   attachment?: boolean
   lists?: boolean
   smallText?: boolean
+  normalTextOverride?: {
+    title: string
+    value: 'normal'
+    component?: ({ children }: { children: React.ReactNode }) => JSX.Element
+  }
 }
 const SmallTextRender = (props: any) => {
   const { children } = props
@@ -34,11 +39,12 @@ export const configureBlockContent = (options: BlockContentProps = {}): BlockFie
     attachment = false,
     lists = true,
     smallText = true,
+    normalTextOverride = { title: 'Normal', value: 'normal' },
   } = options
 
   const config: BlockFieldType = {
     type: 'block',
-    styles: [{ title: 'Normal', value: 'normal' }],
+    styles: [normalTextOverride],
     lists: lists
       ? [
           { title: 'Numbered', value: 'number' },

sanityv3/schemas/objects/teaser.tsx

@@ -6,7 +6,7 @@ import CompactBlockEditor from '../components/CompactBlockEditor'
 import { configureBlockContent, configureTitleBlockContent } from '../editors'
 import { validateCharCounterEditor } from '../validations/validateCharCounterEditor'
 
-import type { PortableTextBlock, Reference, Rule } from 'sanity'
+import type { PortableTextBlock, Reference, Rule, ValidationContext } from 'sanity'
 import type { DownloadableImage } from './downloadableImage'
 import type { DownloadableFile } from './files'
 import type { ImageWithAlt } from './imageWithAlt'
@@ -25,7 +25,7 @@ const imageAlignmentOptions = [
   { value: 'right', icon: RightAlignedImage },
 ]
 
-const blockContentType = configureBlockContent({
+const blockConfig = {
   h1: false,
   h2: false,
   h3: false,
@@ -34,20 +34,38 @@ const blockContentType = configureBlockContent({
   externalLink: false,
   attachment: false,
   lists: false,
+}
+
+const blockContentType = configureBlockContent({ ...blockConfig })
+
+const blockContentTypeForBigText = configureBlockContent({
+  ...blockConfig,
+  smallText: false,
+  normalTextOverride: {
+    title: 'Normal',
+    value: 'normal',
+    component: ({ children }: { children: React.ReactNode }) => <span style={{ fontSize: '42px' }}>{children}</span>,
+  },
 })
 
 export type Teaser = {
   _type: 'teaser'
   overline?: string
   title?: PortableTextBlock[]
   text?: PortableTextBlock[]
+  isBigText?: boolean
+  bigText?: PortableTextBlock[]
   action?: (LinkSelector | DownloadableFile | DownloadableImage)[]
   image: ImageWithAlt
   imagePosition?: string
   imageSize?: string
   background?: ColorSelectorValue
 }
 
+type TeaserDocument = {
+  parent: Teaser
+}
+
 export default {
   name: 'teaser',
   title: 'Teaser',
@@ -62,6 +80,7 @@ export default {
         collapsible: true,
         collapsed: true,
       },
+      hidden: ({ parent }: TeaserDocument) => parent.isBigText,
     },
     {
       name: 'link',
@@ -74,6 +93,11 @@ export default {
     },
   ],
   fields: [
+    {
+      title: 'Big text',
+      name: 'isBigText',
+      type: 'boolean',
+    },
     {
       name: 'overline',
       title: 'Eyebrow',
@@ -87,14 +111,35 @@ export default {
         input: CompactBlockEditor,
       },
       of: [titleContentType],
+      hidden: ({ parent }: TeaserDocument) => parent.isBigText,
     },
     {
       name: 'text',
       title: 'Text content',
       type: 'array',
       of: [blockContentType],
       validation: (Rule: Rule) =>
-        Rule.custom((value: PortableTextBlock[]) => validateCharCounterEditor(value, 600)).warning(),
+        Rule.custom((value: PortableTextBlock[], ctx: ValidationContext) => {
+          if (!(ctx.parent as Teaser)?.isBigText) {
+            return validateCharCounterEditor(value, 600)
+          }
+          return true
+        }).warning(),
+      hidden: ({ parent }: TeaserDocument) => parent.isBigText,
+    },
+    {
+      name: 'bigText',
+      title: 'Text content',
+      type: 'array',
+      of: [blockContentTypeForBigText],
+      validation: (Rule: Rule) =>
+        Rule.custom((value: PortableTextBlock[], ctx: ValidationContext) => {
+          if ((ctx.parent as Teaser)?.isBigText) {
+            return validateCharCounterEditor(value, 600)
+          }
+          return true
+        }),
+      hidden: ({ parent }: TeaserDocument) => !parent.isBigText,
     },
     {
       name: 'action',
@@ -165,14 +210,29 @@ export default {
   preview: {
     select: {
       title: 'title',
+      text: 'text',
+      isBigText: 'isBigText',
+      bigText: 'bigText',
       image: 'image.asset',
     },
-    prepare({ title, image }: { title: PortableTextBlock[]; image: Reference }) {
-      const plainTitle = title ? blocksToText(title) : undefined
+    prepare({
+      title,
+      text,
+      isBigText,
+      bigText,
+      image,
+    }: {
+      title: PortableTextBlock[]
+      text: PortableTextBlock[]
+      isBigText: boolean
+      bigText: PortableTextBlock[]
+      image: Reference
+    }) {
+      const plainTitle = isBigText ? blocksToText(bigText) : blocksToText(title || text)
 
       return {
-        title: plainTitle || 'Missing title!',
-        subtitle: 'Teaser component',
+        title: plainTitle || 'Missing title/content',
+        subtitle: isBigText ? 'Teaser component (BIG TEXT)' : 'Teaser component',
         media: image,
       }
     },

sanityv3/schemas/objects/textBlock.tsx

@@ -1,10 +1,9 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import { text_field } from '@equinor/eds-icons'
-import type { Reference, Rule } from 'sanity'
+import type { PortableTextBlock, Reference, Rule, SanityDocument, ValidationContext } from 'sanity'
 import type { ColorSelectorValue } from '../components/ColorSelector'
 import blocksToText from '../../helpers/blocksToText'
 import { EdsIcon } from '../../icons'
-import { SchemaType } from '../../types'
 import CompactBlockEditor from '../components/CompactBlockEditor'
 import { configureBlockContent, configureTitleBlockContent } from '../editors'
 import { validateComponentAnchor } from '../validations/validateAnchorReference'
@@ -16,13 +15,29 @@ const blockContentType = configureBlockContent({
   h4: false,
   attachment: false,
 })
+
 const ingressContentType = configureBlockContent({
   h1: false,
   h2: false,
   h3: false,
   h4: false,
   attachment: false,
 })
+
+const blockContentTypeForBigText = configureBlockContent({
+  h1: false,
+  h2: false,
+  h3: false,
+  h4: false,
+  attachment: false,
+  smallText: false,
+  normalTextOverride: {
+    title: 'Normal',
+    value: 'normal',
+    component: ({ children }: { children: React.ReactNode }) => <span style={{ fontSize: '42px' }}>{children}</span>,
+  },
+})
+
 const titleContentType = configureTitleBlockContent()
 
 type TextBlock = {
@@ -31,12 +46,18 @@ type TextBlock = {
   anchor?: string
   ingress?: string
   text?: string
+  isBigText?: boolean
+  bigText?: PortableTextBlock[]
   action?: Reference[]
   splitList?: boolean
   overrideButtonStyle?: boolean
   background?: ColorSelectorValue
 }
 
+type TextBlockDocument = {
+  parent: TextBlock
+}
+
 export default {
   name: 'textBlock',
   title: 'Text block',
@@ -50,6 +71,7 @@ export default {
         collapsible: true,
         collapsed: true,
       },
+      hidden: ({ parent }: TextBlockDocument) => parent.isBigText,
     },
     {
       title: 'Eyebrow headline',
@@ -59,6 +81,7 @@ export default {
         collapsible: true,
         collapsed: true,
       },
+      hidden: ({ parent }: TextBlockDocument) => parent.isBigText,
     },
     {
       title: 'Call to action(s)',
@@ -84,6 +107,11 @@ export default {
     },
   ],
   fields: [
+    {
+      title: 'Big text',
+      name: 'isBigText',
+      type: 'boolean',
+    },
     {
       name: 'image',
       type: 'imageWithAlt',
@@ -105,7 +133,11 @@ export default {
         input: CompactBlockEditor,
       },
       of: [titleContentType],
-      validation: (Rule: SchemaType.ValidationRule) => Rule.required().warning('A title is recommended'),
+      validation: (Rule: Rule) =>
+        Rule.custom((value: PortableTextBlock[], ctx: ValidationContext) =>
+          !value && !(ctx.parent as TextBlock)?.isBigText ? 'A title is recommended' : true,
+        ).warning(),
+      hidden: ({ parent }: TextBlockDocument) => parent.isBigText,
     },
     {
       name: 'anchor',
@@ -124,6 +156,18 @@ export default {
       title: 'Ingress',
       type: 'array',
       of: [ingressContentType],
+      hidden: ({ parent }: TextBlockDocument) => parent.isBigText,
+    },
+    {
+      name: 'bigTitle',
+      title: 'Title',
+      type: 'array',
+      of: [blockContentTypeForBigText],
+      hidden: ({ parent }: TextBlockDocument) => !parent.isBigText,
+      validation: (Rule: Rule) =>
+        Rule.custom((value: PortableTextBlock[], ctx: ValidationContext) =>
+          !value && (ctx.parent as TextBlock)?.isBigText ? 'Title is required' : true,
+        ),
     },
     {
       name: 'text',
@@ -176,27 +220,27 @@ export default {
       title: 'title',
       ingress: 'ingress',
       text: 'text',
-    },
-    prepare({ title = [], ingress, text }: { title: any[]; ingress: any; text: any }) {
-      const textBlock = (text || []).find((introBlock: any) => introBlock._type === 'block')
-      const ingressBlock = (ingress || []).find((introBlock: any) => introBlock._type === 'block')
-      const plainTitle = title ? blocksToText(title) : undefined
+      isBigText: 'isBigText',
+      bigTitle: 'bigTitle',
+    },
+    prepare({
+      title,
+      isBigText,
+      bigTitle,
+      ingress,
+      text,
+    }: {
+      title: PortableTextBlock[]
+      ingress: PortableTextBlock[]
+      isBigText: boolean
+      bigTitle: PortableTextBlock[]
+      text: PortableTextBlock[]
+    }) {
+      const plainTitle = isBigText ? blocksToText(bigTitle) : blocksToText(title || ingress || text)
 
       return {
-        title:
-          plainTitle ||
-          (textBlock &&
-            textBlock.children
-              .filter((child: any) => child._type === 'span')
-              .map((span: any) => span.text)
-              .join('')) ||
-          (ingressBlock &&
-            ingressBlock.children
-              .filter((child: any) => child._type === 'span')
-              .map((span: any) => span.text)
-              .join('')) ||
-          'Missing content!',
-        subtitle: `Text block component.`,
+        title: plainTitle || 'Missing title/content',
+        subtitle: isBigText ? 'Text block component (BIG TEXT)' : 'Text block component',
         media: EdsIcon(text_field),
       }
     },

search/IndexSanityContent/magazine/sanity.ts

@@ -27,7 +27,11 @@ export const query = /* groq */ `*[_type == "magazine" && _lang == $lang && !(_i
   "ingress": pt::text(ingress),
   "textBlocks": content[_type == "textBlock"]{
     "_key": _key,
-    "title": pt::text(title),
+    "title": select(
+      "isBigText" == true => {
+        pt::text(bigTitle),
+        pt::text(title)
+      }),
     "ingress": pt::text(ingress),
     "text": pt::text(text)  // TODO: Do this manually to cover all cases
   },

search/IndexSanityContent/topic/sanity.ts

@@ -11,7 +11,11 @@ export const query = /* groq */ `*[_type match "route_" + $lang + "*" && content
   "type": content->_type,
   "textBlocks": content->content[_type == "textBlock"]{
     "_key": _key,
-    "title": pt::text(title),
+    "title": select(
+      "isBigText" == true => {
+        pt::text(bigTitle),
+        pt::text(title)
+      }),
     "ingress": pt::text(ingress),
     "text": pt::text(text)  // TODO: Do this manually to cover all cases
   },