feat(WEB-162): final design edit profile page

components/TempDesignSystem/Form/Label/index.tsx

@@ -0,0 +1,20 @@
+import { labelVariants } from "./variants"
+
+import type { LabelProps } from "./label"
+
+export default function Label({
+  children,
+  className,
+  required,
+  size,
+}: LabelProps) {
+  const classNames = labelVariants({
+    className,
+    size,
+  })
+  return (
+    <span className={classNames}>
+      {children} {required ? "*" : ""}
+    </span>
+  )
+}

components/TempDesignSystem/Form/Label/label.module.css

@@ -0,0 +1,30 @@
+.label {
+  color: var(--UI-Grey-60);
+  font-family: "fira sans";
+  font-weight: 400;
+  letter-spacing: 0.03px;
+  line-height: 120%;
+  text-align: left;
+}
+
+span.small {
+  display: block;
+  font-size: 12px;
+}
+
+span.regular {
+  font-size: 16px;
+  order: 1;
+  transition: font-size 200ms ease 100ms;
+}
+
+input:focus ~ .label,
+input:not(:placeholder-shown) ~ .label {
+  display: block;
+  font-size: 12px;
+}
+
+input:placeholder-shown ~ .label {
+  align-self: center;
+  grid-row: 1/-1;
+}

components/TempDesignSystem/Form/Label/label.ts

@@ -0,0 +1,9 @@
+import { labelVariants } from "./variants"
+
+import type { VariantProps } from "class-variance-authority"
+
+export interface LabelProps
+  extends React.PropsWithChildren<React.HTMLAttributes<HTMLSpanElement>>,
+    VariantProps<typeof labelVariants> {
+  required?: boolean
+}

components/TempDesignSystem/Form/Label/variants.ts

@@ -0,0 +1,15 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./label.module.css"
+
+export const labelVariants = cva(styles.label, {
+  variants: {
+    size: {
+      small: styles.small,
+      regular: styles.regular,
+    },
+  },
+  defaultVariants: {
+    size: "regular",
+  },
+})