From 45b17a813708c7d65d10f81e684044d34faac531 Mon Sep 17 00:00:00 2001
From: Borghild Selle <104756130+BorghildSelle@users.noreply.github.com>
Date: Mon, 10 Jun 2024 11:47:31 +0200
Subject: [PATCH] :bug: add titlestyles to the paddingtop check (#2359)

---
 .../pageTemplates/TopicPage.tsx               |  2 +-
 .../shared/SharedPageContent.tsx              | 48 ++++++++++++++-----
 2 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/web/pageComponents/pageTemplates/TopicPage.tsx b/web/pageComponents/pageTemplates/TopicPage.tsx
index 1f4a0bb74..0bd804239 100644
--- a/web/pageComponents/pageTemplates/TopicPage.tsx
+++ b/web/pageComponents/pageTemplates/TopicPage.tsx
@@ -43,7 +43,7 @@ const TopicPage = ({ data }: TopicPageProps) => {
         {data.hero.type !== HeroTypes.DEFAULT && !data?.isCampaign && (
           <SharedTitle sharedTitle={data.title} background={titleStyles.background} />
         )}
-        <PageContent data={data} />
+        <PageContent data={data} titleBackground={titleStyles} />
       </main>
     </>
   )
diff --git a/web/pageComponents/pageTemplates/shared/SharedPageContent.tsx b/web/pageComponents/pageTemplates/shared/SharedPageContent.tsx
index 35d56fde3..fc47f967e 100644
--- a/web/pageComponents/pageTemplates/shared/SharedPageContent.tsx
+++ b/web/pageComponents/pageTemplates/shared/SharedPageContent.tsx
@@ -53,11 +53,18 @@ import {
   CardsListData,
   GridData,
   CampaignBannerData,
+  DesignOptions,
 } from '../../../types/types'
 import { getColorForTheme } from '../../shared/textTeaser/theme'
 import Grid from '@sections/Grid/Grid'
 import { CampaignBanner } from '@sections/CampaignBanner'
+import { BackgroundContainerProps } from '@components/Backgrounds'
 
+type DefaultComponent = {
+  id?: string
+  type?: string
+  designOptions?: DesignOptions
+}
 // How could we do this for several different component types?
 export type ComponentProps =
   | TeaserData
@@ -81,8 +88,12 @@ export type ComponentProps =
   | CookieDeclarationData
   | TextTeaserData
   | KeyNumbersData
+  | DefaultComponent
 
-type PageContentProps = { data: TopicPageSchema | MagazinePageSchema }
+type PageContentProps = {
+  data: TopicPageSchema | MagazinePageSchema
+  titleBackground?: BackgroundContainerProps
+}
 
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 /**
@@ -120,12 +131,15 @@ const isColoredBackgroundAndNotWhite = (componentsDO: any, isWhiteColor: boolean
 }
 
 const isSameColorBackground = (currentComponentsDO: any, previousComponentsDO: any) => {
-  return (
-    (currentComponentsDO?.backgroundUtility &&
-      previousComponentsDO?.backgroundUtility &&
-      currentComponentsDO?.backgroundUtility === previousComponentsDO?.backgroundUtility) ??
-    currentComponentsDO?.backgroundColor === previousComponentsDO?.backgroundColor
-  )
+  if (
+    currentComponentsDO?.backgroundUtility &&
+    currentComponentsDO?.backgroundUtility !== '' &&
+    previousComponentsDO?.backgroundUtility &&
+    previousComponentsDO?.backgroundUtility !== ''
+  ) {
+    return currentComponentsDO?.backgroundUtility === previousComponentsDO?.backgroundUtility
+  }
+  return currentComponentsDO?.backgroundColor === previousComponentsDO?.backgroundColor
 }
 
 const applyPaddingTopIfApplicable = (currentComponent: ComponentProps, prevComponent: ComponentProps): string => {
@@ -162,7 +176,7 @@ const applyPaddingTopIfApplicable = (currentComponent: ComponentProps, prevCompo
 
 /*eslint-enable @typescript-eslint/ban-ts-comment */
 
-export const PageContent = ({ data }: PageContentProps) => {
+export const PageContent = ({ data, titleBackground }: PageContentProps) => {
   const content = (data?.content || []).map((c: ComponentProps, index) => {
     const prevComponent = data?.content?.[index - 1]
     const anchorReference =
@@ -170,12 +184,20 @@ export const PageContent = ({ data }: PageContentProps) => {
         ? (prevComponent as unknown as AnchorLinkData)?.anchorReference
         : undefined
 
-    //Returns pt-12 when applicable or empty string
+    //Returns pt-20 when applicable or empty string
     const previousComponentIndex = prevComponent?.type === 'anchorLink' ? index - 2 : index - 1
-    const topSpacingClassName = applyPaddingTopIfApplicable(
-      c,
-      data?.content?.[previousComponentIndex] as unknown as ComponentProps,
-    )
+
+    const previousComponentToCompare =
+      index === 0
+        ? ({
+            type: 'pageTitle',
+            designOptions: {
+              background: titleBackground?.background,
+            },
+          } as DefaultComponent)
+        : (data?.content?.[previousComponentIndex] as unknown as ComponentProps)
+
+    const topSpacingClassName = applyPaddingTopIfApplicable(c, previousComponentToCompare)
 
     switch (c.type) {
       case 'teaser':