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/design-system/lib/components/HotelCard/HotelChequeCard/index.tsx

@@ -2,9 +2,9 @@ import { useIntl } from "react-intl"
 
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import Caption from "../../Caption"
-import Subtitle from "../../Subtitle"
 
 import styles from "./hotelChequeCard.module.css"
+import { Typography } from "../../Typography"
 
 type ProductTypeCheque = {
   localPrice: {
@@ -35,17 +35,17 @@ export default function HotelChequeCard({
           })}
         </Caption>
         <div className={styles.cheque}>
-          <Subtitle type="two" color="uiTextHighContrast">
-            {productTypeCheque.localPrice.numberOfCheques}
-          </Subtitle>
+          <Typography variant="Title/Subtitle/md">
+            <p>{productTypeCheque.localPrice.numberOfCheques}</p>
+          </Typography>
           <Caption color="uiTextHighContrast">{CurrencyEnum.CC}</Caption>
           {productTypeCheque.localPrice.additionalPricePerStay > 0 ? (
             // eslint-disable-next-line formatjs/no-literal-string-in-jsx
             <>
               +
-              <Subtitle type="two" color="uiTextHighContrast">
-                {productTypeCheque.localPrice.additionalPricePerStay}
-              </Subtitle>
+              <Typography variant="Title/Subtitle/md">
+                <p>{productTypeCheque.localPrice.additionalPricePerStay}</p>
+              </Typography>
               <Caption color="uiTextHighContrast">
                 {productTypeCheque.localPrice.currency}
               </Caption>

packages/design-system/lib/components/HotelCard/HotelVoucherCard/index.tsx

@@ -1,9 +1,9 @@
 import { useIntl } from "react-intl"
 
 import Caption from "../../Caption"
-import Subtitle from "../../Subtitle"
 
 import styles from "./hotelVoucherCard.module.css"
+import { Typography } from "../../Typography"
 
 type ProductTypeVoucher = {
   numberOfVouchers: number
@@ -25,9 +25,9 @@ export default function HotelVoucherCard({
           })}
         </Caption>
         <div className={styles.voucher}>
-          <Subtitle type="two" color="uiTextHighContrast">
-            {productTypeVoucher.numberOfVouchers}
-          </Subtitle>
+          <Typography variant="Title/Subtitle/md">
+            <p>{productTypeVoucher.numberOfVouchers}</p>
+          </Typography>
           <Caption color="uiTextHighContrast" className={styles.currency}>
             {intl.formatMessage(
               {

packages/design-system/lib/components/Modal/ModalContentWithActions/index.tsx

@@ -1,6 +1,6 @@
 import { MaterialIcon } from "../../Icons/MaterialIcon"
 import { OldDSButton as Button } from "../../OldDSButton"
-import Subtitle from "../../Subtitle"
+import { Typography } from "../../Typography"
 
 import styles from "./modalContent.module.css"
 
@@ -35,7 +35,9 @@ export function ModalContentWithActions({
     <>
       {title && (
         <header className={styles.header}>
-          <Subtitle>{title}</Subtitle>
+          <Typography variant="Title/Subtitle/md">
+            <p>{title}</p>
+          </Typography>
           <button onClick={onClose} type="button" className={styles.close}>
             <MaterialIcon icon="close" color="Icon/Interactive/Placeholder" />
           </button>

packages/design-system/lib/components/Subtitle/index.tsx

@@ -1,51 +0,0 @@
-import { Slot } from "@radix-ui/react-slot"
-
-import { subtitleVariants } from "./variants"
-
-import type { VariantProps } from "class-variance-authority"
-import { Children, ReactNode } from "react"
-
-interface SubtitleProps
-  extends
-    Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
-    VariantProps<typeof subtitleVariants> {
-  asChild?: boolean
-}
-
-/**
- * @deprecated Use `Typography` instead.
- */
-export default function Subtitle({
-  asChild = false,
-  className = "",
-  color,
-  textAlign,
-  textTransform,
-  type,
-  ...props
-}: SubtitleProps) {
-  if (checkForEmptyChildren(props.children) === 0) {
-    return null
-  }
-  const Comp = asChild ? Slot : "p"
-  const classNames = subtitleVariants({
-    className,
-    color,
-    textAlign,
-    textTransform,
-    type,
-  })
-  return <Comp className={classNames} {...props} />
-}
-
-function checkForEmptyChildren(children: ReactNode) {
-  return Children.toArray(children).filter((child) => {
-    if (child === "") {
-      return false
-    } else if (child == null) {
-      return false
-    } else {
-      return true
-    }
-  }).length
-}

packages/design-system/lib/components/Subtitle/subtitle.module.css

@@ -1,92 +0,0 @@
-.subtitle {
-  margin: 0;
-  padding: 0;
-}
-
-.one {
-  font-family: var(--typography-Subtitle-1-fontFamily);
-  font-size: clamp(
-    var(--typography-Subtitle-1-Mobile-fontSize),
-    0.3vw + 15px,
-    var(--typography-Subtitle-1-Desktop-fontSize)
-  );
-  font-weight: 500;
-  letter-spacing: var(--typography-Subtitle-1-letterSpacing);
-  line-height: var(--typography-Subtitle-1-lineHeight);
-}
-
-.two {
-  font-family: var(--typography-Subtitle-2-fontFamily);
-  font-size: clamp(
-    var(--typography-Subtitle-2-Mobile-fontSize),
-    0.3vw + 15px,
-    var(--typography-Subtitle-2-Desktop-fontSize)
-  );
-  font-weight: 500;
-  letter-spacing: var(--typography-Subtitle-2-letterSpacing);
-  line-height: var(--typography-Subtitle-2-lineHeight);
-}
-
-.regular {
-  text-transform: none;
-}
-
-.uppercase {
-  text-transform: uppercase;
-}
-
-.capitalize {
-  text-transform: capitalize;
-}
-
-.center {
-  text-align: center;
-}
-
-.left {
-  text-align: left;
-}
-
-.right {
-  text-align: right;
-}
-
-.black {
-  color: var(--Main-Grey-100);
-}
-
-.burgundy {
-  color: var(--Scandic-Brand-Burgundy);
-}
-
-.pale {
-  color: var(--Scandic-Brand-Pale-Peach);
-}
-
-.baseTextHighContrast {
-  color: var(--Base-Text-High-contrast);
-}
-
-.uiTextHighContrast {
-  color: var(--UI-Text-High-contrast);
-}
-
-.uiTextMediumContrast {
-  color: var(--UI-Text-Medium-contrast);
-}
-
-.uiTextPlaceholder {
-  color: var(--UI-Text-Placeholder);
-}
-
-.red {
-  color: var(--Scandic-Brand-Scandic-Red);
-}
-
-.baseTextDisabled {
-  color: var(--Base-Text-Disabled);
-}
-
-.mainGrey60 {
-  color: var(--Main-Grey-60);
-}

packages/design-system/lib/components/Subtitle/variants.ts

@@ -1,42 +0,0 @@
-import { cva } from "class-variance-authority"
-
-import styles from "./subtitle.module.css"
-
-const config = {
-  variants: {
-    color: {
-      black: styles.black,
-      burgundy: styles.burgundy,
-      baseTextDisabled: styles.baseTextDisabled,
-      pale: styles.pale,
-      baseTextHighContrast: styles.baseTextHighContrast,
-      uiTextHighContrast: styles.uiTextHighContrast,
-      uiTextMediumContrast: styles.uiTextMediumContrast,
-      uiTextPlaceholder: styles.uiTextPlaceholder,
-      red: styles.red,
-      mainGrey60: styles.mainGrey60,
-    },
-    textAlign: {
-      center: styles.center,
-      left: styles.left,
-      right: styles.right,
-    },
-    textTransform: {
-      regular: styles.regular,
-      uppercase: styles.uppercase,
-      capitalize: styles.capitalize,
-    },
-    type: {
-      one: styles.one,
-      two: styles.two,
-    },
-  },
-  defaultVariants: {
-    color: "black",
-    textAlign: "left",
-    textTransform: "regular",
-    type: "one",
-  },
-} as const
-
-export const subtitleVariants = cva(styles.subtitle, config)