chore: added helperMessage

lib/components/Input/HelperMessage.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import clsx from "clsx";
+import "./Input.scss";
+
+export interface HelperMessageProps {
+  message?: string;
+  hasError?: boolean;
+}
+
+const HelperMessage = ({ message, hasError }: HelperMessageProps) => (
+  <p
+    className={clsx("deriv-helper-message", {
+      "deriv-helper-message__error": hasError,
+    })}
+  >
+    {message}
+  </p>
+);
+
+export default HelperMessage;

lib/components/Input/Input.scss

@@ -65,6 +65,12 @@ $border: 1px solid;
       color: $error_field;
     }
   }
+
+  &--helper-message {
+    position: absolute;
+    left: 16px;
+    margin-top: 2px;
+  }
 }
 
 .deriv-input--field:disabled + .deriv-input--label {
@@ -79,3 +85,14 @@ $border: 1px solid;
 .deriv-input--field__error:focus + .deriv-input--label {
   color: $error_field;
 }
+
+.deriv-helper-message {
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 18px;
+  color: $inactive_color;
+  &__error {
+    color: $error_field;
+  }
+}

lib/components/Input/index.tsx

@@ -1,25 +1,36 @@
-import React, { ChangeEvent, ComponentProps, useState } from "react";
+import React, { ChangeEvent, ComponentProps, ReactNode, useState } from "react";
 import clsx from "clsx";
+import HelperMessage, { HelperMessageProps } from "./HelperMessage";
 import "./Input.scss";
 
 interface InputProps
-  extends Omit<ComponentProps<"input">, "style" | "placeholder"> {
+  extends Omit<ComponentProps<"input">, "style" | "placeholder">,
+    HelperMessageProps {
   label?: string;
-  helperMessage?: string;
-  error?: boolean;
+  hasError?: boolean;
+  hasRightPlaceholder?: ReactNode;
 }
 
-export const Input = ({ label, id, error, ...rest }: InputProps) => {
+export const Input = ({
+  label,
+  id,
+  hasError,
+  message,
+  hasRightPlaceholder,
+  ...rest
+}: InputProps) => {
   const [value, setValue] = useState("");
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     setValue(e.target.value);
+    rest.onChange?.(e);
   };
 
   return (
     <div className="deriv-input">
       <input
         className={clsx("deriv-input--field", {
-          "deriv-input--field__error": error,
+          "deriv-input--field__error": hasError,
+          className: rest.className,
         })}
         id={id}
         value={value}
@@ -28,12 +39,18 @@ export const Input = ({ label, id, error, ...rest }: InputProps) => {
       />
       <label
         className={clsx("deriv-input--label", {
-          "deriv-input--label__error": error,
+          "deriv-input--label__error": hasError,
         })}
         htmlFor={id}
       >
         {label}
       </label>
+      {hasRightPlaceholder && (
+        <div className="deriv-input--right-content">{hasRightPlaceholder}</div>
+      )}
+      <div className="deriv-input--helper-message">
+        {message && <HelperMessage message={message} hasError={hasError} />}
+      </div>
     </div>
   );
 };