Merged in chore/BOOK-701-replace-subtitle-component (pull request #3398)

chore(BOOK-701): replace subtitle with typography

* chore(BOOK-701): replace subtitle with typography

* chore(BOOK-701): align center

* chore(BOOK-701): change token

* chore(BOOK-701): change text color

* fix(BOOK-704): revert pricechange dialog changes

* chore(BOOK-701): remove subtitle from package.json


Approved-by: Matilda Landström

packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/DesktopSummary.tsx

@@ -1,3 +1,4 @@
+import { cx } from "class-variance-authority"
 import { useIntl } from "react-intl"
 
 import { RateEnum } from "@scandic-hotels/common/constants/rate"
@@ -5,7 +6,6 @@ import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import Caption from "@scandic-hotels/design-system/Caption"
 import Footnote from "@scandic-hotels/design-system/Footnote"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useIsLoggedIn } from "../../../../hooks/useIsLoggedIn"
@@ -152,18 +152,22 @@ export function DesktopSummary({
         </div>
         <div className={styles.summaryPrice}>
           <div className={styles.summaryPriceTextDesktop}>
-            <Subtitle
-              color={showDiscounted ? "red" : "uiTextHighContrast"}
-              textAlign="right"
+            <Typography
+              variant="Title/Subtitle/md"
+              className={cx(styles.alignRight, {
+                [styles.red]: showDiscounted,
+              })}
             >
-              {formatPrice(
-                intl,
-                selectedRates.totalPrice.local.price,
-                selectedRates.totalPrice.local.currency,
-                selectedRates.totalPrice.local.additionalPrice,
-                selectedRates.totalPrice.local.additionalPriceCurrency
-              )}
-            </Subtitle>
+              <p>
+                {formatPrice(
+                  intl,
+                  selectedRates.totalPrice.local.price,
+                  selectedRates.totalPrice.local.currency,
+                  selectedRates.totalPrice.local.additionalPrice,
+                  selectedRates.totalPrice.local.additionalPriceCurrency
+                )}
+              </p>
+            </Typography>
             {showDiscounted && selectedRates.totalPrice.local.regularPrice && (
               <Caption
                 textAlign="right"
@@ -210,15 +214,20 @@ export function DesktopSummary({
                 defaultMessage: "Total price",
               })}
             </Caption>
-            <Subtitle color={showDiscounted ? "red" : "uiTextHighContrast"}>
-              {formatPrice(
-                intl,
-                selectedRates.totalPrice.local.price,
-                selectedRates.totalPrice.local.currency,
-                selectedRates.totalPrice.local.additionalPrice,
-                selectedRates.totalPrice.local.additionalPriceCurrency
-              )}
-            </Subtitle>
+            <Typography
+              variant="Title/Subtitle/md"
+              className={cx({ [styles.red]: showDiscounted })}
+            >
+              <p>
+                {formatPrice(
+                  intl,
+                  selectedRates.totalPrice.local.price,
+                  selectedRates.totalPrice.local.currency,
+                  selectedRates.totalPrice.local.additionalPrice,
+                  selectedRates.totalPrice.local.additionalPriceCurrency
+                )}
+              </p>
+            </Typography>
             <Footnote
               color="uiTextMediumContrast"
               className={styles.summaryPriceTextMobile}
@@ -258,18 +267,23 @@ function RateSummary({
   if (!room || !room.isSelected) {
     return (
       <div key={`unselected-${roomIndex}`}>
-        <Subtitle color="uiTextPlaceholder">
-          {intl.formatMessage(
-            {
-              id: "booking.roomIndex",
-              defaultMessage: "Room {roomIndex}",
-            },
-            { roomIndex: roomIndex + 1 }
-          )}
-        </Subtitle>
+        <Typography
+          variant="Title/Subtitle/md"
+          className={styles.placeholderText}
+        >
+          <p>
+            {intl.formatMessage(
+              {
+                id: "booking.roomIndex",
+                defaultMessage: "Room {roomIndex}",
+              },
+              { roomIndex: roomIndex + 1 }
+            )}
+          </p>
+        </Typography>
         <Typography
           variant="Body/Paragraph/mdRegular"
-          className={styles.selectRoom}
+          className={styles.placeholderText}
         >
           <p>
             {intl.formatMessage({
@@ -286,12 +300,14 @@ function RateSummary({
     <div key={roomIndex}>
       {isMultiRoom ? (
         <>
-          <Subtitle color="uiTextHighContrast">
-            {intl.formatMessage(
-              { id: "booking.roomIndex", defaultMessage: "Room {roomIndex}" },
-              { roomIndex: roomIndex + 1 }
-            )}
-          </Subtitle>
+          <Typography variant="Title/Subtitle/md">
+            <p>
+              {intl.formatMessage(
+                { id: "booking.roomIndex", defaultMessage: "Room {roomIndex}" },
+                { roomIndex: roomIndex + 1 }
+              )}
+            </p>
+          </Typography>
           <Typography
             variant="Body/Paragraph/mdRegular"
             className={styles.uiTextMediumContrast}
@@ -304,9 +320,9 @@ function RateSummary({
         </>
       ) : (
         <>
-          <Subtitle color="uiTextHighContrast">
-            {room.roomInfo.roomType}
-          </Subtitle>
+          <Typography variant="Title/Subtitle/md">
+            <p>{room.roomInfo.roomType}</p>
+          </Typography>
           <Typography
             variant="Body/Paragraph/mdRegular"
             className={styles.uiTextMediumContrast}