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

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)