applyPaddingTopIfApplicable does not take themes into consideration #…

…2302 (#2309) * 🐛 Add key on promotion card and take theme into consideration #2302 * 🗝️ More keys #2302 * ♻️ Proposed refactored applypaddingtop #2302 Suggestion for a refactored version of applypaddingtopifapplicable
equinor · May 27, 2024 · 947df28 · 947df28
1 parent a551e4e
commit 947df28
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 27 deletions.
diff --git a/web/pageComponents/pageTemplates/shared/SharedPageContent.tsx b/web/pageComponents/pageTemplates/shared/SharedPageContent.tsx
@@ -52,6 +52,7 @@ import {
   KeyNumbersData,
   CardsListData,
 } from '../../../types/types'
+import { getColorForTheme } from '../../shared/textTeaser/theme'
 
 // How could we do this for several different component types?
 type ComponentProps =
@@ -87,41 +88,57 @@ type PageContentProps = { data: TopicPageSchema | MagazinePageSchema }
  * Remember to think about the prev section of condition with top spacing
  * E.g. 2 colored background of same color content, only first need but not second
  */
-const applyPaddingTopIfApplicable = (currentComponent: ComponentProps, prevComponent: ComponentProps): string => {
-  //@ts-ignore
-  const currentComponentsDO = currentComponent?.designOptions?.background
+const getBackgroundOptions = (component: ComponentProps) => {
   //@ts-ignore
-  const previousComponentsDO = prevComponent?.designOptions?.background
+  return component?.designOptions?.background || getColorForTheme(component?.designOptions?.theme)
+}
 
-  //Cardslist uses the background for the cards not the block background
+const isWhiteColorBackground = (componentsDO: any, component: ComponentProps) => {
   const casesWhichHaveBackgroundButIsWhite = ['cardsList']
-  const currentIsWhiteColorBackground =
-    currentComponentsDO?.backgroundUtility === 'white-100' ||
-    currentComponentsDO?.backgroundColor === 'White' ||
+  return (
+    componentsDO?.backgroundUtility === 'white-100' ||
+    componentsDO?.backgroundColor === 'White' ||
+    componentsDO?.background === 'White' ||
     //@ts-ignore
-    casesWhichHaveBackgroundButIsWhite.includes(currentComponent?.type) ||
+    casesWhichHaveBackgroundButIsWhite.includes(component?.type) ||
     //@ts-ignore
-    !currentComponent?.designOptions
-
-  const previousIsWhiteColorBackground =
-    previousComponentsDO?.backgroundUtility === 'white-100' ||
-    previousComponentsDO?.backgroundColor === 'White' ||
-    //@ts-ignore
-    !prevComponent?.designOptions
-
-  const isCurrentColoredBackgroundAndNotWhite =
-    (currentComponentsDO?.type === 'backgroundColor' || currentComponentsDO?.backgroundColor) &&
-    !currentIsWhiteColorBackground
+    !component?.designOptions
+  )
+}
 
-  const previousIsColorContainerAndNotWhite =
-    (previousComponentsDO?.type === 'backgroundColor' || previousComponentsDO?.backgroundColor) &&
-    !previousIsWhiteColorBackground
+const isColoredBackgroundAndNotWhite = (componentsDO: any, isWhiteColor: boolean) => {
+  return (
+    (componentsDO?.type === 'backgroundColor' || componentsDO?.backgroundColor || componentsDO?.background) &&
+    !isWhiteColor
+  )
+}
 
-  const previousIsSameColorAsCurrent =
+const isSameColorBackground = (currentComponentsDO: any, previousComponentsDO: any) => {
+  return (
     (currentComponentsDO?.backgroundUtility &&
       previousComponentsDO?.backgroundUtility &&
       currentComponentsDO?.backgroundUtility === previousComponentsDO?.backgroundUtility) ??
     currentComponentsDO?.backgroundColor === previousComponentsDO?.backgroundColor
+  )
+}
+
+const applyPaddingTopIfApplicable = (currentComponent: ComponentProps, prevComponent: ComponentProps): string => {
+  const currentComponentsDO = getBackgroundOptions(currentComponent)
+  const previousComponentsDO = getBackgroundOptions(prevComponent)
+
+  const currentIsWhiteColorBackground = isWhiteColorBackground(currentComponentsDO, currentComponent)
+  const previousIsWhiteColorBackground = isWhiteColorBackground(previousComponentsDO, prevComponent)
+
+  const isCurrentColoredBackgroundAndNotWhite = isColoredBackgroundAndNotWhite(
+    currentComponentsDO,
+    currentIsWhiteColorBackground,
+  )
+  const previousIsColorContainerAndNotWhite = isColoredBackgroundAndNotWhite(
+    previousComponentsDO,
+    previousIsWhiteColorBackground,
+  )
+
+  const previousIsSameColorAsCurrent = isSameColorBackground(currentComponentsDO, previousComponentsDO)
 
   const specialCases = ['teaser', 'fullWidthImage', 'fullWidthVideo']
   //@ts-ignore

diff --git a/web/pageComponents/topicPages/promotions/MultiplePromotions.tsx b/web/pageComponents/topicPages/promotions/MultiplePromotions.tsx
@@ -59,17 +59,19 @@ const StyledPeopleCard = styled(PeopleCard)`
 
 type CardProps = CardData | PeopleCardData | EventCardData
 
-const TWCard = ({ slug, title, ingress, publishDateTime, heroImage }: CardData) => {
+const TWCard = ({ slug, title, ingress, publishDateTime, heroImage, id }: CardData) => {
   const image = useSanityLoader(heroImage?.image, 400, Ratios.NINE_TO_SIXTEEN)
 
+
   return (
-    <li className="min-w-[var(--card-minWidth)] max-w-[var(--card-maxWidt)] basis-0 grow">
+    <li className="min-w-[var(--card-minWidth)] max-w-[var(--card-maxWidt)] basis-0 grow" key={id}>
       <Card
         href={slug}
         {...(image && {
           imageUrl: image.src,
         })}
         className="w-full h-full"
+        key={id}
       >
         <Card.Content>
           <Card.Header
@@ -115,7 +117,7 @@ const MultiplePromotions = ({
         return <TWCard key={data.id} {...data} />
       case 'people':
         return (
-          <li className="list-none">
+          <li className="list-none" key={data.id}>
             <StyledBackground key={data.id}>
               <StyledPeopleCard data={data as PeopleCardData} hasSectionTitle={hasSectionTitle} key={data.id} />
             </StyledBackground>