@platformatic/ui-components 0.3.3 → 0.3.4

package/package.json

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

package/src/components/forms/Input.jsx

@@ -12,6 +12,7 @@ function Input ({
   name,
   borderColor,
   errorMessage,
+  errorMessageTextClassName,
   onChange,
   disabled,
   beforeIcon,
@@ -27,7 +28,7 @@ function Input ({
   let baseInputClassName = `${commonStyles.fullWidth} ${styles.input} ${inputTextClassName} `
   baseInputClassName += verticalPaddingClassName || ` ${styles.inputDefaultVerticalPadding} `
   baseInputClassName += ' ' + commonStyles[`text--${borderColor}`] + ' ' + commonStyles[`background-color-${backgroundColor}`]
-
+  const errorMessageClassName = errorMessageTextClassName || commonStyles['error-message']
   const showError = errorMessage.length > 0
   if (disabled) baseInputClassName += ' ' + commonStyles['apply-opacity-30']
   if (beforeIcon) baseInputClassName += ' ' + styles.beforeIconPadding
@@ -80,7 +81,7 @@ function Input ({
         {placeholderApart && <p className={styles.placeholderAPart}>{placeholder}</p>}
         {afterIcon && <div className={styles.afterInputIcon}><PlatformaticIcon iconName={afterIcon.iconName} color={afterIcon.color} data-testid='after-icon' onClick={null} /></div>}
       </div>
-      {showError && <span className={commonStyles['error-message']}>{errorMessage}</span>}
+      {showError && <span className={errorMessageClassName}>{errorMessage}</span>}
     </div>
   )
 }
@@ -157,7 +158,15 @@ Input.propTypes = {
   /**
    * readOnly
   */
-  readOnly: PropTypes.bool
+  readOnly: PropTypes.bool,
+  /**
+   * errorMessage
+  */
+  errorMessage: PropTypes.string,
+  /**
+   * errorMessageTextClassName
+  */
+  errorMessageTextClassName: PropTypes.string
 }
 
 Input.defaultProps = {
@@ -167,6 +176,7 @@ Input.defaultProps = {
   borderColor: MAIN_GREEN,
   backgroundColor: WHITE,
   errorMessage: '',
+  errorMessageTextClassName: '',
   onChange: () => {},
   disabled: false,
   beforeIcon: null,

package/src/components/forms/InputWithSeparator.jsx

@@ -14,6 +14,7 @@ function InputWithSeparator ({
   borderColor,
   backgroundColor,
   errorMessage,
+  errorMessageTextClassName,
   onChange,
   disabled,
   afterIcon,
@@ -27,6 +28,7 @@ function InputWithSeparator ({
   const [focus, setFocus] = useState(false)
   const baseClassName = `${styles.input} ${styles.flexNone} ${styles.smallMargin} ${inputTextClassName} ` + commonStyles[`background-color-${backgroundColor}`]
   const buttonClassName = commonStyles[`background-color-${borderColor}`] + ' ' + commonStyles['background-color-opaque-30']
+  const errorMessageClassName = errorMessageTextClassName || commonStyles['error-message']
   const [chunks, setChunks] = useState([])
   const [inputClassName, setInputClassName] = useState(normalClassName())
   const [inputContainerClassName, setInputContainerClassName] = useState(unFocusedClassName())
@@ -164,7 +166,7 @@ function InputWithSeparator ({
             />
           )}
       </div>
-      {showError && <span className={commonStyles['error-message']}>{errorMessage}</span>}
+      {showError && <span className={errorMessageClassName}>{errorMessage}</span>}
     </div>
   )
 }
@@ -222,7 +224,15 @@ InputWithSeparator.propTypes = {
     color: PropTypes.string,
     handleClick: PropTypes.func,
     disabled: PropTypes.bool
-  })
+  }),
+  /**
+   * errorMessage
+  */
+  errorMessage: PropTypes.string,
+  /**
+   * errorMessageTextClassName
+  */
+  errorMessageTextClassName: PropTypes.string
 }
 
 InputWithSeparator.defaultProps = {
@@ -234,6 +244,7 @@ InputWithSeparator.defaultProps = {
   borderColor: MAIN_GREEN,
   backgroundColor: WHITE,
   errorMessage: '',
+  errorMessageTextClassName: '',
   onChange: () => {},
   disabled: false,
   afterIcon: null,

package/src/components/forms/Password.jsx

@@ -6,10 +6,11 @@ import commonStyles from '../Common.module.css'
 import PlatformaticIcon from '../PlatformaticIcon'
 import { MAIN_DARK_BLUE, MAIN_GREEN } from '../constants'
 
-function Input ({ placeholder, value, name, borderColor, errorMessage, onChange, disabled }) {
+function Input ({ placeholder, value, name, borderColor, errorMessage, errorMessageTextClassName, onChange, disabled }) {
   const [type, setType] = useState('password')
   let passwordClassName = `${commonStyles.fullWidth} ${styles.password} `
   passwordClassName += commonStyles[`bordered--${borderColor}`] + ' ' + commonStyles[`text--${borderColor}`] + ' ' + styles.afterIconPadding
+  const errorMessageClassName = errorMessageTextClassName || commonStyles['error-message']
   const showError = errorMessage.length > 0
   if (showError) passwordClassName += ' ' + commonStyles['bordered--error-red']
   if (disabled) passwordClassName += ' ' + commonStyles['apply-opacity-30']
@@ -24,7 +25,7 @@ function Input ({ placeholder, value, name, borderColor, errorMessage, onChange,
             : <PlatformaticIcon iconName='EyeClosedIcon' color={MAIN_DARK_BLUE} data-testid='after-eye-closed-icon' onClick={() => setType('password')} />}
         </div>
       </div>
-      {showError && <span className={commonStyles['error-message']}>{errorMessage}</span>}
+      {showError && <span className={errorMessageClassName}>{errorMessage}</span>}
     </div>
   )
 }
@@ -61,7 +62,15 @@ Input.propTypes = {
   /**
    * placeholderApart
    */
-  placeholderApart: PropTypes.bool
+  placeholderApart: PropTypes.bool,
+  /**
+   * errorMessage
+  */
+  errorMessage: PropTypes.string,
+  /**
+   * errorMessageTextClassName
+  */
+  errorMessageTextClassName: PropTypes.string
 }
 
 Input.defaultProps = {
@@ -70,6 +79,7 @@ Input.defaultProps = {
   name: '',
   borderColor: MAIN_DARK_BLUE,
   errorMessage: '',
+  errorMessageTextClassName: '',
   onChange: () => {},
   disabled: false,
   focused: false,

package/src/components/forms/RadioGroup.jsx

@@ -5,8 +5,10 @@ import styles from './RadioGroup.module.css'
 import commonStyles from '../Common.module.css'
 import { MAIN_DARK_BLUE, MAIN_GREEN } from '../constants'
 
-function RadioGroup ({ name, radios, errorMessage, onChange, disabled, value }) {
+function RadioGroup ({ name, radios, errorMessage, errorMessageTextClassName, onChange, disabled, value }) {
   let radioContainerClass = styles.radioContainer
+  const errorMessageClassName = errorMessageTextClassName || commonStyles['error-message']
+
   const showError = errorMessage.length > 0
   if (disabled) radioContainerClass += ' ' + commonStyles['apply-opacity-30']
 
@@ -20,7 +22,7 @@ function RadioGroup ({ name, radios, errorMessage, onChange, disabled, value })
           </div>
         ))}
       </div>
-      {showError && <span className={commonStyles['error-message']}>{errorMessage}</span>}
+      {showError && <span className={errorMessageClassName}>{errorMessage}</span>}
     </div>
   )
 }
@@ -41,6 +43,10 @@ RadioGroup.propTypes = {
    * errorMessage
    */
   errorMessage: PropTypes.string,
+  /**
+   * errorMessageTextClassName
+  */
+  errorMessageTextClassName: PropTypes.string,
   /**
    * onChange
    */
@@ -63,6 +69,7 @@ RadioGroup.defaultProps = {
   name: '',
   radios: [],
   errorMessage: '',
+  errorMessageTextClassName: '',
   onChange: () => {},
   disabled: false,
   color: MAIN_DARK_BLUE,

package/src/components/forms/Select.jsx

@@ -17,6 +17,7 @@ function Select ({
   borderColor,
   borderListColor,
   errorMessage,
+  errorMessageTextClassName,
   onSelect,
   disabled,
   mainColor,
@@ -30,7 +31,7 @@ function Select ({
   // eslint-disable-next-line  no-unused-vars
   const [isSelected, setIsSelected] = useState(false)
   const [isOnFocus, setIsOnFocus] = useState(false)
-
+  const errorMessageClassName = errorMessageTextClassName || commonStyles['error-message']
   const showError = errorMessage.length > 0
   const containerClassName = `${styles.container} ${defaultContainerClassName} `
   let inputClassName = `${commonStyles.fullWidth} ${styles.select} ${inputTextClassName}`
@@ -165,7 +166,7 @@ function Select ({
         </div>
       </div>
       {showOptions && !showError && renderOptions()}
-      {showError && <span className={commonStyles['error-message']}>{errorMessage}</span>}
+      {showError && <span className={errorMessageClassName}>{errorMessage}</span>}
     </div>
   )
 }
@@ -250,7 +251,15 @@ Select.propTypes = {
   /**
    * inputTextClassName
   */
-  inputTextClassName: PropTypes.string
+  inputTextClassName: PropTypes.string,
+  /**
+   * errorMessage
+   */
+  errorMessage: PropTypes.string,
+  /**
+   * errorMessageTextClassName
+  */
+  errorMessageTextClassName: PropTypes.string
 }
 
 Select.defaultProps = {
@@ -265,6 +274,7 @@ Select.defaultProps = {
   borderColor: MAIN_GREEN,
   borderListColor: '',
   errorMessage: '',
+  errorMessageTextClassName: '',
   onSelect: () => {},
   disabled: false,
   mainColor: MAIN_DARK_BLUE,

package/src/components/forms/SelectWithInput.jsx

@@ -17,6 +17,7 @@ function SelectWithInput ({
   borderColor,
   borderListColor,
   errorMessage,
+  errorMessageTextClassName,
   onChange,
   onSelect,
   onClear,
@@ -32,7 +33,7 @@ function SelectWithInput ({
   const [showOptions, setShowOptions] = useState(false)
   const [isSelected, setIsSelected] = useState(false)
   const [isOnFocus, setIsOnFocus] = useState(false)
-
+  const errorMessageClassName = errorMessageTextClassName || commonStyles['error-message']
   const showError = errorMessage.length > 0
   const containerClassName = `${styles.container} ${defaultContainerClassName} `
   let inputClassName = `${commonStyles.fullWidth} ${styles.select} ${inputTextClassName}`
@@ -194,7 +195,7 @@ function SelectWithInput ({
         </div>
       </div>
       {showOptions && !showError && renderOptions()}
-      {showError && <span className={commonStyles['error-message']}>{errorMessage}</span>}
+      {showError && <span className={errorMessageClassName}>{errorMessage}</span>}
     </div>
   )
 }
@@ -297,7 +298,15 @@ SelectWithInput.propTypes = {
   /**
    * inputTextClassName
   */
-  inputTextClassName: PropTypes.string
+  inputTextClassName: PropTypes.string,
+  /**
+   * errorMessage
+   */
+  errorMessage: PropTypes.string,
+  /**
+   * errorMessageTextClassName
+  */
+  errorMessageTextClassName: PropTypes.string
 }
 
 SelectWithInput.defaultProps = {
@@ -312,6 +321,7 @@ SelectWithInput.defaultProps = {
   borderColor: MAIN_GREEN,
   borderListColor: '',
   errorMessage: '',
+  errorMessageTextClassName: '',
   onChange: () => {},
   onSelect: () => {},
   onClear: () => {},

package/src/components/forms/TextArea.jsx

@@ -6,9 +6,22 @@ import commonStyles from '../Common.module.css'
 import PlatformaticIcon from '../PlatformaticIcon'
 import { MAIN_DARK_BLUE, MAIN_GREEN } from '../constants'
 
-function TextArea ({ placeholder, value, name, borderColor, errorMessage, onChange, disabled, afterIcon, rows, cols }) {
+function TextArea ({
+  placeholder,
+  value,
+  name,
+  borderColor,
+  errorMessage,
+  errorMessageTextClassName,
+  onChange,
+  disabled,
+  afterIcon,
+  rows,
+  cols
+}) {
   let className = styles.textAreaContainer + ' ' + commonStyles[`bordered--${borderColor}`] + ' ' + commonStyles[`text--${borderColor}`]
   const showError = errorMessage.length > 0
+  const errorMessageClassName = errorMessageTextClassName || commonStyles['error-message']
   if (showError) className += ' ' + commonStyles['bordered--error-red']
   if (disabled) className += ' ' + commonStyles['apply-opacity-30']
   const textAreaClassName = `${commonStyles.fullWidth} ${styles.textarea}`
@@ -19,7 +32,7 @@ function TextArea ({ placeholder, value, name, borderColor, errorMessage, onChan
         <textarea name={name} className={textAreaClassName} onChange={onChange} disabled={disabled} placeholder={placeholder} rows={rows} cols={cols} value={value} />
         {afterIcon && <div className={styles.afterIcon}><PlatformaticIcon iconName={afterIcon.iconName} color={afterIcon.color} data-testid='after-icon' onClick={null} /></div>}
       </div>
-      {showError && <span className={commonStyles['error-message']}>{errorMessage}</span>}
+      {showError && <span className={errorMessageClassName}>{errorMessage}</span>}
     </div>
   )
 }
@@ -64,7 +77,15 @@ TextArea.propTypes = {
   /**
    * cols
    */
-  cols: PropTypes.number
+  cols: PropTypes.number,
+  /**
+   * errorMessage
+   */
+  errorMessage: PropTypes.string,
+  /**
+   * errorMessageTextClassName
+  */
+  errorMessageTextClassName: PropTypes.string
 }
 
 TextArea.defaultProps = {
@@ -73,6 +94,7 @@ TextArea.defaultProps = {
   name: '',
   borderColor: MAIN_DARK_BLUE,
   errorMessage: '',
+  errorMessageTextClassName: '',
   onChange: () => {},
   disabled: false,
   afterIcon: null,

package/src/components/forms/ToggleSwitch.jsx

@@ -4,10 +4,21 @@ import PropTypes from 'prop-types'
 import styles from './ToggleSwitch.module.css'
 import commonStyles from '../Common.module.css'
 
-function ToggleSwitch ({ name, label, labelClassName, errorMessage, onChange, checked, disabled }) {
+function ToggleSwitch ({
+  name,
+  label,
+  labelClassName,
+  errorMessage,
+  errorMessageTextClassName,
+  onChange,
+  checked,
+  disabled
+}) {
   let className = `${styles.switch} `
   if (disabled) className += styles.disabled
   const styleLabel = labelClassName || styles.defaultLabel
+  const errorMessageClassName = errorMessageTextClassName || commonStyles['error-message']
+
   return (
     <>
       <div className={styles.container}>
@@ -17,7 +28,7 @@ function ToggleSwitch ({ name, label, labelClassName, errorMessage, onChange, ch
         </label>
         <span className={styleLabel}>{label}</span>
       </div>
-      {errorMessage.length > 0 && <span className={commonStyles['error-message']}>{errorMessage}</span>}
+      {errorMessage.length > 0 && <span className={errorMessageClassName}>{errorMessage}</span>}
     </>
   )
 }
@@ -35,6 +46,10 @@ ToggleSwitch.propTypes = {
    * errorMessage
    */
   errorMessage: PropTypes.string,
+  /**
+   * errorMessageTextClassName
+  */
+  errorMessageTextClassName: PropTypes.string,
   /**
    * checked
    */
@@ -58,6 +73,7 @@ ToggleSwitch.defaultProps = {
   name: '',
   label: '',
   errorMessage: '',
+  errorMessageTextClassName: '',
   checked: false,
   disabled: false,
   onChange: () => {},