refactor: disabled label animation and added props

Author: yaswanth-deriv

src/components/Input/Input.scss

@@ -81,6 +81,19 @@ $input-placement: 16px;
             }
         }
     }
+    &__fieldDisabled{
+        width: 100%;
+        outline: none;
+        &::placeholder {
+            visibility: hidden;
+        }
+        &:focus,
+        &:not(:placeholder-shown) {
+            & ~ label {
+                visibility: hidden;
+            }
+        }
+    }
 
     &__label {
         display: inline-block;

src/components/Input/__test__/Input.test.tsx

@@ -107,4 +107,10 @@ describe("Input", () => {
         expect(input).not.toHaveClass("deriv-input--error");
         expect(inputLabel).toHaveClass("deriv-input__label--disabled");
     });
+
+    it("should show disable label animation", () => {
+        const {container}=render(<Input islabelAnimationDisabled {...props} />);
+        const input = container.querySelector(".deriv-input__fieldDisabled");
+        expect(input).toBeInTheDocument();
+    });
 });

src/components/Input/index.tsx

@@ -11,6 +11,7 @@ export type InputVariants =
     | "disabled";
 interface InputProps extends Omit<ComponentProps<"input">, "placeholder"> {
     label?: string;
+    islabelAnimationDisabled?: boolean;
     leftPlaceholder?: ReactNode;
     rightPlaceholder?: ReactNode;
     error?: boolean;
@@ -48,6 +49,7 @@ const LabelVariant: Record<InputVariants, string> = {
  * @interface InputProps
  * @extends {Omit<ComponentProps<"input">, "placeholder">}
  * @property {string} [label] - The label for the input field.
+ * @property {boolean} [islabelAnimationDisabled] - The label for the input field.
  * @property {ReactNode} [leftPlaceholder] - The placeholder for the left side of the input field.
  * @property {ReactNode} [rightPlaceholder] - The placeholder for the right side of the input field.
  * @property {boolean} [error] - If true, the input field will display an error state.
@@ -86,6 +88,7 @@ export const Input = forwardRef(
             hideMessage,
             id,
             isFullWidth = false,
+            islabelAnimationDisabled=false,
             label,
             leftPlaceholder,
             message,
@@ -123,7 +126,7 @@ export const Input = forwardRef(
                     )}
                     <input
                         placeholder={label}
-                        className="deriv-input__field"
+                        className={clsx(islabelAnimationDisabled? "deriv-input__fieldDisabled" : "deriv-input__field" )}
                         id={id}
                         disabled={disabled}
                         ref={ref}
@@ -147,16 +150,16 @@ export const Input = forwardRef(
                         </div>
                     )}
                 </div>
-                <div className="deriv-input__helper-message">
                     {!hideMessage && message && (
+                         <div className="deriv-input__helper-message">
                         <HelperMessage
                             message={message}
                             variant={variant}
                             error={error}
                             disabled={disabled}
                         />
+                        </div>
                     )}
-                </div>
             </div>
         );
     },

stories/Input.stories.tsx

@@ -9,6 +9,7 @@ const meta = {
     tags: ["autodocs"],
     args: {
         isFullWidth: false,
+        islabelAnimationDisabled:false,
         label: "Enter Password",
         value: "",
         variant: "general",
@@ -196,3 +197,26 @@ export const RightPlaceholder: Story = {
         );
     },
 };
+
+export const LabelAnimationDisabled: Story = {
+    name: "Label Animation Disabled Input",
+    args: {
+        label: "Enter name",
+        value: "",
+        message: "This is a helper message",
+    },
+    render: (args) => {
+        const [value, setValue] = useState("");
+
+        return (
+            <div className="theme--light">
+                <Input
+                    {...args}
+                    islabelAnimationDisabled
+                    value={value}
+                    onChange={(e) => setValue(e.target.value)}
+                />
+            </div>
+        );
+    },
+};