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}

packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/rateSummary.module.css

@@ -37,6 +37,14 @@
   max-width: 264px;
 }
 
+.alignRight {
+  text-align: right;
+}
+
+.red {
+  color: var(--Text-Accent-Primary);
+}
+
 .summaryPrice {
   align-self: center;
   display: flex;
@@ -77,8 +85,8 @@
   display: block;
 }
 
-.selectRoom {
-  color: var(--UI-Text-Placeholder);
+.placeholderText {
+  color: var(--Text-Tertiary);
 }
 
 .uiTextMediumContrast {

packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx

@@ -8,7 +8,6 @@ import Caption from "@scandic-hotels/design-system/Caption"
 import { ChipButton } from "@scandic-hotels/design-system/ChipButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Image from "@scandic-hotels/design-system/Image"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useSelectRateContext } from "../../../../../../contexts/SelectRate/SelectRateContext"
@@ -56,9 +55,9 @@ export function SelectedRoomPanel({ roomIndex }: { roomIndex: number }) {
             { roomIndex: roomNr }
           )}
         </Caption>
-        <Subtitle className={styles.subtitle} color="uiTextHighContrast">
-          {selectedRate.roomInfo.roomType}
-        </Subtitle>
+        <Typography variant="Title/Subtitle/md" className={styles.subtitle}>
+          <p>{selectedRate.roomInfo.roomType}</p>
+        </Typography>
         <Typography variant="Body/Paragraph/mdRegular">
           <div>
             <p className={styles.uiTextMediumContrast}>{rateTitle}</p>

packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/index.tsx

@@ -4,7 +4,7 @@ import { useIntl } from "react-intl"
 import useStickyPosition from "@scandic-hotels/common/hooks/useStickyPosition"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 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 { useSelectRateContext } from "../../../../../contexts/SelectRate/SelectRateContext"
 import { SelectedRoomPanel } from "./SelectedRoomPanel"
@@ -116,7 +116,9 @@ export function MultiRoomWrapper({ children, isMultiRoom, roomIndex }: Props) {
 
         <div className={styles.header}>
           {selectedRate && !isActiveRoom ? null : (
-            <Subtitle color="uiTextHighContrast">{title}</Subtitle>
+            <Typography variant="Title/Subtitle/md">
+              <p>{title}</p>
+            </Typography>
           )}
           {selectedRate && isActiveRoom ? (
             <Button