Merged text-input-icon into text-input component

Author: alexgetty

src/atoms/forms/text-input-icon.scss

@@ -0,0 +1,26 @@
+@import "../../assets/scss/6-components/_component-base";
+
+.c-text-input {
+    display: flex;
+    align-items: center;
+
+    input {
+        width: 100%;
+        position: relative;
+        z-index: 1;
+    }
+
+    .c-icon {
+        position: relative;
+        width: 48px;
+        margin-right: -48px;
+        z-index: 2;
+    }
+
+    &.-icon {
+        input {
+            padding-left: 48px;
+        }
+    }
+    
+}

src/atoms/forms/text-input-icon.stories.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { text, boolean, number } from "@storybook/addon-knobs";
+import { text, boolean, number, select } from "@storybook/addon-knobs";
+import { Icons } from "../constants/icons";
 import { TextInput } from "./text-input";
 import Faker from "faker";
 
@@ -11,6 +12,7 @@ export default {
 export const textInputKnobs = () => (
     <TextInput
         disabled={boolean("Disabled", false)}
+        icon={select("Icon", Icons, undefined)}
         id={Faker.random.uuid()}
         maxLength={number("Max Length", 30)}
         onChange={() => {}}

src/atoms/forms/text-input-icon.test.tsx

@@ -1,12 +1,18 @@
 import { InputTypes } from "../constants/input-types";
 import { InputProperties } from "../interfaces/input-properties";
+import { Icons } from "../constants/icons";
+import { IconSizes } from "../constants/icon-sizes";
+import { Icon } from "../icons/icon";
 import React from "react";
+import "./text-input.scss";
 
 // -----------------------------------------------------------------------------------------
 // #region Interfaces
 // -----------------------------------------------------------------------------------------
 
 export interface TextInputProps extends InputProperties {
+    icon?: Icons;
+    iconSize?: IconSizes;
     id: string;
     maxLength?: number;
     name?: string;
@@ -24,9 +30,13 @@ export interface TextInputProps extends InputProperties {
 // -----------------------------------------------------------------------------------------
 
 const TextInput: React.FC<TextInputProps> = (props: TextInputProps) => {
+    let classNames: string[] = ["c-text-input"];
+
     const {
         ariaLabelledBy,
         disabled,
+        icon,
+        iconSize,
         id,
         name,
         onChange,
@@ -37,19 +47,29 @@ const TextInput: React.FC<TextInputProps> = (props: TextInputProps) => {
 
     const maxLength = props.maxLength != null ? props.maxLength : 20;
 
+    if (icon) {
+        classNames.push("-icon");
+    }
+
     return (
-        <input
-            aria-labelledby={ariaLabelledBy}
-            data-testid={testId}
-            disabled={disabled}
-            id={id}
-            placeholder={placeholder}
-            maxLength={maxLength}
-            name={name}
-            onChange={onChange}
-            type={InputTypes.Text}
-            value={value}
-        />
+        <div className={classNames.join(" ")}>
+            {// if
+                icon &&
+                <Icon type={icon} size={iconSize ?? IconSizes.Large} />
+            }
+            <input
+                aria-labelledby={ariaLabelledBy}
+                data-testid={testId}
+                disabled={disabled}
+                id={id}
+                placeholder={placeholder}
+                maxLength={maxLength}
+                name={name}
+                onChange={onChange}
+                type={InputTypes.Text}
+                value={value}
+            />
+        </div>
     );
 };
 

src/atoms/forms/text-input-icon.tsx

@@ -14,7 +14,6 @@ export { PasswordInput } from "./atoms/forms/password-input";
 export { SubmitButton } from "./atoms/forms/submit-button";
 export { TextArea } from "./atoms/forms/text-area";
 export { TextInput } from "./atoms/forms/text-input";
-export { TextInputIcon } from "./atoms/forms/text-input-icon";
 
 // Typography
 export { Heading } from "./atoms/typography/heading";