Merged in feat/SW-3542-update-color-variables-to- (pull request #2970)

feat(SW-3542): Updated the color variables for MVP Approved-by: Joakim Jäderberg
2025-10-17 09:22:03 +00:00
parent bf19d3960b
commit c01f440651
17 changed files with 141 additions and 67 deletions
--- a/packages/booking-flow/lib/components/BookingConfirmation/Header/header.module.css
+++ b/packages/booking-flow/lib/components/BookingConfirmation/Header/header.module.css
@@ -13,6 +13,14 @@
  gap: var(--Spacing-x-half);
 }

+.header .confirmTitle {
+  color: var(--Text-Accent-Primary);
+}
+
+.header .hotelTitle {
+  color: var(--Text-Heading);
+}
+
 .body {
  max-width: 720px;
 }
--- a/packages/booking-flow/lib/components/BookingConfirmation/Header/index.tsx
+++ b/packages/booking-flow/lib/components/BookingConfirmation/Header/index.tsx
@@ -3,7 +3,7 @@
 import { useIntl } from "react-intl"

 import Body from "@scandic-hotels/design-system/Body"
-import Title from "@scandic-hotels/design-system/Title"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import { AddToCalendar } from "../../AddToCalendar"
 import { AddToCalendarButton } from "./Actions/AddToCalendarButton"
@@ -56,14 +56,16 @@ export function Header({
  return (
    <header className={styles.header}>
      <hgroup className={styles.hgroup}>
-        <Title as="h2" color="red" textTransform="uppercase" type="h2">
-          {intl.formatMessage({
-            defaultMessage: "Booking confirmation",
-          })}
-        </Title>
-        <Title as="h2" color="burgundy" textTransform="uppercase" type="h1">
-          {hotel.name}
-        </Title>
+        <Typography variant={"Title/md"}>
+          <h2 className={styles.confirmTitle}>
+            {intl.formatMessage({
+              defaultMessage: "Booking confirmation",
+            })}
+          </h2>
+        </Typography>
+        <Typography variant={"Title/md"}>
+          <h2 className={styles.hotelTitle}>{hotel.name}</h2>
+        </Typography>
      </hgroup>
      <Body className={styles.body}>{text}</Body>
      <div className={styles.actions}>
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/index.tsx
@@ -7,8 +7,8 @@ import { useIntl } from "react-intl"

 import { hotelreservation } from "@scandic-hotels/common/constants/routes/hotelReservation"
 import { dt } from "@scandic-hotels/common/dt"
+import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
@@ -99,13 +99,7 @@ export default function FormContent({
        </div>
      </div>
      <div className={cx(styles.buttonContainer, styles.showOnTablet)}>
-        <Button
-          className={styles.button}
-          form={formId}
-          intent="primary"
-          theme="base"
-          type="submit"
-        >
+        <Button className={styles.button} form={formId} type="submit">
          <span className={styles.icon}>
            <MaterialIcon icon="search" color="Icon/Inverted" size={28} />
          </span>
@@ -130,10 +124,10 @@ export default function FormContent({
        <Button
          className={styles.button}
          form={formId}
-          intent="primary"
-          theme="base"
+          variant={"Primary"}
+          size={"Medium"}
          type="submit"
-          disabled={isSearching}
+          isDisabled={isSearching}
        >
          <Typography
            variant="Body/Supporting text (caption)/smBold"
@@ -195,13 +189,7 @@ export function BookingWidgetFormContentSkeleton() {
        </div>
      </div>
      <div className={cx(styles.buttonContainer, styles.showOnTablet)}>
-        <Button
-          className={styles.button}
-          intent="primary"
-          theme="base"
-          type="submit"
-          disabled
-        >
+        <Button className={styles.button} type="submit" isDisabled>
          <span className={styles.icon}>
            <MaterialIcon icon="search" color="Icon/Inverted" size={28} />
          </span>
@@ -213,10 +201,10 @@ export function BookingWidgetFormContentSkeleton() {
      <div className={cx(styles.buttonContainer, styles.hideOnTablet)}>
        <Button
          className={styles.button}
-          intent="primary"
-          theme="base"
+          variant={"Primary"}
+          size={"Medium"}
          type="submit"
-          disabled
+          isDisabled
        >
          <Typography
            variant="Body/Supporting text (caption)/smBold"
--- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/Form.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/Form.tsx
@@ -10,6 +10,7 @@ import { Tooltip } from "@scandic-hotels/design-system/Tooltip"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"

+import { useBookingFlowConfig } from "../../../bookingFlowConfig/bookingFlowConfigContext"
 import { GuestsRoom } from "./GuestsRoom"

 import styles from "./guests-rooms-picker.module.css"
@@ -29,6 +30,7 @@ export default function GuestsRoomsPickerDialog({
  onClose,
 }: GuestsRoomsPickerDialogProps) {
  const intl = useIntl()
+  const config = useBookingFlowConfig()
  const { getFieldState, trigger, setValue, getValues } =
    useFormContext<BookingWidgetSchema>()
  const roomsValue = useWatch<BookingWidgetSchema, "rooms">({ name: "rooms" })
@@ -40,10 +42,15 @@ export default function GuestsRoomsPickerDialog({
  })
  // Disable add room if booking code is either voucher or corporate cheque, or reward night is enabled
  const addRoomDisabledTextForSpecialRate = getValues(SEARCH_TYPE_REDEMPTION)
-    ? intl.formatMessage({
-        defaultMessage:
-          "Multi-room booking is not available with reward night.",
-      })
+    ? config.variant === "partner-sas"
+      ? intl.formatMessage({
+          defaultMessage:
+            "Multi-room booking is not available with EuroBonus points.",
+        })
+      : intl.formatMessage({
+          defaultMessage:
+            "Multi-room booking is not available with reward night.",
+        })
    : getValues("bookingCode.value")?.toLowerCase().startsWith("vo") &&
      intl.formatMessage({
        defaultMessage:
--- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/guests-rooms-picker.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/guests-rooms-picker.module.css
@@ -90,7 +90,6 @@
 }

 .roomActionsButton {
-  margin-left: auto;
  color: var(--Base-Text-Accent);
 }

--- a/packages/booking-flow/lib/components/SelectHotel/Filters/FilterContent/filterContent.module.css
+++ b/packages/booking-flow/lib/components/SelectHotel/Filters/FilterContent/filterContent.module.css
@@ -8,6 +8,11 @@
  gap: var(--Space-x3);
 }

+.container .filterByTitle {
+  font-weight: 500;
+  color: var(--Text-Heading);
+}
+
 .facilities {
  padding-bottom: var(--Space-x3);
 }
--- a/packages/booking-flow/lib/components/SelectHotel/Filters/FilterContent/index.tsx
+++ b/packages/booking-flow/lib/components/SelectHotel/Filters/FilterContent/index.tsx
@@ -2,7 +2,6 @@ import { useSearchParams } from "next/navigation"
 import { useEffect, useState } from "react"
 import { useIntl } from "react-intl"

-import Title from "@scandic-hotels/design-system/Title"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import {
@@ -116,11 +115,13 @@ export default function FilterContent({
  return (
    <aside className={`${styles.container} ${className}`}>
      <div>
-        <Title as="h4">
-          {intl.formatMessage({
-            defaultMessage: "Filter by",
-          })}
-        </Title>
+        <Typography variant={"Title/xs"} className={styles.filterByTitle}>
+          <h4>
+            {intl.formatMessage({
+              defaultMessage: "Filter by",
+            })}
+          </h4>
+        </Typography>
        <div className={styles.facilities}>
          <Typography variant="Title/Subtitle/md">
            <p>