feat(BOOK-743): Replaced deprecated Button component

Approved-by: Bianca Widstam

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",

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",

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",