feat(BOOK-743): Replaced deprecated Button component

Approved-by: Bianca Widstam
2026-01-21 09:38:38 +00:00
parent f834433d4d
commit 8e08af718c
77 changed files with 575 additions and 2233 deletions
--- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/GuestsRoom/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/GuestsRoom/index.tsx
@@ -2,7 +2,6 @@ import { useIntl } from "react-intl"

 import { Button } from "@scandic-hotels/design-system/Button"
 import { Divider } from "@scandic-hotels/design-system/Divider"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { ChildBedMapEnum } from "@scandic-hotels/trpc/enums/childBedMapEnum"

@@ -55,11 +54,9 @@ export function GuestsRoom({
            variant="Text"
            onPress={() => onRemove(index)}
            size="sm"
-            color="Primary"
            className={styles.roomActionsButton}
-            wrapping
+            leadingIconName="delete"
          >
-            <MaterialIcon icon="delete" color="CurrentColor" />
            {intl.formatMessage({
              id: "bookingWidget.roomsPicker.removeRoom",
              defaultMessage: "Remove room",
--- a/packages/booking-flow/lib/components/EnterDetails/Details/MemberPriceModal/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/Details/MemberPriceModal/index.tsx
@@ -6,9 +6,9 @@ import { useIntl } from "react-intl"

 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
+import { Button } from "@scandic-hotels/design-system/Button"
 import MagicWandIcon from "@scandic-hotels/design-system/Icons/MagicWandIcon"
 import Modal from "@scandic-hotels/design-system/Modal"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import { useRoomContext } from "../../../../contexts/EnterDetails/RoomContext"
@@ -89,7 +89,7 @@ export default function MemberPriceModal() {
            </span>
          )}
        </div>
-        <Button intent="primary" theme="base" onClick={() => setIsOpen(false)}>
+        <Button variant="Primary" onPress={() => setIsOpen(false)}>
          {intl.formatMessage({
            id: "enterDetails.memberPriceModal.okButtonLabel",
            defaultMessage: "OK",
--- a/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx
@@ -10,9 +10,9 @@ import {
 import { useIntl } from "react-intl"

 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
+import { Button } from "@scandic-hotels/design-system/Button"
 import { Divider } from "@scandic-hotels/design-system/Divider"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import { getRoomFeatureDescription } from "../../../../utils/getRoomFeatureDescription"
@@ -42,18 +42,15 @@ export default function PriceChangeSummary({
  return (
    <DialogTrigger>
      <Button
-        intent="text"
-        size="small"
-        theme="base"
-        variant="icon"
-        wrapping
-        onClick={() => toggleOpen((isOpen) => !isOpen)}
+        variant="Text"
+        size="sm"
+        onPress={() => toggleOpen((isOpen) => !isOpen)}
+        trailingIconName="chevron_right"
      >
        {intl.formatMessage({
          id: "enterDetails.priceChangeDialog.seePriceDetailsButton",
          defaultMessage: "See price details",
        })}
-        <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
      </Button>
      <ModalOverlay isOpen={isOpen} onOpenChange={toggleOpen}>
        <Modal>
@@ -69,13 +66,17 @@ export default function PriceChangeSummary({
                      })}
                    </p>
                  </Typography>
-                  <Button
+                  <IconButton
+                    iconName="close"
+                    variant="Muted"
+                    emphasis
                    onPress={close}
-                    variant="clean"
                    className={styles.closeButton}
-                  >
-                    <MaterialIcon icon="close" size={20} color="CurrentColor" />
-                  </Button>
+                    aria-label={intl.formatMessage({
+                      id: "common.close",
+                      defaultMessage: "Close",
+                    })}
+                  />
                </header>
                <section>
                  <div>
@@ -235,13 +236,13 @@ export default function PriceChangeSummary({
                  </div>
                </section>
                <footer className={styles.footer}>
-                  <Button intent="secondary" onClick={onCancel}>
+                  <Button variant="Secondary" onPress={onCancel}>
                    {intl.formatMessage({
                      id: "enterDetails.priceChangeDialog.cancelButton",
                      defaultMessage: "Back to room selection",
                    })}
                  </Button>
-                  <Button onClick={onAccept}>
+                  <Button variant="Primary" onPress={onAccept}>
                    {intl.formatMessage({
                      id: "enterDetails.priceChangeDialog.acceptButton",
                      defaultMessage: "Continue with new price",
--- a/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/index.tsx
@@ -2,8 +2,8 @@ import { Dialog, Modal, ModalOverlay } from "react-aria-components"
 import { useIntl } from "react-intl"

 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
+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 { Typography } from "@scandic-hotels/design-system/Typography"

 import { useEnterDetailsStore } from "../../../stores/enter-details"
@@ -152,13 +152,13 @@ export default function PriceChangeDialog({
            />
          </header>
          <footer className={styles.footer}>
-            <Button intent="secondary" onClick={onCancel}>
+            <Button variant="Secondary" onPress={onCancel}>
              {intl.formatMessage({
                id: "enterDetails.priceChangeDialog.cancelButton",
                defaultMessage: "Back to room selection",
              })}
            </Button>
-            <Button onClick={onAccept}>
+            <Button variant="Primary" onPress={onAccept}>
              {intl.formatMessage({
                id: "enterDetails.priceChangeDialog.acceptButton",
                defaultMessage: "Continue with new price",
--- a/packages/booking-flow/lib/components/ListingHotelCardDialog/index.tsx
+++ b/packages/booking-flow/lib/components/ListingHotelCardDialog/index.tsx
@@ -5,13 +5,12 @@ import { useIntl } from "react-intl"

 import { selectRate } from "@scandic-hotels/common/constants/routes/hotelReservation"
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
+import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { FacilityToIcon } from "@scandic-hotels/design-system/FacilityToIcon"
 import { HotelCardDialogImage } from "@scandic-hotels/design-system/HotelCard/HotelCardDialogImage"
 import { HotelPointsRow } from "@scandic-hotels/design-system/HotelCard/HotelPointsRow"
 import { NoPriceAvailableCard } from "@scandic-hotels/design-system/HotelCard/NoPriceAvailableCard"
 import { IconButton } from "@scandic-hotels/design-system/IconButton"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import { useIsLoggedIn } from "../../hooks/useIsLoggedIn"
@@ -233,23 +232,17 @@ export default function ListingHotelCardDialog({
                </Typography>
              </div>
            ) : (
-              <Button
-                asChild
-                theme="base"
-                size="small"
+              <ButtonLink
+                variant="Primary"
+                size="sm"
                className={styles.button}
+                href={`${selectRate(lang)}?hotel=${operaId}`}
              >
-                <Link
-                  href={`${selectRate(lang)}?hotel=${operaId}`}
-                  color="none"
-                  keepSearchParams
-                >
-                  {intl.formatMessage({
-                    id: "common.seeRooms",
-                    defaultMessage: "See rooms",
-                  })}
-                </Link>
-              </Button>
+                {intl.formatMessage({
+                  id: "common.seeRooms",
+                  defaultMessage: "See rooms",
+                })}
+              </ButtonLink>
            )}
          </div>
        ) : (
--- a/packages/booking-flow/lib/components/SelectHotel/MobileMapButtonContainer/index.tsx
+++ b/packages/booking-flow/lib/components/SelectHotel/MobileMapButtonContainer/index.tsx
@@ -1,14 +1,13 @@
 "use client"

+import { useSearchParams } from "next/navigation"
 import { useIntl } from "react-intl"

 import {
  alternativeHotelsMap,
  selectHotelMap,
 } from "@scandic-hotels/common/constants/routes/hotelReservation"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Link from "@scandic-hotels/design-system/OldDSLink"
+import ButtonLink from "@scandic-hotels/design-system/ButtonLink"

 import useLang from "../../../hooks/useLang"
 import FilterAndSortModal from "../Filters/FilterAndSortModal"
@@ -26,30 +25,25 @@ export default function MobileMapButtonContainer({
 }) {
  const intl = useIntl()
  const lang = useLang()
+  const searchParams = useSearchParams()
+
+  const url = isAlternative ? alternativeHotelsMap(lang) : selectHotelMap(lang)
+  const search = searchParams.toString()
+  const href = search ? `${url}?${search}` : url

  return (
    <div className={styles.buttonContainer}>
-      <Button
-        asChild
-        theme="base"
-        variant="icon"
-        intent="secondary"
-        size="small"
+      <ButtonLink
+        variant="Secondary"
+        href={href}
+        size="sm"
+        leadingIconName="map"
      >
-        <Link
-          href={
-            isAlternative ? alternativeHotelsMap(lang) : selectHotelMap(lang)
-          }
-          keepSearchParams
-          weight="bold"
-        >
-          <MaterialIcon icon="map" color="CurrentColor" />
-          {intl.formatMessage({
-            id: "destination.seeOnMap",
-            defaultMessage: "See on map",
-          })}
-        </Link>
-      </Button>
+        {intl.formatMessage({
+          id: "destination.seeOnMap",
+          defaultMessage: "See on map",
+        })}
+      </ButtonLink>
      <FilterAndSortModal filters={filters} />
    </div>
  )
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/DesktopSummary.tsx
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/DesktopSummary.tsx
@@ -3,7 +3,7 @@ import { useIntl } from "react-intl"

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

 import { useIsLoggedIn } from "../../../../hooks/useIsLoggedIn"
@@ -215,9 +215,10 @@ export function DesktopSummary({
          </div>
          <Button
            className={styles.continueButton}
-            disabled={!isAllRoomsSelected || isSubmitting}
-            theme="base"
+            isDisabled={!isAllRoomsSelected}
+            isPending={isSubmitting}
            type="submit"
+            variant="Primary"
          >
            {intl.formatMessage({
              id: "common.continue",
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/rateSummary.module.css
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/rateSummary.module.css
@@ -78,7 +78,6 @@

 .continueButton {
  margin-left: auto;
-  height: fit-content;
  width: 100%;
  min-width: 140px;
 }
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/index.tsx
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/index.tsx
@@ -2,8 +2,7 @@ import { useEffect } from "react"
 import { useIntl } from "react-intl"

 import useStickyPosition from "@scandic-hotels/common/hooks/useStickyPosition"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+import { Button } from "@scandic-hotels/design-system/Button"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import { useSelectRateContext } from "../../../../../contexts/SelectRate/SelectRateContext"
@@ -122,23 +121,15 @@ export function MultiRoomWrapper({ children, isMultiRoom, roomIndex }: Props) {
          )}
          {selectedRate && isActiveRoom ? (
            <Button
-              intent="text"
-              onClick={() => {
-                setActiveRoom("deselect")
-              }}
-              size="medium"
-              theme="base"
-              variant="icon"
+              variant="Text"
+              onPress={() => setActiveRoom("deselect")}
+              size="md"
+              trailingIconName="keyboard_arrow_up"
            >
              {intl.formatMessage({
                id: "common.close",
                defaultMessage: "Close",
              })}
-              <MaterialIcon
-                icon="keyboard_arrow_up"
-                size={20}
-                color="CurrentColor"
-              />
            </Button>
          ) : null}
        </div>