Merge branch 'padms/1887' into staging

equinor · Nov 10, 2023 · 9c37166 · 9c37166
2 parents 867cdbe + 4fc1607
commit 9c37166
Show file tree

Hide file tree

Showing 16 changed files with 219 additions and 53 deletions.
diff --git a/.github/workflows/dataset-backup.yaml b/.github/workflows/dataset-backup.yaml
@@ -8,9 +8,9 @@ on:
         options:
           - "['global-development']"
           - "['global-test']"
-          - all
+          - 'all'
         required: true
-        default: all
+        default: 'all'
   schedule:
     # Runs at 02:00 UTC every sunday
     - cron: '0 2 * * 0'

diff --git a/sanityv3/schemas/documents/header/bigTitleStyles.tsx b/sanityv3/schemas/documents/header/bigTitleStyles.tsx
@@ -0,0 +1,22 @@
+import { BlockStyleDefinition } from 'sanity'
+
+const bigTitle = {
+  title: 'Large',
+  value: 'normal',
+  component: ({ children }: { children: React.ReactNode }) => {
+    return <span style={{ fontSize: '42px' }}>{children}</span>
+  },
+}
+
+export const defaultBannerBigTitletStyle: BlockStyleDefinition[] = [
+  bigTitle,
+  {
+    title: 'Extra Large',
+    value: 'extraLarge',
+    component: ({ children }: { children: React.ReactNode }) => {
+      return <span style={{ fontSize: '56px' }}>{children}</span>
+    },
+  },
+]
+
+export const fiftyFiftyBigTitleStyle: BlockStyleDefinition[] = [bigTitle]
diff --git a/sanityv3/schemas/documents/header/sharedHeaderFields.ts b/sanityv3/schemas/documents/header/sharedHeaderFields.ts
@@ -1,9 +1,17 @@
-import { Rule, ValidationContext } from 'sanity'
+import { PortableTextBlock, Rule, ValidationContext, CurrentUser } from 'sanity'
+import blocksToText from '../../../helpers/blocksToText'
 import CompactBlockEditor from '../../components/CompactBlockEditor'
 import { configureBlockContent, configureTitleBlockContent } from '../../editors'
 import { HeroTypes } from '../../HeroTypes'
+import { defaultBannerBigTitletStyle, fiftyFiftyBigTitleStyle } from './bigTitleStyles'
 
-type DocumentType = { parent: { heroType?: string } }
+const bigTitleRoles = ['administrator', 'developer', 'editor'] // allow editor until designer role is created.
+
+type DocumentType = { parent: Hero; currentUser: CurrentUser }
+type Hero = {
+  heroType?: HeroTypes
+  isBigTitle?: boolean
+}
 
 const titleContentType = configureTitleBlockContent()
 const ingressContentType = configureBlockContent({
@@ -14,6 +22,62 @@ 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 || parent?.heroType === HeroTypes.DEFAULT)
+  },
+  readOnly: ({ currentUser }: DocumentType) => {
+    return !currentUser.roles.find(({ name }) => bigTitleRoles.includes(name))
+  },
+}
+
+const heroBigTitleDefault = {
+  name: 'heroBigTitleDefault',
+  title: 'Hero Title',
+  type: 'array',
+  fieldset: 'header',
+  of: [
+    configureTitleBlockContent({
+      highlight: true,
+      styles: defaultBannerBigTitletStyle,
+    }),
+  ],
+  hidden: ({ parent }: DocumentType) => !parent.isBigTitle || parent.heroType !== HeroTypes.DEFAULT,
+  validation: (Rule: Rule) =>
+    Rule.custom((value: PortableTextBlock[], ctx: ValidationContext) =>
+      blocksToText(value)?.length === 0 &&
+      (ctx.parent as Hero)?.isBigTitle &&
+      (ctx.parent as Hero)?.heroType === HeroTypes.DEFAULT
+        ? 'Title is required'
+        : true,
+    ),
+  readOnly: ({ currentUser }: DocumentType) => {
+    return !currentUser.roles.find(({ name }) => bigTitleRoles.includes(name))
+  },
+}
+
+const heroBigTitleFiftyFifty = {
+  name: 'heroBigTitleFiftyFifty',
+  title: 'Hero Title',
+  type: 'array',
+  fieldset: 'header',
+  of: [configureTitleBlockContent({ styles: fiftyFiftyBigTitleStyle })],
+  hidden: ({ parent }: DocumentType) => !parent.isBigTitle || parent.heroType !== HeroTypes.FIFTY_FIFTY,
+  validation: (Rule: Rule) =>
+    Rule.custom((value: PortableTextBlock[], ctx: ValidationContext) =>
+      !value && (ctx.parent as Hero)?.isBigTitle && (ctx.parent as Hero)?.heroType === HeroTypes.FIFTY_FIFTY
+        ? 'Title is required'
+        : true,
+    ),
+  readOnly: ({ currentUser }: DocumentType) => {
+    return !currentUser.roles.find(({ name }) => bigTitleRoles.includes(name))
+  },
+}
+
 const title = {
   name: 'title',
   type: 'array',
@@ -58,7 +122,7 @@ const heroRatio = {
   },
   validation: (Rule: Rule) =>
     Rule.custom((value: string, context: ValidationContext) => {
-      const { parent } = context as DocumentType
+      const { parent } = context as unknown as DocumentType
       if (parent?.heroType === HeroTypes.FULL_WIDTH_IMAGE && !value) return 'Field is required'
       return true
     }),
@@ -76,11 +140,13 @@ 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) => {
-      const { parent } = context as DocumentType
+      const { parent } = context as unknown as DocumentType
       if (parent?.heroType === HeroTypes.FIFTY_FIFTY && !value) return 'Field is required'
       return true
     }),
