From d3336aa575787e1dccfc4c3bef70a6c074bb62a3 Mon Sep 17 00:00:00 2001
From: zuramai <saugi.dev@gmail.com>
Date: Sun, 12 Nov 2023 10:37:36 +0700
Subject: [PATCH] feat(components): add input label and description

---
 packages/forms/src/input/index.tsx       |  8 +++++---
 packages/forms/stories/Input.stories.tsx | 19 ++++++++++++++++++-
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/packages/forms/src/input/index.tsx b/packages/forms/src/input/index.tsx
index 042220c..f1a7564 100644
--- a/packages/forms/src/input/index.tsx
+++ b/packages/forms/src/input/index.tsx
@@ -9,7 +9,7 @@ export interface InputProps {
   label?: string
   placeholder?: string
   disabled?: boolean,
-  description?: string
+  description?: string | ReactNode
   leftSection?: string | ReactNode
   rightSection?: string | ReactNode
 }
@@ -39,9 +39,11 @@ const Input: React.FC<InputProps> = ({
                         `
   return (
     <div className="input-group mb-3">
-      <label htmlFor={id}>{label}</label>
+      <div className='bootwind-label mb-2'>
+        <label className='text-neutral-600 leading-tight font-medium' htmlFor={id}>{label}</label>
+      </div>
       <input type={type} placeholder={placeholder} name={name} className={inputClasses} disabled={disabled}/>
-      <span>{description}</span>
+      <span className='text-zinc-500 flex gap-2 items-center text-sm mt-2'>{description}</span>
     </div>
   );
 };
diff --git a/packages/forms/stories/Input.stories.tsx b/packages/forms/stories/Input.stories.tsx
index 8e9cb0a..f4757fd 100644
--- a/packages/forms/stories/Input.stories.tsx
+++ b/packages/forms/stories/Input.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Meta } from '@storybook/react';
 import Toggle, { ToggleProps } from '../src/toggle';
 
-import { FaMoon, FaSun } from 'react-icons/fa6';
+import { HiOutlineQuestionMarkCircle } from 'react-icons/hi2';
 import Text from '../../typography/src/text';
 import Input from '../src/input';
 
@@ -21,6 +21,23 @@ export const BasicInput = (args: ToggleProps) => (
         <Input placeholder='Disabled input' disabled></Input>
     </>
 )
+export const LabelAndHelperText = (args: ToggleProps) => (
+    <>
+    <div className="mb-10">
+        <Text type='headline' size={6}>Input with Label</Text>
+        <Input placeholder='ari@bootwind.com' label='Email'></Input>
+    </div>
+    <div className="mb-10">
+        <Text type='headline' size={6}>Input with Description</Text>
+        <Input placeholder='ari@bootwind.com' label='Email' description={
+          <>
+          <HiOutlineQuestionMarkCircle className='w-4 h-4'/>
+          Helping text for user
+          </>
+        }></Input>
+    </div>
+    </>
+)
 export const InputGroup = (args: ToggleProps) => (
     <>
     </>