feat: add support for no border and bg in search bar

Author: eshankvaish

src/Common/SearchBar/SearchBar.component.tsx

@@ -47,6 +47,7 @@ const SearchBar = ({
     containerClassName,
     shouldDebounce = false,
     debounceTimeout = 300,
+    noBackgroundAndBorder = false,
 }: SearchBarProps) => {
     const [showClearButton, setShowClearButton] = useState(!!initialSearchText)
     const inputRef = useRef<HTMLInputElement>()
@@ -97,17 +98,19 @@ const SearchBar = ({
 
     return (
         <div className={containerClassName}>
-            <div className="search-bar bc-n50 focus-within-border-b5 dc__hover-border-n300 dc__block w-100 min-w-200 dc__position-rel en-2 bw-1 br-4 h-32">
+            <div
+                className={`search-bar ${noBackgroundAndBorder ? 'dc__no-border dc__no-background dc__hover-n50' : 'bc-n50 en-2 dc__hover-border-n300'} focus-within-border-b5 dc__block w-100 min-w-200 dc__position-rel br-4 bw-1 h-32`}
+            >
                 <Search className="search-bar__icon dc__position-abs icon-color-n6 icon-dim-16" />
                 <input
                     placeholder="Search"
                     data-testid="search-bar"
                     type="text"
                     {...inputProps}
                     defaultValue={initialSearchText}
-                    className={`search-bar__input bc-n50 dc__position-abs w-100 h-100 br-4 dc__no-border pt-6 pr-10 pb-6 pl-30 fs-13 lh-20 fw-4 cn-9 placeholder-cn5 ${
+                    className={`search-bar__input  dc__position-abs w-100 h-100 br-4 dc__no-border pt-6 pr-10 pb-6 pl-30 fs-13 lh-20 fw-4 cn-9 placeholder-cn5 ${
                         showClearButton ? 'pr-30' : 'pr-10'
-                    }`}
+                    } ${noBackgroundAndBorder ? 'dc__no-background' : 'bc-n50'}`}
                     onChange={handleChange}
                     onKeyDown={handleKeyDown}
                     ref={inputRef}

src/Common/SearchBar/types.ts

@@ -31,4 +31,8 @@ export interface SearchBarProps {
      * Timeout for the debounce handler to be triggered
      */
     debounceTimeout?: number
+    /**
+     * Hide the background and border of the search
+     */
+    noBackgroundAndBorder?: boolean
 }