@platformatic/ui-components 0.1.100 → 0.1.101

package/package.json

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

package/src/components/forms/InputWithSeparator.jsx

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types'
 import inputStyles from './Input.module.css'
 import styles from './InputWithSeparator.module.css'
 import commonStyles from '../Common.module.css'
-import PlatformaticIcon from '../PlatformaticIcon'
 import { BACKGROUND_COLOR_OPAQUE, MAIN_DARK_BLUE, MAIN_GREEN, MEDIUM, TRANSPARENT } from '../constants'
 import BorderedBox from '../BorderedBox'
 import ButtonFullRounded from '../ButtonFullRounded'
@@ -55,7 +54,6 @@ function InputWithSeparator ({ placeholder, name, borderColor, errorMessage, onC
         <div className={styles.chunkContent}>
           <span className={styles.chunkText}>{chunk}</span>
           <ButtonFullRounded
-            className=''
             iconName='CircleCloseIcon'
             iconSize={MEDIUM}
             iconColor={MAIN_DARK_BLUE}
@@ -70,11 +68,25 @@ function InputWithSeparator ({ placeholder, name, borderColor, errorMessage, onC
   }
   return (
     <div className={inputStyles.container}>
-      <div className={className}>
-        {chunks.map((value, index) => renderChunk(value, index))}
-        <input type='text' name={name} value={value} placeholder={placeholder} className={inputClassName} onChange={handleChange} disabled={disabled} />
+      <div className={styles.container}>
+        <div className={className}>
+          {chunks.map((value, index) => renderChunk(value, index))}
+          <input type='text' name={name} value={value} placeholder={placeholder} className={inputClassName} onChange={handleChange} disabled={disabled} />
+        </div>
+        {afterIcon &&
+          (
+            <ButtonFullRounded
+              className={styles.smallPadding}
+              iconName={afterIcon.iconName}
+              iconColor={afterIcon.color}
+              data-testid='after-icon'
+              onClick={afterIcon.handleClick}
+              iconSize={MEDIUM}
+              hoverEffect={BACKGROUND_COLOR_OPAQUE}
+              disabled={afterIcon.disabled}
+            />
+          )}
       </div>
-      {afterIcon && <div className={styles.iconContainer}><PlatformaticIcon iconName={afterIcon.iconName} color={afterIcon.color} data-testid='after-icon' onClick={afterIcon.handleClick} /></div>}
       {showError && <span className={commonStyles['error-message']}>{errorMessage}</span>}
     </div>
   )
@@ -115,7 +127,8 @@ InputWithSeparator.propTypes = {
   afterIcon: PropTypes.shape({
     iconName: PropTypes.string,
     color: PropTypes.string,
-    handleClick: PropTypes.func
+    handleClick: PropTypes.func,
+    disabled: PropTypes.bool
   })
 }
 

package/src/components/forms/InputWithSeparator.module.css

@@ -5,7 +5,7 @@
   @apply text-sm text-main-dark-blue;
 }
 .inputContainer {
-  @apply flex min-h-[46px] border border-solid box-border rounded-md items-center gap-[0.1rem] flex-wrap relative;
+  @apply flex min-h-[46px] border border-solid box-border rounded-md items-center gap-[0.1rem] flex-wrap relative grow;
 }
 .smallPadding {
   @apply p-1 !important
@@ -21,4 +21,7 @@
 }
 .iconContainer {
   @apply absolute top-[14px] right-[0.5rem]
-}
+}
+.container {
+  @apply flex w-full items-center;
+}

package/src/stories/forms/InputWithSeparator.stories.jsx

@@ -25,6 +25,8 @@ export default {
 const TemplateDefault = (args) => {
   const [value, setValue] = useState('')
   const [chunks, setChunks] = useState('')
+  const [errorMessage, setErrorMessage] = useState('')
+  // errorMessage: 'error message displayed just for to be see',
 
   function handleChange ({ value, chunks }) {
     setValue(value)
@@ -35,7 +37,8 @@ const TemplateDefault = (args) => {
     <>
       <p>Chunks: {chunks.toString()} </p>
       <p>Value inserted: {value} </p>
-      <InputWithSeparator {...args} value={value} onChange={handleChange} />
+      <label>Add Error message: <input type='checkbox' onChange={() => setErrorMessage(errorMessage === '' ? 'custom message' : '')} /></label>
+      <InputWithSeparator {...args} value={value} onChange={handleChange} errorMessage={errorMessage} />
     </>
   )
 }