Merge branch 'bose/2254' into staging

sanityv3/schemas/objects/campaignBanner/index.tsx

@@ -70,16 +70,6 @@ export default {
           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',
@@ -90,19 +80,6 @@ export default {
       },
       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.',

web/components/src/Backgrounds/ColouredContainer.tsx

@@ -25,7 +25,7 @@ const ColourContainer = styled.div<ColourContainerProps>`
 `
 
 export const ColouredContainer = forwardRef<HTMLDivElement, ColouredContainerProps>(function BackgroundContainer(
-  { backgroundColor = 'White', backgroundUtility, dark, style, children, className, ...rest },
+  { backgroundColor = 'White', backgroundUtility, dark, style, children, className = '', ...rest },
   ref,
 ) {
   const styleVariant = getContainerColor(backgroundColor)
@@ -38,7 +38,7 @@ export const ColouredContainer = forwardRef<HTMLDivElement, ColouredContainerPro
   return (
     <ColourContainer
       className={twMerge(
-        `${className ?? ''} background${styleVariant} ${isDark ? 'dark' : ''} ${
+        `${className} background${styleVariant} ${isDark ? 'dark' : ''} ${
           backgroundUtility ? colorKeyToUtilityMap[backgroundUtility]?.background : ''
         }`,
       )}

web/lib/queries/common/pageContentFields.ts

@@ -554,16 +554,19 @@ _type == "keyNumbers" =>{
   _type == "campaignBanner" => {
     "type": _type,
     "id": _key,
-    title,
-    "text": text[]{..., ${markDefs}},
-    "backgroundImage": backgroundImage {
+    "title": title[]{..., ${markDefs}},
+    "designOptions":{
+      "background": {
+        "backgroundImage": backgroundImage {
       ...,
       "extension": asset-> extension
+      },
+      "backgroundColor": coalesce(backgroundColor.title, 'White'),
+      "dark": coalesce(backgroundColor.dark, false),
+      "backgroundUtility":coalesce(backgroundColor.key, ""),
+      }
     },
-    attribution,
-    useLightOverlay,
-    "backgroundColor": coalesce(backgroundColor.title, 'White'),
-    "backgroundUtility":coalesce(backgroundColor.key, ""),
+
   },
 `
 

web/pageComponents/shared/VideoPlayer.tsx

@@ -186,6 +186,7 @@ const VideoPlayer = ({
           </ButtonWrapper>
         )}
         <VideoJsComponent video={video} designOptions={designOptions} videoControls={videoControls} height={height} />
+        <VideoJsComponent video={video} designOptions={designOptions} videoControls={videoControls} height={height} />
       </div>
     </BackgroundContainer>
   )

web/pageComponents/shared/portableText/Blocks.tsx

@@ -30,10 +30,10 @@ type TypeProps = {
 } */
 const defaultBlocks = (className?: string): BlockType => {
   return {
-    smallText: ({ children }: TypeProps) => <span className="text-sm">{children}</span>,
-    largeText: ({ children }: TypeProps) => <span className="text-2xl">{children}</span>,
+    smallText: ({ children }: TypeProps) => <p className="text-sm">{children}</p>,
+    largeText: ({ children }: TypeProps) => <p className="text-2xl">{children}</p>,
     extraLargeText: ({ children }: TypeProps) => {
-      return <span className={twMerge(`text-9xl font-semibold`, className)}>{children}</span>
+      return <p className={twMerge(`text-9xl font-semibold`, className)}>{children}</p>
     },
   }
 }

web/pageComponents/shared/textTeaser/theme.ts

@@ -3,9 +3,9 @@ import { BackgroundColours } from '../../../types'
 
 export type ThemeColors = {
   background: BackgroundColours
-  backgroundUtility?: keyof ColorKeyTokens
   highlight?: string
-  textUtility?: keyof ColorKeyTokens
+  backgroundUtility?: string
+  textUtility?: string
   dark?: boolean
 }
 //Keep in sync with sanityv3/schemas/components/ThemeSelector/themeColors
@@ -109,25 +109,25 @@ export const getColorForTheme = (pattern: number): ThemeColors => {
     case 8:
       return {
         background: 'Mid Blue',
-        backgroundUtility: 'blue-50',
+        backgroundUtility: 'bg-blue-50',
         highlight: 'var(--bg-white)',
-        textUtility: 'white-100',
+        textUtility: 'text-white-100',
       }
     case 9:
       return { background: 'Mid Green', highlight: 'black' }
     case 10:
       return {
         background: 'Mist Blue',
-        backgroundUtility: 'mist-blue-100',
-        textUtility: 'blue-50',
+        backgroundUtility: 'bg-mist-blue-100',
+        textUtility: 'text-blue-50',
       }
 
     case 0:
     default:
       return {
         background: 'White',
-        backgroundUtility: 'white-100',
-        textUtility: 'energy-red-100',
+        backgroundUtility: 'bg-white-100',
+        textUtility: 'text-energy-red-100',
       }
   }
 }

web/sections/CallToActions/index.tsx

@@ -6,7 +6,7 @@ import { getLocaleFromName } from '../../lib/localization'
 
 type CallToActionsProps = {
   callToActions: LinkData[]
-  overrideButtonStyle: boolean
+  overrideButtonStyle?: boolean
   splitList?: boolean
 }
 

web/sections/CampaignBanner/CampaignBanner.tsx

@@ -6,6 +6,7 @@ import Blocks from '../../pageComponents/shared/portableText/Blocks'
 import { PortableTextBlock } from '@portabletext/types'
 import isEmpty from '../../pageComponents/shared/portableText/helpers/isEmpty'
 import { BlockType } from '../../pageComponents/shared/portableText/helpers/defaultSerializers'
+import { colorKeyToUtilityMap } from '../../styles/colorKeyToUtilityMap'
 
 const DEFAULT_MAX_WIDTH = 1920
 
@@ -43,66 +44,45 @@ export type CampaignBannerProps = {
 } & HTMLAttributes<HTMLElement>
 
 const CampaignBanner = forwardRef<HTMLElement, CampaignBannerProps>(function CampaignBanner({ data, className }, ref) {
-  const {
-    title,
-    text,
-    backgroundImage,
-    backgroundColor,
-    backgroundUtility,
-    useLightOverlay = false,
-    attribution,
-  } = data
-  console.log('CampaignBanner', data)
+  const { title, designOptions } = data
+  const { background } = designOptions
+  const { backgroundImage, backgroundUtility, dark } = background
+
   const props = useSanityLoader(backgroundImage, DEFAULT_MAX_WIDTH, undefined)
   const src = props?.src
 
+  const bgImageClassNames = `[container:inline-size]
+  relative
+  w-full
+  2xl:aspect-[10/3]
+  bg-local
+  bg-center
+  bg-no-repeat
+  bg-cover
+  mb-20
+`
+
+  const bgColor = backgroundUtility ? colorKeyToUtilityMap[backgroundUtility].background : ''
   const backgroundClassNames = twMerge(
-    `[container:inline-size]
-      relative
-      ${useLightOverlay ? '' : 'dark'}
-      w-full
-      2xl:aspect-[10/3]
-      bg-local
-      bg-center
-      bg-no-repeat
-      bg-cover
-      mb-40
-    `,
+    `${dark} ${!backgroundImage ? ` pt-12 pb-24 ${bgColor}` : ''} 
+    ${backgroundImage ? bgImageClassNames : ``}
+  `,
     className,
   )
 
-  const scrimGradient = useLightOverlay ? `white-center-gradient ` : `black-center-gradient`
-
   return (
     <section
       ref={ref}
       className={`${backgroundClassNames}`}
-      style={{
-        backgroundImage: `url(${src})`,
-      }}
+      {...(backgroundImage && {
+        style: { backgroundImage: `url(${src})` },
+      })}
     >
-      {/** Scrim */}
-      <div
-        className={`
-          pt-24
-          pb-12
-          h-full
-          relative
-          `}
-      >
-        <div
-          className={`px-layout-sm ${
-            text ? `grid grid-cols-[60%_40%] grid-rows-[1fr_1fr_1fr] justify-between gap-40` : 'w-full h-full'
-          }`}
-        >
-          <div className="flex justify-start row-start-1 row-span-2">
-            <h2 className="">
-              <Blocks value={title} blocks={campaignTitleBlocks} className="w-fit max-w-prose text-energy-red-100" />
-            </h2>
-          </div>
-          <div className="flex justify-end items-center row-start-2 row-span-2">
-            <Blocks value={text} className="bg-white-100 px-2 py-4 h-fit" />
-          </div>
+      <div className={`px-layout-sm w-full h-full`}>
+        <div className="flex justify-start row-start-1 row-span-2">
+          <h2 className="">
+            <Blocks value={title} blocks={campaignTitleBlocks} className="w-fit max-w-prose text-energy-red-100" />
+          </h2>
         </div>
       </div>
     </section>

web/sections/Grid/GridFigure.tsx

@@ -8,7 +8,6 @@ type GridFigureProps = {
 }
 
 const GridFigure = ({ data }: GridFigureProps) => {
-  console.log('data', data)
   const { figure, designOptions } = data
   const { image, caption, attribution } = figure
   return (

web/sections/Grid/GridLinkArrow.tsx

@@ -6,36 +6,26 @@ import { getLocaleFromName } from '../../lib/localization'
 import { ArrowRight } from '../../icons'
 import { LinkData } from '../../types/types'
 import { getColorForTheme } from '../../pageComponents/shared/textTeaser/theme'
-import { colorKeyToUtilityMap } from '../../styles/colorKeyToUtilityMap'
-
-//type Theme = 'redOnWhite' | 'whiteOnDarkBlue' | 'darkBlueOnLightBlue'
 
 type GridLinkArrowProps = {
-  theme: string
+  theme: number
   action?: LinkData
   className?: string
 }
 
 const GridLinkArrow = ({ theme, action, className }: GridLinkArrowProps) => {
   const url = action && getUrlFromAction(action)
-  //@ts-ignore
-  const { backgroundUtility, textUtility } = getColorForTheme(theme)
-  let bgClassName = ''
-  let textClassName = ''
-  if (theme !== null) {
-    //@ts-ignore
-    bgClassName = colorKeyToUtilityMap[backgroundUtility]?.background
-    //@ts-ignore
-    textClassName = colorKeyToUtilityMap[textUtility]?.text
-  }
+  const { backgroundUtility, textUtility } = getColorForTheme(theme ?? 0)
 
   const variantClassName = () => {
-    switch (backgroundUtility) {
-      case 'white-100':
+    switch (theme) {
+      case 0:
         return 'text-energy-red-100 hover:bg-energy-red-100 hover:text-white-100 focus-visible:bg-energy-red-100 focus-visible:text-white-100'
-      case 'mist-blue-100':
-        return `${textClassName} hover:bg-white-100 hover:${textClassName} focus-visible:bg-white-100 focus-visible:${textClassName}`
-      case 'blue-50':
+      case 10:
+        return `${theme !== null ? textUtility : ''} hover:bg-white-100 hover:${
+          theme !== null ? textUtility : ''
+        } focus-visible:bg-white-100 focus-visible:${theme !== null ? textUtility : ''}`
+      case 80:
         return `text-white-100 hover:bg-white-100 hover:text-blue-50 focus-visible:bg-white-100 focus-visible:text-blue-50`
       default:
         return 'text-white-100 hover:bg-white-100 hover:text-slate-80 focus-visible:bg-white-100 focus-visible:text-slate-80'

web/sections/Grid/GridTeaser.tsx

@@ -18,20 +18,15 @@ export type GridTeaserProps = {
 } & HTMLAttributes<HTMLDivElement>
 
 export const GridTeaser = forwardRef<HTMLDivElement, GridTeaserProps>(function GridTeaser({ data, rowType }, ref) {
-  const { image, action, content, quote, author, authorTitle, theme, background, imagePosition } = data
+  const { image, action, content, quote, author, authorTitle, theme, imagePosition } = data
   const imageSrc = urlFor(image).size(1200, 800).auto('format').toString()
   const altTag = image?.isDecorative ? '' : image?.alt || ''
-  //@ts-ignore
-  const { backgroundUtility, textUtility } = getColorForTheme(theme)
 
-  let bgClassName = ''
-  let textClassName = ''
-  if (theme !== null) {
-    //@ts-ignore
-    bgClassName = colorKeyToUtilityMap[backgroundUtility]?.background
-    //@ts-ignore
-    textClassName = colorKeyToUtilityMap[textUtility]?.text
-  }
+  const { backgroundUtility, textUtility } = getColorForTheme(theme ?? 0)
+  console.log('theme', theme)
+  console.log('backgroundUtility', backgroundUtility)
+  console.log('textUtility', textUtility)
+
   const aligment = `${imagePosition === 'left' ? '' : '-order-1 text-left'}`
 
   return (
@@ -43,7 +38,7 @@ export const GridTeaser = forwardRef<HTMLDivElement, GridTeaserProps>(function G
       grid
       grid-rows-[45%_55%]
       ${String(rowType) === 'span3' ? 'lg:grid-cols-[40%_60%] grid-rows-1' : ''}
-      ${bgClassName}
+      ${theme !== null ? backgroundUtility : ''}
       `)}
     >
       {image && (
@@ -61,7 +56,7 @@ export const GridTeaser = forwardRef<HTMLDivElement, GridTeaserProps>(function G
       <div
         className={`pt-6 pb-6 ${rowType !== 'span3' ? 'lg:pt-8 lg:pb-0' : 'lg:pt-16'} flex flex-col ${
           action ? 'justify-between' : ''
-        } ${textClassName} `}
+        } ${theme !== null ? textUtility : ''} `}
       >
         <div className="px-10 flex flex-col gap-6">
           {content && (