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
2026-01-14 09:33:27 +00:00
parent d284e82828
commit d9ec1b1f2d
53 changed files with 465 additions and 673 deletions
--- a/packages/design-system/lib/components/Caption/caption.module.css
+++ b/packages/design-system/lib/components/Caption/caption.module.css
@@ -1,127 +0,0 @@
-p.caption {
-  margin: 0;
-  padding: 0;
-}
-
-.captionFontOnly {
-  font-style: normal;
-}
-
-.bold {
-  font-family: var(--typography-Caption-Bold-fontFamily);
-  font-size: var(--typography-Caption-Bold-fontSize);
-  font-weight: 500; /* var(--typography-Caption-Bold-fontWeight); /* Commented till figma values are fixed to 500 instead of medium */
-  letter-spacing: var(--typography-Caption-Bold-letterSpacing);
-  line-height: var(--typography-Caption-Bold-lineHeight);
-  text-decoration: var(--typography-Caption-Bold-textDecoration);
-}
-
-.labels {
-  font-family: var(--typography-Caption-Labels-fontFamily);
-  font-size: var(--typography-Caption-Labels-fontSize);
-  font-weight: var(--typography-Caption-Labels-fontWeight);
-  letter-spacing: var(--typography-Caption-Labels-letterSpacing);
-  line-height: var(--typography-Caption-Labels-lineHeight);
-  text-decoration: var(--typography-Caption-Labels-textDecoration);
-}
-
-.underline {
-  font-family: var(--typography-Caption-Underline-fontFamily);
-  font-size: var(--typography-Caption-Underline-fontSize);
-  font-weight: var(--typography-Caption-Underline-fontWeight);
-  letter-spacing: var(--typography-Caption-Underline-letterSpacing);
-  line-height: var(--typography-Caption-Underline-lineHeight);
-  text-decoration: underline; /* var(--typography-Caption-Underline-textDecoration) /* Commented till figma values are fixed to underline instead of "underline" */
-}
-
-.regular {
-  font-family: var(--typography-Caption-Regular-fontFamily);
-  font-size: var(--typography-Caption-Regular-fontSize);
-  font-weight: var(--typography-Caption-Regular-fontWeight);
-  letter-spacing: var(--typography-Caption-Regular-letterSpacing);
-  line-height: var(--typography-Caption-Regular-lineHeight);
-  text-decoration: var(--typography-Caption-Regular-textDecoration);
-}
-
-.uppercase {
-  text-transform: uppercase;
-}
-
-.striked {
-  text-decoration: line-through;
-}
-
-.baseTextAccent {
-  color: var(--Base-Text-Accent);
-}
-
-.black {
-  color: var(--Main-Grey-100);
-}
-
-.burgundy {
-  color: var(--Scandic-Brand-Burgundy);
-}
-
-.pale {
-  color: var(--Scandic-Brand-Pale-Peach);
-}
-
-.textMediumContrast {
-  color: var(--Base-Text-Medium-contrast);
-}
-
-.baseTextHighContrast {
-  color: var(--Base-Text-High-contrast);
-}
-
-.baseTextMediumContrast {
-  color: var(--Base-Text-Medium-contrast);
-}
-
-.red {
-  color: var(--Scandic-Brand-Scandic-Red);
-}
-
-.white {
-  color: var(--UI-Opacity-White-100);
-}
-
-.uiTextActive {
-  color: var(--UI-Text-Active);
-}
-
-.uiTextMediumContrast {
-  color: var(--UI-Text-Medium-contrast);
-}
-
-.uiTextHighContrast {
-  color: var(--UI-Text-High-contrast);
-}
-
-.uiTextPlaceholder {
-  color: var(--UI-Text-Placeholder);
-}
-
-.disabled {
-  color: var(--Base-Text-Disabled);
-}
-
-.center {
-  text-align: center;
-}
-
-.left {
-  text-align: left;
-}
-
-.right {
-  text-align: right;
-}
-
-.green {
-  color: var(--UI-Semantic-Success);
-}
-.blue {
-  color: var(--UI-Semantic-Information);
-}
--- a/packages/design-system/lib/components/Caption/index.tsx
+++ b/packages/design-system/lib/components/Caption/index.tsx
@@ -1,48 +0,0 @@
-import { Slot } from "@radix-ui/react-slot"
-
-import { captionVariants, fontOnlycaptionVariants } from "./variants"
-import { VariantProps } from "class-variance-authority"
-
-interface CaptionProps
-  extends
-    Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
-    VariantProps<typeof captionVariants> {
-  asChild?: boolean
-  fontOnly?: boolean
-}
-
-/**
- * @deprecated Use `@scandic-hotels/design-system/Typography` instead.
- */
-export default function Caption({
-  asChild = false,
-  className = "",
-  color,
-  fontOnly = false,
-  textAlign,
-  textTransform,
-  uppercase,
-  striked,
-  type,
-  ...props
-}: CaptionProps) {
-  const Comp = asChild ? Slot : "p"
-  const classNames = fontOnly
-    ? fontOnlycaptionVariants({
-        className,
-        textTransform,
-        uppercase,
-        striked,
-        type,
-      })
-    : captionVariants({
-        className,
-        color,
-        textTransform,
-        textAlign,
-        uppercase,
-        striked,
-        type,
-      })
-  return <Comp className={classNames} {...props} />
-}
--- a/packages/design-system/lib/components/Caption/variants.ts
+++ b/packages/design-system/lib/components/Caption/variants.ts
@@ -1,80 +0,0 @@
-import { cva } from "class-variance-authority"
-
-import styles from "./caption.module.css"
-
-const config = {
-  variants: {
-    type: {
-      regular: styles.regular,
-      bold: styles.bold,
-      label: styles.labels,
-      underline: styles.underline,
-    },
-    color: {
-      baseTextAccent: styles.baseTextAccent,
-      black: styles.black,
-      burgundy: styles.burgundy,
-      pale: styles.pale,
-      textMediumContrast: styles.textMediumContrast,
-      red: styles.red,
-      white: styles.white,
-      green: styles.green,
-      blue: styles.blue,
-      uiTextHighContrast: styles.uiTextHighContrast,
-      uiTextActive: styles.uiTextActive,
-      uiTextMediumContrast: styles.uiTextMediumContrast,
-      uiTextPlaceholder: styles.uiTextPlaceholder,
-      disabled: styles.disabled,
-      baseTextHighContrast: styles.baseTextHighContrast,
-      baseTextMediumContrast: styles.baseTextMediumContrast,
-    },
-    textTransform: {
-      uppercase: styles.uppercase,
-    },
-    textAlign: {
-      center: styles.center,
-      left: styles.left,
-      right: styles.right,
-    },
-    uppercase: {
-      true: styles.uppercase,
-    },
-    striked: {
-      true: styles.striked,
-    },
-  },
-  defaultVariants: {
-    color: "black",
-    type: "regular",
-  },
-} as const
-
-export const captionVariants = cva(styles.caption, config)
-
-const fontOnlyConfig = {
-  variants: {
-    type: {
-      regular: styles.regular,
-      bold: styles.bold,
-      label: styles.labels,
-      underline: styles.underline,
-    },
-    textTransform: {
-      uppercase: styles.uppercase,
-    },
-    uppercase: {
-      true: styles.uppercase,
-    },
-    striked: {
-      true: styles.striked,
-    },
-  },
-  defaultVariants: {
-    type: "regular",
-  },
-} as const
-
-export const fontOnlycaptionVariants = cva(
-  styles.captionFontOnly,
-  fontOnlyConfig
-)
--- a/packages/design-system/lib/components/HotelCard/HotelChequeCard/hotelChequeCard.module.css
+++ b/packages/design-system/lib/components/HotelCard/HotelChequeCard/hotelChequeCard.module.css
@@ -17,6 +17,10 @@
  color: var(--Text-Default);
 }

