Merged in chore/sw-3145-move-subtitle (pull request #2516)

chore(SW-3145): Move Title and Subtitle to design-system

* Move Title and Subtitle to design-system

* Fix export


Approved-by: Linus Flood

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

@@ -0,0 +1,50 @@
+import { Slot } from '@radix-ui/react-slot'
+
+import { subtitleVariants } from './variants'
+
+import type { VariantProps } from 'class-variance-authority'
+import { Children, ReactNode } from 'react'
+
+interface SubtitleProps
+  extends Omit<React.HTMLAttributes<HTMLHeadingElement>, 'color'>,
+    VariantProps<typeof subtitleVariants> {
+  asChild?: boolean
+}
+
+/**
+ * @deprecated Use `Typography` instead.
+ */
+export default function Subtitle({
+  asChild = false,
+  className = '',
+  color,
+  textAlign,
+  textTransform,
+  type,
+  ...props
+}: SubtitleProps) {
+  if (checkForEmptyChildren(props.children) === 0) {
+    return null
+  }
+  const Comp = asChild ? Slot : 'p'
+  const classNames = subtitleVariants({
+    className,
+    color,
+    textAlign,
+    textTransform,
+    type,
+  })
+  return <Comp className={classNames} {...props} />
+}
+
+function checkForEmptyChildren(children: ReactNode) {
+  return Children.toArray(children).filter((child) => {
+    if (child === '') {
+      return false
+    } else if (child == null) {
+      return false
+    } else {
+      return true
+    }
+  }).length
+}

packages/design-system/lib/components/Subtitle/subtitle.module.css

@@ -0,0 +1,92 @@
+.subtitle {
+  margin: var(--Spacing-x0);
+  padding: var(--Spacing-x0);
+}
+
+.one {
+  font-family: var(--typography-Subtitle-1-fontFamily);
+  font-size: clamp(
+    var(--typography-Subtitle-1-Mobile-fontSize),
+    0.3vw + 15px,
+    var(--typography-Subtitle-1-Desktop-fontSize)
+  );
+  font-weight: 500;
+  letter-spacing: var(--typography-Subtitle-1-letterSpacing);
+  line-height: var(--typography-Subtitle-1-lineHeight);
+}
+
+.two {
+  font-family: var(--typography-Subtitle-2-fontFamily);
+  font-size: clamp(
+    var(--typography-Subtitle-2-Mobile-fontSize),
+    0.3vw + 15px,
+    var(--typography-Subtitle-2-Desktop-fontSize)
+  );
+  font-weight: 500;
+  letter-spacing: var(--typography-Subtitle-2-letterSpacing);
+  line-height: var(--typography-Subtitle-2-lineHeight);
+}
+
+.regular {
+  text-transform: none;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.capitalize {
+  text-transform: capitalize;
+}
+
+.center {
+  text-align: center;
+}
+
+.left {
+  text-align: left;
+}
+
+.right {
+  text-align: right;
+}
+
+.black {
+  color: var(--Main-Grey-100);
+}
+
+.burgundy {
+  color: var(--Scandic-Brand-Burgundy);
+}
+
+.pale {
+  color: var(--Scandic-Brand-Pale-Peach);
+}
+
+.baseTextHighContrast {
+  color: var(--Base-Text-High-contrast);
+}
+
+.uiTextHighContrast {
+  color: var(--UI-Text-High-contrast);
+}
+
+.uiTextMediumContrast {
+  color: var(--UI-Text-Medium-contrast);
+}
+
+.uiTextPlaceholder {
+  color: var(--UI-Text-Placeholder);
+}
+
+.red {
+  color: var(--Scandic-Brand-Scandic-Red);
+}
+
+.baseTextDisabled {
+  color: var(--Base-Text-Disabled);
+}
+
+.mainGrey60 {
+  color: var(--Main-Grey-60);
+}

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

@@ -0,0 +1,42 @@
+import { cva } from 'class-variance-authority'
+
+import styles from './subtitle.module.css'
+
+const config = {
+  variants: {
+    color: {
+      black: styles.black,
+      burgundy: styles.burgundy,
+      baseTextDisabled: styles.baseTextDisabled,
+      pale: styles.pale,
+      baseTextHighContrast: styles.baseTextHighContrast,
+      uiTextHighContrast: styles.uiTextHighContrast,
+      uiTextMediumContrast: styles.uiTextMediumContrast,
+      uiTextPlaceholder: styles.uiTextPlaceholder,
+      red: styles.red,
+      mainGrey60: styles.mainGrey60,
+    },
+    textAlign: {
+      center: styles.center,
+      left: styles.left,
+      right: styles.right,
+    },
+    textTransform: {
+      regular: styles.regular,
+      uppercase: styles.uppercase,
+      capitalize: styles.capitalize,
+    },
+    type: {
+      one: styles.one,
+      two: styles.two,
+    },
+  },
+  defaultVariants: {
+    color: 'black',
+    textAlign: 'left',
+    textTransform: 'regular',
+    type: 'one',
+  },
+} as const
+
+export const subtitleVariants = cva(styles.subtitle, config)