Merged in fix/design-system-remove-preamble (pull request #3153)

remove deprecated preamble, replace with typography

* remove deprecated preamble, replace with typography


Approved-by: Linus Flood

apps/scandic-web/components/Blocks/FullWidthCampaign/fullWidthCampaign.module.css

@@ -3,6 +3,10 @@
   overflow: hidden;
   height: 100vh;
 }
+.bodyText {
+  text-align: center;
+  color: var(--Base-Text-Inverted);
+}
 
 .container::after {
   content: "";

apps/scandic-web/components/Blocks/FullWidthCampaign/index.tsx

@@ -1,8 +1,8 @@
 import Image from "@scandic-hotels/design-system/Image"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Link from "@scandic-hotels/design-system/OldDSLink"
-import Preamble from "@scandic-hotels/design-system/Preamble"
 import Title from "@scandic-hotels/design-system/Title"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
 
@@ -44,9 +44,9 @@ export default function FullWidthCampaign({ content }: FullWidthCampaignProps) {
           >
             {content.heading}
           </Title>
-          <Preamble color="baseText" textAlign="center">
-            {content.body_text}
-          </Preamble>
+          <Typography className={styles.bodyText} variant="Body/Lead text">
+            <p>{content.body_text}</p>
+          </Typography>
           <div className={styles.buttons}>
             {content.has_primary_button ? (
               <Button

apps/scandic-web/components/ContentType/LoyaltyPage/index.tsx

@@ -1,7 +1,6 @@
 import { cx } from "class-variance-authority"
 import { Suspense } from "react"
 
-import Preamble from "@scandic-hotels/design-system/Preamble"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { TrackingSDK } from "@scandic-hotels/tracking/TrackingSDK"
 
@@ -48,7 +47,9 @@ export default async function LoyaltyPage() {
               <h1>{loyaltyPage.heading}</h1>
             </Typography>
             {loyaltyPage.preamble ? (
-              <Preamble>{loyaltyPage.preamble}</Preamble>
+              <Typography variant="Body/Lead text">
+                <p>{loyaltyPage.preamble}</p>
+              </Typography>
             ) : null}
 
             {heroImage ? (

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

@@ -1,5 +1,5 @@
-import Preamble from "@scandic-hotels/design-system/Preamble"
 import Title, { type HeadingProps } from "@scandic-hotels/design-system/Title"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import SectionLink from "../Link"
 
@@ -41,7 +41,11 @@ export default function SectionHeader({
       >
         {title}
       </Title>
-      {preamble && <Preamble className={styles.preamble}>{preamble}</Preamble>}
+      {preamble && (
+        <Typography variant="Body/Lead text" className={styles.preamble}>
+          <p>{preamble}</p>
+        </Typography>
+      )}
       <SectionLink link={link} variant="desktop" />
     </header>
   )

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

@@ -12,7 +12,6 @@ import {
 import { useIntl } from 'react-intl'
 
 import { MaterialIcon } from '../Icons/MaterialIcon'
-import Preamble from '../Preamble'
 import Subtitle from '../Subtitle'
 
 import {
@@ -25,6 +24,7 @@ import { fade, slideInOut } from './motionVariants'
 import { modalContentVariants } from './variants'
 
 import styles from './modal.module.css'
+import { Typography } from '../Typography'
 
 const MotionOverlay = motion.create(ModalOverlay)
 const MotionModal = motion.create(AriaModal)
@@ -106,9 +106,9 @@ function InnerModal({
                       </Subtitle>
                     )}
                     {subtitle && (
-                      <Preamble asChild>
+                      <Typography variant="Body/Lead text">
                         <span>{subtitle}</span>
-                      </Preamble>
+                      </Typography>
                     )}
                   </div>
 

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

@@ -1,30 +0,0 @@
-import { Slot } from '@radix-ui/react-slot'
-
-import { preambleVariants } from './variants'
-
-import type { VariantProps } from 'class-variance-authority'
-
-interface CaptionProps
-  extends Omit<React.HTMLAttributes<HTMLHeadingElement>, 'color'>,
-    VariantProps<typeof preambleVariants> {
-  asChild?: boolean
-}
-
-/**
- * @deprecated Use `Typography` instead.
- */
-export default function Preamble({
-  asChild = false,
-  className = '',
-  color,
-  textAlign,
-  ...props
-}: CaptionProps) {
-  const Comp = asChild ? Slot : 'p'
-  const classNames = preambleVariants({
-    className,
-    color,
-    textAlign,
-  })
-  return <Comp className={classNames} {...props} />
-}

packages/design-system/lib/components/Preamble/preamble.module.css

@@ -1,46 +0,0 @@
-.preamble {
-  margin: 0;
-  padding: 0;
-  font-family: var(--typography-Preamble-fontFamily);
-  font-size: clamp(
-    var(--typography-Preamble-Mobile-fontSize),
-    0.3vw + 15px,
-    var(--typography-Preamble-Desktop-fontSize)
-  );
-  font-weight: var(--typography-Preamble-fontWeight);
-  letter-spacing: var(--typography-Preamble-letterSpacing);
-  line-height: var(--typography-Preamble-lineHeight);
-  text-decoration: var(--typography-Preamble-textDecoration);
-}
-
-.preambleFontOnly {
-  font-style: normal;
-}
-
-.black {
-  color: var(--Main-Grey-100);
-}
-
-.burgundy {
-  color: var(--Scandic-Brand-Burgundy);
-}
-
-.pale {
-  color: var(--Scandic-Brand-Pale-Peach);
-}
-
-.textMediumContrast {
-  color: var(--Base-Text-UI-Medium-contrast);
-}
-
-.baseText {
-  color: var(--Base-Text-Inverted);
-}
-
-.center {
-  text-align: center;
-}
-
-.left {
-  text-align: left;
-}

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

@@ -1,24 +0,0 @@
-import { cva } from 'class-variance-authority'
-
-import styles from './preamble.module.css'
-
-const config = {
-  variants: {
-    color: {
-      black: styles.black,
-      burgundy: styles.burgundy,
-      pale: styles.pale,
-      textMediumContrast: styles.textMediumContrast,
-      baseText: styles.baseText,
-    },
-    textAlign: {
-      center: styles.center,
-      left: styles.left,
-    },
-  },
-  defaultVariants: {
-    color: 'black',
-  },
-} as const
-
-export const preambleVariants = cva(styles.preamble, config)