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,

components/TempDesignSystem/Text/Body/body.module.css

@@ -30,6 +30,14 @@
   text-decoration: var(--typography-Body-Underlined-textDecoration);
 }
 
+.textAlignCenter {
+  text-align: center;
+}
+
+.textAlignLeft {
+  text-align: left;
+}
+
 .black {
   /* No black variable exist yet */
   color: #000;

components/TempDesignSystem/Text/Body/body.ts

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

components/TempDesignSystem/Text/Body/index.tsx

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

components/TempDesignSystem/Text/Body/variants.ts

@@ -9,6 +9,10 @@ const config = {
       burgundy: styles.burgundy,
       pale: styles.pale,
     },
+    textAlign: {
+      center: styles.textAlignCenter,
+      left: styles.textAlignLeft,
+    },
     textTransform: {
       bold: styles.bold,
       regular: styles.regular,
@@ -17,6 +21,7 @@ const config = {
   },
   defaultVariants: {
     color: "black",
+    textAlign: "left",
     textTransform: "regular",
   },
 } as const

components/TempDesignSystem/Text/Caption/caption.ts

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

components/TempDesignSystem/Text/Caption/index.tsx

@@ -1,17 +1,21 @@
+import { Slot } from "@radix-ui/react-slot"
+
 import { captionVariants } from "./variants"
 
 import type { CaptionProps } from "./caption"
 
 export default function Caption({
-  children,
+  asChild = false,
   className = "",
   color,
   textTransform,
+  ...props
 }: CaptionProps) {
+  const Comp = asChild ? Slot : "p"
   const classNames = captionVariants({
     className,
     color,
     textTransform,
   })
-  return <p className={classNames}>{children}</p>
+  return <Comp className={classNames} {...props} />
 }

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

components/TempDesignSystem/Text/Subtitle/index.tsx

@@ -1,21 +1,27 @@
+import { Slot } from "@radix-ui/react-slot"
+
 import { subtitleVariants } from "./variants"
 
 import type { SubtitleProps } from "./subtitle"
 
 export default function Subtitle({
-  children,
+  asChild = false,
   className = "",
   color,
   hideEmpty = true,
+  textAlign,
   textTransform,
+  ...props
 }: SubtitleProps) {
-  if (hideEmpty && !children) {
+  if (hideEmpty && !props.children) {
     return null
   }
+  const Comp = asChild ? Slot : "p"
   const classNames = subtitleVariants({
     className,
     color,
+    textAlign,
     textTransform,
   })
-  return <p className={classNames}>{children}</p>
+  return <Comp className={classNames} {...props} />
 }

components/TempDesignSystem/Text/Subtitle/subtitle.module.css

@@ -8,8 +8,8 @@
   font-weight: var(--typography-Subtitle-fontWeight);
   letter-spacing: var(--typography-Subtitle-letterSpacing);
   line-height: var(--typography-Subtitle-lineHeight);
-  margin: 0;
-  padding: 0;
+  margin: var(--Spacing-x0);
+  padding: var(--Spacing-x0);
 }
 
 .regular {
@@ -20,6 +20,14 @@
   text-transform: uppercase;
 }
 
+.center {
+  text-align: center;
+}
+
+.left {
+  text-align: left;
+}
+
 .burgundy {
   color: var(--Scandic-Brand-Burgundy);
 }

components/TempDesignSystem/Text/Subtitle/subtitle.ts

@@ -5,5 +5,6 @@ import type { VariantProps } from "class-variance-authority"
 export interface SubtitleProps
   extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
     VariantProps<typeof subtitleVariants> {
+  asChild?: boolean
   hideEmpty?: boolean
 }

components/TempDesignSystem/Text/Subtitle/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,
@@ -15,6 +19,7 @@ const config = {
   },
   defaultVariants: {
     color: "burgundy",
+    textAlign: "left",
     textTransform: "regular",
   },
 } as const

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",
   },