fix(BOOK-204): Added dynamic h1 to startpage

Approved-by: Christel Westerberg

apps/scandic-web/components/Blocks/FullWidthCampaign/fullWidthCampaign.module.css

@@ -2,32 +2,27 @@
   position: relative;
   overflow: hidden;
   height: 100vh;
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      180deg,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0.36) 50%,
+      rgba(0, 0, 0, 0.75) 100%
+    );
+    pointer-events: none;
+    z-index: 1;
+  }
 }
+
 .bodyText {
   text-align: center;
   color: var(--Base-Text-Inverted);
 }
 
-.container::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(
-    180deg,
-    rgba(0, 0, 0, 0) 0%,
-    rgba(0, 0, 0, 0.36) 50%,
-    rgba(0, 0, 0, 0.75) 100%
-  );
-  pointer-events: none;
-  z-index: 1;
-}
-
-@media screen and (min-width: 768px) {
-  .container {
-    height: 880px;
-  }
-}
-
 .content {
   position: absolute;
   inset: 0;
@@ -54,16 +49,10 @@
   gap: var(--Space-x1);
 }
 
-.buttonWrapper {
+.button {
   min-width: 180px;
 }
 
-@media screen and (max-width: 767px) {
-  .buttonWrapper:not(:only-child) {
-    min-width: 135px;
-  }
-}
-
 .image {
   max-width: 100%;
   height: 100%;
@@ -73,3 +62,15 @@
 .scriptedText {
   display: inline-block;
 }
+
+@media screen and (max-width: 767px) {
+  .button:not(:only-child) {
+    min-width: 135px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .container {
+    height: 880px;
+  }
+}

apps/scandic-web/components/Blocks/FullWidthCampaign/index.tsx

@@ -1,7 +1,5 @@
+import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import Image from "@scandic-hotels/design-system/Image"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Link from "@scandic-hotels/design-system/OldDSLink"
-import Title from "@scandic-hotels/design-system/Title"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
@@ -12,10 +10,15 @@ import type { FullWidthCampaign } from "@/types/trpc/routers/contentstack/startP
 
 interface FullWidthCampaignProps {
   content: FullWidthCampaign
+  headingLevel?: "h1" | "h2"
 }
 
-export default function FullWidthCampaign({ content }: FullWidthCampaignProps) {
+export default function FullWidthCampaign({
+  content,
+  headingLevel = "h2",
+}: FullWidthCampaignProps) {
   const { background_image, primary_button, secondary_button } = content
+  const Hx = headingLevel
 
   return (
     <div className={styles.container}>
@@ -36,53 +39,38 @@ export default function FullWidthCampaign({ content }: FullWidthCampaignProps) {
           </BiroScript>
         </div>
         <div className={styles.mainContent}>
-          <Title
-            color="baseText"
-            textAlign="center"
-            textTransform="capitalize"
-            level="h3"
-          >
-            {content.heading}
-          </Title>
-          <Typography className={styles.bodyText} variant="Body/Lead text">
-            <p>{content.body_text}</p>
+          <Typography variant="Title/mdLowCase">
+            <Hx className={styles.bodyText}>{content.heading}</Hx>
+          </Typography>
+          <Typography variant="Body/Lead text">
+            <p className={styles.bodyText}>{content.body_text}</p>
           </Typography>
           <div className={styles.buttons}>
             {content.has_primary_button ? (
-              <Button
-                intent="inverted"
-                size="small"
-                theme="base"
-                asChild
-                className={styles.buttonWrapper}
-                fullWidth
+              <ButtonLink
+                href={primary_button.href}
+                target={primary_button.openInNewTab ? "_blank" : undefined}
+                variant="Primary"
+                color="Inverted"
+                size="Small"
+                typography="Body/Supporting text (caption)/smBold"
+                className={styles.button}
               >
-                <Link
-                  href={primary_button.href}
-                  target={primary_button.openInNewTab ? "_blank" : undefined}
-                  color="none"
-                >
-                  {primary_button.title}
-                </Link>
-              </Button>
+                {primary_button.title}
+              </ButtonLink>
             ) : null}
             {content.has_secondary_button ? (
-              <Button
-                intent="secondary"
-                size="small"
-                theme="primaryStrong"
-                className={styles.buttonWrapper}
-                asChild
-                fullWidth
+              <ButtonLink
+                href={secondary_button.href}
+                target={secondary_button.openInNewTab ? "_blank" : undefined}
+                variant="Secondary"
+                size="Small"
+                color="Inverted"
+                className={styles.button}
+                typography="Body/Supporting text (caption)/smBold"
               >
-                <Link
-                  href={secondary_button.href}
-                  target={secondary_button.openInNewTab ? "_blank" : undefined}
-                  color="none"
-                >
-                  {secondary_button.title}
-                </Link>
-              </Button>
+                {secondary_button.title}
+              </ButtonLink>
             ) : null}
           </div>
         </div>