fix(#273): create label variants

LetsGetTechnical · Jul 10, 2024 · 4d33119 · 4d33119
1 parent a1efcba
commit 4d33119
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 11 deletions.
diff --git a/app/register/Register.tsx b/app/register/Register.tsx
@@ -11,6 +11,7 @@ import { registerAccount } from '@/api/apiFunctions';
 import logo from '/public/assets/logo-colored-outline.svg';
 import { useAuthContext } from '@/context/AuthContextProvider';
 import LinkCustom from '@/components/LinkCustom/LinkCustom';
+import { Label } from '@/components/Label/Label';
 import { z } from 'zod';
 import { Control, useForm, useWatch, SubmitHandler } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -154,12 +155,17 @@ const Register = (): JSX.Element => {
                   render={({ field }) => (
                     <FormItem>
                       <FormControl>
-                        <Input
-                          data-testid="email"
-                          type="email"
-                          placeholder="Email"
-                          {...field}
-                        />
+                        <Label htmlFor="email" data-testid="email-label">
+                          Email
+                          <Input
+                            id="email"
+                            data-testid="email"
+                            type="email"
+                            placeholder="Email"
+                            {...field}
+                          />
+                        </Label>
+
                       </FormControl>
                       {form.formState.errors.email && (
                         <FormMessage>

diff --git a/components/Label/Label.tsx b/components/Label/Label.tsx
@@ -8,21 +8,51 @@ import * as LabelPrimitive from '@radix-ui/react-label';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '../../utils/utils';
 
+// const labelVariants = cva(
+//   'text-base font-normal leading-none text-zinc-50 cursor-pointer flex gap-2 items-center rounded-xl border-2 border-zinc-800 peer-aria-checked:border-orange-600 py-4 px-3 w-full peer-hover:bg-zinc-800 transition',
+// );
+
+// const Label = React.forwardRef<
+//   React.ElementRef<typeof LabelPrimitive.Root>,
+//   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+//     VariantProps<typeof labelVariants>
+// >(({ className, ...props }, ref) => (
+//   <LabelPrimitive.Root
+//     ref={ref}
+//     className={cn(labelVariants(), className)}
+//     {...props}
+//   />
+// ));
+// Label.displayName = LabelPrimitive.Root.displayName;
+
+// export { Label };
+
 const labelVariants = cva(
-  'text-base font-normal leading-none text-zinc-50 cursor-pointer flex gap-2 items-center rounded-xl border-2 border-zinc-800 peer-aria-checked:border-orange-600 py-4 px-3 w-full peer-hover:bg-zinc-800 transition',
+  'text-base font-normal leading-none gap-2 w-full transition',
+  {
+    variants: {
+      variant: {
+        weeklyPickButtonLabel: 'text-zinc-50 cursor-pointer rounded-xl items-center py-4 px-3 border-2 border-zinc-800 peer-aria-checked:border-orange-600 peer-hover:bg-zinc-800 flex',
+        inputLabel: 'text-zinc-900 cursor-text flex-col'
+      }
+    },
+    defaultVariants: {
+      variant: 'inputLabel'
+    }
+  }
 );
 
 const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(({ className, variant, ...props }, ref) => (
   <LabelPrimitive.Root
     ref={ref}
-    className={cn(labelVariants(), className)}
+    className={cn(labelVariants({ variant }), className)}
     {...props}
   />
 ));
 Label.displayName = LabelPrimitive.Root.displayName;
 
 export { Label };
+