fix(BOOK-661): Updated themes and correct variables for campaign hero

Approved-by: Matilda Landström

apps/scandic-web/components/ContentType/CampaignPage/Hero/hero.module.css

@@ -27,7 +27,7 @@
   gap: var(--Space-x1);
 }
 
-.peach {
+.theme-accent {
   .content {
     background-color: var(--Surface-Brand-Accent-Default);
   }
@@ -39,16 +39,13 @@
   }
 
   .text,
-  .campaignText {
+  .campaignText,
-    color: var(--Text-Brand-OnPrimary-1-Default);
-  }
-
   .benefitList > li {
-    color: var(--Surface-Brand-Primary-1-OnSurface-Accent-Secondary);
+    color: var(--Text-Brand-OnAccent-Default);
   }
 }
 
-.burgundy {
+.theme-primary-3 {
   .content {
     background-color: var(--Surface-Brand-Primary-3-Default);
   }

apps/scandic-web/components/ContentType/CampaignPage/Hero/index.tsx

@@ -101,7 +101,7 @@ export default async function CampaignHero({
         ) : null}
         <Divider
           color={
-            theme === "Peach"
+            theme === "Accent"
               ? "Border/Divider/Brand/OnAccent/Default"
               : "Border/Divider/Brand/OnPrimary 3/Default"
           }

apps/scandic-web/components/ContentType/CampaignPage/Hero/utils.ts

@@ -14,36 +14,24 @@ export function getButtonColor(
   heroTheme: VariantProps<typeof campaignHeroVariants>["theme"],
   hotelTheme: Theme | null = Theme.scandic
 ): ButtonVariants["color"] {
-  let buttonColor: ButtonVariants["color"] = "Inverted"
+  let buttonColor: ButtonVariants["color"] = "Primary"
 
   switch (hotelTheme) {
     case Theme.scandic:
-      if (heroTheme === "Peach") {
-        buttonColor = "Primary"
-      }
-      break
-    case Theme.scandicGo:
-      buttonColor = "Primary"
-      break
-    case Theme.grandHotel:
-      buttonColor = "Primary"
-      break
     case Theme.hotelNorge:
-      if (heroTheme === "Peach") {
-        buttonColor = "Primary"
-      }
-      break
     case Theme.theDock:
-      if (heroTheme === "Peach") {
+      if (heroTheme === "Primary 3") {
-        buttonColor = "Primary"
+        buttonColor = "Inverted"
       }
       break
+    case Theme.marski:
     case Theme.downtownCamper:
     case Theme.haymarket:
-    case Theme.marski:
+      buttonColor = "Inverted"
-    case Theme.bassinSeven:
-      buttonColor = "Primary"
       break
+    case Theme.bassinSeven:
+    case Theme.grandHotel:
+    case Theme.scandicGo:
     default:
       break
   }

apps/scandic-web/components/ContentType/CampaignPage/Hero/variants.ts

@@ -5,12 +5,12 @@ import styles from "./hero.module.css"
 const config = {
   variants: {
     theme: {
-      Peach: styles.peach,
+      Accent: styles["theme-accent"],
-      Burgundy: styles.burgundy,
+      "Primary 3": styles["theme-primary-3"],
     },
   },
   defaultVariants: {
-    theme: "Burgundy",
+    theme: "Primary 3",
   },
 } as const
 

packages/trpc/lib/routers/contentstack/campaignPage/output.ts

@@ -58,7 +58,18 @@ export const blocksSchema = z.discriminatedUnion("__typename", [
 export const heroSchema = z.object({
   image: transformedImageVaultAssetSchema,
   heading: z.string(),
-  theme: z.enum(["Peach", "Burgundy"]).default("Peach"),
+  theme: z
+    .enum(["Peach", "Burgundy"])
+    .nullish()
+    .transform((theme) => {
+      switch (theme) {
+        case "Burgundy":
+          return "Primary 3"
+        case "Peach":
+        default:
+          return "Accent"
+      }
+    }),
   benefits: z
     .array(z.string())
     .nullish()