Adds disabled status to SearchBarV2

Signed-off-by: Leonardo Rossi <[email protected]>

Author: leorossi

src/components/SearchBarV2.jsx

@@ -14,12 +14,13 @@ function SearchBarV2 ({
   dataAttrName = '',
   dataAttrValue = '',
   inputTextClassName = '',
-  paddingClass = ''
+  paddingClass = '',
+  disabled = false
 }) {
   const inputRef = useRef()
   const baseClassName = `${styles.container} ${paddingClass || styles.defaultPaddingClass} ` + commonStyles[`background-color-${backgroundColor}`]
   const [wrapperClassName, setWrapperClassName] = useState(normalClassName())
-  const inputClassName = `${styles.input} ${inputTextClassName} `
+  const inputClassName = `${styles.input} ${inputTextClassName} ${disabled ? styles.disabled : ''} `
   const [isOnFocus, setIsOnFocus] = useState(false)
   const [showClear, setShowClear] = useState(false)
   const dataProps = {}
@@ -70,7 +71,16 @@ function SearchBarV2 ({
   return (
     <div className={wrapperClassName} {...dataProps}>
       <PlatformaticIcon iconName='LensIcon' color={color} disabled={!isOnFocus} size={SMALL} onClick={handleSearch} />
-      <input type='text' placeholder={placeholder} className={inputClassName} ref={inputRef} onChange={handleChange} onFocus={onFocus} onBlur={onBlur} />
+      <input
+        type='text'
+        placeholder={placeholder}
+        className={inputClassName}
+        ref={inputRef}
+        onChange={handleChange}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        disabled={disabled}
+      />
       {showClear && (
         <div className={styles.clearContainer}>
           <PlatformaticIcon iconName='CircleCloseIcon' color={color} size={SMALL} onClick={handleClear} />

src/components/SearchBarV2.module.css

@@ -28,3 +28,6 @@
   @apply px-2 py-1.5 md:px-3 md:py-[8.5px];
 }
 
+.disabled::placeholder {
+  @apply text-white/30;
+}

src/stories/SearchBarV2.stories.jsx

@@ -11,7 +11,6 @@ const Template = (args) => {
   )
 }
 export const Standard = Template.bind({})
-
 Standard.args = {
   onChange: (value) => {
     console.log('Current search: ' + value)
@@ -20,3 +19,9 @@ Standard.args = {
     alert('Query value: ' + value)
   }
 }
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  disabled: true,
+  placeholder: 'Disabled'
+}