fix(BOOK-436): Added new section component and deprecated the other

Approved-by: Chuma Mcphoy (We Ahead)

apps/scandic-web/components/Section/Header/index.tsx

@@ -1,46 +1,54 @@
-import Preamble from "@scandic-hotels/design-system/Preamble"
-import Title, { type HeadingProps } from "@scandic-hotels/design-system/Title"
+import { cx, type VariantProps } from "class-variance-authority"
+
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { headingVariants } from "@/components/Section/Header/headingVariants"
 
 import SectionLink from "../Link"
 
 import styles from "./header.module.css"
 
-type HeaderProps = {
+import type { HTMLAttributes } from "react"
+
+interface SectionHeaderProps
+  extends HTMLAttributes<HTMLElement>,
+    VariantProps<typeof headingVariants> {
+  heading?: string
+  headingLevel?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
+  preamble?: string
   link?: {
     href: string
     text: string
   }
-  preamble?: string | null
-  textTransform?: HeadingProps["textTransform"]
-  title?: string | null
-  headingLevel?: HeadingProps["level"]
-  headingAs?: HeadingProps["as"]
 }
 
-export default function SectionHeader({
-  link,
+export function SectionHeader({
+  className,
+  heading,
   preamble,
-  title,
-  textTransform,
-  headingAs = "h4",
+  link,
+  typography = "Title/sm",
   headingLevel = "h2",
-}: HeaderProps) {
-  if (!title && !preamble && !link) {
+  ...props
+}: SectionHeaderProps) {
+  if (!heading && !preamble && !link) {
     return null
   }
+  const headingClassNames = headingVariants({ typography })
+  const Hx = headingLevel
 
   return (
-    <header className={styles.header}>
-      <Title
-        as={headingAs}
-        className={styles.title}
-        level={headingLevel}
-        textTransform={textTransform}
-      >
-        {title}
-      </Title>
-      {preamble && <Preamble className={styles.preamble}>{preamble}</Preamble>}
-      <SectionLink link={link} variant="desktop" />
+    <header className={cx(styles.header, className)} {...props}>
+      <Hx className={headingClassNames}>{heading}</Hx>
+      {preamble ? (
+        <Typography
+          variant="Body/Paragraph/mdRegular"
+          className={styles.preamble}
+        >
+          <p>{preamble}</p>
+        </Typography>
+      ) : null}
+      {link ? <SectionLink link={link} variant="desktop" /> : null}
     </header>
   )
 }