From a0e3728fafceb91cf8c4f2cb7faa6a98b9e88863 Mon Sep 17 00:00:00 2001
From: Aizad Ridzo <103104395+aizad-deriv@users.noreply.github.com>
Date: Wed, 18 Oct 2023 18:03:43 +0800
Subject: [PATCH] WALL-2169: Base Components - Input (#10743)

* chore: added Wallet TextField component

* fix: added hover affects, helper message and character counter

* fix: resolve comments

* fix: resolve comments

* fix: remove ...rest

* fix: resolve comments

* fix: updated colors
---
 .../Base/WalletText/WalletText.module.css     |  4 +
 .../WalletTextField.modules.css               | 82 +++++++++++++++++++
 .../Base/WalletTextField/WalletTextField.tsx  | 81 ++++++++++++++++++
 .../components/Base/WalletTextField/index.ts  |  1 +
 packages/wallets/src/components/Base/index.ts |  1 +
 5 files changed, 169 insertions(+)
 create mode 100644 packages/wallets/src/components/Base/WalletTextField/WalletTextField.modules.css
 create mode 100644 packages/wallets/src/components/Base/WalletTextField/WalletTextField.tsx
 create mode 100644 packages/wallets/src/components/Base/WalletTextField/index.ts

diff --git a/packages/wallets/src/components/Base/WalletText/WalletText.module.css b/packages/wallets/src/components/Base/WalletText/WalletText.module.css
index c858231dc287..4a9cafe6f91f 100644
--- a/packages/wallets/src/components/Base/WalletText/WalletText.module.css
+++ b/packages/wallets/src/components/Base/WalletText/WalletText.module.css
@@ -135,6 +135,10 @@
         color: #000000;
     }
 
+    &-color-less-prominent {
+        color: #999999;
+    }
+
     &-color-red {
         color: #ff444f;
     }
