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

components/TempDesignSystem/Text/BiroScript/biroScript.module.css

@@ -0,0 +1,34 @@
+.text {
+  font-family: var(--typography-Script-1-fontFamily);
+  text-transform: none;
+}
+
+.one {
+  font-size: clamp(
+    var(--typography-Script-1-Mobile-fontSize),
+    1.3vw + 14px,
+    var(--typography-Script-1-Desktop-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: clamp(
+    var(--typography-Script-2-Mobile-fontSize),
+    0.6vw + 15px,
+    var(--typography-Script-2-Desktop-fontSize)
+  );
+  font-weight: var(--typography-Script-2-fontWeight);
+  letter-spacing: var(--typography-Script-2-letterSpacing);
+  line-height: var(--typography-Script-2-lineHeight);
+}
+
+.burgundy {
+  color: var(--Scandic-Brand-Burgundy);
+}
+
+.pale {
+  color: var(--Scandic-Brand-Pale-Peach);
+}

components/TempDesignSystem/Text/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/Text/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/Text/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/Text/Body/body.module.css

@@ -0,0 +1,44 @@
+.body {
+  margin: 0;
+  padding: 0;
+}
+
+.bold {
+  font-family: var(--typography-Body-Bold-fontFamily);
+  font-size: var(--typography-Body-Bold-fontSize);
+  font-weight: var(--typography-Body-Bold-fontWeight);
+  letter-spacing: var(--typography-Body-Bold-letterSpacing);
+  line-height: var(--typography-Body-Bold-lineHeight);
+  text-decoration: var(--typography-Body-Bold-textDecoration);
+}
+
+.regular {
+  font-family: var(--typography-Body-Regular-fontFamily);
+  font-size: var(--typography-Body-Regular-fontSize);
+  font-weight: var(--typography-Body-Regular-fontWeight);
+  letter-spacing: var(--typography-Body-Regular-letterSpacing);
+  line-height: var(--typography-Body-Regular-lineHeight);
+  text-decoration: var(--typography-Body-Regular-textDecoration);
+}
+
+.underlined {
+  font-family: var(--typography-Body-Underlined-fontFamily);
+  font-size: var(--typography-Body-Underlined-fontSize);
+  font-weight: var(--typography-Body-Underlined-fontWeight);
+  letter-spacing: var(--typography-Body-Underlined-letterSpacing);
+  line-height: var(--typography-Body-Underlined-lineHeight);
+  text-decoration: var(--typography-Body-Underlined-textDecoration);
+}
+
+.black {
+  /* No black variable exist yet */
+  color: #000;
+}
+
+.burgundy {
+  color: var(--Scandic-Brand-Burgundy);
+}
+
+.pale {
+  color: var(--Scandic-Brand-Pale-Peach);
+}

components/TempDesignSystem/Text/Body/body.ts

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

components/TempDesignSystem/Text/Body/index.tsx

@@ -0,0 +1,17 @@
+import { bodyVariants } from "./variants"
+
+import type { BodyProps } from "./body"
+
+export default function Body({
+  children,
+  className = "",
+  color,
+  textTransform,
+}: BodyProps) {
+  const classNames = bodyVariants({
+    className,
+    color,
+    textTransform,
+  })
+  return <p className={classNames}>{children}</p>
+}

components/TempDesignSystem/Text/Body/variants.ts

@@ -0,0 +1,24 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./body.module.css"
+
+const config = {
+  variants: {
+    color: {
+      black: styles.black,
+      burgundy: styles.burgundy,
+      pale: styles.pale,
+    },
+    textTransform: {
+      bold: styles.bold,
+      regular: styles.regular,
+      underlined: styles.underlined,
+    },
+  },
+  defaultVariants: {
+    color: "black",
+    textTransform: "regular",
+  },
+} as const
+
+export const bodyVariants = cva(styles.body, config)

components/TempDesignSystem/Text/Caption/caption.module.css

@@ -0,0 +1,35 @@
+.body {
+  margin: 0;
+  padding: 0;
+}
+
+.bold {
+  font-family: var(--typography-Caption-Bold-fontFamily);
+  font-size: var(--typography-Caption-Bold-fontSize);
+  font-weight: var(--typography-Caption-Bold-fontWeight);
+  letter-spacing: var(--typography-Caption-Bold-letterSpacing);
+  line-height: var(--typography-Caption-Bold-lineHeight);
+  text-decoration: var(--typography-Caption-Bold-textDecoration);
+}
+
+.regular {
+  font-family: var(--typography-Caption-Regular-fontFamily);
+  font-size: var(--typography-Caption-Regular-fontSize);
+  font-weight: var(--typography-Caption-Regular-fontWeight);
+  letter-spacing: var(--typography-Caption-Regular-letterSpacing);
+  line-height: var(--typography-Caption-Regular-lineHeight);
+  text-decoration: var(--typography-Caption-Regular-textDecoration);
+}
+
+.black {
+  /* No black variable exist yet */
+  color: #000;
+}
+
+.burgundy {
+  color: var(--Scandic-Brand-Burgundy);
+}
+
+.pale {
+  color: var(--Scandic-Brand-Pale-Peach);
+}

components/TempDesignSystem/Text/Caption/caption.ts

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

components/TempDesignSystem/Text/Caption/index.tsx

@@ -0,0 +1,17 @@
+import { captionVariants } from "./variants"
+
+import type { CaptionProps } from "./caption"
+
+export default function Caption({
+  children,
+  className = "",
+  color,
+  textTransform,
+}: CaptionProps) {
+  const classNames = captionVariants({
+    className,
+    color,
+    textTransform,
+  })
+  return <p className={classNames}>{children}</p>
+}

components/TempDesignSystem/Text/Caption/variants.ts

@@ -0,0 +1,23 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./caption.module.css"
+
+const config = {
+  variants: {
+    color: {
+      black: styles.black,
+      burgundy: styles.burgundy,
+      pale: styles.pale,
+    },
+    textTransform: {
+      bold: styles.bold,
+      regular: styles.regular,
+    },
+  },
+  defaultVariants: {
+    color: "black",
+    textTransform: "regular",
+  },
+} as const
+
+export const captionVariants = cva(styles.caption, config)

components/TempDesignSystem/Text/Footnote/footnote.module.css

@@ -0,0 +1,35 @@
+.body {
+  margin: 0;
+  padding: 0;
+}
+
+.bold {
+  font-family: var(--typography-Footnote-Bold-fontFamily);
+  font-size: var(--typography-Footnote-Bold-fontSize);
+  font-weight: var(--typography-Footnote-Bold-fontWeight);
+  letter-spacing: var(--typography-Footnote-Bold-letterSpacing);
+  line-height: var(--typography-Footnote-Bold-lineHeight);
+  text-decoration: var(--typography-Footnote-Bold-textDecoration);
+}
+
+.regular {
+  font-family: var(--typography-Footnote-Regular-fontFamily);
+  font-size: var(--typography-Footnote-Regular-fontSize);
+  font-weight: var(--typography-Footnote-Regular-fontWeight);
+  letter-spacing: var(--typography-Footnote-Regular-letterSpacing);
+  line-height: var(--typography-Footnote-Regular-lineHeight);
+  text-decoration: var(--typography-Footnote-Regular-textDecoration);
+}
+
+.black {
+  /* No black variable exist yet */
+  color: #000;
+}
+
+.burgundy {
+  color: var(--Scandic-Brand-Burgundy);
+}
+
+.pale {
+  color: var(--Scandic-Brand-Pale-Peach);
+}

components/TempDesignSystem/Text/Footnote/footnote.ts

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

components/TempDesignSystem/Text/Footnote/index.tsx

@@ -0,0 +1,17 @@
+import { footnoteVariants } from "./variants"
+
+import type { FootnoteProps } from "./footnote"
+
+export default function Footnote({
+  children,
+  className = "",
+  color,
+  textTransform,
+}: FootnoteProps) {
+  const classNames = footnoteVariants({
+    className,
+    color,
+    textTransform,
+  })
+  return <p className={classNames}>{children}</p>
+}

components/TempDesignSystem/Text/Footnote/variants.ts

@@ -0,0 +1,23 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./footnote.module.css"
+
+const config = {
+  variants: {
+    color: {
+      black: styles.black,
+      burgundy: styles.burgundy,
+      pale: styles.pale,
+    },
+    textTransform: {
+      bold: styles.bold,
+      regular: styles.regular,
+    },
+  },
+  defaultVariants: {
+    color: "black",
+    textTransform: "regular",
+  },
+} as const
+
+export const footnoteVariants = cva(styles.footnote, config)

components/TempDesignSystem/Text/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/Text/Subtitle/subtitle.module.css

@@ -0,0 +1,29 @@
+.subtitle {
+  font-family: var(--typography-Subtitle-fontFamily);
+  font-size: clamp(
+    var(--typography-Subtitle-Mobile-fontSize),
+    0.3vw + 15px,
+    var(--typography-Subtitle-Desktop-fontSize)
+  );
+  font-weight: var(--typography-Subtitle-fontWeight);
+  letter-spacing: var(--typography-Subtitle-letterSpacing);
+  line-height: var(--typography-Subtitle-lineHeight);
+  margin: 0;
+  padding: 0;
+}
+
+.regular {
+  text-transform: none;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.burgundy {
+  color: var(--Scandic-Brand-Burgundy);
+}
+
+.pale {
+  color: var(--Scandic-Brand-Pale-Peach);
+}

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