Merge pull request #82 from scheduleonce/hurricanes/story/ONCEHUB-109013-main

Feat: Implemented the placeholder to the select dropdown

Author: so-kaushal

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@oncehub/ui-react",
   "private": false,
-  "version": "2.1.3",
+  "version": "2.1.4",
   "repository": {
     "type": "git",
     "url": "https://github.com/scheduleonce/once-ui-react"

package.json

@@ -12,6 +12,9 @@
       }
       .selectValue {
         @apply tw-flex tw-items-center;
+        &.placeholder {
+          @apply tw-text-[#666666];
+        }
         .seletIcon {
           @apply tw-mr-2 tw-h-5 tw-w-5 tw-flex-shrink-0;
         }

src/lib/components/select/select.module.scss

@@ -12,14 +12,15 @@ interface Props {
   selected: IOption | null;
   onSelect: (obj: IOption) => void;
   themeColor?: string;
+  placeholder?: string;
 }
 
 interface IDropdownPosition {
   left: number;
   top: number;
 }
 
-export const Select: FC<Props> = ({ children, selected, onSelect, themeColor }) => {
+export const Select: FC<Props> = ({ children, selected, onSelect, themeColor, placeholder }) => {
   const [isMounted, setIsMounted] = useState(false);
   const [open, setOpen] = useState(false);
   const [isFocused, setIsFocused] = useState(false);
@@ -138,11 +139,13 @@ export const Select: FC<Props> = ({ children, selected, onSelect, themeColor })
                   borderBottomColor: themeColor && (isFocused || headlessOpen) ? borderColor : '',
                 }}
               >
-                {selected && (
+                {selected ? (
                   <span className={styles.selectValue}>
                     {selected.avatar && <img src={selected.avatar} alt="" className={styles.seletIcon} />}
                     <span className={styles.selectText}>{selected.label}</span>
                   </span>
+                ) : (
+                  placeholder && <span className={`${styles.selectValue} ${styles.placeholder}`}>{placeholder}</span>
                 )}
                 <span className={styles.chevronDownIconSpan}>
                   <ChevronDownIcon