feat(WEB-250): overview hero final ui

components/TempDesignSystem/Subtitle/index.tsx

@@ -0,0 +1,21 @@
+import { subtitleVariants } from "./variants"
+
+import type { SubtitleProps } from "./subtitle"
+
+export default function Subtitle({
+  children,
+  className = "",
+  color,
+  hideEmpty = true,
+  textTransform,
+}: SubtitleProps) {
+  if (hideEmpty && !children) {
+    return null
+  }
+  const classNames = subtitleVariants({
+    className,
+    color,
+    textTransform,
+  })
+  return <p className={classNames}>{children}</p>
+}

components/TempDesignSystem/Subtitle/subtitle.module.css

@@ -0,0 +1,37 @@
+.subtitle {
+  font-family: var(--typography-Subtitle-fontFamily);
+  font-size: var(--typography-Subtitle-Mobile-fontSize);
+  font-weight: var(--typography-Subtitle-fontWeight);
+  letter-spacing: var(--typography-Subtitle-letterSpacing);
+  line-height: var(--typography-Subtitle-lineHeight);
+  margin: 0;
+  padding: 0;
+}
+
+@media screen and (min-width: 768px) {
+  .subtitle {
+    font-size: var(--typography-Subtitle-Tablet-estimate-fontSize);
+  }
+}
+
+@media screen and (min-width: 1367px) {
+  .subtitle {
+    font-size: var(--typography-Subtitle-Desktop-fontSize);
+  }
+}
+
+.regular {
+  text-transform: none;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.burgundy {
+  color: var(--Scandic-Brand-Burgundy);
+}
+
+.pale {
+  color: var(--Scandic-Brand-Pale-Peach);
+}

components/TempDesignSystem/Subtitle/subtitle.ts

@@ -0,0 +1,9 @@
+import { subtitleVariants } from "./variants"
+
+import type { VariantProps } from "class-variance-authority"
+
+export interface SubtitleProps
+  extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
+    VariantProps<typeof subtitleVariants> {
+  hideEmpty?: boolean
+}

components/TempDesignSystem/Subtitle/variants.ts

@@ -0,0 +1,22 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./subtitle.module.css"
+
+const config = {
+  variants: {
+    color: {
+      burgundy: styles.burgundy,
+      pale: styles.pale,
+    },
+    textTransform: {
+      regular: styles.regular,
+      uppercase: styles.uppercase,
+    },
+  },
+  defaultVariants: {
+    color: "burgundy",
+    textTransform: "regular",
+  },
+} as const
+
+export const subtitleVariants = cva(styles.subtitle, config)