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
2026-01-12 07:40:30 +00:00
parent a88b022186
commit 1b9273136a
43 changed files with 337 additions and 448 deletions
--- a/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobList/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobList/index.tsx
@@ -3,7 +3,7 @@
 import { useReducer } from "react"
 import { useIntl } from "react-intl"

-import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import JobylonCard from "../JobylonCard"
 import Filter from "./Filter"
@@ -80,15 +80,18 @@ export default function JobList({ allJobs }: JobListProps) {
        departmentFilters={departmentFilters}
        categoryFilters={categoryFilters}
      />
-      <Subtitle type="two">
-        {intl.formatMessage(
-          {
-            id: "jobylonFeed.resultCount",
-            defaultMessage: "{count, plural, one {# Result} other {# Results}}",
-          },
-          { count: state.jobs.length }
-        )}
-      </Subtitle>
+      <Typography variant="Title/Subtitle/md">
+        <p>
+          {intl.formatMessage(
+            {
+              id: "jobylonFeed.resultCount",
+              defaultMessage:
+                "{count, plural, one {# Result} other {# Results}}",
+            },
+            { count: state.jobs.length }
+          )}
+        </p>
+      </Typography>
      <ul className={styles.list}>
        {state.jobs.map((job) => (
          <li key={job.id}>
--- a/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/index.tsx
@@ -6,7 +6,7 @@ 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 Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import useLang from "@/hooks/useLang"

@@ -36,9 +36,9 @@ export default function JobylonCard({ job }: JobylonCardProps) {

  return (
    <div className={styles.jobylonCard}>
-      <Subtitle asChild>
+      <Typography variant="Title/Subtitle/md">
        <h3>{job.title}</h3>
-      </Subtitle>
+      </Typography>

      <div className={styles.contentWrapper}>
        <div>
@@ -62,7 +62,7 @@ export default function JobylonCard({ job }: JobylonCardProps) {
              id: "jobylonFeed.card.viewAndApplyButton",
              defaultMessage: "View & apply",
            })}
-            <MaterialIcon icon="open_in_new" size={20} />
+            <MaterialIcon icon="open_in_new" size={20} color="CurrentColor" />
          </a>
        </Button>
      </div>
--- a/apps/scandic-web/components/Blocks/TextCols/index.tsx
+++ b/apps/scandic-web/components/Blocks/TextCols/index.tsx
@@ -1,5 +1,5 @@
 import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"

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

@@ -11,7 +11,9 @@ export default function TextCols({ text_cols }: TextColProps) {
      {text_cols.columns.map((col) => {
        return (
          <section key={col.title} className={styles.column}>
-            <Subtitle>{col.title}</Subtitle>
+            <Typography variant="Title/Subtitle/md">
+              <p>{col.title}</p>
+            </Typography>
            <JsonToHtml
              nodes={col.text.json.children}
              embeds={col.text.embedded_itemsConnection.edges}
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationListing/CityListing/CityListingItem/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationListing/CityListing/CityListingItem/index.tsx
@@ -6,7 +6,6 @@ import { useIntl } from "react-intl"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import ImageGallery from "@scandic-hotels/design-system/ImageGallery"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import { mapImageVaultImagesToGalleryImages } from "@/utils/imageGallery"
@@ -41,9 +40,9 @@ export default function CityListingItem({ city }: CityListingItemProps) {
        />
      </div>
      <section className={styles.content}>
-        <Subtitle asChild>
+        <Typography variant="Title/Subtitle/md">
          <h3>{city.heading}</h3>
-        </Subtitle>
+        </Typography>
        {city.experiences?.length ? (
          <ExperienceList experiences={city.experiences} />
        ) : null}
--- a/apps/scandic-web/components/DatePicker/Single/Desktop.tsx
+++ b/apps/scandic-web/components/DatePicker/Single/Desktop.tsx
@@ -10,7 +10,7 @@ import Caption from "@scandic-hotels/design-system/Caption"
 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 Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import useLang from "@/hooks/useLang"

@@ -136,9 +136,9 @@ export default function DatePickerSingleDesktop({
        MonthCaption(props) {
          return (
            <div className={props.className}>
-              <Subtitle asChild type="two">
-                {props.children}
-              </Subtitle>
+              <Typography variant="Title/Subtitle/md">
+                <p>{props.children}</p>
+              </Typography>
            </div>
          )
        },
--- a/apps/scandic-web/components/DatePicker/Single/Mobile.tsx
+++ b/apps/scandic-web/components/DatePicker/Single/Mobile.tsx
@@ -5,7 +5,6 @@ import { useIntl } from "react-intl"
 import { Lang } from "@scandic-hotels/common/constants/language"
 import { dt } from "@scandic-hotels/common/dt"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import useLang from "@/hooks/useLang"
@@ -85,9 +84,9 @@ export default function DatePickerSingleMobile({
          MonthCaption(props) {
            return (
              <div className={props.className}>
-                <Subtitle asChild type="two">
-                  {props.children}
-                </Subtitle>
+                <Typography variant="Title/Subtitle/md">
+                  <p>{props.children}</p>
+                </Typography>
              </div>
            )
          },
--- a/apps/scandic-web/components/DestinationFilterAndSort/Filter/index.tsx
+++ b/apps/scandic-web/components/DestinationFilterAndSort/Filter/index.tsx
@@ -2,8 +2,8 @@

 import { useIntl } from "react-intl"

-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import Title from "@scandic-hotels/design-system/Title"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import { useDestinationDataStore } from "@/stores/destination-data"

@@ -41,14 +41,14 @@ export default function Filter({ filters }: FilterProps) {
      </Title>
      <form className={styles.form}>
        <fieldset className={styles.fieldset}>
-          <Subtitle type="two" asChild>
+          <Typography variant="Title/Subtitle/md">
            <legend>
              {intl.formatMessage({
                id: "filter.facilities",
                defaultMessage: "Hotel facilities",
              })}
            </legend>
-          </Subtitle>
+          </Typography>
          <ul className={styles.list}>
            {facilityFilters.map((filter) => (
              <li key={`filter-${filter.slug}`}>
@@ -66,14 +66,14 @@ export default function Filter({ filters }: FilterProps) {
        </fieldset>

        <fieldset className={styles.fieldset}>
-          <Subtitle type="two" asChild>
+          <Typography variant="Title/Subtitle/md">
            <legend>
              {intl.formatMessage({
                id: "filter.hotelSurroundings",
                defaultMessage: "Hotel surroundings",
              })}
            </legend>
-          </Subtitle>
+          </Typography>
          <ul className={styles.list}>
            {surroundingsFilters.map((filter) => (
              <li key={`filter-${filter.slug}`}>
--- a/apps/scandic-web/components/DestinationFilterAndSort/destinationFilterAndSort.module.css
+++ b/apps/scandic-web/components/DestinationFilterAndSort/destinationFilterAndSort.module.css
@@ -9,6 +9,10 @@
  z-index: var(--default-modal-overlay-z-index);
 }

+.title {
+  text-align: center;
+}
+
 .dialog {
  width: min(80dvw, 960px);
  border-radius: var(--Corner-radius-lg);
--- a/apps/scandic-web/components/DestinationFilterAndSort/index.tsx
+++ b/apps/scandic-web/components/DestinationFilterAndSort/index.tsx
@@ -14,7 +14,7 @@ import { Alert } from "@scandic-hotels/design-system/Alert"
 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 Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import { useDestinationDataStore } from "@/stores/destination-data"

@@ -144,11 +144,9 @@ export default function DestinationFilterAndSort({
            {({ close }) => (
              <>
                <header className={styles.header}>
-                  <Subtitle
-                    type="two"
-                    textAlign="center"
+                  <Typography
+                    variant="Title/Subtitle/md"
                    className={styles.title}
-                    asChild
                  >
                    <h3>
                      {intl.formatMessage({
@@ -156,7 +154,7 @@ export default function DestinationFilterAndSort({
                        defaultMessage: "Filter and sort",
                      })}
                    </h3>
-                  </Subtitle>
+                  </Typography>
                  <button
                    onClick={close}
                    type="button"
--- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/index.tsx
@@ -6,7 +6,6 @@ import Accordion from "@scandic-hotels/design-system/Accordion"
 import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 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 { BreakfastPackageEnum } from "@scandic-hotels/trpc/enums/breakfast"

@@ -39,12 +38,14 @@ export function AddedAncillaries({
  return (
    <div className={styles.container}>
      <div className={styles.header}>
-        <Subtitle>
-          {intl.formatMessage({
-            defaultMessage: "My extras",
-            id: "myStay.addedAncillaries.title",
-          })}
-        </Subtitle>
+        <Typography variant="Title/Subtitle/lg">
+          <p>
+            {intl.formatMessage({
+              defaultMessage: "My extras",
+              id: "myStay.addedAncillaries.title",
+            })}
+          </p>
+        </Typography>

        {booking.ancillary?.deliveryTime && (
          <Typography variant="Body/Paragraph/mdBold">
--- a/apps/scandic-web/components/HotelReservation/MyStay/Modal/ModalContent/Header/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Modal/ModalContent/Header/index.tsx
@@ -1,7 +1,7 @@
 import { Button as ButtonRAC } from "react-aria-components"

 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 styles from "./header.module.css"

@@ -13,7 +13,9 @@ interface HeaderProps extends React.PropsWithChildren {
 export default function Header({ children, handleClose, title }: HeaderProps) {
  return (
    <header className={styles.header}>
-      <Subtitle>{title}</Subtitle>
+      <Typography variant="Title/Subtitle/lg">
+        <p>{title}</p>
+      </Typography>
      <ButtonRAC className={styles.close} onPress={handleClose}>
        <MaterialIcon icon="close" color="Icon/Interactive/Placeholder" />
      </ButtonRAC>
--- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ChangeDates/Steps/Form/NewDates/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ChangeDates/Steps/Form/NewDates/index.tsx
@@ -128,7 +128,7 @@ export default function NewDates({ checkInDate, checkOutDate }: NewDatesProps) {
              <MaterialIcon icon="calendar_today" />
            </ButtonRAC>
            <Modal>
-              <Dialog>
+              <Dialog className={styles.dialog}>
                {({ close }) => (
                  <>
                    <DatePickerSingleDesktop
--- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/PriceContainer/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/PriceContainer/index.tsx
@@ -1,5 +1,5 @@
 import Caption from "@scandic-hotels/design-system/Caption"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"

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

@@ -34,9 +34,9 @@ export default function PriceContainer({
        </Caption>
      </div>
      <div className={styles.wrapper}>
-        <Subtitle className={styles.price} color="burgundy" type="one">
-          {price}
-        </Subtitle>
+        <Typography variant="Title/Subtitle/md">
+          <p>{price}</p>
+        </Typography>
      </div>
    </div>
  )
--- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/PriceContainer/priceContainer.module.css
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/PriceContainer/priceContainer.module.css
@@ -19,6 +19,7 @@
  padding-left: var(--Space-x2);
  display: flex;
  align-items: center;
+  color: var(--Text-Heading);
 }

 .price {
--- a/apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContainer/index.tsx
+++ b/apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContainer/index.tsx
@@ -1,7 +1,6 @@
 import { useIntl } from "react-intl"

 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"

 import useDropdownStore from "@/stores/main-menu"

@@ -35,18 +34,10 @@ export default function LanguageSwitcherContainer({
            onClick={() => toggleDropdown(position)}
          >
            <MaterialIcon
-              icon="chevron_left"
-              color="Icon/Interactive/Accent"
+              icon="arrow_back_ios"
+              color="Icon/Interactive/Default"
              size={20}
            />
-            <Subtitle type="one" asChild>
-              <span>
-                {intl.formatMessage({
-                  id: "common.mainMenu",
-                  defaultMessage: "Main menu",
-                })}
-              </span>
-            </Subtitle>
          </button>
        </div>
      ) : null}
--- a/apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContainer/languageSwitcherContainer.module.css
+++ b/apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContainer/languageSwitcherContainer.module.css
@@ -1,5 +1,4 @@
 .backWrapper {
-  background-color: var(--Base-Surface-Secondary-light-Normal);
  padding: var(--Space-x2);
 }

--- a/apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx
+++ b/apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx
@@ -6,7 +6,6 @@ import { useIntl } from "react-intl"
 import { languages } from "@scandic-hotels/common/constants/language"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Link from "@scandic-hotels/design-system/OldDSLink"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import useLang from "@/hooks/useLang"
@@ -32,12 +31,14 @@ export default function LanguageSwitcherContent({

  return (
    <div className={styles.languageWrapper}>
-      <Subtitle className={styles.subtitle} type="two">
-        {intl.formatMessage({
-          id: "common.selectYourLanguage",
-          defaultMessage: "Select your language",
-        })}
-      </Subtitle>
+      <Typography variant="Title/Subtitle/md" className={styles.subtitle}>
+        <p>
+          {intl.formatMessage({
+            id: "common.selectYourLanguage",
+            defaultMessage: "Select your language",
+          })}
+        </p>
+      </Typography>
      <ul className={styles.list}>
        {urlKeys.map((key) => {
          const url = urls[key]?.url
--- a/apps/scandic-web/components/SasTierComparison/index.tsx
+++ b/apps/scandic-web/components/SasTierComparison/index.tsx
@@ -6,7 +6,6 @@ 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"
 import Link from "@scandic-hotels/design-system/OldDSLink"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import Title from "@scandic-hotels/design-system/Title"
 import { Typography } from "@scandic-hotels/design-system/Typography"

@@ -130,7 +129,9 @@ function TierDetails({
      <div className={styles.tierContent}>
        <div className={styles.tierInfo}>
          <div className={styles.tierTitle}>
-            <Subtitle color="burgundy">{tierMatch.title}</Subtitle>
+            <Typography variant="Title/Subtitle/md">
+              <p className={styles.title}>{tierMatch.title}</p>
+            </Typography>
          </div>
          <div>{children}</div>
        </div>
--- a/apps/scandic-web/components/SasTierComparison/sasTierComparison.module.css
+++ b/apps/scandic-web/components/SasTierComparison/sasTierComparison.module.css
@@ -31,6 +31,10 @@
  flex-direction: column;
 }

+.title {
+  color: var(--Text-Heading);
+}
+
 .tierDetails {
  overflow: hidden;
  background-color: var(--Base-Surface-Primary-light-Normal);
--- a/apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/index.tsx
+++ b/apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/index.tsx
@@ -1,4 +1,4 @@
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 import { JoinLoyaltyContactEnums } from "@scandic-hotels/trpc/types/joinLoyaltyContact"

 import { getIntl } from "@/i18n"
@@ -13,12 +13,14 @@ export default async function Contact({ contactBlock }: ContactProps) {
  const intl = await getIntl()
  return (
    <article className={styles.contactContainer}>
-      <Subtitle>
-        {intl.formatMessage({
-          id: "common.contactUs",
-          defaultMessage: "Contact us",
-        })}
-      </Subtitle>
+      <Typography variant="Title/Subtitle/md">
+        <p>
+          {intl.formatMessage({
+            id: "common.contactUs",
+            defaultMessage: "Contact us",
+          })}
+        </p>
+      </Typography>
      <section className={styles.contact}>
        {contactBlock.map((contact, i) => {
          switch (contact.typename) {
--- a/apps/scandic-web/components/Sidebar/JoinLoyalty/ReadMore/index.tsx
+++ b/apps/scandic-web/components/Sidebar/JoinLoyalty/ReadMore/index.tsx
@@ -1,7 +1,7 @@
 import { scandicFriends } from "@scandic-hotels/common/constants/routes/myPages"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Link from "@scandic-hotels/design-system/OldDSLink"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import { faq } from "@/constants/webHrefs"

@@ -32,12 +32,14 @@ export default async function ReadMore() {

  return (
    <article className={styles.wrapper}>
-      <Subtitle>
-        {intl.formatMessage({
-          id: "common.readMore",
-          defaultMessage: "Read more",
-        })}
-      </Subtitle>
+      <Typography variant="Title/Subtitle/md">
+        <p>
+          {intl.formatMessage({
+            id: "common.readMore",
+            defaultMessage: "Read more",
+          })}
+        </p>
+      </Typography>
      <div className={styles.links}>
        {links.map((link) => (
          <Link
--- a/apps/scandic-web/components/TempDesignSystem/TeaserCard/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/TeaserCard/index.tsx
@@ -1,6 +1,5 @@
 import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import Image from "@scandic-hotels/design-system/Image"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import TeaserCardSidepeek from "./Sidepeek"
@@ -39,9 +38,9 @@ export default function TeaserCard({
        </div>
      )}
      <div className={styles.content}>
-        <Subtitle textAlign="left" type="two" color="black">
-          {title}
-        </Subtitle>
+        <Typography variant="Title/Subtitle/md">
+          <p>{title}</p>
+        </Typography>
        <Typography variant="Body/Paragraph/mdRegular">
          <p>{description}</p>
        </Typography>