feat(WEB-304): remaning UI from design system primitives

components/TempDesignSystem/Text/Title/index.tsx

@@ -9,6 +9,7 @@ export default function Title({
   color,
   hideEmpty = true,
   level = "h1",
+  textAlign,
   textTransform,
 }: HeadingProps) {
   if (hideEmpty && !children) {
@@ -18,6 +19,7 @@ export default function Title({
   const classNames = headingVariants({
     className,
     color,
+    textAlign,
     textTransform,
     type: as ?? level,
   })

components/TempDesignSystem/Text/Title/title.module.css

@@ -76,6 +76,14 @@
   text-transform: uppercase;
 }
 
+.center {
+  text-align: center;
+}
+
+.left {
+  text-align: left;
+}
+
 .burgundy {
   color: var(--Scandic-Brand-Burgundy);
 }

components/TempDesignSystem/Text/Title/variants.ts

@@ -8,6 +8,10 @@ const config = {
       burgundy: styles.burgundy,
       pale: styles.pale,
     },
+    textAlign: {
+      center: styles.center,
+      left: styles.left,
+    },
     textTransform: {
       regular: styles.regular,
       uppercase: styles.uppercase,
@@ -23,6 +27,7 @@ const config = {
   },
   defaultVariants: {
     color: "burgundy",
+    textAlign: "left",
     textTransform: "uppercase",
     type: "h1",
   },