Merged in chore/sw-3145-move-caption (pull request #2503)

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

* Move Caption to design-system

* Mark Caption as deprecated


Approved-by: Linus Flood
Approved-by: Joakim Jäderberg

packages/design-system/lib/components/Caption/caption.module.css

@@ -0,0 +1,127 @@
+p.caption {
+  margin: 0;
+  padding: 0;
+}
+
+.captionFontOnly {
+  font-style: normal;
+}
+
+.bold {
+  font-family: var(--typography-Caption-Bold-fontFamily);
+  font-size: var(--typography-Caption-Bold-fontSize);
+  font-weight: 500; /* var(--typography-Caption-Bold-fontWeight); /* Commented till figma values are fixed to 500 instead of medium */
+  letter-spacing: var(--typography-Caption-Bold-letterSpacing);
+  line-height: var(--typography-Caption-Bold-lineHeight);
+  text-decoration: var(--typography-Caption-Bold-textDecoration);
+}
+
+.labels {
+  font-family: var(--typography-Caption-Labels-fontFamily);
+  font-size: var(--typography-Caption-Labels-fontSize);
+  font-weight: var(--typography-Caption-Labels-fontWeight);
+  letter-spacing: var(--typography-Caption-Labels-letterSpacing);
+  line-height: var(--typography-Caption-Labels-lineHeight);
+  text-decoration: var(--typography-Caption-Labels-textDecoration);
+}
+
+.underline {
+  font-family: var(--typography-Caption-Underline-fontFamily);
+  font-size: var(--typography-Caption-Underline-fontSize);
+  font-weight: var(--typography-Caption-Underline-fontWeight);
+  letter-spacing: var(--typography-Caption-Underline-letterSpacing);
+  line-height: var(--typography-Caption-Underline-lineHeight);
+  text-decoration: underline; /* var(--typography-Caption-Underline-textDecoration) /* Commented till figma values are fixed to underline instead of "underline" */
+}
+
+.regular {
+  font-family: var(--typography-Caption-Regular-fontFamily);
+  font-size: var(--typography-Caption-Regular-fontSize);
+  font-weight: var(--typography-Caption-Regular-fontWeight);
+  letter-spacing: var(--typography-Caption-Regular-letterSpacing);
+  line-height: var(--typography-Caption-Regular-lineHeight);
+  text-decoration: var(--typography-Caption-Regular-textDecoration);
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.striked {
+  text-decoration: line-through;
+}
+
+.baseTextAccent {
+  color: var(--Base-Text-Accent);
+}
+
+.black {
+  color: var(--Main-Grey-100);
+}
+
+.burgundy {
+  color: var(--Scandic-Brand-Burgundy);
+}
+
+.pale {
+  color: var(--Scandic-Brand-Pale-Peach);
+}
+
+.textMediumContrast {
+  color: var(--Base-Text-Medium-contrast);
+}
+
+.baseTextHighContrast {
+  color: var(--Base-Text-High-contrast);
+}
+
+.baseTextMediumContrast {
+  color: var(--Base-Text-Medium-contrast);
+}
+
+.red {
+  color: var(--Scandic-Brand-Scandic-Red);
+}
+
+.white {
+  color: var(--UI-Opacity-White-100);
+}
+
+.uiTextActive {
+  color: var(--UI-Text-Active);
+}
+
+.uiTextMediumContrast {
+  color: var(--UI-Text-Medium-contrast);
+}
+
+.uiTextHighContrast {
+  color: var(--UI-Text-High-contrast);
+}
+
+.uiTextPlaceholder {
+  color: var(--UI-Text-Placeholder);
+}
+
+.disabled {
+  color: var(--Base-Text-Disabled);
+}
+
+.center {
+  text-align: center;
+}
+
+.left {
+  text-align: left;
+}
+
+.right {
+  text-align: right;
+}
+
+.green {
+  color: var(--UI-Semantic-Success);
+}
+.blue {
+  color: var(--UI-Semantic-Information);
+}

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

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

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

@@ -0,0 +1,80 @@
+import { cva } from 'class-variance-authority'
+
+import styles from './caption.module.css'
+
+const config = {
+  variants: {
+    type: {
+      regular: styles.regular,
+      bold: styles.bold,
+      label: styles.labels,
+      underline: styles.underline,
+    },
+    color: {
+      baseTextAccent: styles.baseTextAccent,
+      black: styles.black,
+      burgundy: styles.burgundy,
+      pale: styles.pale,
+      textMediumContrast: styles.textMediumContrast,
+      red: styles.red,
+      white: styles.white,
+      green: styles.green,
+      blue: styles.blue,
+      uiTextHighContrast: styles.uiTextHighContrast,
+      uiTextActive: styles.uiTextActive,
+      uiTextMediumContrast: styles.uiTextMediumContrast,
+      uiTextPlaceholder: styles.uiTextPlaceholder,
+      disabled: styles.disabled,
+      baseTextHighContrast: styles.baseTextHighContrast,
+      baseTextMediumContrast: styles.baseTextMediumContrast,
+    },
+    textTransform: {
+      uppercase: styles.uppercase,
+    },
+    textAlign: {
+      center: styles.center,
+      left: styles.left,
+      right: styles.right,
+    },
+    uppercase: {
+      true: styles.uppercase,
+    },
+    striked: {
+      true: styles.striked,
+    },
+  },
+  defaultVariants: {
+    color: 'black',
+    type: 'regular',
+  },
+} as const
+
+export const captionVariants = cva(styles.caption, config)
+
+const fontOnlyConfig = {
+  variants: {
+    type: {
+      regular: styles.regular,
+      bold: styles.bold,
+      label: styles.labels,
+      underline: styles.underline,
+    },
+    textTransform: {
+      uppercase: styles.uppercase,
+    },
+    uppercase: {
+      true: styles.uppercase,
+    },
+    striked: {
+      true: styles.striked,
+    },
+  },
+  defaultVariants: {
+    type: 'regular',
+  },
+} as const
+
+export const fontOnlycaptionVariants = cva(
+  styles.captionFontOnly,
+  fontOnlyConfig
+)