fix(SW-2928): Added different margins on wellness content wrapper depending on which buttons are present

Approved-by: Christian Andolf
Approved-by: Matilda Landström

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/index.tsx

@@ -1,3 +1,5 @@
+import { cx } from "class-variance-authority"
+
 import ButtonLink from "@/components/ButtonLink"
 import SidePeek from "@/components/TempDesignSystem/SidePeek"
 import { getIntl } from "@/i18n"
@@ -23,14 +25,19 @@ export default async function WellnessAndExerciseSidePeek({
 
   return (
     <SidePeek contentKey={SidepeekSlugs.wellness} title={heading}>
-      <div className={styles.wrapper}>
+      <div
+        className={cx(styles.wrapper, {
+          [styles.hasSpaPage]: spaPage,
+          [styles.hasWellnessExercisePage]: wellnessExercisePageUrl,
+        })}
+      >
         {healthFacilities.map((facility) => (
           <Facility key={facility.type} data={facility} />
         ))}
       </div>
-      {(spaPage || wellnessExercisePageUrl) && (
+      {spaPage || wellnessExercisePageUrl ? (
         <div className={styles.buttonContainer}>
-          {spaPage && (
+          {spaPage ? (
             <ButtonLink
               href={spaPage.url}
               variant="Tertiary"
@@ -39,7 +46,7 @@ export default async function WellnessAndExerciseSidePeek({
             >
               {spaPage.buttonCTA}
             </ButtonLink>
-          )}
+          ) : null}
           {wellnessExercisePageHref ? (
             <ButtonLink
               href={wellnessExercisePageHref}
@@ -53,7 +60,7 @@ export default async function WellnessAndExerciseSidePeek({
             </ButtonLink>
           ) : null}
         </div>
-      )}
+      ) : null}
     </SidePeek>
   )
 }

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/wellnessAndExercise.module.css

@@ -2,9 +2,16 @@
   display: flex;
   flex-direction: column;
   gap: var(--Spacing-x4);
-  margin-bottom: calc(
-    var(--Spacing-x4) * 2 + 80px
-  ); /* Creates space between the wrapper and buttonContainer */
+
+  /* Creates space between the wrapper and buttonContainer depending on which buttons are present */
+  &.hasSpaPage,
+  &.hasWellnessPage {
+    margin-bottom: 125px;
+  }
+
+  &.hasSpaPage.hasWellnessExercisePage {
+    margin-bottom: 201px;
+  }
 }
 
 .buttonContainer {