Merged in chore/BOOK-739-replace-caption (pull request #3428)

chore(BOOK-739): replace caption with typography

* chore(BOOK-739): replace caption with typography

* chore(BOOK-739): refactor div

* chore(BOOK-739): refactor badge

* chore(BOOK-739): remove span

* chore(BOOK-739): skeleton update

* chore(BOOK-739): update

* chore(BOOK-739): update reward

* chore(BOOK-739): update voucher currency


Approved-by: Erik Tiekstra

apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/index.tsx

@@ -3,7 +3,6 @@
 import { useIntl } from "react-intl"
 
 import { dt } from "@scandic-hotels/common/dt"
-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 { Typography } from "@scandic-hotels/design-system/Typography"
@@ -41,15 +40,18 @@ export default function JobylonCard({ job }: JobylonCardProps) {
       </Typography>
 
       <div className={styles.contentWrapper}>
-        <div>
-          <Caption>{job.categories.map((cat) => cat.text).join(", ")}</Caption>
-          <Caption>
-            {job.locations
-              .map((loc) => `${loc.city}, ${loc.country}`)
-              .join(" | ")}
-          </Caption>
-          <Caption color="uiTextPlaceholder">{deadlineText}</Caption>
-        </div>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <div>
+            <p>{job.categories.map((cat) => cat.text).join(", ")}</p>
+            <p>
+              {job.locations
+                .map((loc) => `${loc.city}, ${loc.country}`)
+                .join(" | ")}
+            </p>
+            <p className={styles.deadline}>{deadlineText}</p>
+          </div>
+        </Typography>
+
         <Button
           theme="base"
           size="small"

apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/jobylonCard.module.css

@@ -7,6 +7,10 @@
   border-radius: var(--Corner-radius-md);
 }
 
+.deadline {
+  color: var(--Text-Secondary);
+}
+
 .contentWrapper {
   display: grid;
   gap: var(--Space-x1);

apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/index.tsx

@@ -1,4 +1,3 @@
-import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -81,23 +80,20 @@ async function LevelCard({ level }: LevelCardProps) {
       <Typography variant="Title/xs" className={styles.pointMsg}>
         <h5>{pointsMsg}</h5>
       </Typography>
-      <div className={styles.textContainer}>
-        {level.rewards.map((reward) => (
-          <Caption
-            className={styles.levelText}
-            key={reward.reward_id}
-            textAlign="center"
-            color="textMediumContrast"
-          >
-            <MaterialIcon
-              icon="check"
-              className={styles.checkIcon}
-              color="Icon/Interactive/Accent"
-            />
-            {reward.label}
-          </Caption>
-        ))}
-      </div>
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <div className={styles.textContainer}>
+          {level.rewards.map((reward) => (
+            <p className={styles.levelText} key={reward.reward_id}>
+              <MaterialIcon
+                icon="check"
+                className={styles.checkIcon}
+                color="Icon/Interactive/Accent"
+              />
+              {reward.label}
+            </p>
+          ))}
+        </div>
+      </Typography>
     </article>
   )
 }

apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css

@@ -37,6 +37,7 @@
 }
 
 .levelText {
+  color: var(--Text-Secondary);
   margin: 0;
 }
 

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/ActiveRedeemedBadge.tsx

@@ -3,8 +3,8 @@
 import { motion } from "motion/react"
 import { useIntl } from "react-intl"
 
-import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import styles from "./redeem.module.css"
 
@@ -25,12 +25,14 @@ export default function ActiveRedeemedBadge() {
       >
         <MaterialIcon icon="check_circle" color="Icon/Feedback/Success" />
       </motion.div>
-      <Caption>
-        {intl.formatMessage({
-          id: "rewards.active",
-          defaultMessage: "Active",
-        })}
-      </Caption>
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <p>
+          {intl.formatMessage({
+            id: "rewards.active",
+            defaultMessage: "Active",
+          })}
+        </p>
+      </Typography>
     </div>
   )
 }

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Campaign.tsx

@@ -2,7 +2,6 @@
 
 import { useIntl } from "react-intl"
 
