✨ Add campaign mode #2254 (#2298)

* ♿️ Fix site improve warning #2185 * ✨ Video-js #2185 * Some more fixes * Corrections * 🐛 Typo #2185 * clean up * Missing prop * 🚨 Lint issues #2185 * 💄 Adjust Looping video thumbnail #2185 * Fix spread #2185 * 🎨 add campaign components * 🎨 update * 🎨 update types and theme * 🎨 update * 🐛 take back p on special blocks * 🎨 improve campaignbanner * 🎨 refactor grid components * Tailwind refactor and events gtm #2268 * 🔊 Add logs #2815 * 🔊 Logs * 🔊 Add logs #2185 * LOgs * 🎨 update big text for text block and brand videoplayer * 🐛 remove zindex on play button to not lay over header * 🎨 tweaks * Logs #2185 * 🔇 Remove logs and disable consent #2185 * Test log #2185 * 🔇 Remove logs and enable consent #2185 * 🎨 allow two links in teaser and choose style * 🎨 remove console log * 🎨 remove console * 🎨 update components * 🐛 fix some missing themes and diverse * 🎨 some cleanup and refactoring * 🐛 fix heading issue with accordion to fix build * 🎨 adjustments * 🎨 improvements to grid * 🐛 fix banner * 🎨 update to w-fit not max --------- Co-authored-by: Padmaja <[email protected]>
equinor · May 28, 2024 · c67d50b · c67d50b
1 parent c377348
commit c67d50b
Show file tree

Hide file tree

Showing 57 changed files with 1,853 additions and 141 deletions.
diff --git a/FeatureFlags.js b/FeatureFlags.js
@@ -47,6 +47,7 @@ const MAGAZINE = [...GLOBAL_PROD, ...GLOBAL_DEV]
 /* Allows same slug for different languages */
 const SAME_SLUG = [...GLOBAL_DEV, 'japan', 'southkorea']
 const LINE_BREAK_TYPO = ['southkorea']
