feat(WEB-250): overview hero final ui

components/TempDesignSystem/BiroScript/biroScript.module.css

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

components/TempDesignSystem/BiroScript/biroScript.ts

@@ -0,0 +1,7 @@
+import { biroScriptVariants } from "./variants"
+
+import type { VariantProps } from "class-variance-authority"
+
+export interface BiroScriptProps
+  extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color">,
+    VariantProps<typeof biroScriptVariants> {}

components/TempDesignSystem/BiroScript/index.tsx

@@ -0,0 +1,17 @@
+import { biroScriptVariants } from "./variants"
+
+import type { BiroScriptProps } from "./biroScript"
+
+export default function BiroScript({
+  children,
+  className,
+  color,
+  type,
+}: BiroScriptProps) {
+  const classNames = biroScriptVariants({
+    className,
+    color,
+    type,
+  })
+  return <span className={classNames}>{children}</span>
+}

components/TempDesignSystem/BiroScript/variants.ts

@@ -0,0 +1,21 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./biroScript.module.css"
+
+const config = {
+  variants: {
+    color: {
+      burgundy: styles.burgundy,
+      pale: styles.pale,
+    },
+    type: {
+      one: styles.one,
+      two: styles.two,
+    },
+  },
+  defaultVariants: {
+    type: "one",
+  },
+} as const
+
+export const biroScriptVariants = cva(styles.text, config)

components/TempDesignSystem/Card/index.tsx

@@ -1,21 +1,21 @@
-import Title from "@/components/Title"
+import Button from "@/components/TempDesignSystem/Button"
+import Divider from "@/components/TempDesignSystem/Divider"
+import Link from "@/components/TempDesignSystem/Link"
+import Title from "@/components/TempDesignSystem/Title"
 
-import Button from "../Button"
-import { ButtonProps } from "../Button/button"
-import Divider from "../Divider"
-import Link from "../Link"
-import { CardProps } from "./card"
 import { cardVariants } from "./variants"
 
 import styles from "./card.module.css"
 
