Merged in chore/replace-deprecated-body (pull request #3300)

Replace deprecated <Body> with <Typography> * chore: replace deprecated body component * refactor: replace Body component with Typography across various components * merge Approved-by: Bianca Widstam Approved-by: Matilda Landström
2025-12-09 12:45:34 +00:00
parent f40035baa9
commit 7eb74ea239
69 changed files with 755 additions and 899 deletions
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/DesktopSummary.tsx
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/DesktopSummary.tsx
@@ -2,11 +2,11 @@ import { useIntl } from "react-intl"

 import { RateEnum } from "@scandic-hotels/common/constants/rate"
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
 import Footnote from "@scandic-hotels/design-system/Footnote"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import { useIsLoggedIn } from "../../../../hooks/useIsLoggedIn"
 import SignupPromoDesktop from "../../../SignupPromo/Desktop"
@@ -137,15 +137,17 @@ export function DesktopSummary({
          </div>
        )}
        <div className={styles.summaryPriceTextDesktop}>
-          <Body>
-            {intl.formatMessage(
-              {
-                id: "booking.totalPriceInclVat",
-                defaultMessage: "<b>Total price</b> (incl VAT)",
-              },
-              { b: (str) => <b>{str}</b> }
-            )}
-          </Body>
+          <Typography variant="Body/Paragraph/mdRegular">
+            <p>
+              {intl.formatMessage(
+                {
+                  id: "booking.totalPriceInclVat",
+                  defaultMessage: "<b>Total price</b> (incl VAT)",
+                },
+                { b: (str) => <b>{str}</b> }
+              )}
+            </p>
+          </Typography>
          <Caption color="uiTextMediumContrast">{summaryPriceText}</Caption>
        </div>
        <div className={styles.summaryPrice}>
@@ -175,25 +177,31 @@ export function DesktopSummary({
                )}
              </Caption>
            )}
-            {selectedRates.totalPrice.requested ? (
-              <Body color="uiTextMediumContrast">
-                {intl.formatMessage(
-                  {
-                    id: "booking.approxValue",
-                    defaultMessage: "Approx. {value}",
-                  },
-                  {
-                    value: formatPrice(
-                      intl,
-                      selectedRates.totalPrice.requested.price,
-                      selectedRates.totalPrice.requested.currency,
-                      selectedRates.totalPrice.requested.additionalPrice,
-                      selectedRates.totalPrice.requested.additionalPriceCurrency
-                    ),
-                  }
-                )}
-              </Body>
-            ) : null}
+            {!!selectedRates.totalPrice.requested && (
+              <Typography
+                variant="Body/Paragraph/mdRegular"
+                className={styles.approxPrice}
+              >
+                <p>
+                  {intl.formatMessage(
+                    {
+                      id: "booking.approxValue",
+                      defaultMessage: "Approx. {value}",
+                    },
+                    {
+                      value: formatPrice(
+                        intl,
+                        selectedRates.totalPrice.requested.price,
+                        selectedRates.totalPrice.requested.currency,
+                        selectedRates.totalPrice.requested.additionalPrice,
+                        selectedRates.totalPrice.requested
+                          .additionalPriceCurrency
+                      ),
+                    }
+                  )}
+                </p>
+              </Typography>
+            )}
          </div>
          <div className={styles.summaryPriceTextMobile}>
            <Caption color="uiTextHighContrast">
@@ -259,12 +267,17 @@ function RateSummary({
            { roomIndex: roomIndex + 1 }
          )}
        </Subtitle>
-        <Body color="uiTextPlaceholder">
-          {intl.formatMessage({
-            id: "booking.selectRoom",
-            defaultMessage: "Select room",
-          })}
-        </Body>
+        <Typography
+          variant="Body/Paragraph/mdRegular"
+          className={styles.selectRoom}
+        >
+          <p>
+            {intl.formatMessage({
+              id: "booking.selectRoom",
+              defaultMessage: "Select room",
+            })}
+          </p>
+        </Typography>
      </div>
    )
  }
@@ -279,7 +292,12 @@ function RateSummary({
              { roomIndex: roomIndex + 1 }
            )}
          </Subtitle>
-          <Body color="uiTextMediumContrast">{room.roomInfo.roomType}</Body>
+          <Typography
+            variant="Body/Paragraph/mdRegular"
+            className={styles.uiTextMediumContrast}
+          >
+            <p>{room.roomInfo.roomType}</p>
+          </Typography>
          <Caption color="uiTextMediumContrast">
            {getRateDetails(room.rate)}
          </Caption>
@@ -289,7 +307,12 @@ function RateSummary({
          <Subtitle color="uiTextHighContrast">
            {room.roomInfo.roomType}
          </Subtitle>
-          <Body color="uiTextMediumContrast">{getRateDetails(room.rate)}</Body>
+          <Typography
+            variant="Body/Paragraph/mdRegular"
+            className={styles.uiTextMediumContrast}
+          >
+            <p>{getRateDetails(room.rate)}</p>
+          </Typography>
        </>
      )}
    </div>
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/rateSummary.module.css
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/rateSummary.module.css
@@ -43,6 +43,9 @@
  width: 100%;
  gap: var(--Space-x4);
 }
+.approxPrice {
+  color: var(--UI-Text-Medium-contrast);
+}

 .petInfo {
  border-left: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
@@ -74,6 +77,14 @@
  display: block;
 }

+.selectRoom {
+  color: var(--UI-Text-Placeholder);
+}
+
+.uiTextMediumContrast {
+  color: var(--UI-Text-Medium-contrast);
+}
+
@media (min-width: 1367px) {
  .summary {
    border-top: 1px solid var(--Base-Border-Subtle);
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx
@@ -4,12 +4,12 @@ import { useIntl } from "react-intl"
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import { RateEnum } from "@scandic-hotels/common/constants/rate"
 import { logger } from "@scandic-hotels/common/logger"
-import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { ChipButton } from "@scandic-hotels/design-system/ChipButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Image from "@scandic-hotels/design-system/Image"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import { useSelectRateContext } from "../../../../../../contexts/SelectRate/SelectRateContext"
 import { useIsLoggedIn } from "../../../../../../hooks/useIsLoggedIn"
@@ -59,8 +59,12 @@ export function SelectedRoomPanel({ roomIndex }: { roomIndex: number }) {
        <Subtitle className={styles.subtitle} color="uiTextHighContrast">
          {selectedRate.roomInfo.roomType}
        </Subtitle>
-        <Body color="uiTextMediumContrast">{rateTitle}</Body>
-        <Body color="uiTextHighContrast">{selectedProductTitle}</Body>
+        <Typography variant="Body/Paragraph/mdRegular">
+          <div>
+            <p className={styles.uiTextMediumContrast}>{rateTitle}</p>
+            <p className={styles.uiTextHighContrast}>{selectedProductTitle}</p>
+          </div>
+        </Typography>
      </div>
      <div className={styles.imageContainer}>
        {image?.src ? (
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/selectedRoomPanel.module.css
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/selectedRoomPanel.module.css
@@ -33,6 +33,14 @@ div.selectedRoomPanel p.subtitle {
  padding-bottom: var(--Space-x1);
 }

+.uiTextMediumContrast {
+  color: var(--UI-Text-Medium-contrast);
+}
+
+.uiTextHighContrast {
+  color: var(--UI-Text-High-contrast);
+}
+
@media screen and (max-width: 767px) {
  .selectedRoomPanel {
    gap: var(--Space-x1);