@platformatic/ui-components 0.1.102 → 0.1.103

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@platformatic/ui-components",
   "description": "Platformatic UI Components",
-  "version": "0.1.102",
+  "version": "0.1.103",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {

package/src/components/LogoDropDown.jsx

@@ -5,7 +5,7 @@ import styles from './LogoDropDown.module.css'
 import PlatformaticIcon from './PlatformaticIcon'
 import { MAIN_DARK_BLUE, SMALL, WHITE } from './constants'
 import Logo from './Logo'
-function LogoDropDown ({ itemSelected, items, width, height }) {
+function LogoDropDown ({ itemSelected, items, width, height, onClickItemSelected }) {
   const [open, setOpen] = useState(false)
 
   function handleOpen () {
@@ -13,7 +13,7 @@ function LogoDropDown ({ itemSelected, items, width, height }) {
   }
 
   function getItemsSelected () {
-    return items.find(item => item.id === itemSelected)?.name
+    return items.find(item => item.id === itemSelected)?.name || '...'
   }
 
   function onClick (callback) {
@@ -27,10 +27,15 @@ function LogoDropDown ({ itemSelected, items, width, height }) {
         <div className={styles.logoContainer}>
           <Logo width={width} height={height} color={WHITE} fillColor={MAIN_DARK_BLUE} />
         </div>
-        <div className={styles.selectorContainer} style={{ left: width / 2, paddingLeft: width / 3 }} onClick={() => handleOpen()}>
-          <p className={styles.header}>{getItemsSelected()}</p>
-          {!open && <PlatformaticIcon iconName='ArrowDownIcon' color={MAIN_DARK_BLUE} onClick={null} />}
-          {open && <PlatformaticIcon iconName='ArrowUpIcon' color={MAIN_DARK_BLUE} onClick={null} />}
+        <div className={styles.selectorContainer} style={{ left: width / 2, paddingLeft: width / 3 }}>
+          <p className={styles.header} onClick={() => onClickItemSelected()}>
+            <span className={styles.itemSelected}>{getItemsSelected()}</span>
+          </p>
+          {items.length > 1 && (
+            <div>
+              {!open && <PlatformaticIcon iconName='ArrowDownIcon' color={MAIN_DARK_BLUE} onClick={() => handleOpen()} />}
+              {open && <PlatformaticIcon iconName='ArrowUpIcon' color={MAIN_DARK_BLUE} onClick={() => handleOpen()} />}
+            </div>)}
         </div>
       </div>
       {open && (
@@ -70,13 +75,18 @@ LogoDropDown.propTypes = {
     id: PropTypes.string.isRequired,
     name: PropTypes.string,
     handleClick: PropTypes.func
-  }))
+  })),
+  /**
+   * onClickItemSelected
+   */
+  onClickItemSelected: PropTypes.func
 }
 
 LogoDropDown.defaultProps = {
   width: 71,
   height: 56,
   itemSelected: '',
-  items: []
+  items: [],
+  onClickItemSelected: () => {}
 }
 export default LogoDropDown

package/src/components/LogoDropDown.module.css

@@ -11,10 +11,13 @@
   @apply relative z-10;
 }
 .selectorContainer {
-  @apply absolute top-[50%] translate-y-[-50%] flex items-center gap-x-1 bg-white p-0.5 pr-3 rounded-full mt-[0.5px] cursor-pointer;
+  @apply absolute top-[50%] translate-y-[-50%] flex items-center justify-between gap-x-1 bg-white p-0.5 pr-3 rounded-full mt-[0.5px] cursor-pointer min-w-[228px] max-w-[228px];
 }
 .header {
-  @apply flex items-center hover:cursor-pointer pr-2 font-light text-main-dark-blue ml-4 text-ellipsis overflow-hidden whitespace-nowrap min-w-[155px] max-w-[155px] w-full;
+  @apply flex items-center hover:cursor-pointer text-main-dark-blue pl-4 w-[170px];
+}
+.itemSelected {
+  @apply text-ellipsis overflow-x-hidden whitespace-nowrap;
 }
 .picture {
   @apply border border-transparent rounded-full mr-2;

package/src/stories/LogoDropDown.stories.jsx

@@ -15,15 +15,24 @@ const Template = ({ items }) => {
   }
   return (
     <div>
-      <LogoDropDown items={getItems()} itemSelected={selected} />
+      <LogoDropDown items={getItems()} itemSelected={selected} onClickItemSelected={() => alert(`id selected ${selected}`)} />
     </div>
 
   )
 }
 
-export const Default = Template.bind({})
+export const SingleItem = Template.bind({})
 
-Default.args = {
+SingleItem.args = {
+  items: [{
+    id: '1',
+    name: 'Single-item'
+  }]
+}
+
+export const MultipleItem = Template.bind({})
+
+MultipleItem.args = {
   items: [{
     id: '1',
     name: 'Organization-name-1'