From f89be00751342a06f260df6380bb635ccdace47c Mon Sep 17 00:00:00 2001
From: Maximus <ten.maksim97@gmail.com>
Date: Mon, 8 Aug 2022 16:27:54 +0300
Subject: [PATCH] added 2 views of text input component: when it in group and
 not in group

---
 src/components/TextInput.tsx      | 75 +++++++++++++++++++------------
 src/stories/TextInput.stories.tsx |  4 +-
 2 files changed, 50 insertions(+), 29 deletions(-)

diff --git a/src/components/TextInput.tsx b/src/components/TextInput.tsx
index db08bca..45dbe29 100644
--- a/src/components/TextInput.tsx
+++ b/src/components/TextInput.tsx
@@ -1,37 +1,56 @@
 import classNames from "classnames";
-import { omit } from "lodash";
+import { initial, isEmpty, omit } from "lodash";
 import React from "react";
 import "../index.css";
 
 type Props = {
-    placeholder?: string | undefined,
-    className?: string | undefined,
-} & Omit<React.InputHTMLAttributes<HTMLInputElement> ,"">;
+    inGroup?: boolean,
+    placeholder?: string | undefined;
+    className?: string | undefined;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "">;
+
+const inputNotInGroup = [
+    `border
+    border-2
+    border-solid
+    border-gray-200
+    hover:border-gray-500
+    active:border-gray-500
+    focus:border-gray-500`
+]
+
+const inputInGroup = [
+    `border-none
+    hover:none
+    active:none
+    focus:none
+    `
+]
 
 export const TextInput = ({
-    placeholder = undefined,
+    inGroup = false, // We should use this flag to choose how we will style our text input component
+    placeholder,
     className,
     ...props
-} :Props) => {
-    return(
-        <input 
-            type="text" 
-            placeholder={placeholder} 
-            className={classNames(
-                'w-100',
-                'border',
-                'border-2',
-                'border-solid',
-                'border-gray-200',
-                'text-gray-900',
-                'rounded',
-                'outline-none',
-                'hover:border-gray-300',
-                'focus:border-gray-500',                
-                {
-                className
-            })} 
-        />
-    );
-    
-}
+}: Props) => {
+
+  return (
+    <input
+      type="text"
+      placeholder={placeholder}
+      className={classNames([
+        "w-full",
+        "text-gray-900",
+        "rounded",
+        "outline-none",
+        "placeholder-text-500",
+        {   
+            //it this part we define how we style 
+            [`${inputNotInGroup}`] : !inGroup,
+            [`${inputInGroup}`] : inGroup,
+        },
+        className,        
+      ])}
+    />
+  );
+};
diff --git a/src/stories/TextInput.stories.tsx b/src/stories/TextInput.stories.tsx
index 449a39a..177c8b2 100644
--- a/src/stories/TextInput.stories.tsx
+++ b/src/stories/TextInput.stories.tsx
@@ -12,5 +12,7 @@ const Template: ComponentStory<typeof TextInput> = (args) => <TextInput {...args
 export const TextInputStory = Template.bind({});
 
 TextInputStory.args ={
+    inGroup: true,
     placeholder: "Search",
-}
\ No newline at end of file
+    className: ["px-4", "py-2.5"]
+};