Merge pull request #815 from fahad-aot/featute/fwf-5214-search-input

feature/fwf-5214:Added search input component

Author: arun-s-aot

forms-flow-components/src/components/CustomComponents/Search.tsx

@@ -1,69 +1,34 @@
-import React, { FC } from 'react';
-import { InputGroup, FormControl } from 'react-bootstrap';
-import { ClearIcon } from "../SvgIcons/index";
+import React, { FC } from "react";
 import { useTranslation } from "react-i18next";
 
-
 interface CustomSearchProps {
-    searchLoading?: boolean;
-    handleClearSearch: () => void;
-    search: string;
-    setSearch: (value: string) => void;
-    handleSearch: () => void;
-    placeholder?: string;
-    title?: string;
-    dataTestId: string;
+  search: string;
+  setSearch: (value: string) => void;
+  handleSearch: () => void;
+  placeholder?: string;
+  dataTestId: string;
 }
 
 export const CustomSearch: FC<CustomSearchProps> = ({
-    searchLoading,
-    handleClearSearch,
-    search,
-    setSearch,
-    handleSearch,
-    placeholder = "Search...",
-    title = "Search",
-    dataTestId
+  search,
+  setSearch,
+  handleSearch,
+  placeholder = "Search",
+  dataTestId,
 }) => {
-    const { t } = useTranslation();
-    const inputClassNames = ` ${searchLoading ? 'is-searching' : search ? 'has-value' : ''
-        }`;
-
-    return (
-        // <InputGroup className="d-flex align-items-center p-0 search-box input-group">
-        <div className="input-search">
-            {/* <div className="form-control-with-icon w-25"> */}
-                <input
-                    className={inputClassNames}
-                    value={search}
-                    onChange={(e) => setSearch(e.target.value)}
-                    onKeyDown={(e) => (e.key === 'Enter' && handleSearch())}
-                    placeholder={t(placeholder)}
-                    title={t(title)}
-                    data-testid={dataTestId}
-                    aria-label={placeholder}
-                />
-                {search && (
-                    // <span className={`d-flex search-box-icon ${searchLoading ? 'loading' : ''}`} >
-                    <>
-                        {!searchLoading ? (
-                            <button className="icon" onClick={handleClearSearch}>
-                                <ClearIcon
-                                    // width={16}
-                                    // height={16}
-                                    // onClick={handleClearSearch}
-                                    data-testid="form-search-clear-button"
-                                />
-                            </button>
-                        ) : (
-                            <div className="search-spinner" data-testid="search-spinner"></div>
-                        )}
-
-                    </>
-                )}
-            {/* </div> */}
-        </div>
-        // </InputGroup>
-    );
+  const { t } = useTranslation();
+  return (
+    <div className="search-input-container">
+      <input
+        className="search-input"
+        onChange={(e) => setSearch(e.target.value)}
+        onKeyDown={(e) => e.key === "Enter" && handleSearch()}
+        placeholder={t(placeholder)}
+        data-testid={dataTestId}
+        aria-label={placeholder}
+        value={search}
+        role="searchbox"
+      />
+    </div>
+  );
 };
-

forms-flow-theme/scss/index.scss

@@ -40,5 +40,6 @@
 @import "./external/toastify.scss";
 @import "~bootstrap/scss/bootstrap";
 
-//v8 Custom component style override
+@import "./v8-scss/search";
 @import "./v8-scss/button";
+

forms-flow-theme/scss/v8-scss/_search.scss

@@ -0,0 +1,40 @@
+.search-input-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    max-width: 20rem;
+  
+    &.search-disabled {
+      opacity: 0.6;
+      pointer-events: none;
+    }
+  
+    .search-input {
+      width: 100%;
+      height: 2.5rem;
+      border-radius: 5px;
+      padding: 11px 13px;
+      border: 1px solid #ededed;
+      background: #fcfcfc;
+      font-weight: 400;
+      font-size: 15px;
+      line-height: 1;
+      letter-spacing: 0;
+      outline: none;
+      transition: border-color 0.2s, box-shadow 0.2s;
+  
+      &::placeholder {
+        color: #ededed;
+      }
+      &:focus {
+        color: #4a4a4a;
+        border-color: #ededed;
+        background: #fcfcfc;
+        &::placeholder {
+          color: #b7b7b8;
+        }
+      }
+    }
+  }
+