#306

Author: garronej

src/Input.tsx

@@ -32,7 +32,7 @@ export namespace InputProps {
         >;
         style?: CSSProperties;
         /** Default: "default" */
-        state?: "success" | "error" | "default";
+        state?: "success" | "error" | "info" | "default";
         /** The message won't be displayed if state is "default" */
         stateRelatedMessage?: ReactNode;
         addon?: ReactNode;
@@ -149,9 +149,11 @@ export const Input = memo(
                                                 return "fr-input--error";
                                             case "success":
                                                 return "fr-input--valid";
+                                            case "info":
                                             case "default":
                                                 return undefined;
                                         }
+                                        assert<Equals<typeof state, never>>();
                                     })()
                                 ),
                                 classes.nativeInputOrTextArea
@@ -191,7 +193,10 @@ export const Input = memo(
                                             return "fr-error-text";
                                         case "success":
                                             return "fr-valid-text";
+                                        case "info":
+                                            return "fr-info-text";
                                     }
+                                    assert<Equals<typeof state, never>>();
                                 })()
                             ),
                             classes.message

stories/Input.stories.tsx

@@ -30,7 +30,7 @@ const { meta, getStory } = getStoryFactory({
         },
         "state": {
             "options": (() => {
-                const options = ["default", "success", "error"] as const;
+                const options = ["default", "success", "info", "error"] as const;
 
                 assert<Equals<typeof options[number] | undefined, InputProps["state"]>>();
 
@@ -84,6 +84,12 @@ export const WithSuccessMessage = getStory({
     "stateRelatedMessage": "Texte de validation"
 });
 
+export const WithInfoMessage = getStory({
+    "label": "Label champs de saisie",
+    "state": "info",
+    "stateRelatedMessage": "Info text"
+});
+
 export const Disabled = getStory({
     "label": "Label champs de saisie",
     "disabled": true