Merge branch 'bose/2254' into staging

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:

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' },
+        { type: 'grid' },
+        { type: 'campaignBanner' },
         Flags.HAS_FORMS && { type: 'form' },
         Flags.HAS_NEWS && { type: 'newsList' },
         { type: 'stockValuesApi' },

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
@@ -48,14 +50,22 @@ const SmallTextRender = (props: any) => {
   const { children } = props
   return <span style={{ fontSize: '0.8rem' }}>{children}</span>
 }
+const LargeTextRender = (props: any) => {
+  const { children } = props
+  return <span style={{ fontSize: `${em(36, 16)}`, fontWeight: '600' }}>{children}</span>
+}
+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)

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

sanityv3/schemas/objects/campaignBanner/index.tsx

@@ -0,0 +1,130 @@
+/* eslint-disable react/display-name */
+import blocksToText from '../../../helpers/blocksToText'
+import { configureBlockContent } from '../../editors'
+import { validateCharCounterEditor } from '../../validations/validateCharCounterEditor'
+
+import type { Image, PortableTextBlock, Reference, Rule, ValidationContext } from 'sanity'
+import type { ColorSelectorValue } from '../../components/ColorSelector'
+
+const blockConfigTitle = {
+  h2: false,
+  h3: false,
+  h4: false,
+  internalLink: false,
+  externalLink: false,
+  attachment: false,
+  lists: false,
+  smallText: true,
+  largeText: true,
+  extraLargeText: true,
+}
+const blockConfigContent = {
+  h2: false,
+  h3: false,
+  h4: false,
+  internalLink: false,
+  externalLink: false,
+  attachment: false,
+  lists: false,
+  smallText: true,
+}
+
+const blockTitleType = configureBlockContent({ ...blockConfigTitle })
+const blockContentType = configureBlockContent({ ...blockConfigContent })
+
+export type CampaignBanner = {
+  _type: 'campaignBanner'
+  overline?: string
+  title?: PortableTextBlock[]
+  text?: PortableTextBlock[]
+  image: Image
+  imagePosition?: string
+  imageSize?: string
+  background?: ColorSelectorValue
+}
+
+export default {
+  name: 'campaignBanner',
+  title: 'Campaign Banner',
+  type: 'object',
+  localize: true,
+  fieldsets: [
+    {
+      title: 'Background image',
+      name: 'backgroundImage',
+      description: 'Settings for the background image',
+      options: {
+        collapsible: true,
+        collapsed: true,
+      },
+    },
+  ],
+  fields: [
+    {
+      name: 'title',
+      title: 'Title content',
+      type: 'array',
+      of: [blockTitleType],
+      validation: (Rule: Rule) =>
+        Rule.custom((value: PortableTextBlock[], ctx: ValidationContext) => {
+          return validateCharCounterEditor(value, 600)
+        }).warning(),
+    },
+    {
+      name: 'text',
+      title: 'Text content',
+      type: 'array',
+      of: [blockContentType],
+      validation: (Rule: Rule) =>
+        Rule.custom((value: PortableTextBlock[], ctx: ValidationContext) => {
+          return validateCharCounterEditor(value, 600)
+        }).warning(),
+    },
+    {
+      title: 'Image',
+      name: 'backgroundImage',
+      type: 'image',
+      options: {
+        hotspot: true,
+        collapsed: false,
+      },
+      fieldset: 'backgroundImage',
+    },
+    {
+      name: 'attribution',
+      title: 'Credit',
+      description: '',
+      type: 'string',
+    },
+    {
+      title: 'Apply light gradient',
+      name: 'useLightOverlay',
+      type: 'boolean',
+      description: 'Applies a white gradient over semi transparent background image.',
+      fieldset: 'backgroundImage',
+    },
+    {
+      title: 'Background Color',
+      description: 'Fallback if no background image. Default is white.',
+      name: 'backgroundColor',
+      type: 'colorlist',
+      fieldset: 'backgroundImage',
+    },
+  ],
+  preview: {
+    select: {
+      title: 'title',
+      text: 'text',
+      image: 'backgroundImage.asset',
+    },
+    prepare({ title, text, image }: { title: PortableTextBlock[]; text: PortableTextBlock[]; image: Reference }) {
+      const plainTitle = blocksToText(title || text)
+
+      return {
+        title: plainTitle || 'Missing title/content',
+        subtitle: 'Campaign banner component',
+        media: image,
+      }
+    },
+  },
+}