@@ -92,7 +158,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 +172,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'),
@@ -128,7 +198,7 @@ const heroImage = {
   description: 'Caption and credit is not shown for 50-50 banner.',
   validation: (Rule: Rule) =>
     Rule.custom((value: string, context: ValidationContext) => {
-      const { parent } = context as DocumentType
+      const { parent } = context as unknown as DocumentType
       if (parent?.heroType === HeroTypes.LOOPING_VIDEO && !value) return 'Field is required'
       return true
     }),
@@ -146,7 +216,7 @@ const heroLoopingVideo = {
   fieldset: 'header',
   validation: (Rule: Rule) =>
     Rule.custom((value: string, context: ValidationContext) => {
-      const { parent } = context as DocumentType
+      const { parent } = context as unknown as DocumentType
       if (parent?.heroType === HeroTypes.LOOPING_VIDEO && !value) return 'Field is required'
       return true
     }),
@@ -171,18 +241,21 @@ const heroLoopingVideoRatio = {
   },
   validation: (Rule: Rule) =>
     Rule.custom((value: string, context: ValidationContext) => {
-      const { parent } = context as DocumentType
+      const { parent } = context as unknown as DocumentType
       if (parent?.heroType === HeroTypes.LOOPING_VIDEO && !value) return 'Field is required'
       return true
     }),
   fieldset: 'header',
 }
 
 export default [
+  isBigTitle,
   title,
   heroType,
   heroRatio,
   heroTitle,
+  heroBigTitleDefault,
+  heroBigTitleFiftyFifty,
   heroIngress,
   heroLink,
   background,

diff --git a/sanityv3/schemas/editors/blockContentType.tsx b/sanityv3/schemas/editors/blockContentType.tsx
@@ -1,9 +1,8 @@
 import { attach_file, external_link, link } from '@equinor/eds-icons'
-import type { Rule, ValidationContext } from 'sanity'
+import type { BlockDefinition, Rule, ValidationContext } from 'sanity'
 import { filterByPages, filterByPagesInOtherLanguages } from '../../helpers/referenceFilters'
 import { EdsBlockEditorIcon, EdsIcon, IconSubScript, IconSuperScript } from '../../icons'
 import { Flags } from '../../src/lib/datasetHelpers'
-import type { BlockFieldType } from '../../types/schemaTypes'
 import { ExternalLinkRenderer, SubScriptRenderer, SuperScriptRenderer } from '../components'
 import routes from '../routes'
 
@@ -28,7 +27,7 @@ const SmallTextRender = (props: any) => {
   return <span style={{ fontSize: '0.8rem' }}>{children}</span>
 }
 
-export const configureBlockContent = (options: BlockContentProps = {}): BlockFieldType => {
+export const configureBlockContent = (options: BlockContentProps = {}): BlockDefinition => {
   const {
     h1 = false,
     h2 = true,
@@ -42,8 +41,9 @@ export const configureBlockContent = (options: BlockContentProps = {}): BlockFie
     normalTextOverride = { title: 'Normal', value: 'normal' },
   } = options
 
-  const config: BlockFieldType = {
+  const config: BlockDefinition = {
     type: 'block',
+    name: 'block',
     styles: [normalTextOverride],
     lists: lists
       ? [
@@ -208,34 +208,34 @@ export const configureBlockContent = (options: BlockContentProps = {}): BlockFie
   }
 
   if (h1) {
-    config.styles.push(h1Config)
+    config?.styles?.push(h1Config)
   }
 
   if (h2) {
-    config.styles.push(h2Config)
+    config?.styles?.push(h2Config)
   }
 
   if (h3) {
-    config.styles.push(h3Config)
+    config?.styles?.push(h3Config)
   }
 
   if (h4) {
-    config.styles.push(h4Config)
+    config?.styles?.push(h4Config)
   }
   if (smallText) {
-    config.styles.push(smallTextConfig)
+    config?.styles?.push(smallTextConfig)
   }
 
   if (externalLink) {
-    config.marks.annotations.push(externalLinkConfig)
+    config?.marks?.annotations?.push(externalLinkConfig)
   }
 
   if (internalLink) {
-    config.marks.annotations.push(internalLinkConfig)
+    config?.marks?.annotations?.push(internalLinkConfig)
   }
 
   if (attachment) {
-    config.marks.annotations.push(attachmentConfig)
+    config?.marks?.annotations?.push(attachmentConfig)
   }
 
   return config

diff --git a/sanityv3/schemas/editors/titleEditorContentType.tsx b/sanityv3/schemas/editors/titleEditorContentType.tsx
@@ -1,14 +1,32 @@
 import { SuperScriptRenderer, SubScriptRenderer, StrikeThroughRenderer } from '../components'
-import { IconSuperScript, IconSubScript } from '../../icons'
+import { IconSuperScript, IconSubScript, EdsBlockEditorIcon } from '../../icons'
 import { StrikethroughIcon } from '@sanity/icons'
-import type { BlockFieldType } from '../../types/schemaTypes'
+import { BlockDefinition, BlockStyleDefinition } from 'sanity'
+import { format_color_text } from '@equinor/eds-icons'
+import React from 'react'
+
+export type TitleContentProps = {
+  styles?: BlockStyleDefinition[]
+  highlight?: boolean
+}
 
 // TODO: Add relevant styles for titles (i.e. highlighted text)
-export const configureTitleBlockContent = (): BlockFieldType => {
-  // const { strong, emphasis, strikethrough } = options
-  return {
+export const configureTitleBlockContent = (
+  options: TitleContentProps = {
+    styles: [
+      {
+        title: 'Normal',
+        value: 'normal',
+      },
+    ],
+  },
+): BlockDefinition => {
+  const { highlight = false, styles } = options
+
+  const config: BlockDefinition = {
     type: 'block',
-    styles: [],
+    name: 'block',
+    styles: styles,
     lists: [],
     marks: {
       decorators: [
@@ -36,6 +54,20 @@ export const configureTitleBlockContent = (): BlockFieldType => {
       annotations: [],
     },
   }
+
+  const textColorConfig = {
+    title: 'Highlight',
+    value: 'highlight',
+    icon: EdsBlockEditorIcon(format_color_text),
+    component: ({ children }: { children: React.ReactNode }) => {
+      return <span style={{ color: 'hsl(348, 100%, 54%)' }}>{children}</span>
+    },
+  }
+
+  if (highlight) {
+    config.marks?.decorators?.push(textColorConfig)
+  }
+  return config
 }
 
 export default configureTitleBlockContent()
diff --git a/sanityv3/types/schemaTypes.d.ts b/sanityv3/types/schemaTypes.d.ts
@@ -28,13 +28,3 @@ export interface ReferenceFilter {
   filter: string // GROQ filter string
   params: { [x: string]: any }
 }
-
-export type BlockFieldType = {
-  type: string
-  styles: { title: string; value: string }[]
-  lists: { title: string; value: string }[] | []
-  marks: {
-    decorators: any[]
-    annotations: any[]
-  }
-}
diff --git a/web/components/src/Heading/Heading.tsx b/web/components/src/Heading/Heading.tsx
@@ -30,7 +30,7 @@ const StyledHeading = styled(Typography)<StyledHeadingProps>`
 `
 
 export type HeadingProps = {
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl'
   level?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
   regular?: boolean
   center?: boolean
@@ -47,6 +47,8 @@ const sizes = {
   xl: 'var(--typeScale-4)',
   '2xl': 'var(--typeScale-4_5)',
   '3xl': 'var(--typeScale-5)',
+  '4xl': 'var(--typeScale-6)',
+  '5xl': 'var(--typeScale-7)',
 }
 
 const lineHeights = {
@@ -57,6 +59,8 @@ const lineHeights = {
   xl: 'var(--lineHeight-1)',
   '2xl': 'var(--lineHeight-2_5)',
   '3xl': 'var(--lineHeight-2)',
+  '4xl': 'var(--lineHeight-2)',
+  '5xl': 'var(--lineHeight-2)',
 }
 
 const fontWeights = {
@@ -65,8 +69,10 @@ 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)',
+  '4xl': 'var(--fontWeight-regular)',
+  '5xl': 'var(--fontWeight-regular)',
 }
 
 export const Heading = forwardRef<HTMLDivElement, HeadingProps>(function Heading(