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/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"