feat(BOOK-743): Replaced deprecated Button component

Approved-by: Bianca Widstam

packages/design-system/lib/components/Modal/ModalContentWithActions/index.tsx

@@ -1,5 +1,6 @@
-import { MaterialIcon } from "../../Icons/MaterialIcon"
-import { OldDSButton as Button } from "../../OldDSButton"
+import { useIntl } from "react-intl"
+import { Button, ButtonProps } from "../../Button"
+import { IconButton } from "../../IconButton"
 import { Typography } from "../../Typography"
 
 import styles from "./modalContent.module.css"
@@ -9,18 +10,19 @@ import type { ReactNode } from "react"
 interface ModalContentProps {
   title?: string
   content: ReactNode
-  primaryAction: {
-    label: string
-    onClick: () => void
-    intent?: "primary" | "secondary" | "text"
-    isLoading?: boolean
-    disabled?: boolean
-  } | null
-  secondaryAction: {
-    label: string
-    onClick: () => void
-    intent?: "primary" | "secondary" | "text"
-  } | null
+  primaryAction:
+    | (Pick<
+        ButtonProps,
+        "onPress" | "variant" | "isPending" | "isDisabled" | "type"
+      > & {
+        label: string
+      })
+    | null
+  secondaryAction:
+    | (Pick<ButtonProps, "onPress" | "variant"> & {
+        label: string
+      })
+    | null
   onClose?: () => void
 }
 
@@ -31,6 +33,7 @@ export function ModalContentWithActions({
   secondaryAction,
   onClose,
 }: ModalContentProps) {
+  const intl = useIntl()
   return (
     <>
       {title && (
@@ -38,29 +41,36 @@ export function ModalContentWithActions({
           <Typography variant="Title/Subtitle/md">
             <p>{title}</p>
           </Typography>
-          <button onClick={onClose} type="button" className={styles.close}>
-            <MaterialIcon icon="close" color="Icon/Interactive/Placeholder" />
-          </button>
+          <IconButton
+            variant="Muted"
+            emphasis
+            onPress={onClose}
+            type="button"
+            className={styles.close}
+            iconName="close"
+            aria-label={intl.formatMessage({
+              id: "common.close",
+              defaultMessage: "Close",
+            })}
+          />
         </header>
       )}
       <div className={styles.content}>{content}</div>
       <footer className={styles.footer}>
         {secondaryAction && (
           <Button
-            theme="base"
-            intent={secondaryAction.intent ?? "text"}
-            color="burgundy"
-            onClick={secondaryAction.onClick}
+            variant={secondaryAction.variant ?? "Text"}
+            onPress={secondaryAction.onPress}
           >
             {secondaryAction.label}
           </Button>
         )}
         {primaryAction && (
           <Button
-            theme="base"
-            intent={primaryAction.intent ?? "secondary"}
-            onClick={primaryAction.onClick}
-            disabled={primaryAction.isLoading || primaryAction.disabled}
+            variant={primaryAction.variant ?? "Secondary"}
+            onPress={primaryAction.onPress}
+            isPending={primaryAction.isPending}
+            isDisabled={primaryAction.isDisabled}
           >
             {primaryAction.label}
           </Button>

packages/design-system/lib/components/Modal/ModalContentWithActions/modalContent.module.css

@@ -24,16 +24,9 @@
 }
 
 .close {
-  background: none;
-  border: none;
-  cursor: pointer;
   position: absolute;
-  display: flex;
-  align-items: center;
-  padding: 0;
-  justify-content: center;
-  top: 20px;
-  right: 20px;
+  top: var(--Space-x2);
+  right: var(--Space-x2);
 }
 
 @media screen and (min-width: 768px) {