Merged in chore/BOOK-773-replace-old-typography-variables (pull request #3515)

Chore/BOOK-773 replace old typography variables

* chore(BOOK-773): Replaced body typography

* chore(BOOK-773): Replaced caption typography

* chore(BOOK-773): Replaced footnote typography

* chore(BOOK-773): Replaced subtitle typography


Approved-by: Bianca Widstam

packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/JoinScandicFriendsCard/index.tsx

@@ -4,9 +4,8 @@ import { useIntl } from "react-intl"
 
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-import Footnote from "@scandic-hotels/design-system/Footnote"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
-import Link from "@scandic-hotels/design-system/OldDSLink"
+import { TextLink } from "@scandic-hotels/design-system/TextLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useBookingFlowConfig } from "../../../../../bookingFlowConfig/bookingFlowConfigContext"
@@ -83,8 +82,8 @@ export default function JoinScandicFriendsCard({
         </Typography>
       </Checkbox>
 
-      <div className={styles.terms}>
-        <Footnote color="uiTextPlaceholder">
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <p className={styles.terms}>
           {intl.formatMessage(
             {
               id: "enterDetails.joinScandicFriendsCard.terms",
@@ -93,19 +92,18 @@ export default function JoinScandicFriendsCard({
             },
             {
               termsAndConditionsLink: (str) => (
-                <Link
-                  textDecoration="underline"
-                  size="tiny"
+                <TextLink
+                  typography="Link/sm"
                   target="_blank"
                   href={routes.membershipTermsAndConditions[lang]}
                 >
                   {str}
-                </Link>
+                </TextLink>
               ),
             }
           )}
-        </Footnote>
-      </div>
+        </p>
+      </Typography>
     </div>
   )
 }

packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/JoinScandicFriendsCard/joinScandicFriendsCard.module.css

@@ -28,6 +28,7 @@
 
 .terms {
   grid-area: terms;
+  color: var(--Text-Secondary);
 }
 
 @media screen and (min-width: 768px) {

packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/PartnerSASJoinScandicFriendsCard/index.tsx

@@ -4,9 +4,8 @@ import { useIntl } from "react-intl"
 
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-import Footnote from "@scandic-hotels/design-system/Footnote"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
-import Link from "@scandic-hotels/design-system/OldDSLink"
+import { TextLink } from "@scandic-hotels/design-system/TextLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useBookingFlowConfig } from "../../../../../bookingFlowConfig/bookingFlowConfigContext"
@@ -97,8 +96,8 @@ export function PartnerSASJoinScandicFriendsCard({
         />
       </div>
 
-      <div className={styles.terms}>
-        <Footnote color="uiTextPlaceholder">
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <p className={styles.terms}>
           {intl.formatMessage(
             {
               id: "enterDetails.joinScandicFriendsCard.terms",
@@ -107,19 +106,18 @@ export function PartnerSASJoinScandicFriendsCard({
             },
             {
               termsAndConditionsLink: (str) => (
-                <Link
-                  textDecoration="underline"
-                  size="tiny"
+                <TextLink
+                  typography="Link/sm"
                   target="_blank"
                   href={routes.membershipTermsAndConditions[lang]}
                 >
                   {str}
-                </Link>
+                </TextLink>
               ),
             }
           )}
-        </Footnote>
-      </div>
+        </p>
+      </Typography>
     </div>
   )
 }

packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/PartnerSASJoinScandicFriendsCard/partnerSASJoinScandicFriendsCard.module.css

@@ -31,6 +31,7 @@
 
 .terms {
   grid-area: terms;
+  color: var(--Text-Secondary);
 }
 
 @media screen and (min-width: 768px) {

packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx

@@ -4,10 +4,9 @@ import { useIntl } from "react-intl"
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import { useLazyPathname } from "@scandic-hotels/common/hooks/useLazyPathname"
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-import Footnote from "@scandic-hotels/design-system/Footnote"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
 import { LoginButton } from "@scandic-hotels/design-system/LoginButton"
-import Link from "@scandic-hotels/design-system/OldDSLink"
+import { TextLink } from "@scandic-hotels/design-system/TextLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trackEvent } from "@scandic-hotels/tracking/base"
 import { trackLoginClick } from "@scandic-hotels/tracking/navigation"
@@ -101,8 +100,8 @@ export function JoinScandicFriendsCard({ name = "join" }: Props) {
         })}
       </LoginButton>
 
-      <div className={styles.terms}>
-        <Footnote color="uiTextPlaceholder">
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <p className={styles.terms}>
           {intl.formatMessage(
             {
               id: "enterDetails.joinScandicFriendsCard.terms",
@@ -111,19 +110,18 @@ export function JoinScandicFriendsCard({ name = "join" }: Props) {
             },
             {
               termsAndConditionsLink: (str) => (
-                <Link
-                  textDecoration="underline"
-                  size="tiny"
+                <TextLink
+                  typography="Link/sm"
                   target="_blank"
                   href={routes.membershipTermsAndConditions[lang]}
                 >
                   {str}
-                </Link>
+                </TextLink>
               ),
             }
           )}
-        </Footnote>
-      </div>
+        </p>
+      </Typography>
     </div>
   )
 }

packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/joinScandicFriendsCard.module.css

@@ -34,6 +34,7 @@
 
 .terms {
   grid-area: terms;
+  color: var(--Text-Secondary);
 }
 
 @media screen and (min-width: 768px) {

packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/PartnerSASJoinScandicFriendsCard/index.tsx

@@ -4,9 +4,8 @@ import { useIntl } from "react-intl"
 
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-import Footnote from "@scandic-hotels/design-system/Footnote"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
-import Link from "@scandic-hotels/design-system/OldDSLink"
+import { TextLink } from "@scandic-hotels/design-system/TextLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"
 
@@ -94,8 +93,8 @@ export function PartnerSASJoinScandicFriendsCard({
         />
       </div>
 
-      <div className={styles.terms}>
-        <Footnote color="uiTextPlaceholder">
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <p className={styles.terms}>
           {intl.formatMessage(
             {
               id: "enterDetails.joinScandicFriendsCard.terms",
@@ -104,19 +103,18 @@ export function PartnerSASJoinScandicFriendsCard({
             },
             {
               termsAndConditionsLink: (str) => (
-                <Link
-                  textDecoration="underline"
-                  size="tiny"
+                <TextLink
+                  typography="Link/sm"
                   target="_blank"
                   href={routes.membershipTermsAndConditions[lang]}
                 >
                   {str}
-                </Link>
+                </TextLink>
               ),
             }
           )}
-        </Footnote>
-      </div>
+        </p>
+      </Typography>
     </div>
   )
 }

packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/PartnerSASJoinScandicFriendsCard/partnerSASJoinScandicFriendsCard.module.css

@@ -31,6 +31,7 @@
 
 .terms {
   grid-area: terms;
+  color: var(--Text-Secondary);
 }
 
 @media screen and (min-width: 768px) {

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

@@ -6,7 +6,6 @@ import { useIntl } from "react-intl"
 
 import { selectRate } from "@scandic-hotels/common/constants/routes/hotelReservation"
 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 { Typography } from "@scandic-hotels/design-system/Typography"
 import { getHotelRoom } from "@scandic-hotels/trpc/routers/booking/helpers"
@@ -47,20 +46,14 @@ export default function SelectedRoom() {
     <div className={styles.wrapper} data-available={room.isAvailable}>
       <div className={styles.main}>
         <div className={styles.headerContainer}>
-          <Footnote
-            className={styles.title}
-            asChild
-            textTransform="uppercase"
-            type="label"
-            color="uiTextHighContrast"
-          >
-            <h2>
+          <Typography variant="Title/Overline/sm">
+            <h2 className={styles.title}>
               {intl.formatMessage({
                 id: "common.room",
                 defaultMessage: "Room",
               })}
             </h2>
-          </Footnote>
+          </Typography>
           <Typography
             variant="Title/Subtitle/md"
             className={styles.description}