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

components/MyProfile/Card/Title/index.tsx

@@ -1,21 +0,0 @@
-import { headingVariants } from "./variants"
-
-import type { HeadingProps } from "@/types/components/myPages/myProfile/card/title"
-
-export default function Title({
-  as,
-  children,
-  className = "",
-  level = "h1",
-  uppercase = false,
-  weight,
-}: HeadingProps) {
-  const Hx = level
-  const classNames = headingVariants({
-    className,
-    text: uppercase ? "uppercase" : undefined,
-    type: as ?? level,
-    weight,
-  })
-  return <Hx className={classNames}>{children}</Hx>
-}

components/MyProfile/Card/Title/title.module.css

@@ -1,68 +0,0 @@
-.heading {
-  color: var(--some-black-color, #2e2e2e);
-  /* font-family: var(--ff-brandon-text); */
-  letter-spacing: 6%;
-  margin: 0;
-  padding: 0;
-}
-
-.uppercase {
-  text-transform: uppercase;
-}
-
-.h1 {
-  font-size: 2.5rem;
-  line-height: 3.5rem;
-}
-
-.h2 {
-  font-size: 1.3rem;
-  line-height: 1.6rem;
-}
-
-.h3 {
-  font-size: 1.8rem;
-}
-
-.h4 {
-  font-size: 1.6rem;
-}
-
-.h5 {
-  font-size: 1.3rem;
-}
-
-.h6 {
-  font-size: 1rem;
-}
-
-.light {
-  font-weight: 300;
-}
-
-.regular {
-  font-weight: 400;
-}
-
-.medium {
-  font-weight: 500;
-}
-
-.semiBold {
-  font-weight: 600;
-}
-
-.bold {
-  font-weight: 700;
-}
-
-.black {
-  font-weight: 900;
-}
-
-/* @media screen and (min-width: 1367px) {
-  .h1 {
-    font-size: 3.8rem;
-    line-height: 4.5rem;
-  }
-} */

components/MyProfile/Card/Title/variants.ts

@@ -1,33 +0,0 @@
-import { cva } from "class-variance-authority"
-
-import styles from "./title.module.css"
-
-const config = {
-  variants: {
-    text: {
-      uppercase: styles.uppercase,
-    },
-    type: {
-      h1: styles.h1,
-      h2: styles.h2,
-      h3: styles.h3,
-      h4: styles.h4,
-      h5: styles.h5,
-      h6: styles.h6,
-    },
-    weight: {
-      light: styles.light,
-      regular: styles.regular,
-      medium: styles.medium,
-      semiBold: styles.semiBold,
-      bold: styles.bold,
-      black: styles.black,
-    },
-  },
-  defaultVariants: {
-    type: "h1",
-    weight: "medium",
-  },
-} as const
-
-export const headingVariants = cva(styles.heading, config)

components/MyProfile/Card/index.tsx

@@ -1,16 +1,16 @@
 import { cva } from "class-variance-authority"
 
-import Title from "./Title"
-
 import styles from "./card.module.css"
 
 import type { CardProps } from "@/types/components/myPages/myProfile/card/card"
 
 const cardStyles = cva(styles.card)
 
-export default function Card({ className, tag = "section", ...props }: CardProps) {
+export default function Card({
+  className,
+  tag = "section",
+  ...props
+}: CardProps) {
   const Cmp = tag
   return <Cmp className={cardStyles({ className })} {...props} />
 }
-
-Card.Title = Title