feat(BOOK-743): Replaced deprecated Button component

Approved-by: Bianca Widstam

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/RemoveButton.tsx

@@ -1,8 +1,7 @@
 import { useRouter } from "next/navigation"
 import { useIntl } from "react-intl"
 
-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 { toast } from "@scandic-hotels/design-system/Toast"
 import { trpc } from "@scandic-hotels/trpc/client"
 
@@ -56,8 +55,7 @@ export default function RemoveButton({
         defaultMessage: "Remove",
       })} ${title}`}
       trigger={
-        <Button intent="text" size="small" variant="icon" theme="base">
-          <MaterialIcon icon="delete" color="CurrentColor" />
+        <Button variant="Text" size="sm" leadingIconName="delete">
           {intl.formatMessage({
             id: "common.remove",
             defaultMessage: "Remove",

apps/scandic-web/components/HotelReservation/MyStay/GuestDetails/index.tsx

@@ -8,10 +8,10 @@ import { useIntl } from "react-intl"
 
 import { profileEdit } from "@scandic-hotels/common/constants/routes/myPages"
 import { formatPhoneNumber } from "@scandic-hotels/common/utils/phone"
+import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Modal from "@scandic-hotels/design-system/Modal"
 import { ModalContentWithActions } from "@scandic-hotels/design-system/Modal/ModalContentWithActions"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { toast } from "@scandic-hotels/design-system/Toast"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"
@@ -232,56 +232,32 @@ export default function GuestDetails({
         <>
           {isMemberBooking ? (
             <Button
-              variant="icon"
-              color="burgundy"
-              intent="secondary"
-              onClick={handleModifyMemberDetails}
-              disabled={isCancelled}
-              size="small"
+              variant="Secondary"
+              onPress={handleModifyMemberDetails}
+              isDisabled={isCancelled}
+              size="sm"
+              leadingIconName="edit"
             >
-              <MaterialIcon
-                icon="edit"
-                color="Icon/Interactive/Default"
-                size={20}
-              />
-              <Typography variant="Body/Paragraph/mdRegular">
-                <span>
-                  {intl.formatMessage({
-                    id: "myStay.guestDetails.modifyGuestDetails",
-                    defaultMessage: "Edit guest details",
-                  })}
-                </span>
-              </Typography>
+              {intl.formatMessage({
+                id: "myStay.guestDetails.modifyGuestDetails",
+                defaultMessage: "Edit guest details",
+              })}
             </Button>
           ) : (
             <>
               <Button
-                variant="icon"
-                color="burgundy"
-                intent="secondary"
-                onClick={() =>
+                variant="Secondary"
+                onPress={() =>
                   setIsModifyGuestDetailsOpen(!isModifyGuestDetailsOpen)
                 }
-                disabled={isCancelled}
-                size="small"
+                isDisabled={isCancelled}
+                size="sm"
+                leadingIconName="edit"
               >
-                <MaterialIcon
-                  icon="edit"
-                  color={
-                    isCancelled
-                      ? "Icon/Interactive/Disabled"
-                      : "Icon/Interactive/Default"
-                  }
-                  size={20}
-                />
-                <Typography variant="Body/Paragraph/mdRegular">
-                  <span>
-                    {intl.formatMessage({
-                      id: "myStay.guestDetails.modifyGuestDetails",
-                      defaultMessage: "Edit guest details",
-                    })}
-                  </span>
-                </Typography>
+                {intl.formatMessage({
+                  id: "myStay.guestDetails.modifyGuestDetails",
+                  defaultMessage: "Edit guest details",
+                })}
               </Button>
               {isModifyGuestDetailsOpen && (
                 <Modal
@@ -322,11 +298,14 @@ export default function GuestDetails({
                                   id: "common.confirm",
                                   defaultMessage: "Confirm",
                                 }),
-                            onClick: isFirstStep
-                              ? () => setCurrentStep(MODAL_STEPS.CONFIRMATION)
-                              : form.handleSubmit(onSubmit),
-                            disabled: !form.formState.isValid || isLoading,
-                            intent: isFirstStep ? "secondary" : "primary",
+                            onPress: () =>
+                              isFirstStep
+                                ? setCurrentStep(MODAL_STEPS.CONFIRMATION)
+                                : form.handleSubmit(onSubmit)(),
+                            type: isFirstStep ? "button" : "submit",
+                            isDisabled: !form.formState.isValid,
+                            isPending: isLoading,
+                            variant: isFirstStep ? "Secondary" : "Primary",
                           }}
                           secondaryAction={{
                             label: isFirstStep
@@ -338,7 +317,7 @@ export default function GuestDetails({
                                   id: "common.cancel",
                                   defaultMessage: "Cancel",
                                 }),
-                            onClick: () => {
+                            onPress: () => {
                               close()
                               setCurrentStep(MODAL_STEPS.INITIAL)
                             },

apps/scandic-web/components/HotelReservation/MyStay/Modal/ModalContent/Footer/index.tsx

@@ -1,65 +1,7 @@
-import {
-  type ButtonProps as _ButtonProps,
-  OldDSButton as Button,
-} from "@scandic-hotels/design-system/OldDSButton"
-
 import styles from "./footer.module.css"
 
-import type { ButtonHTMLAttributes, PropsWithChildren } from "react"
-import type { ButtonProps as ReactAriaButtonProps } from "react-aria-components"
+import type { PropsWithChildren } from "react"
 
 export default function Footer({ children }: PropsWithChildren) {
   return <footer className={styles.footer}>{children}</footer>
 }
-
-interface ButtonProps extends PropsWithChildren {
-  intent?: _ButtonProps["intent"]
-  onClick?: ReactAriaButtonProps["onPress"]
-  type?: ButtonHTMLAttributes<HTMLButtonElement>["type"]
-}
-
-interface PrimaryButtonProps extends ButtonProps {
-  disabled?: boolean
-  form?: string
-}
-
-Footer.Primary = function PrimaryButton({
-  children,
-  disabled = false,
-  form,
-  intent = "primary",
-  onClick,
-  type = "button",
-}: PrimaryButtonProps) {
-  return (
-    <Button
-      disabled={disabled}
-      form={form}
-      intent={intent}
-      onClick={onClick}
-      theme="base"
-      type={type}
-    >
-      {children}
-    </Button>
-  )
-}
-
-Footer.Secondary = function SecondaryButton({
-  children,
-  intent = "text",
-  onClick,
-  type = "button",
-}: ButtonProps) {
-  return (
-    <Button
-      color="burgundy"
-      intent={intent}
-      onClick={onClick}
-      theme="base"
-      type={type}
-    >
-      {children}
-    </Button>
-  )
-}

apps/scandic-web/components/HotelReservation/MyStay/Promo/index.tsx

@@ -1,6 +1,7 @@
+import NextLink from "next/link"
+
+import { FakeButton } from "@scandic-hotels/design-system/FakeButton"
 import Image from "@scandic-hotels/design-system/Image"
-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 styles from "./promo.module.css"
@@ -25,31 +26,29 @@ export default function Promo({
   image,
 }: PromoProps) {
   return (
-    <Link color="none" href={href}>
-      <article className={styles.promo}>
-        {image && (
-          <div className={styles.imageContainer}>
-            <Image
-              className={styles.image}
-              src={image.src}
-              alt={image.altText || image.altText_En}
-              fill
-            />
-          </div>
-        )}
-        <div className={styles.overlay} />
-        <div className={styles.content}>
-          <Typography variant="Title/smLowCase">
-            <p>{title}</p>
-          </Typography>
-          <Typography variant="Body/Paragraph/mdRegular">
-            <p className={styles.text}>{text}</p>
-          </Typography>
-          <Button asChild intent="secondary" size="small" theme="primaryStrong">
-            <span>{buttonText}</span>
-          </Button>
+    <NextLink className={styles.promo} href={href}>
+      {image && (
+        <div className={styles.imageContainer}>
+          <Image
+            className={styles.image}
+            src={image.src}
+            alt={image.altText || image.altText_En}
+            fill
+          />
         </div>
-      </article>
-    </Link>
+      )}
+      <div className={styles.overlay} />
+      <div className={styles.content}>
+        <Typography variant="Title/smLowCase">
+          <p>{title}</p>
+        </Typography>
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p className={styles.text}>{text}</p>
+        </Typography>
+        <FakeButton variant="Secondary" color="Inverted" size="sm">
+          {buttonText}
+        </FakeButton>
+      </div>
+    </NextLink>
   )
 }

apps/scandic-web/components/HotelReservation/MyStay/Promo/promo.module.css

@@ -3,6 +3,7 @@
   position: relative;
   display: flex;
   overflow: hidden;
+  text-decoration: none;
 }
 
 .content {

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/CustomerSupportModal/index.tsx

@@ -3,6 +3,7 @@ import Link from "next/link"
 import { Dialog } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -69,18 +70,18 @@ export default function CustomerSupportModal() {
               </div>
             </Modal.Content.Body>
             <Modal.Content.Footer>
-              <Modal.Content.Footer.Secondary onClick={close}>
+              <Button variant="Text" onPress={close}>
                 {intl.formatMessage({
                   id: "common.back",
                   defaultMessage: "Back",
                 })}
-              </Modal.Content.Footer.Secondary>
-              <Modal.Content.Footer.Primary intent="secondary" onClick={close}>
+              </Button>
+              <Button variant="Secondary" onPress={close}>
                 {intl.formatMessage({
                   id: "common.close",
                   defaultMessage: "Close",
                 })}
-              </Modal.Content.Footer.Primary>
+              </Button>
             </Modal.Content.Footer>
           </Modal.Content>
         )}

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/CancelStay/Alerts.tsx

@@ -4,6 +4,7 @@ import { useIntl } from "react-intl"
 import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
 import { CancellationRuleEnum } from "@scandic-hotels/common/constants/booking"
 import { Alert } from "@scandic-hotels/design-system/Alert"
+import { Button } from "@scandic-hotels/design-system/Button"
 
 import { useMyStayStore } from "@/stores/my-stay"
 
@@ -64,12 +65,12 @@ export default function Alerts({ children, closeModal }: AlertsProps) {
           <Alert type={AlertTypeEnum.Info} heading={heading} text={text} />
         </Modal.Content.Body>
         <Modal.Content.Footer>
-          <Modal.Content.Footer.Secondary onClick={closeModal}>
+          <Button variant="Text" onPress={closeModal}>
             {intl.formatMessage({
               id: "common.back",
               defaultMessage: "Back",
             })}
-          </Modal.Content.Footer.Secondary>
+          </Button>
         </Modal.Content.Footer>
       </Modal.Content>
     )

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/CancelStay/Steps/Confirmation/index.tsx

@@ -4,6 +4,7 @@ import { useIntl } from "react-intl"
 
 import { longDateWithYearFormat } from "@scandic-hotels/common/constants/dateFormats"
 import { dt } from "@scandic-hotels/common/dt"
+import { Button } from "@scandic-hotels/design-system/Button"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useMyStayStore } from "@/stores/my-stay"
@@ -116,25 +117,25 @@ export default function CancelStayConfirmation({
         </form>
       </Modal.Content.Body>
       <Modal.Content.Footer>
-        <Modal.Content.Footer.Secondary onClick={closeModal}>
+        <Button variant="Text" onPress={closeModal}>
           {secondaryLabel}
-        </Modal.Content.Footer.Secondary>
+        </Button>
         {isCancelable ? (
-          <Modal.Content.Footer.Primary
-            disabled={!isValid}
+          <Button
+            isDisabled={!isValid}
             form="cancel-stay"
-            intent="secondary"
+            variant="Secondary"
             type="submit"
           >
             {primaryLabel}
-          </Modal.Content.Footer.Primary>
+          </Button>
         ) : (
-          <Modal.Content.Footer.Primary intent="secondary" onClick={closeModal}>
+          <Button variant="Secondary" onPress={closeModal}>
             {intl.formatMessage({
               id: "common.close",
               defaultMessage: "Close",
             })}
-          </Modal.Content.Footer.Primary>
+          </Button>
         )}
       </Modal.Content.Footer>
     </Modal.Content>

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/CancelStay/Steps/FinalConfirmation/index.tsx

@@ -3,6 +3,7 @@ import { differenceInCalendarDays } from "date-fns"
 import { useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
 import { toast } from "@scandic-hotels/design-system/Toast"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"
@@ -188,15 +189,16 @@ export default function FinalConfirmation({
         <CancelStayPriceContainer />
       </Modal.Content.Body>
       <Modal.Content.Footer>
-        <Modal.Content.Footer.Secondary onClick={closeModal}>
+        <Button variant="Text" onPress={closeModal}>
           {dontCancel}
-        </Modal.Content.Footer.Secondary>
-        <Modal.Content.Footer.Primary
-          disabled={cancelBookingsMutation.isPending}
-          onClick={cancelBooking}
+        </Button>
+        <Button
+          variant="Primary"
+          isPending={cancelBookingsMutation.isPending}
+          onPress={cancelBooking}
         >
           {confirm}
-        </Modal.Content.Footer.Primary>
+        </Button>
       </Modal.Content.Footer>
     </Modal.Content>
   )

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ChangeDates/Alerts/CannotChange/index.tsx

@@ -1,6 +1,7 @@
 "use client"
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useMyStayStore } from "@/stores/my-stay"
@@ -45,9 +46,9 @@ export default function CannotChangeDate({
         </Typography>
       </Modal.Content.Body>
       <Modal.Content.Footer>
-        <Modal.Content.Footer.Secondary onClick={closeModal}>
+        <Button variant="Text" onPress={closeModal}>
           {intl.formatMessage({ defaultMessage: "Back", id: "common.back" })}
-        </Modal.Content.Footer.Secondary>
+        </Button>
       </Modal.Content.Footer>
     </Modal.Content>
   )

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ChangeDates/Alerts/CustomerSupport/index.tsx

@@ -2,6 +2,7 @@
 import Link from "next/link"
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -69,9 +70,9 @@ export default function CustomerSupport({
         </div>
       </Modal.Content.Body>
       <Modal.Content.Footer>
-        <Modal.Content.Footer.Secondary onClick={closeModal}>
+        <Button variant="Text" onPress={closeModal}>
           {intl.formatMessage({ defaultMessage: "Back", id: "common.back" })}
-        </Modal.Content.Footer.Secondary>
+        </Button>
       </Modal.Content.Footer>
     </Modal.Content>
   )

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ChangeDates/Alerts/NotMainRoom.tsx

@@ -3,6 +3,7 @@ import { useIntl } from "react-intl"
 
 import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
 import { Alert } from "@scandic-hotels/design-system/Alert"
+import { Button } from "@scandic-hotels/design-system/Button"
 
 import Modal from "@/components/HotelReservation/MyStay/Modal"
 
@@ -36,9 +37,9 @@ export default function NotMainRoom({
         />
       </Modal.Content.Body>
       <Modal.Content.Footer>
-        <Modal.Content.Footer.Secondary onClick={closeModal}>
+        <Button variant="Text" onPress={closeModal}>
           {intl.formatMessage({ defaultMessage: "Back", id: "common.back" })}
-        </Modal.Content.Footer.Secondary>
+        </Button>
       </Modal.Content.Footer>
     </Modal.Content>
   )

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ChangeDates/Steps/Confirmation/index.tsx

@@ -3,6 +3,7 @@ import { useIntl } from "react-intl"
 
 import { longDateWithYearFormat } from "@scandic-hotels/common/constants/dateFormats"
 import { dt } from "@scandic-hotels/common/dt"
+import { Button } from "@scandic-hotels/design-system/Button"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { toast } from "@scandic-hotels/design-system/Toast"
 import { trpc } from "@scandic-hotels/trpc/client"
@@ -180,18 +181,19 @@ export default function Confirmation({
         </div>
       </Modal.Content.Body>
       <Modal.Content.Footer>
-        <Modal.Content.Footer.Secondary onClick={closeModal}>
+        <Button variant="Text" onPress={closeModal}>
           {intl.formatMessage({ defaultMessage: "Back", id: "common.back" })}
-        </Modal.Content.Footer.Secondary>
-        <Modal.Content.Footer.Primary
-          disabled={updateBooking.isPending}
-          onClick={handleModifyStay}
+        </Button>
+        <Button
+          variant="Primary"
+          isPending={updateBooking.isPending}
+          onPress={handleModifyStay}
         >
           {intl.formatMessage({
             defaultMessage: "Confirm",
             id: "common.confirm",
           })}
-        </Modal.Content.Footer.Primary>
+        </Button>
       </Modal.Content.Footer>
     </Modal.Content>
   )

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ChangeDates/Steps/Form/index.tsx

@@ -4,6 +4,7 @@ import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { dt } from "@scandic-hotels/common/dt"
+import { Button } from "@scandic-hotels/design-system/Button"
 import { toast } from "@scandic-hotels/design-system/Toast"
 
 import { useMyStayStore } from "@/stores/my-stay"
@@ -68,22 +69,22 @@ export default function Form({
             <NewDates checkInDate={checkInDate} checkOutDate={checkOutDate} />
           </Modal.Content.Body>
           <Modal.Content.Footer>
-            <Modal.Content.Footer.Secondary onClick={closeModal}>
+            <Button variant="Text" onPress={closeModal}>
               {intl.formatMessage({
                 defaultMessage: "Back",
                 id: "common.back",
               })}
-            </Modal.Content.Footer.Secondary>
-            <Modal.Content.Footer.Primary
-              disabled={methods.formState.isSubmitting}
-              intent="secondary"
+            </Button>
+            <Button
+              variant="Secondary"
               type="submit"
+              isPending={methods.formState.isSubmitting}
             >
               {intl.formatMessage({
                 id: "myStay.actions.changeDates.checkAvailability",
                 defaultMessage: "Check availability",
               })}
-            </Modal.Content.Footer.Primary>
+            </Button>
           </Modal.Content.Footer>
         </Modal.Content>
       </form>

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/GuaranteeLateArrival/GuaranteeDialog/index.tsx

@@ -1,6 +1,8 @@
 import { Dialog } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
+
 import Modal from "@/components/HotelReservation/MyStay/Modal"
 
 import Form from "../Form"
@@ -28,18 +30,18 @@ export default function GuaranteeDialog({ error }: GuaranteeDialogProps) {
             <Form error={error} />
           </Modal.Content.Body>
           <Modal.Content.Footer>
-            <Modal.Content.Footer.Secondary onClick={close}>
+            <Button variant="Text" onPress={close}>
               {intl.formatMessage({
                 id: "common.back",
                 defaultMessage: "Back",
               })}
-            </Modal.Content.Footer.Secondary>
-            <Modal.Content.Footer.Primary form="guarantee" type="submit">
+            </Button>
+            <Button variant="Primary" form="guarantee" type="submit">
               {intl.formatMessage({
                 id: "common.confirm",
                 defaultMessage: "Confirm",
               })}
-            </Modal.Content.Footer.Primary>
+            </Button>
           </Modal.Content.Footer>
         </Modal.Content>
       )}