added 2 views of text input component: when it in group and not in group

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(
+}: 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={classNames([
+        "w-full",
+        "text-gray-900",
+        "rounded",
+        "outline-none",
+        "placeholder-text-500",
         {   
-                className
-            })} 
+            //it this part we define how we style 
+            [`${inputNotInGroup}`] : !inGroup,
+            [`${inputInGroup}`] : inGroup,
+        },
+        className,        
+      ])}
     />
   );
-    
-}
+};

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",
-}
+    className: ["px-4", "py-2.5"]
+};