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

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

@@ -1,4 +1,5 @@
 .text {
+  display: block;
   font-family: var(--typography-Script-1-fontFamily);
   text-transform: none;
 }
@@ -25,6 +26,14 @@
   line-height: var(--typography-Script-2-lineHeight);
 }
 
+.center {
+  text-align: center;
+}
+
+.left {
+  text-align: left;
+}
+
 .burgundy {
   color: var(--Scandic-Brand-Burgundy);
 }
@@ -32,3 +41,7 @@
 .pale {
   color: var(--Scandic-Brand-Pale-Peach);
 }
+
+.plosa {
+  color: var(--Theme-Primary-Light-On-Surface-Accent);
+}

components/TempDesignSystem/Text/BiroScript/biroScript.ts

@@ -4,4 +4,6 @@ import type { VariantProps } from "class-variance-authority"
 
 export interface BiroScriptProps
   extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color">,
-    VariantProps<typeof biroScriptVariants> {}
+    VariantProps<typeof biroScriptVariants> {
+  asChild?: boolean
+}

components/TempDesignSystem/Text/BiroScript/index.tsx

@@ -1,17 +1,23 @@
+import { Slot } from "@radix-ui/react-slot"
+
 import { biroScriptVariants } from "./variants"
 
 import type { BiroScriptProps } from "./biroScript"
 
 export default function BiroScript({
-  children,
+  asChild = false,
   className,
   color,
+  textAlign,
   type,
+  ...props
 }: BiroScriptProps) {
+  const Comp = asChild ? Slot : "span"
   const classNames = biroScriptVariants({
     className,
     color,
+    textAlign,
     type,
   })
-  return <span className={classNames}>{children}</span>
+  return <Comp className={classNames} {...props} />
 }

components/TempDesignSystem/Text/BiroScript/variants.ts

@@ -7,6 +7,11 @@ const config = {
     color: {
       burgundy: styles.burgundy,
       pale: styles.pale,
+      primaryLightOnSurfaceAccent: styles.plosa,
+    },
+    textAlign: {
+      center: styles.center,
+      left: styles.left,
     },
     type: {
       one: styles.one,