+.secondaryText {
+  color: var(--Text-Secondary);
+}
+
 .cheque {
  justify-content: end;
 }
--- a/packages/design-system/lib/components/HotelCard/HotelChequeCard/index.tsx
+++ b/packages/design-system/lib/components/HotelCard/HotelChequeCard/index.tsx
@@ -1,7 +1,6 @@
 import { useIntl } from "react-intl"

 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
-import Caption from "../../Caption"

 import styles from "./hotelChequeCard.module.css"
 import { Typography } from "../../Typography"
@@ -28,17 +27,21 @@ export default function HotelChequeCard({
  return (
    <div className={styles.chequeCard}>
      <div className={styles.chequeRow}>
-        <Caption>
-          {intl.formatMessage({
-            id: "common.from",
-            defaultMessage: "From",
-          })}
-        </Caption>
+        <Typography variant="Body/Supporting text (caption)/smBold">
+          <p>
+            {intl.formatMessage({
+              id: "common.from",
+              defaultMessage: "From",
+            })}
+          </p>
+        </Typography>
        <div className={styles.cheque}>
          <Typography variant="Title/Subtitle/md">
            <p>{productTypeCheque.localPrice.numberOfCheques}</p>
          </Typography>
-          <Caption color="uiTextHighContrast">{CurrencyEnum.CC}</Caption>
+          <Typography variant="Body/Supporting text (caption)/smRegular">
+            <p>{CurrencyEnum.CC}</p>
+          </Typography>
          {productTypeCheque.localPrice.additionalPricePerStay > 0 ? (
            // eslint-disable-next-line formatjs/no-literal-string-in-jsx
            <>
@@ -46,9 +49,9 @@ export default function HotelChequeCard({
              <Typography variant="Title/Subtitle/md">
                <p>{productTypeCheque.localPrice.additionalPricePerStay}</p>
              </Typography>
-              <Caption color="uiTextHighContrast">
-                {productTypeCheque.localPrice.currency}
-              </Caption>
+              <Typography variant="Body/Supporting text (caption)/smRegular">
+                <p>{productTypeCheque.localPrice.currency}</p>
+              </Typography>
            </>
          ) : null}
        </div>
@@ -56,21 +59,33 @@ export default function HotelChequeCard({
      {productTypeCheque.requestedPrice &&
      productTypeCheque.requestedPrice.additionalPricePerStay > 0 ? (
        <div className={styles.chequeRow}>
-          <Caption color="uiTextMediumContrast">
-            {intl.formatMessage({
-              id: "booking.approx",
-              defaultMessage: "Approx.",
-            })}
-          </Caption>
-          <Caption color="uiTextMediumContrast">
-            {productTypeCheque.requestedPrice.numberOfCheques} {CurrencyEnum.CC}
-            {productTypeCheque.requestedPrice.additionalPricePerStay
-              ? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
-                " + "
-              : ""}
-            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-            {`${productTypeCheque.requestedPrice.additionalPricePerStay} ${productTypeCheque.requestedPrice.currency}`}
-          </Caption>
+          <Typography
+            variant="Body/Supporting text (caption)/smRegular"
+            className={styles.secondaryText}
+          >
+            <p>
+              {intl.formatMessage({
+                id: "booking.approx",
+                defaultMessage: "Approx.",
+              })}
+            </p>
+          </Typography>
+          <Typography
+            variant="Body/Supporting text (caption)/smRegular"
+            className={styles.secondaryText}
+          >
+            <p>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+              {productTypeCheque.requestedPrice.numberOfCheques}{" "}
+              {CurrencyEnum.CC}
+              {productTypeCheque.requestedPrice.additionalPricePerStay
+                ? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+                  " + "
+                : ""}
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+              {`${productTypeCheque.requestedPrice.additionalPricePerStay} ${productTypeCheque.requestedPrice.currency}`}
+            </p>
+          </Typography>
        </div>
      ) : null}
    </div>
--- a/packages/design-system/lib/components/HotelCard/HotelDialogCard/StandaloneHotelCardDialog/index.tsx
+++ b/packages/design-system/lib/components/HotelCard/HotelDialogCard/StandaloneHotelCardDialog/index.tsx
@@ -151,7 +151,20 @@ export function StandaloneHotelCardDialog({
                </RoomPrice>
              ) : null}
              {voucherPrice ? (
-                <RoomPrice price={voucherPrice} currency={currency} />
+                <RoomPrice
+                  price={voucherPrice}
+                  currency={intl.formatMessage(
+                    {
+                      id: "price.numberOfVouchers",
+                      defaultMessage:
+                        "{numberOfVouchers, plural, one {Voucher} other {Vouchers}}",
+                    },
+                    {
+                      numberOfVouchers: voucherPrice,
+                    }
+                  )}
+                  includePerNight={false}
+                />
              ) : null}
              {/* Show public price if:
                1) user is not logged in, or
--- a/packages/design-system/lib/components/HotelCard/HotelVoucherCard/index.tsx
+++ b/packages/design-system/lib/components/HotelCard/HotelVoucherCard/index.tsx
@@ -1,7 +1,5 @@
 import { useIntl } from "react-intl"

-import Caption from "../../Caption"
-
 import styles from "./hotelVoucherCard.module.css"
 import { Typography } from "../../Typography"

@@ -18,28 +16,32 @@ export default function HotelVoucherCard({
  return (
    <div className={styles.voucherCard}>
      <div className={styles.voucherRow}>
-        <Caption>
-          {intl.formatMessage({
-            id: "common.from",
-            defaultMessage: "From",
-          })}
-        </Caption>
+        <Typography variant="Body/Supporting text (caption)/smBold">
+          <p>
+            {intl.formatMessage({
+              id: "common.from",
+              defaultMessage: "From",
+            })}
+          </p>
+        </Typography>
        <div className={styles.voucher}>
          <Typography variant="Title/Subtitle/md">
            <p>{productTypeVoucher.numberOfVouchers}</p>
          </Typography>
-          <Caption color="uiTextHighContrast" className={styles.currency}>
-            {intl.formatMessage(
-              {
-                id: "price.numberOfVouchers",
-                defaultMessage:
-                  "{numberOfVouchers, plural, one {Voucher} other {Vouchers}}",
-              },
-              {
-                numberOfVouchers: productTypeVoucher.numberOfVouchers,
-              }
-            )}
-          </Caption>
+          <Typography variant="Body/Supporting text (caption)/smRegular">
+            <p>
+              {intl.formatMessage(
+                {
+                  id: "price.numberOfVouchers",
+                  defaultMessage:
+                    "{numberOfVouchers, plural, one {Voucher} other {Vouchers}}",
+                },
+                {
+                  numberOfVouchers: productTypeVoucher.numberOfVouchers,
+                }
+              )}
+            </p>
+          </Typography>
        </div>
      </div>
    </div>
--- a/packages/design-system/lib/components/HotelCard/index.tsx
+++ b/packages/design-system/lib/components/HotelCard/index.tsx
@@ -12,7 +12,6 @@ import {
  selectRate,
 } from "@scandic-hotels/common/constants/routes/hotelReservation"
 import { getSingleDecimal } from "@scandic-hotels/common/utils/numberFormatting"
-import Caption from "../Caption"
 import { Divider } from "../Divider"
 import { FacilityToIcon } from "../FacilityToIcon"
 import HotelLogoIcon from "../Icons/Logos"
@@ -341,12 +340,14 @@ export const HotelCardComponent = memo(
                )}
                {prices?.redemptions?.length ? (
                  <div className={styles.pointsCard}>
-                    <Caption>
-                      {intl.formatMessage({
-                        id: "hotelCard.availableRates",
-                        defaultMessage: "Available rates",
-                      })}
-                    </Caption>
+                    <Typography variant="Body/Supporting text (caption)/smRegular">
+                      <p>
+                        {intl.formatMessage({
+                          id: "hotelCard.availableRates",
+                          defaultMessage: "Available rates",
+                        })}
+                      </p>
+                    </Typography>
                    {prices.redemptions.map((redemption) => (
                      <HotelPointsRow
                        key={redemption.rateCode}
--- a/packages/design-system/lib/components/ImageContainer/index.tsx
+++ b/packages/design-system/lib/components/ImageContainer/index.tsx
@@ -1,5 +1,5 @@
-import Caption from "../Caption"
 import Image from "../Image"
+import { Typography } from "../Typography"

 import styles from "./imageContainer.module.css"

@@ -42,7 +42,9 @@ export default function ImageContainer({
          focalPoint={leftImage.focalPoint}
          dimensions={leftImage.dimensions}
        />
-        <Caption>{leftImage.meta.caption}</Caption>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <p>{leftImage.meta.caption}</p>
+        </Typography>
      </article>
      <article>
        <Image
@@ -54,7 +56,9 @@ export default function ImageContainer({
          focalPoint={rightImage.focalPoint}
          dimensions={rightImage.dimensions}
        />
-        <Caption>{rightImage.meta.caption}</Caption>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <p>{rightImage.meta.caption}</p>
+        </Typography>
      </article>
    </section>
  )
--- a/packages/design-system/lib/components/Switch/index.tsx
+++ b/packages/design-system/lib/components/Switch/index.tsx
@@ -5,7 +5,7 @@ import { RegisterOptions, useController, useFormContext } from "react-hook-form"

 import styles from "./switch.module.css"
 import { MaterialIcon } from "../Icons/MaterialIcon"
-import Caption from "../Caption"
+import { Typography } from "../Typography"

 interface SwitchProps extends React.InputHTMLAttributes<HTMLInputElement> {
  name: string
@@ -37,10 +37,12 @@ export default function Switch({
      {children}
      <span className={styles.switch} tabIndex={0}></span>
      {fieldState.error ? (
-        <Caption className={styles.error} fontOnly>
-          <MaterialIcon icon="info" color="Icon/Interactive/Accent" />
-          {fieldState.error.message}
-        </Caption>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <p>
+            <MaterialIcon icon="info" color="Icon/Interactive/Accent" />
+            {fieldState.error.message}
+          </p>
+        </Typography>
      ) : null}
    </AriaSwitch>
  )
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -14,7 +14,6 @@
    "./Button": "./lib/components/Button/index.tsx",
    "./ButtonLink": "./lib/components/ButtonLink/index.tsx",
    "./CampaignRateCard": "./lib/components/RateCard/Campaign/index.tsx",
-    "./Caption": "./lib/components/Caption/index.tsx",
    "./Card": "./lib/components/Card/index.tsx",
    "./ChipButton": "./lib/components/ChipButton/index.tsx",
    "./ChipLink": "./lib/components/ChipLink/index.tsx",