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/EnterDetails/Details/MemberPriceModal/index.tsx

@@ -9,7 +9,6 @@ import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import MagicWandIcon from "@scandic-hotels/design-system/Icons/MagicWandIcon"
 import Modal from "@scandic-hotels/design-system/Modal"
 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 { useRoomContext } from "../../../../contexts/EnterDetails/RoomContext"
@@ -75,13 +74,18 @@ export default function MemberPriceModal() {
                   })}
                 </p>
               </Typography>
-              <Subtitle type="two" color="red">
-                {formatPrice(
-                  intl,
-                  memberPrice.pricePerStay ?? 0,
-                  memberPrice.currency ?? CurrencyEnum.Unknown
-                )}
-              </Subtitle>
+              <Typography
+                variant="Title/Subtitle/md"
+                className={styles.redPrice}
+              >
+                <p>
+                  {formatPrice(
+                    intl,
+                    memberPrice.pricePerStay ?? 0,
+                    memberPrice.currency ?? CurrencyEnum.Unknown
+                  )}
+                </p>
+              </Typography>
             </span>
           )}
         </div>

packages/booking-flow/lib/components/EnterDetails/Details/MemberPriceModal/modal.module.css

@@ -21,6 +21,9 @@
   gap: var(--Space-x1);
   align-items: center;
 }
+.redPrice {
+  color: var(--Text-Accent-Primary);
+}
 
 @media screen and (min-width: 768px) {
   .modalContent {

packages/booking-flow/lib/components/EnterDetails/Payment/PaymentCallback/TimeoutSpinner/index.tsx

@@ -4,7 +4,6 @@ import { useIntl } from "react-intl"
 
 import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
 import Link from "@scandic-hotels/design-system/OldDSLink"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useBookingFlowConfig } from "../../../../../bookingFlowConfig/bookingFlowConfigContext"
@@ -20,12 +19,14 @@ export default function TimeoutSpinner() {
   return (
     <div className={styles.container}>
       <LoadingSpinner />
-      <Subtitle className={styles.heading}>
-        {intl.formatMessage({
-          id: "enterDetails.payment.loadingTitle",
-          defaultMessage: "Taking longer than usual",
-        })}
-      </Subtitle>
+      <Typography variant="Title/Subtitle/md" className={styles.heading}>
+        <p>
+          {intl.formatMessage({
+            id: "enterDetails.payment.loadingTitle",
+            defaultMessage: "Taking longer than usual",
+          })}
+        </p>
+      </Typography>
       <Typography
         variant="Body/Paragraph/mdRegular"
         className={styles.messageContainer}

packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx

@@ -14,7 +14,6 @@ import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 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 { getRoomFeatureDescription } from "../../../../utils/getRoomFeatureDescription"
@@ -63,12 +62,14 @@ export default function PriceChangeSummary({
             {({ close }) => (
               <div className={styles.content}>
                 <header className={styles.header}>
-                  <Subtitle>
-                    {intl.formatMessage({
-                      id: "common.priceDetails",
-                      defaultMessage: "Price details",
-                    })}
-                  </Subtitle>
+                  <Typography variant="Title/Subtitle/md">
+                    <p>
+                      {intl.formatMessage({
+                        id: "common.priceDetails",
+                        defaultMessage: "Price details",
+                      })}
+                    </p>
+                  </Typography>
                   <Button
                     onPress={close}
                     variant="clean"

packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/index.tsx

@@ -5,7 +5,6 @@ import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import Caption from "@scandic-hotels/design-system/Caption"
 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 Title from "@scandic-hotels/design-system/Title"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -129,12 +128,14 @@ export default function PriceChangeDialog({
               </p>
             </Typography>
             <div>
-              <Subtitle textAlign="center" color="burgundy">
-                {intl.formatMessage({
-                  id: "enterDetails.priceChangeDialog.newTotalLabel",
-                  defaultMessage: "New total",
-                })}
-              </Subtitle>
+              <Typography variant="Title/Subtitle/md">
+                <p style={{ textAlign: "center" }}>
+                  {intl.formatMessage({
+                    id: "enterDetails.priceChangeDialog.newTotalLabel",
+                    defaultMessage: "New total",
+                  })}
+                </p>
+              </Typography>
               <div className={styles.prices}>
                 <Caption striked>
                   {formatPrice(intl, prevTotalPrice, currency)}

packages/booking-flow/lib/components/EnterDetails/SelectedRoom/index.tsx

@@ -8,7 +8,7 @@ import { selectRate } from "@scandic-hotels/common/constants/routes/hotelReserva
 import { Button } from "@scandic-hotels/design-system/Button"
 import Footnote from "@scandic-hotels/design-system/Footnote"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 import { getHotelRoom } from "@scandic-hotels/trpc/routers/booking/helpers"
 
 import { useRoomContext } from "../../../contexts/EnterDetails/RoomContext"
@@ -61,25 +61,28 @@ export default function SelectedRoom() {
               })}
             </h2>
           </Footnote>
-          <Subtitle
-            type="two"
+          <Typography
+            variant="Title/Subtitle/md"
             className={styles.description}
-            color="uiTextHighContrast"
           >
-            {intl.formatMessage(
-              {
-                id: "enterDetails.selectedRoom.roomType.description",
-                defaultMessage: "{roomType} <rate>{rateDescription}</rate>",
-              },
-              {
-                roomType: room.roomType,
-                rateDescription: room.cancellationText,
-                rate: ([str]) => {
-                  return str ? <span className={styles.rate}>{str}</span> : null
+            <p>
+              {intl.formatMessage(
+                {
+                  id: "enterDetails.selectedRoom.roomType.description",
+                  defaultMessage: "{roomType} <rate>{rateDescription}</rate>",
                 },
-              }
-            )}
-          </Subtitle>
+                {
+                  roomType: room.roomType,
+                  rateDescription: room.cancellationText,
+                  rate: ([str]) => {
+                    return str ? (
+                      <span className={styles.rate}>{str}</span>
+                    ) : null
+                  },
+                }
+              )}
+            </p>
+          </Typography>
           <Button
             variant="Text"
             size="sm"

packages/booking-flow/lib/components/EnterDetails/Summary/UI/index.tsx

@@ -11,7 +11,6 @@ import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import { BookingCodeChip } from "@scandic-hotels/design-system/BookingCodeChip"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import useLang from "../../../../hooks/useLang"
@@ -101,12 +100,14 @@ export default function SummaryUI({
         role="button"
         onClick={isDesktop ? undefined : handleToggleSummary}
       >
-        <Subtitle className={styles.title} type="two">
-          {intl.formatMessage({
-            id: "booking.bookingSummary",
-            defaultMessage: "Booking summary",
-          })}
-        </Subtitle>
+        <Typography className={styles.title} variant="Title/Subtitle/md">
+          <p>
+            {intl.formatMessage({
+              id: "booking.bookingSummary",
+              defaultMessage: "Booking summary",
+            })}
+          </p>
+        </Typography>
         <Typography variant="Body/Paragraph/mdRegular" className={styles.date}>
           <p>
             {dt(booking.fromDate).locale(lang).format(longDateFormat[lang])}