feat(SW-2178): Changed to new buttons for summary inside enter details

Approved-by: Michael Zetterberg
Approved-by: Matilda Landström

apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/index.tsx

@@ -3,6 +3,7 @@
 import { Fragment } from "react"
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
 import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -12,7 +13,6 @@ import { dt } from "@/lib/dt"
 import PriceDetailsModal from "@/components/HotelReservation/PriceDetailsModal"
 import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
 import Modal from "@/components/Modal"
-import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
 import IconChip from "@/components/TempDesignSystem/IconChip"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -109,10 +109,9 @@ export default function SummaryUI({
           {dt(booking.toDate).locale(lang).format("ddd, D MMM")} ({nights})
         </Body>
         <Button
-          intent="text"
-          size="small"
+          onPress={handleToggleSummary}
           className={styles.chevronButton}
-          onClick={handleToggleSummary}
+          variant="Icon"
         >
           <MaterialIcon
             icon="keyboard_arrow_down"
@@ -219,10 +218,17 @@ export default function SummaryUI({
                 </Caption>
                 <Modal
                   trigger={
-                    <Button intent="text">
-                      <Caption color="burgundy" type="underline">
-                        {intl.formatMessage({ id: "Rate details" })}
-                      </Caption>
+                    <Button
+                      variant="Text"
+                      typography="Body/Supporting text (caption)/smBold"
+                      wrapping={false}
+                    >
+                      {intl.formatMessage({ id: "Rate details" })}
+                      <MaterialIcon
+                        icon="chevron_right"
+                        size={20}
+                        color="CurrentColor"
+                      />
                     </Button>
                   }
                   title={

apps/scandic-web/components/HotelReservation/PriceDetailsModal.tsx

@@ -1,11 +1,10 @@
 "use client"
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import Modal from "@/components/Modal"
-import Button from "@/components/TempDesignSystem/Button"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 export default function PriceDetailsModal({
   children,
@@ -16,10 +15,12 @@ export default function PriceDetailsModal({
     <Modal
       title={intl.formatMessage({ id: "Price details" })}
       trigger={
-        <Button intent="text">
-          <Caption color="burgundy">
-            {intl.formatMessage({ id: "Price details" })}
-          </Caption>
+        <Button
+          variant="Text"
+          typography="Body/Supporting text (caption)/smBold"
+          wrapping={false}
+        >
+          {intl.formatMessage({ id: "Price details" })}
           <MaterialIcon icon="chevron_right" color="CurrentColor" size={20} />
         </Button>
       }

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Summary.tsx

@@ -2,6 +2,7 @@
 import { Fragment } from "react"
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import { dt } from "@/lib/dt"
@@ -9,7 +10,6 @@ import { dt } from "@/lib/dt"
 import PriceDetailsModal from "@/components/HotelReservation/PriceDetailsModal"
 import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
 import Modal from "@/components/Modal"
-import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -79,12 +79,7 @@ export default function Summary({
           />
           {dt(booking.toDate).locale(lang).format("ddd, D MMM")} ({nights})
         </Body>
-        <Button
-          intent="text"
-          size="small"
-          className={styles.chevronButton}
-          onClick={toggleSummaryOpen}
-        >
+        <Button onPress={toggleSummaryOpen} variant="Icon">
           <MaterialIcon
             icon="keyboard_arrow_down"
             size={20}
@@ -181,10 +176,17 @@ export default function Summary({
                 </Caption>
                 <Modal
                   trigger={
-                    <Button intent="text">
-                      <Caption color="burgundy" type="underline">
-                        {intl.formatMessage({ id: "Rate details" })}
-                      </Caption>
+                    <Button
+                      variant="Text"
+                      typography="Body/Supporting text (caption)/smBold"
+                      wrapping={false}
+                    >
+                      {intl.formatMessage({ id: "Rate details" })}
+                      <MaterialIcon
+                        icon="chevron_right"
+                        size={20}
+                        color="CurrentColor"
+                      />
                     </Button>
                   }
                   title={room.cancellationText}