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/Title/index.tsx

@@ -0,0 +1,63 @@
+import { Children, ReactNode } from 'react'
+import { headingVariants } from './variants'
+
+import type { VariantProps } from 'class-variance-authority'
+
+type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5'
+
+export interface HeadingProps
+  extends Omit<React.HTMLAttributes<HTMLHeadingElement>, 'color'>,
+    VariantProps<typeof headingVariants> {
+  as?: HeadingLevel
+  level?: HeadingLevel
+}
+
+/**
+ * @deprecated Use `Typography` instead.
+ */
+export default function Title({
+  /**
+   * What styling to use, based on heading level. If not provided `level`
+   * will determine the styling.
+   */
+  as,
+  children,
+  className = '',
+  color,
+  /**
+   * What HTML tag to use. Defaults to h1.
+   */
+  level = 'h1',
+  textAlign,
+  textTransform,
+  ...rest
+}: HeadingProps) {
+  if (checkForEmptyChildren(children) === 0) {
+    return null
+  }
+  const Hx = level
+  const classNames = headingVariants({
+    className,
+    color,
+    textAlign,
+    textTransform,
+    type: as ?? level,
+  })
+  return (
+    <Hx {...rest} className={classNames}>
+      {children}
+    </Hx>
+  )
+}
+
+function checkForEmptyChildren(children: ReactNode) {
+  return Children.toArray(children).filter((child) => {
+    if (child === '') {
+      return false
+    } else if (child == null) {
+      return false
+    } else {
+      return true
+    }
+  }).length
+}