Merged in chore/BOOK-708-replace-title-component (pull request #3414)

Chore/BOOK-708 replace title component

* chore(BOOK-708): replace title with typography

* chore(BOOK-708): replace title with typography

* chore(BOOK-708): remove Title from package.json


Approved-by: Linus Flood
Approved-by: Anton Gunnarsson

apps/scandic-web/components/TempDesignSystem/Card/card.module.css

@@ -56,6 +56,9 @@
 
 .themeOne {
   background: var(--Primary-Light-Surface-Normal);
+  .heading {
+    color: var(--Primary-Light-On-Surface-Text);
+  }
   .bodyText {
     color: var(--Primary-Light-On-Surface-Text);
   }
@@ -63,6 +66,9 @@
 
 .themeTwo {
   background: var(--Secondary-Light-Surface-Normal);
+  .heading {
+    color: var(--Secondary-Light-On-Surface-Text);
+  }
   .bodyText {
     color: var(--Secondary-Light-On-Surface-Text);
   }
@@ -70,6 +76,9 @@
 
 .themeThree {
   background: var(--Tertiary-Light-Surface-Normal);
+  .heading {
+    color: var(--Tertiary-Light-On-Surface-Text);
+  }
   .bodyText {
     color: var(--Tertiary-Light-On-Surface-Text);
   }
@@ -77,6 +86,9 @@
 
 .themePrimaryDark {
   background: var(--Primary-Dark-Surface-Normal);
+  .heading {
+    color: var(--Primary-Dark-On-Surface-Text);
+  }
   .bodyText {
     color: var(--Primary-Dark-On-Surface-Text);
   }
@@ -84,6 +96,9 @@
 
 .themePrimaryDim {
   background: var(--Primary-Dim-Surface-Normal);
+  .heading {
+    color: var(--Primary-Dim-On-Surface-Text);
+  }
   .bodyText {
     color: var(--Primary-Dim-On-Surface-Text);
   }
@@ -91,6 +106,9 @@
 
 .themePrimaryInverted {
   background: var(--Base-Surface-Primary-light-Normal);
+  .heading {
+    color: var(--Primary-Light-On-Surface-Text);
+  }
   .bodyText {
     color: var(--Primary-Light-On-Surface-Text);
   }
@@ -98,6 +116,9 @@
 
 .themePrimaryStrong {
   background: var(--Primary-Strong-Surface-Normal);
+  .heading {
+    color: var(--Primary-Strong-On-Surface-Text);
+  }
   .bodyText {
     color: var(--Primary-Strong-On-Surface-Text);
   }
@@ -107,6 +128,9 @@
   .bodyText {
     color: var(--Base-Text-Inverted);
   }
+  .heading {
+    color: var(--Base-Text-Inverted);
+  }
   .content {
     position: absolute;
   }

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

@@ -3,12 +3,11 @@ import Link from "next/link"
 
 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 { getButtonTheme, getScriptFontColor, getTitleFontColor } from "./utils"
+import { getButtonTheme, getScriptFontColor } from "./utils"
 import { cardVariants } from "./variants"
 
 import styles from "./card.module.css"
@@ -30,7 +29,6 @@ export default function Card({
   height,
 }: CardProps) {
   const buttonTheme = getButtonTheme(theme)
-  const titleFontColor = getTitleFontColor(theme)
   const scriptFontColor = getScriptFontColor(theme)
 
   return (
@@ -71,15 +69,9 @@ export default function Card({
             </BiroScript>
           </section>
         )}
-        <Title
-          as="h3"
-          level="h3"
-          textAlign="center"
-          textTransform="regular"
-          color={titleFontColor}
-        >
-          {heading}
-        </Title>
+        <Typography variant="Title/smLowCase" className={styles.heading}>
+          <h3>{heading}</h3>
+        </Typography>
         {bodyText && (
           <Typography
             variant="Body/Paragraph/mdRegular"

apps/scandic-web/components/TempDesignSystem/Card/utils.ts

@@ -1,33 +1,9 @@
 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"
-import type { ComponentProps } from "react"
 
 import type { CardProps } from "@/components/TempDesignSystem/Card/card"
 import type { biroScriptVariants } from "@/components/TempDesignSystem/Text/BiroScript/variants"
 
-type TitleColor = ComponentProps<typeof Title>["color"]
-export function getTitleFontColor(theme: CardProps["theme"]): TitleColor {
-  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 getScriptFontColor(
   theme: CardProps["theme"]
 ): VariantProps<typeof biroScriptVariants>["color"] {