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

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/preamble.module.css

@@ -0,0 +1,46 @@
+.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

@@ -0,0 +1,24 @@
+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)

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",