Fix type error #2014

equinor · Mar 5, 2024 · 3f5859f · 3f5859f
1 parent 00d53c8
commit 3f5859f
Show file tree

Hide file tree

Showing 20 changed files with 32 additions and 24 deletions.
diff --git a/web/lib/hooks/useSharedTitleStyles.ts b/web/lib/hooks/useSharedTitleStyles.ts
@@ -11,7 +11,9 @@ const BG_DEFAULT = 'White'
 
 function useSharedTitleStyles(heroType?: HeroTypes, nextContent?: ContentType): TitleStyles {
   const defaultValue: TitleStyles = {
-    background: BG_DEFAULT,
+    background: {
+      backgroundColor: BG_DEFAULT,
+    },
   }
 
   if (heroType === HeroTypes.DEFAULT) {
@@ -21,7 +23,9 @@ function useSharedTitleStyles(heroType?: HeroTypes, nextContent?: ContentType):
   switch (nextContent?.type) {
     case 'textBlock':
       return {
-        background: (nextContent as TextBlockData)?.designOptions?.background || BG_DEFAULT,
+        background: {
+          backgroundColor: (nextContent as TextBlockData)?.designOptions?.background?.backgroundColor || BG_DEFAULT,
+        },
       }
     default:
       return defaultValue

diff --git a/web/pageComponents/pageTemplates/MagazineIndexPage.tsx b/web/pageComponents/pageTemplates/MagazineIndexPage.tsx
@@ -79,9 +79,9 @@ const MagazineIndexPage = ({ isServerRendered = false, locale, pageData, slug, u
       <main>
         <SharedBanner title={title} hero={hero} hideImageCaption={true} />
         {pageData?.hero.type !== HeroTypes.DEFAULT && title && (
-          <SharedTitle sharedTitle={title} background={ingress.background} />
+          <SharedTitle sharedTitle={title} background={{ backgroundColor: ingress.background }} />
         )}
-        <BackgroundContainer background={ingress.background}>
+        <BackgroundContainer background={{ backgroundColor: ingress.background }}>
           <Intro>
             {ingress && (
               <IngressWrapper>

diff --git a/web/pageComponents/pageTemplates/News.tsx b/web/pageComponents/pageTemplates/News.tsx
@@ -223,7 +223,7 @@ const NewsPage = ({ data: news }: ArticleProps) => {
       <main>
         <article>
           <NewsLayout>
-            <Header background={'Slate Blue 95'}>
+            <Header background={{ backgroundColor: 'Slate Blue 95' }}>
               <HeaderInner>
                 <StyledHeading level="h1" size="3xl">
                   {title}

diff --git a/web/pageComponents/pageTemplates/TopicPage.tsx b/web/pageComponents/pageTemplates/TopicPage.tsx
@@ -48,7 +48,7 @@ const TopicPage = ({ data }: TopicPageProps) => {
         pageTitle={data?.title}
       />
       <TopicPageLayout>
-        <SharedBanner title={data.title} hero={data.hero} captionBg={titleStyles.background} />
+        <SharedBanner title={data.title} hero={data.hero} captionBg={titleStyles.background?.backgroundColor} />
         {breadcrumbs && breadcrumbs?.enableBreadcrumbs && (
           <Breadcrumbs
             background={titleStyles.background}

diff --git a/web/pageComponents/shared/Hero/FiftyFiftyHero.tsx b/web/pageComponents/shared/Hero/FiftyFiftyHero.tsx
@@ -60,7 +60,7 @@ const StyledHeroTitle = styled(TitleText).attrs((props: { $isBigTitle: boolean }
 export const FiftyFiftyHero = ({ title, ingress, link, background, figure, isBigTitle }: HeroType) => {
   return (
     <>
-      <StyledHero background={background}>
+      <StyledHero background={{ backgroundColor: background }}>
         <StyledMedia>
           {figure && (
             <Image

diff --git a/web/pageComponents/shared/Hero/FullImageHero.tsx b/web/pageComponents/shared/Hero/FullImageHero.tsx
@@ -66,7 +66,11 @@ export const FullImageHero = ({ ratio, figure, hideImageCaption, captionBg }: He
     <>
       {getHero()}
       {figure?.image?.asset && !hideImageCaption && (
-        <StyledCaption background={captionBg} attribution={figure.attribution} caption={figure.caption} />
+        <StyledCaption
+          background={{ backgroundColor: captionBg }}
+          attribution={figure.attribution}
+          caption={figure.caption}
+        />
       )}
     </>
   )

diff --git a/web/pageComponents/shared/IframeCarousel/IframeCarousel.tsx b/web/pageComponents/shared/IframeCarousel/IframeCarousel.tsx
@@ -73,7 +73,7 @@ const IframeCarousel = ({ data, anchor, ...rest }: IframeCarouselProps) => {
   const { background } = designOptions
 
   return (
-    <BackgroundContainer background={background} {...rest} id={anchor}>
+    <BackgroundContainer background={{ backgroundColor: background }} {...rest} id={anchor}>
       <Container>
         {title && <StyledHeading value={title} />}
         <Carousel>

diff --git a/web/pageComponents/shared/ImageCarousel/ImageCarousel.tsx b/web/pageComponents/shared/ImageCarousel/ImageCarousel.tsx
@@ -37,7 +37,7 @@ const ImageCarousel = ({ data, anchor, ...rest }: ImageCarouselProps) => {
   const { autoplay, delay } = options
 
   return (
-    <BackgroundContainer background={background} {...rest} id={anchor}>
+    <BackgroundContainer background={{ backgroundColor: background }} {...rest} id={anchor}>
       <Container>
         {title && <StyledHeading value={title} />}
         <Swiper

diff --git a/web/pageComponents/shared/VideoPlayer.tsx b/web/pageComponents/shared/VideoPlayer.tsx
@@ -159,7 +159,7 @@ const VideoPlayer = ({ anchor, data }: { data: VideoPlayerData; anchor?: string
   const { background } = designOptions
 
   return (
-    <BackgroundContainer background={background} id={anchor}>
+    <BackgroundContainer background={{ backgroundColor: background }} id={anchor}>
       <Container>
         {title && <StyledHeading value={title} />}
         {ingress && (

diff --git a/web/pageComponents/shared/VideoPlayerCarousel.tsx b/web/pageComponents/shared/VideoPlayerCarousel.tsx
@@ -38,7 +38,7 @@ const VideoPlayer = ({ anchor, data }: { data: VideoPlayerCarouselData; anchor?:
   const { background, aspectRatio } = designOptions
 
   return (
-    <BackgroundContainer background={background} id={anchor}>
+    <BackgroundContainer background={{ backgroundColor: background }} id={anchor}>
       {title && (
         <HeadingWrapper>
           <StyledHeading value={title} />

diff --git a/web/pageComponents/shared/iframe/BasicIFrame.tsx b/web/pageComponents/shared/iframe/BasicIFrame.tsx
@@ -26,7 +26,7 @@ const BasicIFrame = ({
   const { height, aspectRatio, background } = designOptions
 
   return (
-    <BackgroundContainer background={background} {...rest}>
+    <BackgroundContainer background={{ backgroundColor: background }} {...rest}>
       <Container>
         {title && <StyledHeading value={title} />}
         <IFrame

diff --git a/web/pageComponents/shared/siteMenu/SiteMenu.tsx b/web/pageComponents/shared/siteMenu/SiteMenu.tsx
@@ -80,7 +80,7 @@ const SiteMenu = ({ data, ...rest }: MenuProps) => {
       {isOpen && (
         <FloatingFocusManager context={context}>
           <FloatingOverlay ref={refs.setFloating} lockScroll {...getFloatingProps()}>
-            <TopbarDropdown background={'White'}>
+            <TopbarDropdown background={{ backgroundColor: 'White' }}>
               <nav>
                 <NavTopbar>
                   <LogoLink />

diff --git a/web/pageComponents/topicPages/CookieDeclaration.tsx b/web/pageComponents/topicPages/CookieDeclaration.tsx
@@ -35,7 +35,7 @@ const CookieDeclaration = ({ data, anchor }: CookieDeclarationProps) => {
     }
   }, [language])
   return (
-    <BackgroundContainer background="White" id={anchor}>
+    <BackgroundContainer background={{ backgroundColor: 'White' }} id={anchor}>
       <Container id="cookie-declaration-wrapper">
         {title && <StyledTitle value={title} />}
         <div ref={placeholderRef}></div>

diff --git a/web/pageComponents/topicPages/Form/Form.tsx b/web/pageComponents/topicPages/Form/Form.tsx
@@ -56,7 +56,7 @@ const Form = ({ data, anchor }: { data: FormData; anchor?: string }) => {
     }
   }
   return (
-    <BackgroundContainer background="White" id={anchor}>
+    <BackgroundContainer background={{ backgroundColor: 'White' }} id={anchor}>
       <Container>
         {title && <StyledHeading value={title} />}
         {ingress && <IngressText value={ingress}></IngressText>}

diff --git a/web/pageComponents/topicPages/FullWidthVideo.tsx b/web/pageComponents/topicPages/FullWidthVideo.tsx
@@ -58,7 +58,7 @@ const FullWidthVideo = ({ anchor, data }: { data: FullWidthVideoData; anchor?: s
   const { video, designOptions, spacing } = data
   const { background, aspectRatio } = designOptions
   return (
-    <BackgroundContainer background={background} id={anchor}>
+    <BackgroundContainer background={{ backgroundColor: background }} id={anchor}>
       <Container $aspectRatio={aspectRatio} style={spacing ? { marginTop: '50px', marginBottom: '50px' } : {}}>
         <StyledFigure>
           <StyledHLSPlayer src={video.url} title={video.title} playsInline autoPlay muted loop />

diff --git a/web/pageComponents/topicPages/IFrame.tsx b/web/pageComponents/topicPages/IFrame.tsx
@@ -43,7 +43,7 @@ const IFrame = ({
   const { height, aspectRatio, background } = designOptions
 
   return (
-    <BackgroundContainer background={background} {...rest} id={anchor}>
+    <BackgroundContainer background={{ backgroundColor: background }} {...rest} id={anchor}>
       <Container>
         {title && <StyledHeading value={title} />}
         {ingress && (

diff --git a/web/pageComponents/topicPages/StockValues.tsx b/web/pageComponents/topicPages/StockValues.tsx
@@ -93,7 +93,7 @@ const StockValues = ({ data: { designOptions }, anchor, ...rest }: { data: Stock
   const { background } = designOptions
 
   return (
-    <BackgroundContainer background={background} {...rest} id={anchor}>
+    <BackgroundContainer background={{ backgroundColor: background }} {...rest} id={anchor}>
       <Container>
         <Item>
           <p>

diff --git a/web/pageComponents/topicPages/TwitterEmbed.tsx b/web/pageComponents/topicPages/TwitterEmbed.tsx
@@ -45,7 +45,7 @@ const TwitterEmbed = ({ data, anchor }: TwitterEmbedProps) => {
   }
   return (
     <>
-      <BackgroundContainer background={designOptions.background} id={anchor}>
+      <BackgroundContainer background={{ backgroundColor: designOptions.background }} id={anchor}>
         <Container>
           {title && <StyledTitle value={title} />}
           {ingress && (

diff --git a/web/pages/search/index.global.tsx b/web/pages/search/index.global.tsx
@@ -44,7 +44,7 @@ export default function SearchPage() {
     <>
       <NextSeo title={searchTitle}></NextSeo>
       <FloatingOverlay lockScroll>
-        <TopbarDropdown background={'Slate Blue 95'}>
+        <TopbarDropdown background={{ backgroundColor: 'Slate Blue 95' }}>
           <NavTopbar>
             <LogoLink />
             <InvertedButton

diff --git a/web/types/types.ts b/web/types/types.ts
@@ -253,13 +253,13 @@ export type LandingPageSchema = {
 }
 
 export type ImageBackground = {
-  image?: ImageWithAlt
+  image: ImageWithAlt
   useAnimation?: boolean
   contentAlignment: 'left' | 'right' | 'center'
 }
 
 export type BackgroundOption = {
-  background: ImageBackground
+  background?: ImageBackground
   useSpecialBackground: boolean
 }
 
@@ -279,8 +279,8 @@ export type BackgroundColours =
 export type DesignOptions = {
   background?: {
     backgroundColor?: BackgroundColours
-    imagePosition?: TeaserImagePosition
   }
+  imagePosition?: TeaserImagePosition
   imageSize?: TeaserImageSize
   backgroundOption?: BackgroundOption
 }