diff --git a/packages/wallets/src/components/Base/WalletTextField/WalletTextField.modules.css b/packages/wallets/src/components/Base/WalletTextField/WalletTextField.modules.css
new file mode 100644
index 000000000000..be09ddccc567
--- /dev/null
+++ b/packages/wallets/src/components/Base/WalletTextField/WalletTextField.modules.css
@@ -0,0 +1,82 @@
+.wallets-textfield {
+    min-width: 12rem;
+    max-width: 28rem;
+    position: relative;
+
+    &__content {
+        height: 4rem;
+        width: 100%;
+        border-radius: 0.4rem;
+        padding: 1rem 1.6rem;
+        border: 1px solid var(--system-light-5-active-background, #d6dadb);
+        background: var(--system-light-8-primary-background, #fff);
+        display: inline-flex;
+        gap: 1.6rem;
+        align-items: center;
+        transition: border-color 0.2s;
+
+        &:hover {
+            border-color: var(--system-light-3-less-prominent-text, #999);
+        }
+    }
+
+    &__content:has(&__field:focus) {
+        border: 1px solid var(--brand-blue, #85acb0);
+    }
+
+    &__icon {
+        margin: auto;
+        width: 1.6rem;
+        height: 1.6rem;
+    }
+
+    &__message-container {
+        height: 2rem;
+        padding: 0.2rem 0rem 0rem 1.6rem;
+        width: 100%;
+    }
+
+    &__field {
+        font-family: inherit;
+        outline: 0;
+        font-size: 1.4rem;
+        color: var(--system-light-2-general-text, #333);
+        transition: border-color 0.2s;
+        flex: 1;
+    }
+
+    &__field::placeholder {
+        color: transparent;
+    }
+
+    &__field:placeholder-shown ~ &__label {
+        font-size: 1.4rem;
+        cursor: text;
+        top: 20%;
+        padding: 0;
+    }
+
+    &__field:placeholder-shown ~ &__label--with-icon {
+        left: 4.4rem;
+    }
+
+    label,
+    &__field:focus ~ &__label {
+        position: absolute;
+        top: -10%;
+        display: block;
+        transition: 0.2s;
+        font-size: 1rem;
+        color: var(--system-light-3-less-prominent-text, #999);
+        background: var(--system-light-8-primary-background, #fff);
+        padding-inline: 0.4rem;
+        left: 1.6rem;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+    }
+
+    &__field:focus ~ &__label {
+        color: var(--brand-blue, #85acb0);
+    }
+}
diff --git a/packages/wallets/src/components/Base/WalletTextField/WalletTextField.tsx b/packages/wallets/src/components/Base/WalletTextField/WalletTextField.tsx
new file mode 100644
index 000000000000..90880995bd22
--- /dev/null
+++ b/packages/wallets/src/components/Base/WalletTextField/WalletTextField.tsx
@@ -0,0 +1,81 @@
+import React, { ChangeEvent, ComponentProps, ReactElement, useState } from 'react';
+import WalletText from '../WalletText/WalletText';
+import styles from './WalletTextField.modules.css';
+
+interface WalletTextFieldProps {
+    defaultValue?: string;
+    helperMessage?: string;
+    icon?: ReactElement;
+    id?: ComponentProps<'input'>['id'];
+    label?: string;
+    leftIcon?: React.ReactNode;
+    maxLength?: ComponentProps<'input'>['maxLength'];
+    onChange?: ComponentProps<'input'>['onChange'];
+    showMessage?: boolean;
+}
+
+type MessageContainerProps = {
+    helperMessage?: WalletTextFieldProps['helperMessage'];
+    maxLength?: WalletTextFieldProps['maxLength'];
+};
+
+const WalletTextField: React.FC<WalletTextFieldProps> = ({
+    defaultValue = '',
+    helperMessage,
+    icon,
+    id = 'wallet-textfield',
+    label,
+    maxLength,
+    onChange,
+    showMessage = false,
+}) => {
+    const [value, setValue] = useState(defaultValue);
+
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+        const newValue = e.target.value;
+        setValue(newValue);
+        onChange?.(e);
+    };
+
+    const MessageContainer: React.FC<MessageContainerProps> = ({ helperMessage, maxLength }) => (
+        <>
+            {helperMessage && (
+                <WalletText color='less-prominent' lineHeight='sm' size='xs' style={{ float: 'left' }}>
+                    {helperMessage}
+                </WalletText>
+            )}
+            {maxLength && (
+                <WalletText align='right' color='less-prominent' lineHeight='sm' size='xs' style={{ float: 'right' }}>
+                    {value.length} / {maxLength}
+                </WalletText>
+            )}
+        </>
+    );
+
+    return (
+        <div className={styles['wallets-textfield']}>
+            <div className={styles['wallets-textfield__content']}>
+                <input
+                    className={styles['wallets-textfield__field']}
+                    id={id}
+                    maxLength={maxLength}
+                    onChange={handleChange}
+                    placeholder={label}
+                    type='text'
+                    value={value}
+                />
+                {label && (
+                    <label className={styles['wallets-textfield__label']} htmlFor={id}>
+                        {label}
+                    </label>
+                )}
+                {icon && <div className={styles['wallets-textfield__icon']}>{icon}</div>}
+            </div>
+            <div className={styles['wallets-textfield__message-container']}>
+                {showMessage && <MessageContainer helperMessage={helperMessage} maxLength={maxLength} />}
+            </div>
+        </div>
+    );
+};
+
+export default WalletTextField;
diff --git a/packages/wallets/src/components/Base/WalletTextField/index.ts b/packages/wallets/src/components/Base/WalletTextField/index.ts
new file mode 100644
index 000000000000..822c726f6cf1
--- /dev/null
+++ b/packages/wallets/src/components/Base/WalletTextField/index.ts
@@ -0,0 +1 @@
+export { default as WalletTextField } from './WalletTextField';
diff --git a/packages/wallets/src/components/Base/index.ts b/packages/wallets/src/components/Base/index.ts
index 0e18cd84006d..c3fd6b28bf3d 100644
--- a/packages/wallets/src/components/Base/index.ts
+++ b/packages/wallets/src/components/Base/index.ts
@@ -6,3 +6,4 @@ export * from './Tabs';
 export * from './WalletButton';
 export * from './WalletClipboard';
 export * from './WalletText';
+export * from './WalletTextField';