+const CAMPAIGN = [...GLOBAL_PROD, ...GLOBAL_DEV]
 
 /**
  * @param {string} dataset
@@ -72,4 +73,5 @@ export default (dataset) => ({
   IS_GLOBAL_PROD: GLOBAL_PROD.includes(dataset),
   IS_DEV: GLOBAL_DEV.includes(dataset),
   IS_SATELLITE: SATELLITES.includes(dataset),
+  HAS_CAMPAIGN_BLOCKS: CAMPAIGN.includes(dataset),
 })
diff --git a/sanityv3/schemas/components/ThemeSelector/themeColors.ts b/sanityv3/schemas/components/ThemeSelector/themeColors.ts
@@ -10,7 +10,9 @@ export const themeColors = [
   { title: 'Mid Orange', value: 5 },
   { title: 'Mid Blue 1', value: 6 },
   { title: 'Mid Blue 2', value: 7 },
-  { title: 'Mid Green', value: 8 },
+  { title: 'Mid Blue 3', value: 8 },
+  { title: 'Mid Green', value: 9 },
+  { title: 'Mist Blue 2', value: 10 },
 ]
 
 //Keep in sync with web/pageComponents/shared/textTeaser/theme
@@ -91,13 +93,35 @@ export const getColorForTheme = (pattern: number) => {
         },
       }
     case 8:
+      return {
+        background: {
+          value: defaultColors[6].value,
+          key: defaultColors[6].key,
+        },
+        highlight: {
+          value: defaultColors[0].value,
+          key: defaultColors[0].key,
+        },
+      }
+    case 9:
       return {
         background: {
           value: defaultColors[7].value,
           key: defaultColors[7].key,
         },
         highlight: {},
       }
+    case 10:
+      return {
+        background: {
+          value: defaultColors[3].value,
+          key: defaultColors[3].key,
+        },
+        highlight: {
+          value: defaultColors[6].value,
+          key: defaultColors[6].key,
+        },
+      }
 
     case 0:
     default:

diff --git a/sanityv3/schemas/documents/header/sharedHeaderFields.ts b/sanityv3/schemas/documents/header/sharedHeaderFields.ts
@@ -42,7 +42,7 @@ const heroBigTitleDefault = {
   of: [
     configureTitleBlockContent({
       highlight: true,
-      styles: defaultBannerBigTitletStyle,
+      extendedStyles: defaultBannerBigTitletStyle,
     }),
   ],
   hidden: ({ parent }: DocumentType) => !parent.isBigTitle || parent.heroType !== HeroTypes.DEFAULT,
@@ -64,7 +64,7 @@ const heroBigTitleFiftyFifty = {
   title: 'Hero Title',
   type: 'array',
   fieldset: 'header',
-  of: [configureTitleBlockContent({ styles: fiftyFiftyBigTitleStyle })],
+  of: [configureTitleBlockContent({ extendedStyles: fiftyFiftyBigTitleStyle })],
   hidden: ({ parent }: DocumentType) => !parent.isBigTitle || parent.heroType !== HeroTypes.FIFTY_FIFTY,
   validation: (Rule: Rule) =>
     Rule.custom((value: PortableTextBlock[], ctx: ValidationContext) =>

diff --git a/sanityv3/schemas/documents/page.ts b/sanityv3/schemas/documents/page.ts
@@ -43,6 +43,12 @@ export default {
       fieldset: 'metadata',
     },
     ...sharedHeroFields,
+    {
+      title: 'Is Campain',
+      name: 'isCampaign',
+      description: 'Set this to true if the page should be treated as campaign. the header title h1 will be hidden.',
+      type: 'boolean',
+    },
     {
       name: 'content',
       type: 'array',
@@ -68,6 +74,8 @@ export default {
         { type: 'videoPlayer' },
         { type: 'videoPlayerCarousel' },
         { type: 'table' },
+        Flags.HAS_CAMPAIGN_BLOCKS && { type: 'grid' },
+        Flags.HAS_CAMPAIGN_BLOCKS && { type: 'campaignBanner' },
         Flags.HAS_FORMS && { type: 'form' },
         Flags.HAS_NEWS && { type: 'newsList' },
         { type: 'stockValuesApi' },

diff --git a/sanityv3/schemas/editors/blockContentType.tsx b/sanityv3/schemas/editors/blockContentType.tsx
@@ -19,6 +19,8 @@ export type BlockContentProps = {
   attachment?: boolean
   lists?: boolean
   smallText?: boolean
+  largeText?: boolean
+  extraLargeText?: boolean
   highlight?: boolean
   normalTextOverride?: {
     title: string
@@ -42,20 +44,28 @@ const round = (num: number) =>
     .toFixed(7)
     .replace(/(\.[0-9]+?)0+$/, '$1')
     .replace(/\.0$/, '')
-const em = (px: number, base: number) => `${round(px / base)}em`
+export const em = (px: number, base: number) => `${round(px / base)}em`
 
 const SmallTextRender = (props: any) => {
   const { children } = props
   return <span style={{ fontSize: '0.8rem' }}>{children}</span>
 }
+export const LargeTextRender = (props: any) => {
+  const { children } = props
+  return <span style={{ fontSize: `${em(36, 16)}`, fontWeight: '600' }}>{children}</span>
+}
+export const ExtraLargeTextRender = (props: any) => {
+  const { children } = props
+  return <span style={{ fontSize: `${em(56, 16)}`, fontWeight: '600' }}>{children}</span>
+}
 const Level2BaseStyle = (props: any) => {
   const { children } = props
-  return <h2 style={{ fontSize: em(18, 16), fontWeight: '600' }}>{children} </h2>
+  return <h2 style={{ fontSize: `${em(18, 16)}`, fontWeight: '600' }}>{children} </h2>
 }
 
 const Level3BaseStyle = (props: any) => {
   const { children } = props
-  return <h3 style={{ fontSize: em(16, 16), fontWeight: '600' }}>{children} </h3>
+  return <h3 style={{ fontSize: `${em(16, 16)}`, fontWeight: '600' }}>{children} </h3>
 }
 
 // H1 not allowed in block content since it should be a document title.
@@ -70,6 +80,8 @@ export const configureBlockContent = (options: BlockContentProps = {}): BlockDef
     externalLink = true,
     attachment = false,
     lists = true,
+    largeText = false,
+    extraLargeText = false,
     smallText = true,
     highlight = false,
     extendedStyles = [],
@@ -119,6 +131,16 @@ export const configureBlockContent = (options: BlockContentProps = {}): BlockDef
     value: 'smallText',
     component: SmallTextRender,
   }
+  const largeTextConfig = {
+    title: 'Large text',
+    value: 'largeText',
+    component: LargeTextRender,
+  }
+  const extraLargeTextConfig = {
+    title: 'Extra large text',
+    value: 'extraLargeText',
+    component: ExtraLargeTextRender,
+  }
   const externalLinkConfig = {
     name: 'link',
     type: 'object',
@@ -267,6 +289,12 @@ export const configureBlockContent = (options: BlockContentProps = {}): BlockDef
   if (smallText) {
     config?.styles?.push(smallTextConfig)
   }
+  if (largeText) {
+    config?.styles?.push(largeTextConfig)
+  }
+  if (extraLargeText) {
+    config?.styles?.push(extraLargeTextConfig)
+  }
 
   if (externalLink) {
     config?.marks?.annotations?.push(externalLinkConfig)

diff --git a/sanityv3/schemas/editors/titleEditorContentType.tsx b/sanityv3/schemas/editors/titleEditorContentType.tsx
@@ -4,30 +4,37 @@ import { StrikethroughIcon } from '@sanity/icons'
 import { BlockDefinition, BlockStyleDefinition } from 'sanity'
 import { format_color_text } from '@equinor/eds-icons'
 import { defaultColors } from '../defaultColors'
+import { em, ExtraLargeTextRender, LargeTextRender } from './blockContentType'
 
 export type TitleContentProps = {
-  styles?: BlockStyleDefinition[]
+  extendedStyles?: BlockStyleDefinition[]
   highlight?: boolean
   highlightTitle?: string
+  largeText?: boolean
+  extraLargeText?: boolean
+  twoXLText?: boolean
+}
+
+const TwoXLTextRender = (props: any) => {
+  const { children } = props
+  return <span style={{ fontSize: `${em(64, 16)}`, fontWeight: '400' }}>{children}</span>
 }
 
 // TODO: Add relevant styles for titles (i.e. highlighted text)
-export const configureTitleBlockContent = (
-  options: TitleContentProps = {
-    styles: [
-      {
-        title: 'Normal',
-        value: 'normal',
-      },
-    ],
-  },
-): BlockDefinition => {
-  const { highlight = false, styles, highlightTitle = 'Highlight' } = options
+export const configureTitleBlockContent = (options: TitleContentProps = {}): BlockDefinition => {
+  const {
+    highlight = false,
+    highlightTitle = 'Highlight',
+    largeText = false,
+    extraLargeText = false,
+    twoXLText = false,
+    extendedStyles = [],
+  } = options
 
   const config: BlockDefinition = {
     type: 'block',
     name: 'block',
-    styles: styles,
+    styles: [{ title: 'Normal', value: 'normal' }, ...extendedStyles],
     lists: [],
     marks: {
       decorators: [
@@ -56,6 +63,22 @@ export const configureTitleBlockContent = (
     },
   }
 
+  const largeTextConfig = {
+    title: 'Large text',
+    value: 'largeText',
+    component: LargeTextRender,
+  }
+  const extraLargeTextConfig = {
+    title: 'Extra large text',
+    value: 'extraLargeText',
+    component: ExtraLargeTextRender,
+  }
+  const twoXLTextConfig = {
+    title: '2XL text',
+    value: 'twoXLText',
+    component: TwoXLTextRender,
+  }
+
   const textColorConfig = {
     title: highlightTitle,
     value: 'highlight',
@@ -68,6 +91,15 @@ export const configureTitleBlockContent = (
   if (highlight) {
     config.marks?.decorators?.push(textColorConfig)
   }
+  if (largeText) {
+    config?.styles?.push(largeTextConfig)
+  }
+  if (extraLargeText) {
+    config?.styles?.push(extraLargeTextConfig)
+  }
+  if (twoXLText) {
+    config?.styles?.push(twoXLTextConfig)
+  }
 
   return config
 }

diff --git a/sanityv3/schemas/index.js b/sanityv3/schemas/index.js
@@ -94,6 +94,14 @@ import card from './objects/card'
 import cardsList from './objects/cardsList'
 import backgroundOptions from './objects/background/backgroundOptions'
 import imageBackground from './objects/background/imageBackground'
+import grid from './objects/grid/index'
+import span3 from './objects/grid/rowTypes/span3'
+import span2and1 from './objects/grid/rowTypes/span2and1'
+import gridTextBlock from './objects/grid/cellTypes/gridTextBlock'
+import campaignBanner from './objects/campaignBanner'
+import gridTeaser from './objects/grid/cellTypes/gridTeaser'
+import threeColumns from './objects/grid/rowTypes/3columns'
+import gridColorTheme from './objects/grid/theme'
 
 const routeSchemas = languages.map(({ name, title }) => {
   return route(name, title)
@@ -182,6 +190,14 @@ const RemainingSchemas = [
   cardsList,
   backgroundOptions,
   imageBackground,
+  grid,
+  span3,
+  span2and1,
+  gridTextBlock,
+  campaignBanner,
+  gridTeaser,
+  threeColumns,
+  gridColorTheme,
 ]
 
 // Then we give our schema to the builder and provide the result to Sanity