Merged in chore/sw-3145-move-preamble (pull request #2519)

chore(SW-3145): Move Preamble to design-system

* Move Preamble to design-system


Approved-by: Linus Flood

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

@@ -1,8 +1,9 @@
+import Preamble from "@scandic-hotels/design-system/Preamble"
+
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
-import Preamble from "@/components/TempDesignSystem/Text/Preamble"
 import Title from "@/components/TempDesignSystem/Text/Title"
 
 import styles from "./fullWidthCampaign.module.css"

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Activities/index.tsx

@@ -1,7 +1,8 @@
+import Preamble from "@scandic-hotels/design-system/Preamble"
+
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import SidePeek from "@/components/TempDesignSystem/SidePeek"
-import Preamble from "@/components/TempDesignSystem/Text/Preamble"
 import { getIntl } from "@/i18n"
 
 import styles from "./activities.module.css"

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

@@ -1,6 +1,8 @@
 import { cx } from "class-variance-authority"
 import { Suspense } from "react"
 
+import Preamble from "@scandic-hotels/design-system/Preamble"
+
 import { serverClient } from "@/lib/trpc/server"
 
 import Blocks from "@/components/Blocks"
@@ -8,7 +10,6 @@ import Hero from "@/components/Hero"
 import MaxWidth from "@/components/MaxWidth"
 import Sidebar from "@/components/Sidebar"
 import SidebarSkeleton from "@/components/Sidebar/SidebarSkeleton"
-import Preamble from "@/components/TempDesignSystem/Text/Preamble"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import TrackingSDK from "@/components/TrackingSDK"
 import { isLoggedInUser } from "@/utils/isLoggedInUser"

apps/scandic-web/components/HotelReservation/SelectHotel/HotelCount/index.tsx

@@ -2,9 +2,9 @@
 
 import { useIntl } from "react-intl"
 
-import { useHotelFilterStore } from "@/stores/hotel-filters"
+import Preamble from "@scandic-hotels/design-system/Preamble"
 
-import Preamble from "@/components/TempDesignSystem/Text/Preamble"
+import { useHotelFilterStore } from "@/stores/hotel-filters"
 
 export default function HotelCount() {
   const intl = useIntl()

apps/scandic-web/components/Modal/index.tsx

@@ -12,8 +12,8 @@ import {
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Preamble from "@scandic-hotels/design-system/Preamble"
 
-import Preamble from "@/components/TempDesignSystem/Text/Preamble"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import {

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

@@ -1,4 +1,5 @@
-import Preamble from "@/components/TempDesignSystem/Text/Preamble"
+import Preamble from "@scandic-hotels/design-system/Preamble"
+
 import Title from "@/components/TempDesignSystem/Text/Title"
 
 import SectionLink from "../Link"

apps/scandic-web/components/TempDesignSystem/Text/Preamble/index.tsx

@@ -1,21 +0,0 @@
-import { Slot } from "@radix-ui/react-slot"
-
-import { preambleVariants } from "./variants"
-
-import type { CaptionProps } from "./preamble"
-
-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} />
-}

apps/scandic-web/components/TempDesignSystem/Text/Preamble/preamble.ts

@@ -1,9 +0,0 @@
-import type { VariantProps } from "class-variance-authority"
-
-import type { preambleVariants } from "./variants"
-
-export interface CaptionProps
-  extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
-    VariantProps<typeof preambleVariants> {
-  asChild?: boolean
-}

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

@@ -0,0 +1,30 @@
+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/variants.ts

@@ -1,6 +1,6 @@
-import { cva } from "class-variance-authority"
+import { cva } from 'class-variance-authority'
 
-import styles from "./preamble.module.css"
+import styles from './preamble.module.css'
 
 const config = {
   variants: {
@@ -17,7 +17,7 @@ const config = {
     },
   },
   defaultVariants: {
-    color: "black",
+    color: 'black',
   },
 } as const
 

packages/design-system/package.json

@@ -24,6 +24,7 @@
     "./CampaignRateCard": "./dist/components/RateCard/Campaign/index.js",
     "./CodeRateCard": "./dist/components/RateCard/Code/index.js",
     "./PointsRateCard": "./dist/components/RateCard/Points/index.js",
+    "./Preamble": "./dist/components/Preamble/index.js",
     "./NoRateAvailableCard": "./dist/components/RateCard/NoRateAvailable/index.js",
     "./IconButton": "./dist/components/IconButton/index.js",
     "./Icons": "./dist/components/Icons/index.js",