+import type { ButtonProps } from "@/components/TempDesignSystem/Button/button"
+import type { CardProps } from "./card"
+
 export default function Card({
   primaryButton,
   secondaryButton,
   scriptedTopTitle,
   heading,
   bodyText,
-  backgroundImage,
   className,
   theme,
 }: CardProps) {
@@ -42,23 +42,15 @@ export default function Card({
     >
       {scriptedTopTitle ? (
         <section className={styles.scriptContainer}>
-          <Title level="h3" weight="semiBold" className={styles.scriptedTitle}>
+          <Title className={styles.scriptedTitle} level="h3">
             {scriptedTopTitle}
           </Title>
           <Divider className={styles.divider} />
         </section>
       ) : null}
-      {heading ? (
-        <Title
-          level="h3"
-          as="h5"
-          weight="semiBold"
-          uppercase
-          className={styles.heading}
-        >
-          {heading}
-        </Title>
-      ) : null}
+      <Title as="h5" className={styles.heading} level="h3">
+        {heading}
+      </Title>
       {bodyText ? <p className={styles.bodyText}>{bodyText}</p> : null}
       <div className={styles.buttonContainer}>
         {primaryButton ? (

components/TempDesignSystem/CardGrid/cardGrid.module.css

@@ -36,7 +36,7 @@
   display: none;
 }
 
-@media screen and (min-width: 950px) {
+@media screen and (min-width: 1367px) {
   .twoColumnGrid,
   .twoPlusOne {
     grid-template-columns: repeat(2, 1fr);

components/TempDesignSystem/Divider/divider.module.css

@@ -1,5 +1,5 @@
 .divider {
-  border-bottom-color: var(--some-grey-color, #111);
+  border-bottom-color: var(--Scandic-Brand-Burgundy);
   border-bottom-style: solid;
   border-bottom-width: 1px;
 }

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)

components/TempDesignSystem/Title/index.tsx

@@ -0,0 +1,25 @@
+import { headingVariants } from "./variants"
+
+import type { HeadingProps } from "./title"
+
+export default function Title({
+  as,
+  children,
+  className = "",
+  color,
+  hideEmpty = true,
+  level = "h1",
+  textTransform,
+}: HeadingProps) {
+  if (hideEmpty && !children) {
+    return null
+  }
+  const Hx = level
+  const classNames = headingVariants({
+    className,
+    color,
+    textTransform,
+    type: as ?? level,
+  })
+  return <Hx className={classNames}>{children}</Hx>
+}

components/TempDesignSystem/Title/title.module.css

@@ -0,0 +1,104 @@
+.heading {
+  margin: 0;
+  padding: 0;
+}
+
+.regular {
+  text-transform: none;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.h1 {
+  font-family: var(--typography-Title-1-fontFamily);
+  font-size: var(--typography-Title-1-Mobile-fontSize);
+  font-weight: var(--typography-Title-1-fontWeight);
+  letter-spacing: var(--typography-Title-1-letterSpacing);
+  line-height: var(--typography-Title-1-lineHeight);
+}
+
+.h2 {
+  font-family: var(--typography-Title-2-fontFamily);
+  font-size: var(--typography-Title-2-Mobile-fontSize);
+  font-weight: var(--typography-Title-2-fontWeight);
+  letter-spacing: var(--typography-Title-2-letterSpacing);
+  line-height: var(--typography-Title-2-lineHeight);
+}
+
+.h3 {
+  font-family: var(--typography-Title-3-fontFamily);
+  font-size: var(--typography-Title-3-Mobile-fontSize);
+  font-weight: var(--typography-Title-3-fontWeight);
+  letter-spacing: var(--typography-Title-3-letterSpacing);
+  line-height: var(--typography-Title-3-lineHeight);
+}
+
+.h4 {
+  font-family: var(--typography-Title-4-fontFamily);
+  font-size: var(--typography-Title-4-Mobile-fontSize);
+  font-weight: var(--typography-Title-4-fontWeight);
+  letter-spacing: var(--typography-Title-4-letterSpacing);
+  line-height: var(--typography-Title-4-lineHeight);
+}
+
+.h5 {
+  font-family: var(--typography-Title-5-fontFamily);
+  font-size: var(--typography-Title-5-Mobile-fontSize);
+  font-weight: var(--typography-Title-5-fontWeight);
+  letter-spacing: var(--typography-Title-5-letterSpacing);
+  line-height: var(--typography-Title-5-lineHeight);
+}
+
+@media screen and (min-width: 768px) {
+  .h1 {
+    font-size: var(--typography-Title-1-Tablet-estimate-fontSize);
+  }
+
+  .h2 {
+    font-size: var(--typography-Title-2-Tablet-estimate-fontSize);
+  }
+
+  .h3 {
+    font-size: var(--typography-Title-3-Tablet-estimate-fontSize);
+  }
+
+  .h4 {
+    font-size: var(--typography-Title-4-Tablet-estimate-fontSize);
+  }
+
+  .h5 {
+    font-size: var(--typography-Title-5-Tablet-estimate-fontSize);
+  }
+}
+
+@media screen and (min-width: 1367px) {
+  .h1 {
+    font-size: var(--typography-Title-1-Desktop-fontSize);
+  }
+
+  .h2 {
+    font-size: var(--typography-Title-2-Desktop-fontSize);
+  }
+
+  .h3 {
+    font-size: var(--typography-Title-3-Desktop-fontSize);
+  }
+
+  .h4 {
+    font-size: var(--typography-Title-4-Desktop-fontSize);
+  }
+
+  .h5 {
+    font-size: var(--typography-Title-5-Desktop-fontSize);
+  }
+}
+
+.burgundy {
+  color: var(--Scandic-Brand-Burgundy);
+}
+
+.pale {
+  color: var(--Scandic-Brand-Pale-Peach);
+}

components/TempDesignSystem/Title/title.ts

@@ -0,0 +1,13 @@
+import { headingVariants } from "./variants"
+
+import type { VariantProps } from "class-variance-authority"
+
+type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
+
+export interface HeadingProps
+  extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
+    VariantProps<typeof headingVariants> {
+  as?: HeadingLevel
+  hideEmpty?: boolean
+  level?: HeadingLevel
+}

components/TempDesignSystem/Title/variants.ts

@@ -0,0 +1,31 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./title.module.css"
+
+const config = {
+  variants: {
+    color: {
+      burgundy: styles.burgundy,
+      pale: styles.pale,
+    },
+    textTransform: {
+      regular: styles.regular,
+      uppercase: styles.uppercase,
+    },
+    type: {
+      h1: styles.h1,
+      h2: styles.h2,
+      h3: styles.h3,
+      h4: styles.h4,
+      h5: styles.h5,
+      h6: styles.h6,
+    },
+  },
+  defaultVariants: {
+    color: "burgundy",
+    textTransform: "uppercase",
+    type: "h1",
+  },
+} as const
+
+export const headingVariants = cva(styles.heading, config)