From 11b0228571db1e1d8f447fd61f0a51e618396f7d Mon Sep 17 00:00:00 2001
From: aizad-deriv <aizad@deriv.com>
Date: Thu, 1 Feb 2024 18:22:20 +0800
Subject: [PATCH 1/3] chore: adding storybook to input component

---
 src/stories/Input.stories.tsx | 179 ++++++++++++++++++++++++++++++++++
 1 file changed, 179 insertions(+)
 create mode 100644 src/stories/Input.stories.tsx

diff --git a/src/stories/Input.stories.tsx b/src/stories/Input.stories.tsx
new file mode 100644
index 00000000..2ea94737
--- /dev/null
+++ b/src/stories/Input.stories.tsx
@@ -0,0 +1,179 @@
+import { StoryObj, Meta } from "@storybook/react";
+import { Input } from "../../lib/main";
+import { useState } from "react";
+
+const meta = {
+  title: "Components/Input",
+  component: Input,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  args: {
+    label: "Enter Password",
+    value: "",
+    variant: "general",
+    message: "This is a helper message",
+    error: false,
+    disabled: false,
+  },
+  argTypes: {
+    leftPlaceholder: {
+      control: {
+        disable: true,
+      },
+    },
+    rightPlaceholder: {
+      control: {
+        disable: true,
+      },
+    },
+    value: {
+      control: {
+        disable: true,
+      },
+    },
+    variant: {
+      options: ["general", "success", "warning", "error"],
+      control: {
+        type: "select",
+      },
+    },
+    message: {
+      control: {
+        type: "text",
+      },
+    },
+    error: {
+      control: {
+        type: "boolean",
+      },
+    },
+  },
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: "Default Input",
+  args: {
+    label: "Enter name",
+    value: "",
+    message: "This is a helper message",
+  },
+  render: (args) => {
+    const [value, setValue] = useState("");
+
+    return (
+      <Input
+        {...args}
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    );
+  },
+};
+
+export const Disabled: Story = {
+  name: "Disabled Input",
+  args: {
+    label: "Enter name",
+    value: "",
+    message: "This is a helper message",
+    disabled: true,
+  },
+  render: (args) => {
+    const [value, setValue] = useState("");
+
+    return (
+      <Input
+        {...args}
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    );
+  },
+};
+
+export const Success: Story = {
+  name: "Success Input",
+  args: {
+    label: "Enter name",
+    value: "",
+    message: "This is a helper message",
+    variant: "success",
+  },
+  render: (args) => {
+    const [value, setValue] = useState("");
+
+    return (
+      <Input
+        {...args}
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    );
+  },
+};
+
+export const Error: Story = {
+  name: "Error Input",
+  args: {
+    label: "Enter name",
+    value: "",
+    message: "This is a helper message",
+    variant: "error",
+  },
+  render: (args) => {
+    const [value, setValue] = useState("");
+
+    return (
+      <Input
+        {...args}
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    );
+  },
+};
+
+export const Warning: Story = {
+  name: "Error Input",
+  args: {
+    label: "Enter name",
+    value: "",
+    message: "This is a helper message",
+    variant: "warning",
+  },
+  render: (args) => {
+    const [value, setValue] = useState("");
+
+    return (
+      <Input
+        {...args}
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    );
+  },
+};
+
+export const RightPlaceholder: Story = {
+  name: "Input with Right Placeholder",
+  args: {
+    label: "Enter name",
+    value: "",
+    message: "This is a helper message",
+    rightPlaceholder: "USD",
+  },
+  render: (args) => {
+    const [value, setValue] = useState("");
+
+    return (
+      <Input
+        {...args}
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    );
+  },
+};

From dd8f65eb1a145a74030db72df10e7a822492786c Mon Sep 17 00:00:00 2001
From: aizad-deriv <aizad@deriv.com>
Date: Thu, 1 Feb 2024 18:40:19 +0800
Subject: [PATCH 2/3] fix: stylings for helper message and input variants

---
 lib/components/Input/HelperMessage.scss | 1 +
 lib/components/Input/Input.scss         | 6 ++++++
 2 files changed, 7 insertions(+)

diff --git a/lib/components/Input/HelperMessage.scss b/lib/components/Input/HelperMessage.scss
index 1833fbfd..4f16a36c 100644
--- a/lib/components/Input/HelperMessage.scss
+++ b/lib/components/Input/HelperMessage.scss
@@ -8,6 +8,7 @@ $error_field: #ec3f3f;
   font-style: normal;
   font-weight: 400;
   line-height: 18px;
+  color: $inactive_color;
   &--general {
     color: $inactive_color;
   }
diff --git a/lib/components/Input/Input.scss b/lib/components/Input/Input.scss
index 403261d6..e6c5d433 100644
--- a/lib/components/Input/Input.scss
+++ b/lib/components/Input/Input.scss
@@ -97,6 +97,12 @@ $border: 1px solid;
   }
 }
 
+.deriv-input--general .deriv-input__field:disabled + .deriv-input__label,
+.deriv-input--error .deriv-input__field:disabled + .deriv-input__label,
+.deriv-input--success .deriv-input__field:disabled + .deriv-input__label {
+  color: $disabled_color;
+}
+
 .deriv-input--general .deriv-input__field:focus + .deriv-input__label {
   color: $active_color;
 }

From fd763aa85acf958a9ae76e699d791398eda016bf Mon Sep 17 00:00:00 2001
From: aizad-deriv <aizad@deriv.com>
Date: Fri, 2 Feb 2024 11:25:45 +0800
Subject: [PATCH 3/3] fix: added style type back inside of input component

---
 lib/components/Input/index.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/lib/components/Input/index.tsx b/lib/components/Input/index.tsx
index 8bd188fd..6fafdff4 100644
--- a/lib/components/Input/index.tsx
+++ b/lib/components/Input/index.tsx
@@ -9,8 +9,7 @@ export type InputVariants =
   | "error"
   | "warning"
   | "disabled";
-interface InputProps
-  extends Omit<ComponentProps<"input">, "style" | "placeholder"> {
+interface InputProps extends Omit<ComponentProps<"input">, "placeholder"> {
   label?: string;
   leftPlaceholder?: ReactNode;
   rightPlaceholder?: ReactNode;