-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 { toast } from "@scandic-hotels/design-system/Toast"
@@ -31,15 +30,17 @@ export default function Campaign({ reward }: { reward: Campaign }) {
           <p>{reward.description}</p>
         </Typography>
         <div className={styles.rewardBadge}>
-          <Caption textAlign="center" color="uiTextHighContrast" type="bold">
-            {intl.formatMessage({
-              id: "redeemFlow.promoCode",
-              defaultMessage: "Promo code",
-            })}
-          </Caption>
-          <Caption textAlign="center" color="uiTextHighContrast">
-            {reward.operaRewardId}
-          </Caption>
+          <Typography variant="Body/Supporting text (caption)/smBold">
+            <p>
+              {intl.formatMessage({
+                id: "redeemFlow.promoCode",
+                defaultMessage: "Promo code",
+              })}
+            </p>
+          </Typography>
+          <Typography variant="Body/Supporting text (caption)/smRegular">
+            <p>{reward.operaRewardId}</p>
+          </Typography>
         </div>
       </div>
       <footer className={styles.modalFooter}>

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/MembershipNumberBadge.tsx

@@ -1,6 +1,6 @@
 import { useIntl } from "react-intl"
 
-import Caption from "@scandic-hotels/design-system/Caption"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import styles from "./redeem.module.css"
 
@@ -12,8 +12,8 @@ export default function MembershipNumberBadge({
   const intl = useIntl()
 
   return (
-    <div className={styles.rewardBadge}>
-      <Caption textAlign="center" color="uiTextHighContrast">
+    <Typography variant="Body/Supporting text (caption)/smRegular">
+      <span className={styles.rewardBadge}>
         {intl.formatMessage(
           {
             id: "rewards.membershipId",
@@ -21,7 +21,7 @@ export default function MembershipNumberBadge({
           },
           { id: membershipNumber }
         )}
-      </Caption>
-    </div>
+      </span>
+    </Typography>
   )
 }

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/TimedRedeemedBadge.tsx

@@ -3,8 +3,8 @@
 import { useIntl } from "react-intl"
 
 import { dt } from "@scandic-hotels/common/dt"
-import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import Countdown from "@/components/Countdown"
 
@@ -21,12 +21,14 @@ export default function TimedRedeemedBadge() {
     <>
       <div className={styles.redeemed}>
         <MaterialIcon icon="check_circle" color="Icon/Feedback/Success" />
-        <Caption>
-          {intl.formatMessage({
-            id: "rewards.redeemed.validThrough",
-            defaultMessage: "Redeemed & valid through:",
-          })}
-        </Caption>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <p>
+            {intl.formatMessage({
+              id: "rewards.redeemed.validThrough",
+              defaultMessage: "Redeemed & valid through:",
+            })}
+          </p>
+        </Typography>
       </div>
       <Countdown
         minutes={duration.minutes()}

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/redeem.module.css

@@ -129,6 +129,7 @@
   background: var(--Base-Surface-Secondary-light-Normal);
   display: grid;
   gap: var(--Space-x05);
+  text-align: center;
 }
 
 .redeemButton {

apps/scandic-web/components/Blocks/DynamicContent/Stays/OldStayCard/index.tsx

@@ -1,7 +1,6 @@
 "use client"
 
 import { dt } from "@scandic-hotels/common/dt"
-import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Image from "@scandic-hotels/design-system/Image"
 import Link from "@scandic-hotels/design-system/OldDSLink"
@@ -62,14 +61,14 @@ function CardContent({ stay }: StayCardProps) {
             icon="calendar_month"
             color="Icon/Interactive/Default"
           />
-          <Caption asChild>
-            <time dateTime={arrivalDateTime}>{arrivalDate}</time>
-          </Caption>
-          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-          {" - "}
-          <Caption asChild>
-            <time dateTime={departDateTime}>{departDate}</time>
-          </Caption>
+          <Typography variant="Body/Supporting text (caption)/smRegular">
+            <p>
+              <time dateTime={arrivalDateTime}>{arrivalDate}</time>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+              {" - "}
+              <time dateTime={departDateTime}>{departDate}</time>
+            </p>
+          </Typography>
         </div>
       </footer>
     </article>

apps/scandic-web/components/DatePicker/Single/Desktop.tsx

@@ -6,10 +6,9 @@ import { useIntl } from "react-intl"
 
 import { Lang } from "@scandic-hotels/common/constants/language"
 import { dt } from "@scandic-hotels/common/dt"
-import Caption from "@scandic-hotels/design-system/Caption"
+import { Button } from "@scandic-hotels/design-system/Button"
 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 { Typography } from "@scandic-hotels/design-system/Typography"
 
 import useLang from "@/hooks/useLang"
@@ -115,19 +114,15 @@ export default function DatePickerSingleDesktop({
               />
               <footer className={props.className}>
                 <Button
-                  intent="tertiary"
+                  variant="Tertiary"
                   onPress={close}
-                  size="small"
-                  theme="base"
+                  color="Primary"
+                  size="sm"
                 >
-                  <Caption color="white" type="bold" asChild>
-                    <span>
-                      {intl.formatMessage({
-                        id: "datePicker.selectDates",
-                        defaultMessage: "Select dates",
-                      })}
-                    </span>
-                  </Caption>
+                  {intl.formatMessage({
+                    id: "datePicker.selectDates",
+                    defaultMessage: "Select dates",
+                  })}
                 </Button>
               </footer>
             </>

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/PriceContainer/index.tsx

@@ -1,4 +1,3 @@
-import Caption from "@scandic-hotels/design-system/Caption"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import styles from "./priceContainer.module.css"
@@ -23,15 +22,17 @@ export default function PriceContainer({
   return (
     <div className={styles.priceContainer}>
       <div className={styles.info}>
-        <Caption color="uiTextHighContrast" type="bold">
-          {text}
-        </Caption>
-        <Caption color="uiTextHighContrast">
-          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-          {nightsText}, {adultsText}
-          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-          {totalChildren > 0 ? `, ${childrenText}` : ""}
-        </Caption>
+        <Typography variant="Body/Supporting text (caption)/smBold">
+          <p>{text}</p>
+        </Typography>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <p>
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+            {nightsText}, {adultsText}
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+            {totalChildren > 0 ? `, ${childrenText}` : ""}
+          </p>
+        </Typography>
       </div>
       <div className={styles.wrapper}>
         <Typography variant="Title/Subtitle/md">

apps/scandic-web/components/SasTierComparison/index.tsx

@@ -1,7 +1,6 @@
 "use client"
 import Image from "next/image"
 
-import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
@@ -129,7 +128,7 @@ function TierDetails({
         <div className={styles.tierInfo}>
           <div className={styles.tierTitle}>
             <Typography variant="Title/Subtitle/md">
-              <p className={styles.title}>{tierMatch.title}</p>
+              <p className={styles.tierMatch}>{tierMatch.title}</p>
             </Typography>
           </div>
           <div>{children}</div>
@@ -162,9 +161,9 @@ function ReadMoreLink({
 function ColumnTitle({ children }: { children?: ReactNode }) {
   return (
     <div className={styles.columnTitle}>
-      <Caption type="bold" asChild>
+      <Typography variant="Title/Overline/sm">
         <span>{children}</span>
-      </Caption>
+      </Typography>
     </div>
   )
 }

apps/scandic-web/components/SasTierComparison/sasTierComparison.module.css

@@ -36,10 +36,6 @@
   flex-direction: column;
 }
 
-.title {
-  color: var(--Text-Heading);
-}
-
 .tierDetails {
   overflow: hidden;
   background-color: var(--Base-Surface-Primary-light-Normal);
@@ -114,6 +110,11 @@
   width: 100%;
 }
 
+.tierMatch {
+  text-align: left;
+  color: var(--Text-Heading);
+}
+
 .tierTitles {
   cursor: pointer;
   padding: var(--Space-x05);

apps/scandic-web/components/TempDesignSystem/AncillaryCard/index.tsx

@@ -1,7 +1,6 @@
 import { useIntl } from "react-intl"
 
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import Image from "@scandic-hotels/design-system/Image"
 import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -76,9 +75,9 @@ export function AncillaryCard({ ancillary }: AncillaryCardProps) {
           </div>
         </div>
         {ancillary.description && (
-          <Caption asChild color="uiTextHighContrast">
+          <Typography variant="Body/Supporting text (caption)/smRegular">
             <div dangerouslySetInnerHTML={{ __html: ancillary.description }} />
-          </Caption>
+          </Typography>
         )}
       </div>
     </article>