Merged in chore/replace-deprecated-body (pull request #3300)

Replace deprecated <Body> with <Typography> * chore: replace deprecated body component * refactor: replace Body component with Typography across various components * merge Approved-by: Bianca Widstam Approved-by: Matilda Landström
2025-12-09 12:45:34 +00:00
parent f40035baa9
commit 7eb74ea239
69 changed files with 755 additions and 899 deletions
--- a/apps/scandic-web/components/TempDesignSystem/AncillaryCard/ancillaryCard.module.css
+++ b/apps/scandic-web/components/TempDesignSystem/AncillaryCard/ancillaryCard.module.css
@@ -18,6 +18,7 @@
 .price {
  display: flex;
  gap: var(--Space-x1);
+  color: var(--UI-Text-High-contrast);
 }

 .contentContainer {
@@ -26,3 +27,11 @@
  flex-direction: column;
  gap: var(--Space-x1);
 }
+
+.ancillaryTitle {
+  color: var(--UI-Text-High-contrast);
+}
+.ancillaryPoints {
+  color: var(--UI-Text-High-contrast);
+  text-align: right;
+}
--- a/apps/scandic-web/components/TempDesignSystem/AncillaryCard/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/AncillaryCard/index.tsx
@@ -1,10 +1,10 @@
 import { useIntl } from "react-intl"

 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-import Body from "@scandic-hotels/design-system/Body"
 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"

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

@@ -30,37 +30,47 @@ export function AncillaryCard({ ancillary }: AncillaryCardProps) {
      </div>
      <div className={styles.contentContainer}>
        <div>
-          <Body textTransform="bold" color="uiTextHighContrast">
-            {ancillary.title}
-          </Body>
+          <Typography
+            variant="Body/Paragraph/mdBold"
+            className={styles.ancillaryTitle}
+          >
+            <p>{ancillary.title}</p>
+          </Typography>

          <div className={styles.price}>
-            <Body color="uiTextHighContrast">
-              {ancillary.price.included
-                ? intl.formatMessage({
-                    id: "common.included",
-                    defaultMessage: "Included",
-                  })
-                : priceMsg}
-            </Body>
+            <Typography>
+              <p>
+                {ancillary.price.included
+                  ? intl.formatMessage({
+                      id: "common.included",
+                      defaultMessage: "Included",
+                    })
+                  : priceMsg}
+              </p>
+            </Typography>

            {ancillary.points && (
              <>
                <div>
                  <Divider variant="vertical" />
                </div>
-                <Body textAlign="right" color="uiTextHighContrast">
-                  {intl.formatMessage(
-                    {
-                      id: "common.numberOfPoints",
-                      defaultMessage:
-                        "{points, plural, one {# point} other {# points}}",
-                    },
-                    {
-                      points: ancillary.points,
-                    }
-                  )}
-                </Body>
+                <Typography
+                  variant="Body/Paragraph/mdRegular"
+                  className={styles.ancillaryPoints}
+                >
+                  <p>
+                    {intl.formatMessage(
+                      {
+                        id: "common.numberOfPoints",
+                        defaultMessage:
+                          "{points, plural, one {# point} other {# points}}",
+                      },
+                      {
+                        points: ancillary.points,
+                      }
+                    )}
+                  </p>
+                </Typography>
              </>
            )}
          </div>
--- a/apps/scandic-web/components/TempDesignSystem/Card/card.module.css
+++ b/apps/scandic-web/components/TempDesignSystem/Card/card.module.css
@@ -56,34 +56,60 @@

 .themeOne {
  background: var(--Primary-Light-Surface-Normal);
+  .bodyText {
+    color: var(--Primary-Light-On-Surface-Text);
+  }
 }

 .themeTwo {
  background: var(--Secondary-Light-Surface-Normal);
+  .bodyText {
+    color: var(--Secondary-Light-On-Surface-Text);
+  }
 }

 .themeThree {
  background: var(--Tertiary-Light-Surface-Normal);
+  .bodyText {
+    color: var(--Tertiary-Light-On-Surface-Text);
+  }
 }

 .themePrimaryDark {
  background: var(--Primary-Dark-Surface-Normal);
+  .bodyText {
+    color: var(--Primary-Dark-On-Surface-Text);
+  }
 }

 .themePrimaryDim {
  background: var(--Primary-Dim-Surface-Normal);
+  .bodyText {
+    color: var(--Primary-Dim-On-Surface-Text);
+  }
 }

 .themePrimaryInverted {
  background: var(--Base-Surface-Primary-light-Normal);
+  .bodyText {
+    color: var(--Primary-Light-On-Surface-Text);
+  }
 }

 .themePrimaryStrong {
  background: var(--Primary-Strong-Surface-Normal);
+  .bodyText {
+    color: var(--Primary-Strong-On-Surface-Text);
+  }
 }

-.themeImage .content {
-  position: absolute;
+.themeImage {
+  .bodyText {
+    color: var(--Base-Text-Inverted);
+  }
+  .content {
+    position: absolute;
+  }
 }

 .scriptContainer {
--- a/apps/scandic-web/components/TempDesignSystem/Card/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/Card/index.tsx
@@ -1,19 +1,14 @@
 import { cx } from "class-variance-authority"
 import Link from "next/link"

-import Body from "@scandic-hotels/design-system/Body"
 import Image from "@scandic-hotels/design-system/Image"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Title from "@scandic-hotels/design-system/Title"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"

-import {
-  getBodyFontColor,
-  getButtonTheme,
-  getScriptFontColor,
-  getTitleFontColor,
-} from "./utils"
+import { getButtonTheme, getScriptFontColor, getTitleFontColor } from "./utils"
 import { cardVariants } from "./variants"

 import styles from "./card.module.css"
@@ -37,7 +32,6 @@ export default function Card({
  const buttonTheme = getButtonTheme(theme)
  const titleFontColor = getTitleFontColor(theme)
  const scriptFontColor = getScriptFontColor(theme)
-  const bodyFontColor = getBodyFontColor(theme)

  return (
    <article
@@ -65,7 +59,7 @@ export default function Card({
        </div>
      )}
      <div className={styles.content}>
-        {scriptedTopTitle ? (
+        {scriptedTopTitle && (
          <section className={styles.scriptContainer}>
            <BiroScript
              className={styles.scriptedTitle}
@@ -76,7 +70,7 @@ export default function Card({
              {scriptedTopTitle}
            </BiroScript>
          </section>
-        ) : null}
+        )}
        <Title
          as="h3"
          level="h3"
@@ -86,11 +80,14 @@ export default function Card({
        >
          {heading}
        </Title>
-        {bodyText ? (
-          <Body textAlign="center" color={bodyFontColor}>
-            {bodyText}
-          </Body>
-        ) : null}
+        {bodyText && (
+          <Typography
+            variant="Body/Paragraph/mdRegular"
+            className={styles.bodyText}
+          >
+            <p>{bodyText}</p>
+          </Typography>
+        )}
        <div className={styles.buttonContainer}>
          {primaryButton ? (
            <Button
--- a/apps/scandic-web/components/TempDesignSystem/Card/utils.ts
+++ b/apps/scandic-web/components/TempDesignSystem/Card/utils.ts
@@ -1,4 +1,3 @@
-import type Body from "@scandic-hotels/design-system/Body"
 import type { ButtonProps } from "@scandic-hotels/design-system/OldDSButton"
 import type Title from "@scandic-hotels/design-system/Title"
 import type { VariantProps } from "class-variance-authority"
@@ -52,28 +51,6 @@ export function getScriptFontColor(
  }
 }

-type BodyColor = ComponentProps<typeof Body>["color"]
-export function getBodyFontColor(theme: CardProps["theme"]): BodyColor {
-  switch (theme) {
-    case "one":
-      return "primaryLight"
-    case "two":
-      return "secondaryLight"
-    case "three":
-      return "tertiaryLight"
-    case "primaryDark":
-      return "primaryDark"
-    case "primaryDim":
-      return "primaryDim"
-    case "primaryInverted":
-      return "primaryLight"
-    case "primaryStrong":
-      return "primaryStrong"
-    case "image":
-      return "baseText"
-  }
-}
-
 export function getButtonTheme(
  theme: CardProps["theme"]
 ): ButtonProps["theme"] {
--- a/apps/scandic-web/components/TempDesignSystem/LoyaltyCard/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/LoyaltyCard/index.tsx
@@ -1,8 +1,8 @@
-import Body from "@scandic-hotels/design-system/Body"
 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"
 import Title from "@scandic-hotels/design-system/Title"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import { loyaltyCardVariants } from "./variants"

@@ -39,7 +39,14 @@ export default function LoyaltyCard({
      <Title as="h4" level="h3" textAlign="center">
        {heading}
      </Title>
-      {bodyText ? <Body textAlign="center">{bodyText}</Body> : null}
+      {!!bodyText && (
+        <Typography
+          variant="Body/Paragraph/mdRegular"
+          className={styles.bodyText}
+        >
+          <p>{bodyText}</p>
+        </Typography>
+      )}
      <div className={styles.buttonContainer}>
        {link ? (
          <Link
--- a/apps/scandic-web/components/TempDesignSystem/LoyaltyCard/loyaltyCard.module.css
+++ b/apps/scandic-web/components/TempDesignSystem/LoyaltyCard/loyaltyCard.module.css
@@ -36,3 +36,6 @@
 .icon {
  align-self: center;
 }
+.bodyText {
+  text-align: center;
+}
--- a/apps/scandic-web/components/TempDesignSystem/TeaserCard/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/TeaserCard/index.tsx
@@ -1,7 +1,7 @@
-import Body from "@scandic-hotels/design-system/Body"
 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"
 import { teaserCardVariants } from "./variants"
@@ -42,7 +42,10 @@ export default function TeaserCard({
        <Subtitle textAlign="left" type="two" color="black">
          {title}
        </Subtitle>
-        <Body color="black">{description}</Body>
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p>{description}</p>
+        </Typography>
+
        {sidePeekButton && sidePeekContent ? (
          <TeaserCardSidepeek
            button={sidePeekButton}
--- a/apps/scandic-web/components/TempDesignSystem/TeaserCard/teaserCard.module.css
+++ b/apps/scandic-web/components/TempDesignSystem/TeaserCard/teaserCard.module.css
@@ -35,6 +35,8 @@
  padding: var(--Space-x2) var(--Space-x3);
  grid-template-rows: auto 1fr auto;
  flex-grow: 1;
+
+  color: var(--Main-Grey-100);
 }

 .description {