Merge branch 'fer/1890' into staging

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 ingressContentTypeForBigText = 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: 'bigIngress',
+      title: 'Ingress',
+      type: 'array',
+      of: [ingressContentTypeForBigText],
+      hidden: ({ parent }: TextBlockDocument) => !parent.isBigText,
+      validation: (Rule: Rule) =>
+        Rule.custom((value: PortableTextBlock[], ctx: ValidationContext) =>
+          !value && (ctx.parent as TextBlock)?.isBigText ? 'Ingress 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',
+      bigIngress: 'bigIngress',
+    },
+    prepare({
+      title,
+      isBigText,
+      bigIngress,
+      ingress,
+      text,
+    }: {
+      title: PortableTextBlock[]
+      ingress: PortableTextBlock[]
+      isBigText: boolean
+      bigIngress: PortableTextBlock[]
+      text: PortableTextBlock[]
+    }) {
+      const plainTitle = isBigText ? blocksToText(bigIngress) : 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),
       }
     },

web/components/src/Text/Text.tsx

@@ -12,7 +12,7 @@ const StyledText = styled(Typography)<StyledTextProps>`
   font-size: var(--size);
   line-height: var(--lineHeight-3);
   /* @TODO: Let's consider to move all the margin woo to the article layout
-  We should. Not move, but scope. For both news and topic pages. But this will 
+  We should. Not move, but scope. For both news and topic pages. But this will
   require a lot of retest, since in some of the uses cases we will need to reintroduce the margin */
   margin-bottom: var(--space-medium);
   & + & {
@@ -41,7 +41,7 @@ const StyledText = styled(Typography)<StyledTextProps>`
 `
 
 export type TextProps = {
-  size?: 'regular' | 'md' | 'small'
+  size?: 'regular' | 'md' | 'small' | 'lg'
   bold?: boolean
   italic?: boolean
   centered?: boolean
@@ -51,6 +51,7 @@ export type TextProps = {
 
 /* Should be easy enough to change later on */
 const sizes = {
+  lg: 'var(--typeScale-4_5)',
   regular: 'var(--typeScale-1)',
   md: 'var(--typeScale-2)',
   small: 'var(--typeScale-0)',
@@ -60,6 +61,8 @@ export const Text = forwardRef<HTMLDivElement, TextProps>(function Text(
   { size = 'regular', style, children, inverted = false, ...rest },
   ref,
 ) {
+  if (size === 'lg') console.log(ref)
+
   return (
     <StyledText
       ref={ref}