💚 Fix CI #2014

sanityv3/schemas/objects/background/imageBackground.tsx

@@ -1,6 +1,7 @@
-import { defineType, defineField } from 'sanity'
+import { defineType, defineField, Reference } from 'sanity'
 import { RadioIconSelector } from '../../components'
 import { ContentRightImage, ContentLeftImage, ContentCenterImage } from '../../../icons'
+import { ImageWithAlt } from '../imageWithAlt'
 
 export type ColorType = {
   title: string
@@ -35,13 +36,14 @@ export default defineType({
       title: 'Content Alignment',
       description: 'Select the content alignment on larger screens.',
       type: 'string',
+      initialValue: 'left',
       components: {
         input: function ({ onChange, value }: { onChange: any; value: string }) {
           return (
             <RadioIconSelector
               name="imageAlignmentSelector"
               options={contentAlignmentOptions}
-              defaultValue="left"
+              defaultValue={'left'}
               currentValue={value}
               onChange={onChange}
             />
@@ -62,14 +64,14 @@ export default defineType({
       useAnimation,
       contentAlignment,
     }: {
-      image: Reference
+      image: ImageWithAlt
       useAnimation: boolean
       contentAlignment: string
     }) {
       return {
         title: `Image background`,
-        subtitle: `${contentAlignment.toUpperCase() + ' aligned'} ${useAnimation ? ' | Animated ' : ''} content`,
-        media: image,
+        subtitle: `${contentAlignment.toUpperCase() + ' aligned '} ${useAnimation ? ' | Animated ' : ''} content`,
+        media: image.asset,
       }
     },
   },

web/components/src/Backgrounds/AnimationWrapper.tsx

@@ -0,0 +1,60 @@
+import styled, { css, keyframes } from 'styled-components'
+
+interface ContentProps {
+  contentAlignment: 'left' | 'right' | 'center'
+  useAnimation: boolean
+}
+
+const fadeIn = keyframes`
+  0% {
+    opacity: 0;
+  }
+  20% {
+    opacity: 1;
+  }
+  80% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+`
+
+const AnimationWrapper = styled.div<ContentProps>`
+  ${(props) =>
+    props.contentAlignment !== 'center' &&
+    css`
+      display: flex;
+      @media (min-width: 1200px) {
+        width: 40vw;
+      }
+      > section,
+      > div {
+        @media (min-width: 1200px) {
+          width: 100% !important;
+          padding: var(--space-3xLarge) var(--space-3xLarge);
+        }
+      }
+    `}
+
+  ${(props) =>
+    props.useAnimation &&
+    css`
+      padding-top: 50vh;
+      padding-bottom: 50vh;
+
+      view-timeline-name: --revealing-image;
+      view-timeline-axis: block;
+
+      /* Attach animation, linked to the View Timeline */
+      animation: linear ${fadeIn} both;
+      animation-timeline: --revealing-image;
+
+      /* Tweak range when effect should run */
+      animation-range: cover 30% cover 100%;
+    `}
+
+  display: flex;
+`
+
+export default AnimationWrapper

web/components/src/Backgrounds/BackgroundContainer.tsx

@@ -14,29 +14,27 @@ export const BackgroundContainer = forwardRef<HTMLDivElement, BackgroundContaine
   { background, style, children, className, ...rest },
   ref,
 ) {
-  const Container = ({ children }: { children: React.ReactNode }) => {
-    return background?.backgroundOption?.useSpecialBackground ? (
-      <ImageBackgroundContainer
-        ref={ref}
-        {...rest}
-        imageBackground={background?.backgroundOption?.background}
-        style={style}
-        className={className}
-      >
-        {children}
-      </ImageBackgroundContainer>
-    ) : (
-      <ColouredContainer
-        ref={ref}
-        {...rest}
-        background={background?.backgroundColor}
-        style={style}
-        className={className}
-      >
-        {children}
-      </ColouredContainer>
-    )
-  }
+  const useSpecialBackground = background?.backgroundOption?.useSpecialBackground || false
+  const backgroundImage = background?.backgroundOption?.background
+  const bgColor = background?.backgroundColor || 'White'
 
-  return <Container>{children}</Container>
+  return (
+    <>
+      {useSpecialBackground && backgroundImage ? (
+        <div ref={ref} style={style} className={className} {...rest}>
+          <ImageBackgroundContainer
+            image={backgroundImage.image}
+            useAnimation={backgroundImage.useAnimation}
+            contentAlignment={backgroundImage.contentAlignment}
+          >
+            {children}
+          </ImageBackgroundContainer>
+        </div>
+      ) : (
+        <ColouredContainer background={bgColor} style={style} className={className} {...rest}>
+          {children}{' '}
+        </ColouredContainer>
+      )}
+    </>
+  )
 })

web/components/src/Backgrounds/ColouredContainer.tsx

@@ -29,7 +29,7 @@ export const ColouredContainer = forwardRef<HTMLDivElement, ColouredContainerPro
 
   return (
     <ColourContainer
-      className={className + ` background${styleVariant}`}
+      className={`${className ?? ''} background${styleVariant}`}
       isInverted={isInverted}
       style={
         {

web/components/src/Backgrounds/ImageBackgroundContainer.tsx

@@ -1,24 +1,18 @@
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import { forwardRef, HTMLAttributes, CSSProperties } from 'react'
 import { useSanityLoader } from '../../../lib/hooks/useSanityLoader'
 import { ImageBackground } from '../../../types/types'
 import { normal, inverted } from '../../../styles/themes'
-import css from 'styled-jsx/css'
+import AnimationWrapper from './AnimationWrapper'
 
-type ImageBackgroundContainerProps = {
-  background?: BackgroundOptions
-} & HTMLAttributes<HTMLDivElement>
+type ImageBackgroundContainerProps = ImageBackground & HTMLAttributes<HTMLDivElement>
 
 type ImageContainerProps = {
   imageUrl?: string
   isInverted: boolean
+  contentAlignment: 'left' | 'right' | 'center'
 } & HTMLAttributes<HTMLDivElement>
 
-type ContentProps = {
-  useAnimation?: boolean
-  contentAlignment?: 'left' | 'center' | 'right'
-}
-
 const ImageContainer = styled.div<ImageContainerProps>`
   container: inline-size;
   position: relative;
@@ -30,87 +24,25 @@ const ImageContainer = styled.div<ImageContainerProps>`
   background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
     ${({ imageUrl }) => (imageUrl ? `url(${imageUrl})` : '')};
   ${({ isInverted }) => (isInverted ? inverted : normal)}
-`
-
-const DEFAULT_MAX_WIDTH = 1920
-
-const AnimationWrapper = styled.div<ContentProps>`
-  /* Create View Timeline */
-  ${(props) =>
-    props.contentAlignment == 'right' &&
-    css`
-      @media (min-width: 1200px) {
-        width: 40vw;
-      }
-      > section,
-      > div {
-        @media (min-width: 1200px) {
-          margin-right: 0;
-          width: 100% !important;
-          padding: var(--space-3xLarge) var(--space-3xLarge);
-        }
-      }
-    `}
-
   ${(props) =>
-    props.useAnimation &&
-    css`
-      padding-top: 50vh;
-      padding-bottom: 50vh;
-
-      view-timeline-name: --revealing-image;
-      view-timeline-axis: block;
-
-      /* Attach animation, linked to the  View Timeline */
-      animation: linear fadeIn both;
-      animation-timeline: --revealing-image;
-
-      /* Tweak range when effect should run*/
-      animation-range: cover 30% cover 100%;
-
-      @keyframes fadeIn {
-        0% {
-          opacity: 0;
-        }
-        20% {
-          opacity: 1;
-        }
-        80% {
-          opacity: 1;
-        }
-        100% {
-          opacity: 0;
-        }
-      }
-    `}
-    
-
-  
-    ${(props) =>
-    props.contentAlignment == 'left' &&
+    props.contentAlignment !== 'center' &&
     css`
+      display: flex;
       @media (min-width: 1200px) {
-        width: 40vw;
-      }
-      > section,
-      > div {
-        @media (min-width: 1200px) {
-          width: 100%;
-          margin-left: 0;
-          padding: var(--space-3xLarge) var(--space-3xLarge);
-        }
+        ${props.contentAlignment === 'right' ? 'justify-content:end;' : 'justify-content:start;'};
       }
     `}
-
-  display: flex;
 `
-export const ImageBackgroundContainer = forwardRef<HTMLDivElement, ImageBackgroundContainerProps>(
-  function ImageBackgroundContainer({ imageBackground, style, children, className, ...rest }, ref) {
-    const props = useSanityLoader(imageBackground.image, DEFAULT_MAX_WIDTH, undefined)
-    const src = props?.src
 
-    console.log(imageBackground.contentAlignment)
+const DEFAULT_MAX_WIDTH = 1920
 
+export const ImageBackgroundContainer = forwardRef<HTMLDivElement, ImageBackgroundContainerProps>(
+  function ImageBackgroundContainer(
+    { image, useAnimation, contentAlignment, style, children, className, ...rest },
+    ref,
+  ) {
+    const props = useSanityLoader(image, DEFAULT_MAX_WIDTH, undefined)
+    const src = props.src
     return (
       <ImageContainer
         style={
@@ -124,11 +56,9 @@ export const ImageBackgroundContainer = forwardRef<HTMLDivElement, ImageBackgrou
         ref={ref}
         {...rest}
         className={className}
+        contentAlignment={contentAlignment}
       >
-        <AnimationWrapper
-          useAnimation={imageBackground?.useAnimation === true}
-          contentAlignment={imageBackground.contentAlignment}
-        >
+        <AnimationWrapper useAnimation={useAnimation === true} contentAlignment={contentAlignment}>
           {children}
         </AnimationWrapper>
       </ImageContainer>

web/components/utils/backgroundColours.tsx

@@ -13,14 +13,35 @@ export type StyleVariants =
   | '--bg-mid-blue'
   | '--bg-slate-blue-95'
 
+function isBackgroundColour(title: any): title is BackgroundColours {
+  return [
+    'White',
+    'Moss Green',
+    'Moss Green Light',
+    'Spruce Wood',
+    'Mist Blue',
+    'Slate Blue',
+    'Mid Green',
+    'Mid Yellow',
+    'Mid Blue',
+    'Mid Orange',
+    'Slate Blue 95',
+  ].includes(title)
+}
+
 function getContainerColor(backgroundTitle?: BackgroundColours) {
   let styleVariant: StyleVariants = '--bg-default'
-  if (backgroundTitle === 'Slate Blue') {
-    styleVariant = '--bg-mid-blue'
-  } else if (backgroundTitle === 'White') {
-    styleVariant = '--bg-default'
-  } else {
-    styleVariant = `--bg-${backgroundTitle?.replace(/\s/g, '-').toLowerCase()}` as StyleVariants
+  if (backgroundTitle && isBackgroundColour(backgroundTitle))
+    if (backgroundTitle === 'Slate Blue') {
+      styleVariant = '--bg-mid-blue'
+    } else if (backgroundTitle === 'White') {
+      styleVariant = '--bg-default'
+    } else {
+      styleVariant = `--bg-${backgroundTitle?.replace(/\s/g, '-').toLowerCase()}` as StyleVariants
+    }
+  else {
+    console.log(backgroundTitle + ' is not the correct background color')
+    console.log(backgroundTitle)
   }
   return styleVariant
 }

web/lib/queries/common/eventContentFields.ts

@@ -2,6 +2,7 @@ import markDefs from './blockEditorMarks'
 import linkSelectorFields from './actions/linkSelectorFields'
 import downloadableFileFields from './actions/downloadableFileFields'
 import downloadableImageFields from './actions/downloadableImageFields'
+import background from './background'
 
 export const eventContentFields = /* groq */ `
   location,
@@ -22,8 +23,8 @@ export const eventContentFields = /* groq */ `
       "cookiePolicy": coalesce(cookiePolicy, 'none'),
       "designOptions": {
         "aspectRatio": coalesce(aspectRatio, '16:9'),
-        "background": coalesce(background.title, 'none'),
         height,
+        ${background}
       },
     },
   },
@@ -34,8 +35,8 @@ export const eventContentFields = /* groq */ `
       "cookiePolicy": coalesce(cookiePolicy, 'none'),
       "designOptions": {
         "aspectRatio": coalesce(aspectRatio, '16:9'),
-        "background": coalesce(background.title, 'none'),
         height,
+        ${background}
       },
     },
   "promotedPeople": {

web/lib/queries/common/imageCarouselFields.ts

@@ -1,3 +1,5 @@
+import background from './background'
+
 export const imageCarouselFields = /* groq */ `
     "id": _key,
     "type": _type,
@@ -8,6 +10,6 @@ export const imageCarouselFields = /* groq */ `
       delay
     },
     "designOptions": {
-      "background": coalesce(background.title, 'none'),
+     ${background}
     },
 `