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

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

@@ -1,4 +1,4 @@
-.body {
+.footnote {
   margin: 0;
   padding: 0;
 }
@@ -21,6 +21,14 @@
   text-decoration: var(--typography-Footnote-Regular-textDecoration);
 }
 
+.center {
+  text-align: center;
+}
+
+.left {
+  text-align: left;
+}
+
 .black {
   /* No black variable exist yet */
   color: #000;

components/TempDesignSystem/Text/Footnote/footnote.ts

@@ -3,5 +3,7 @@ import { footnoteVariants } from "./variants"
 import type { VariantProps } from "class-variance-authority"
 
 export interface FootnoteProps
-  extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
-    VariantProps<typeof footnoteVariants> {}
+  extends Omit<React.HTMLAttributes<HTMLParagraphElement>, "color">,
+    VariantProps<typeof footnoteVariants> {
+  asChild?: boolean
+}

components/TempDesignSystem/Text/Footnote/index.tsx

@@ -1,17 +1,23 @@
+import { Slot } from "@radix-ui/react-slot"
+
 import { footnoteVariants } from "./variants"
 
 import type { FootnoteProps } from "./footnote"
 
 export default function Footnote({
-  children,
+  asChild = false,
   className = "",
   color,
+  textAlign,
   textTransform,
+  ...props
 }: FootnoteProps) {
+  const Comp = asChild ? Slot : "p"
   const classNames = footnoteVariants({
     className,
     color,
+    textAlign,
     textTransform,
   })
-  return <p className={classNames}>{children}</p>
+  return <Comp className={classNames} {...props} />
 }

components/TempDesignSystem/Text/Footnote/variants.ts

@@ -9,13 +9,16 @@ const config = {
       burgundy: styles.burgundy,
       pale: styles.pale,
     },
+    textAlign: {
+      center: styles.center,
+      left: styles.left,
+    },
     textTransform: {
       bold: styles.bold,
       regular: styles.regular,
     },
   },
   defaultVariants: {
-    color: "black",
     textTransform: "regular",
   },
 } as const