Merged in chore/sw-3145-move-footnote (pull request #2506)

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

* Move Footnote to design-system


Approved-by: Joakim Jäderberg

packages/design-system/lib/components/Footnote/footnote.module.css

@@ -0,0 +1,82 @@
+.footnote {
+  margin: 0;
+  padding: 0;
+}
+
+.footnoteFontOnly {
+  font-style: normal;
+}
+
+.bold {
+  font-family: var(--typography-Footnote-Bold-fontFamily);
+  font-size: var(--typography-Footnote-Bold-fontSize);
+  font-weight: var(--typography-Footnote-Bold-fontWeight);
+  letter-spacing: var(--typography-Footnote-Bold-letterSpacing);
+  line-height: var(--typography-Footnote-Bold-lineHeight);
+  text-decoration: var(--typography-Footnote-Bold-textDecoration);
+}
+
+.regular {
+  font-family: var(--typography-Footnote-Regular-fontFamily);
+  font-size: var(--typography-Footnote-Regular-fontSize);
+  font-weight: var(--typography-Footnote-Regular-fontWeight);
+  letter-spacing: var(--typography-Footnote-Regular-letterSpacing);
+  line-height: var(--typography-Footnote-Regular-lineHeight);
+  text-decoration: var(--typography-Footnote-Regular-textDecoration);
+}
+
+.labels {
+  font-family: var(--typography-Footnote-Labels-fontFamily);
+  font-size: var(--typography-Footnote-Labels-fontSize);
+  font-weight: var(--typography-Footnote-Labels-fontWeight);
+  letter-spacing: var(--typography-Footnote-Labels-letterSpacing);
+  line-height: var(--typography-Footnote-Labels-lineHeight);
+  text-decoration: var(--typography-Footnote-Labels-textDecoration);
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.center {
+  text-align: center;
+}
+
+.left {
+  text-align: left;
+}
+
+.black {
+  color: var(--Main-Grey-100);
+}
+
+.burgundy {
+  color: var(--Scandic-Brand-Burgundy);
+}
+
+.pale {
+  color: var(--Scandic-Brand-Pale-Peach);
+}
+
+.peach50 {
+  color: var(--Scandic-Peach-50);
+}
+
+.uiTextMediumContrast {
+  color: var(--UI-Text-Medium-contrast);
+}
+
+.uiTextHighContrast {
+  color: var(--UI-Text-High-contrast);
+}
+.uiTextPlaceholder {
+  color: var(--UI-Text-Placeholder);
+}
+
+.white {
+  color: var(--Main-Grey-White);
+}
+
+.baseTextDisabled {
+  color: var(--Base-Text-Disabled);
+}

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

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

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

@@ -0,0 +1,61 @@
+import { cva } from 'class-variance-authority'
+
+import styles from './footnote.module.css'
+
+const config = {
+  variants: {
+    type: {
+      regular: styles.regular,
+      bold: styles.bold,
+      label: styles.labels,
+    },
+    color: {
+      black: styles.black,
+      burgundy: styles.burgundy,
+      pale: styles.pale,
+      peach50: styles.peach50,
+      uiTextMediumContrast: styles.uiTextMediumContrast,
+      uiTextHighContrast: styles.uiTextHighContrast,
+      uiTextPlaceholder: styles.uiTextPlaceholder,
+      white: styles.white,
+      baseTextDisabled: styles.baseTextDisabled,
+    },
+    textAlign: {
+      center: styles.center,
+      left: styles.left,
+    },
+    textTransform: {
+      uppercase: styles.uppercase,
+    },
+  },
+  defaultVariants: {
+    type: 'regular',
+  },
+} as const
+
+export const footnoteVariants = cva(styles.footnote, config)
+
+const fontOnlyConfig = {
+  variants: {
+    type: {
+      regular: styles.regular,
+      bold: styles.bold,
+      label: styles.labels,
+    },
+    textAlign: {
+      center: styles.center,
+      left: styles.left,
+    },
+    textTransform: {
+      uppercase: styles.uppercase,
+    },
+  },
+  defaultVariants: {
+    type: 'regular',
+  },
+} as const
+
+export const footnoteFontOnlyVariants = cva(
+  styles.footnoteFontOnly,
+  fontOnlyConfig
+)

packages/design-system/package.json

@@ -12,6 +12,7 @@
     "./ChipLink": "./dist/components/ChipLink/index.js",
     "./Chips": "./dist/components/Chips/index.js",
     "./Divider": "./dist/components/Divider/index.js",
+    "./Footnote": "./dist/components/Footnote/index.js",
     "./Input": "./dist/components/Input/index.js",
     "./Label": "./dist/components/Label/index.js",
     "./Select": "./dist/components/Select/index.js",