feat(WEB-249): first iteration design system primitives (typography, grid)

components/TempDesignSystem/Text/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/Text/Title/title.module.css

@@ -0,0 +1,85 @@
+.heading {
+  margin: 0;
+  padding: 0;
+}
+
+.h1 {
+  font-family: var(--typography-Title-1-fontFamily);
+  font-size: clamp(
+    var(--typography-Title-1-Mobile-fontSize),
+    2.6vw + 27px,
+    var(--typography-Title-1-Desktop-fontSize)
+  );
+  font-weight: var(--typography-Title-1-fontWeight);
+  letter-spacing: var(--typography-Title-1-letterSpacing);
+  line-height: var(--typography-Title-1-lineHeight);
+  text-decoration: var(--typography-Title-1-textDecoration);
+}
+
+.h2 {
+  font-family: var(--typography-Title-2-fontFamily);
+  font-size: clamp(
+    var(--typography-Title-2-Mobile-fontSize),
+    2vw + 20px,
+    var(--typography-Title-2-Desktop-fontSize)
+  );
+  font-weight: var(--typography-Title-2-fontWeight);
+  letter-spacing: var(--typography-Title-2-letterSpacing);
+  line-height: var(--typography-Title-2-lineHeight);
+  text-decoration: var(--typography-Title-2-textDecoration);
+}
+
+.h3 {
+  font-family: var(--typography-Title-3-fontFamily);
+  font-size: clamp(
+    var(--typography-Title-3-Mobile-fontSize),
+    0.6vw + 27px,
+    var(--typography-Title-3-Desktop-fontSize)
+  );
+  font-weight: var(--typography-Title-3-fontWeight);
+  letter-spacing: var(--typography-Title-3-letterSpacing);
+  line-height: var(--typography-Title-3-lineHeight);
+  text-decoration: var(--typography-Title-3-textDecoration);
+}
+
+.h4 {
+  font-family: var(--typography-Title-4-fontFamily);
+  font-size: clamp(
+    var(--typography-Title-4-Mobile-fontSize),
+    0.6vw + 19px,
+    var(--typography-Title-4-Desktop-fontSize)
+  );
+  font-weight: var(--typography-Title-4-fontWeight);
+  letter-spacing: var(--typography-Title-4-letterSpacing);
+  line-height: var(--typography-Title-4-lineHeight);
+  text-decoration: var(--typography-Title-4-textDecoration);
+}
+
+.h5 {
+  font-family: var(--typography-Title-5-fontFamily);
+  font-size: clamp(
+    var(--typography-Title-5-Mobile-fontSize),
+    0.3vw + 17px,
+    var(--typography-Title-5-Desktop-fontSize)
+  );
+  font-weight: var(--typography-Title-5-fontWeight);
+  letter-spacing: var(--typography-Title-5-letterSpacing);
+  line-height: var(--typography-Title-5-lineHeight);
+  text-decoration: var(--typography-Title-5-textDecoration);
+}
+
+.regular {
+  text-transform: none;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.burgundy {
+  color: var(--Scandic-Brand-Burgundy);
+}
+
+.pale {
+  color: var(--Scandic-Brand-Pale-Peach);
+}

components/TempDesignSystem/Text/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/Text/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)