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/BookingWidget/BookingWidgetForm/FormContent/BookingCode/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/BookingCode/index.tsx
@@ -193,9 +193,7 @@ export default function BookingCode() {
              }
            >
              <Switch name="bookingCode.remember" className="mobile-switch">
-                <Typography
-                  variant="Body/Supporting text (caption)/smRegular"
-                >
+                <Typography variant="Body/Supporting text (caption)/smRegular">
                  <span>
                    {intl.formatMessage({
                      id: "bookingWidget.bookingCode.remember",
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Input/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Input/index.tsx
@@ -1,7 +1,7 @@
 import React, { forwardRef, type InputHTMLAttributes } from "react"
 import { Input as InputRAC } from "react-aria-components"

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

 import styles from "./input.module.css"

@@ -10,8 +10,8 @@ export const Input = forwardRef<
  InputHTMLAttributes<HTMLInputElement>
 >(function InputComponent(props, ref) {
  return (
-    <Body asChild color="uiTextHighContrast">
+    <Typography variant="Body/Paragraph/mdRegular">
      <InputRAC {...props} ref={ref} className={styles.input} />
-    </Body>
+    </Typography>
  )
 })
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Input/input.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Input/input.module.css
@@ -7,6 +7,8 @@
  width: 100%;
  z-index: 2;

+  color: var(--UI-Text-High-contrast);
+
  &:placeholder-shown::-webkit-search-cancel-button {
    display: none;
    background-image: url("/_static/icons/cancel.svg");
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/ListItem/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/ListItem/index.tsx
@@ -1,8 +1,10 @@
-import Body from "@scandic-hotels/design-system/Body"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import { listItemVariants } from "./variants"

+import styles from "./listItem.module.css"
+
 import type { AutoCompleteLocation } from "@scandic-hotels/trpc/routers/autocomplete/schema"
 import type { PropGetters } from "downshift"

@@ -31,11 +33,19 @@ export default function ListItem({
        item: location,
      })}
    >
-      <Body color="black" textTransform="bold">
-        {location.name}
-      </Body>
+      <Typography
+        variant="Body/Paragraph/mdBold"
+        className={styles.locationName}
+      >
+        <p>{location.name}</p>
+      </Typography>
      {location.destination && (
-        <Body color="uiTextPlaceholder">{location.destination}</Body>
+        <Typography
+          variant="Body/Paragraph/mdRegular"
+          className={styles.locationDestination}
+        >
+          <p>{location.destination}</p>
+        </Typography>
      )}
    </li>
  )
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/ListItem/listItem.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/ListItem/listItem.module.css
@@ -11,3 +11,11 @@
 .active {
  background-color: var(--Surface-Primary-Hover);
 }
+
+.locationName {
+  color: var(--Main-Grey-100);
+}
+
+.locationDestination {
+  color: var(--UI-Text-Placeholder);
+}
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/index.tsx
@@ -1,14 +1,15 @@
 "use client"
+import { cx } from "class-variance-authority"
 import { useEffect } from "react"
 import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 import { useDebounceValue } from "usehooks-ts"

-import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import Footnote from "@scandic-hotels/design-system/Footnote"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"

 import useLang from "../../../../../../hooks/useLang"
@@ -172,19 +173,23 @@ export default function SearchList({
  if (!hasAutocompleteItems && debouncedSearch) {
    return (
      <Dialog getMenuProps={getMenuProps} variant="error">
-        <Body className={styles.text} textTransform="bold">
-          {intl.formatMessage({
-            id: "bookingWidget.searchList.noResults",
-            defaultMessage: "No results",
-          })}
-        </Body>
-        <Body className={styles.text} color="uiTextPlaceholder">
-          {intl.formatMessage({
-            id: "bookingWidget.searchList.noResultsDesc",
-            defaultMessage:
-              "We couldn't find a matching location for your search.",
-          })}
-        </Body>
+        <Typography variant="Body/Paragraph/mdBold" className={styles.text}>
+          <p>
+            {intl.formatMessage({
+              id: "bookingWidget.searchList.noResults",
+              defaultMessage: "No results",
+            })}
+          </p>
+        </Typography>
+        <Typography className={cx(styles.text, styles.textPlaceholderColor)}>
+          <p>
+            {intl.formatMessage({
+              id: "bookingWidget.searchList.noResultsDesc",
+              defaultMessage:
+                "We couldn't find a matching location for your search.",
+            })}
+          </p>
+        </Typography>
        {typeFilteredSearchHistory && typeFilteredSearchHistory.length > 0 && (
          <>
            <Divider className={styles.noResultsDivider} />
@@ -305,7 +310,9 @@ function SearchListError({
        <MaterialIcon icon="error" color="Icon/Interactive/Accent" />
        {caption}
      </Caption>
-      <Body>{body}</Body>
+      <Typography variant="Body/Paragraph/mdRegular">
+        <p>{body}</p>
+      </Typography>
    </Dialog>
  )
 }
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/searchList.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/searchList.module.css
@@ -33,3 +33,6 @@
 .text {
  padding: 0 var(--Space-x1);
 }
+.textPlaceholderColor {
+  color: var(--UI-Text-Placeholder);
+}
--- a/packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/Mobile.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/Mobile.tsx
@@ -5,7 +5,6 @@ import { useIntl } from "react-intl"

 import { Lang } from "@scandic-hotels/common/constants/language"
 import { dt } from "@scandic-hotels/common/dt"
-import Body from "@scandic-hotels/design-system/Body"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -137,14 +136,14 @@ export default function DatePickerRangeMobile({
          size="large"
          theme="base"
        >
-          <Body color="white" textTransform="bold" asChild>
+          <Typography variant="Body/Paragraph/mdBold">
            <span>
              {intl.formatMessage({
                id: "datePicker.selectDates",
                defaultMessage: "Select dates",
              })}
            </span>
-          </Body>
+          </Typography>
        </Button>
      </footer>
    </div>
--- a/packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/mobile.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/mobile.module.css
@@ -92,6 +92,7 @@ div.months {

 .footer .button {
  width: 100%;
+  color: var(--UI-Opacity-White-100);
 }

 td.day,