feat: separate validation and info texts

italia · Dec 6, 2023 · 87a877f · 87a877f
1 parent 36a215d
commit 87a877f
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 6 deletions.
diff --git a/src/Input/Input.tsx b/src/Input/Input.tsx
@@ -44,8 +44,10 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   label?: string | ReactNode;
   /** Testo di esempio da utilizzare per il campo. */
   placeholder?: string;
-  /** Testo di aiuto per l'elemento del moduleo form. Richiede che il componente `Input` abbia la prop `id` impostata. */
+  /** Testo di validazione per l'elemento del moduleo form. */
   validationText?: string;
+  /** Testo di aiuto per l'elemento del moduleo form. Richiede che il componente `Input` abbia la prop `id` impostata. */
+  infoText?: string;
   /** Il valore nel campo Input. */
   value?: string | number;
   /** Da utilizzare per impedire la modifica del valore contenuto. */
@@ -102,6 +104,7 @@ export const Input = ({
   innerRef,
   label,
   validationText,
+  infoText,
   placeholder,
   normalized,
   value,
@@ -215,6 +218,7 @@ export const Input = ({
   const containerProps = {
     id,
     infoId,
+    infoText,
     activeClass,
     label,
     validationTextClass,

diff --git a/src/Input/InputContainer.tsx b/src/Input/InputContainer.tsx
@@ -8,12 +8,14 @@ export interface InputContainerProps extends HTMLAttributes<HTMLElement> {
   validationText: string | undefined;
   id: string | undefined;
   infoId: string | undefined;
+  infoText: string | undefined;
   testId?: string;
 }
 
 export const InputContainer: FC<InputContainerProps> = ({
   id,
-  // infoId,
+  infoId,
+  infoText,
   testId,
   activeClass,
   label,
@@ -28,10 +30,12 @@ export const InputContainer: FC<InputContainerProps> = ({
       <label htmlFor={id} className={activeClass}>
         {label}
       </label>
+      {infoText && (
+        <small id={infoId} className='form-text'>
+          {infoText}
+        </small>
+      )}
       <div className={validationTextClass}>{validationText}</div>
-      {/* <small id={infoId} className={validationTextClass}>
-        {validationText}
-      </small> */}
     </div>
   );
 };
diff --git a/src/Input/TextArea.tsx b/src/Input/TextArea.tsx
@@ -9,8 +9,10 @@ export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
   label?: string | ReactNode;
   /** Testo di esempio da utilizzare per il campo. */
   placeholder?: string;
-  /** Testo di aiuto per l'elemento del moduleo form. Richiede che il componente `TextArea` abbia la prop `id` impostata. */
+  /** Testo di validazione per l'elemento del moduleo */
   validationText?: string;
+  /** Testo di aiuto per l'elemento del moduleo form. Richiede che il componente `TextArea` abbia la prop `id` impostata. */
+  infoText?: string;
   /** Il valore nel campo TextArea. */
   value?: string | number;
   /** Da utilizzare per impedire la modifica del valore contenuto. */
@@ -38,6 +40,7 @@ export const TextArea = ({
   innerRef,
   label,
   validationText,
+  infoText,
   placeholder,
   normalized,
   value,
@@ -93,6 +96,7 @@ export const TextArea = ({
   const containerProps = {
     id,
     infoId,
+    infoText,
     activeClass,
     label,
     validationTextClass,

diff --git a/stories/Form/FormValidation.stories.tsx b/stories/Form/FormValidation.stories.tsx
@@ -12,6 +12,7 @@ export const ValidazioneBase = () => (
     <Input label='Invalid Input' invalid />
     <Input value='Mario' label='First name' validationText='Validated!' valid />
     <Input label='Username' validationText='Please choose a username.' invalid />
+    <Input label='Username' infoText='Username of your account' validationText='Please choose a username.' invalid />
   </div>
 );