From 8c7f7d8bd38ecbbde8bb028a1cedffd462d49e09 Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Thu, 9 Nov 2023 18:47:06 +0300
Subject: [PATCH] packages/ui: add checkbox label disabled

---
 apps/web/app/ius/[slug]/page.tsx |  7 ++++++-
 packages/ui/checkbox.tsx         | 26 +++++++++++++++++++++++---
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/apps/web/app/ius/[slug]/page.tsx b/apps/web/app/ius/[slug]/page.tsx
index 33294ee..b655bca 100644
--- a/apps/web/app/ius/[slug]/page.tsx
+++ b/apps/web/app/ius/[slug]/page.tsx
@@ -23,12 +23,17 @@ export default async function Page(props: Props) {
             const Element = mapFieldTypeElement[fieldType];
 
             return (
-              <ElementContainer key={name} id={name} title={metaData[name].label}>
+              <ElementContainer
+                key={name}
+                id={name}
+                title={fieldType === 'CHECKBOX' ? '' : metaData[name].label}
+              >
                 <Element
                   id={name}
                   required={metaData[name].required}
                   defaultValue={data[name]}
                   disabled={metaData[name].disabled}
+                  title={metaData[name].label}
                 />
               </ElementContainer>
             );
diff --git a/packages/ui/checkbox.tsx b/packages/ui/checkbox.tsx
index 96601f7..f43c90d 100644
--- a/packages/ui/checkbox.tsx
+++ b/packages/ui/checkbox.tsx
@@ -3,6 +3,28 @@ import type { VariantProps } from 'class-variance-authority';
 import { cva } from 'class-variance-authority';
 import { forwardRef } from 'react';
 
+const labelVariants = cva('ml-2 text-sm font-medium text-gray-900', {
+  defaultVariants: {
+    intent: 'default',
+  },
+  variants: {
+    intent: {
+      default: '',
+      disabled: 'cursor-not-allowed',
+    },
+  },
+});
+
+type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement> & VariantProps<typeof labelVariants>;
+
+const Label = forwardRef<HTMLLabelElement, LabelProps>(
+  ({ className, intent, title, ...props }, ref) => (
+    <label className={cn(labelVariants({ className, intent }))} ref={ref} {...props}>
+      {title}
+    </label>
+  )
+);
+
 const variants = cva(
   'w-4 h-4 focus:ring-transparent rounded-sm hover:border-primary-500 disabled:hover:border-gray-300 border-gray-300 text-sm text-primary outline-none transition-all ease-linear hover:transition-all focus:transition-all disabled:cursor-not-allowed disabled:text-opacity-30'
 );
@@ -15,9 +37,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
     <div className="flex items-center">
       <input ref={ref} type="checkbox" className={cn(variants({ className }))} {...props} />
       {title && (
-        <label htmlFor={props.id} className="ml-2 text-sm font-normal text-gray-900">
-          {title}
-        </label>
+        <Label intent={props.disabled ? 'disabled' : 'default'} htmlFor={props.id} title={title} />
       )}
     </div>
   )