@platformatic/ui-components 0.1.134 → 0.1.136

package/package.json

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

package/src/components/Button.jsx

@@ -22,6 +22,7 @@ function Button ({
   selected,
   ...rest
 }) {
+  let containerClassName = `${styles.container} ${styles['color-' + color]} ${commonStyles['background-color-' + backgroundColor]} `
   let buttonClassName = classes
   buttonClassName += ` ${styles.button} ${commonStyles['background-color-' + backgroundColor]} ${styles['color-' + color]} ${styles['button-' + size]}`
   if (!bordered) buttonClassName += ` ${styles['no-border']}`
@@ -43,14 +44,19 @@ function Button ({
     }
   }
   if (bold) buttonClassName += ` ${styles.fontBold}`
-  if (fullWidth) buttonClassName += ` ${styles.fullWidth}`
+  if (fullWidth) {
+    buttonClassName += ` ${styles.fullWidth}`
+    containerClassName += ` ${styles.fullWidth}`
+  }
   if (selected) buttonClassName += ' ' + commonStyles[`selected-background-color-${color}`]
   return (
-    <button className={buttonClassName} disabled={disabled} alt={label} {...rest}>
-      {platformaticIcon ? <PlatformaticIcon key='left' iconName={platformaticIcon.iconName} color={platformaticIcon.color} data-testid='button-icon' onClick={null} /> : null}
-      <span className={styles.label}>{label}</span>
-      {platformaticIconAfter ? <PlatformaticIcon key='right' iconName={platformaticIconAfter.iconName} color={platformaticIconAfter.color} data-testid='button-icon' onClick={null} /> : null}
-    </button>
+    <div className={containerClassName}>
+      <button className={buttonClassName} disabled={disabled} alt={label} {...rest}>
+        {platformaticIcon ? <PlatformaticIcon key='left' iconName={platformaticIcon.iconName} color={platformaticIcon.color} data-testid='button-icon' onClick={null} disabled={disabled} /> : null}
+        <span className={styles.label}>{label}</span>
+        {platformaticIconAfter ? <PlatformaticIcon key='right' iconName={platformaticIconAfter.iconName} color={platformaticIconAfter.color} data-testid='button-icon' onClick={null} disabled={disabled} /> : null}
+      </button>
+    </div>
   )
 }
 

package/src/components/Button.module.css

@@ -1,5 +1,9 @@
+.container {
+  @apply rounded border-0
+}
 .button {
   @apply rounded text-center cursor-pointer font-normal border border-solid box-border flex items-center justify-center gap-x-2;
+  background: inherit;
 }
 .fontBold {
   @apply font-semibold;
@@ -57,6 +61,10 @@
 .color-transparent{
   @apply text-transparent border-transparent;
 }
+.color-rich-black{
+  @apply text-rich-black border-rich-black;
+}
+
 .no-border {
   @apply border-0;
 }

package/src/components/ButtonFullRounded.jsx

@@ -17,32 +17,33 @@ function ButtonFullRounded ({
   hoverEffect,
   bordered,
   tip,
-  selected
+  selected,
+  buttonClassName
 }) {
   const padding = commonStyles[`padding--${paddingSize}`]
   const containerClassName = `${className} border-0 ${styles.roundedFull}`
-  let buttonClassName = `${styles.roundedFull} ${styles.buttonRoundedFull} ${padding}`
+  let innerButtonClassName = `${buttonClassName} ${styles.roundedFull} ${styles.buttonRoundedFull} ${padding}`
   if (bordered) {
-    buttonClassName += ` ${styles.applyBorder} ` + commonStyles[`bordered--${iconColor}`]
+    innerButtonClassName += ` ${styles.applyBorder} ` + commonStyles[`bordered--${iconColor}`]
   } else {
-    buttonClassName += ` ${styles.borderLess} `
+    innerButtonClassName += ` ${styles.borderLess} `
   }
   if (disabled) {
-    buttonClassName += ` ${styles.disabled}`
+    innerButtonClassName += ` ${styles.disabled}`
   } else {
     switch (hoverEffect) {
       case BACKGROUND_COLOR_OPAQUE:
-        buttonClassName += ' ' + commonStyles[`hover-${BACKGROUND_COLOR_OPAQUE}-${iconColor}`]
+        innerButtonClassName += ' ' + commonStyles[`hover-${BACKGROUND_COLOR_OPAQUE}-${iconColor}`]
         break
       default:
         break
     }
   }
-  if (selected) buttonClassName += ' ' + commonStyles[`selected-background-color-${iconColor}`]
+  if (selected) innerButtonClassName += ' ' + commonStyles[`selected-background-color-${iconColor}`]
 
   return (
     <div className={containerClassName}>
-      <button className={buttonClassName} disabled={disabled} onClick={onClick} alt={alt} type='button'>
+      <button className={innerButtonClassName} disabled={disabled} onClick={onClick} alt={alt} type='button'>
         <PlatformaticIcon iconName={iconName} size={iconSize} color={iconColor} data-testid='button-icon' onClick={null} tip={tip} />
       </button>
     </div>
@@ -93,7 +94,11 @@ ButtonFullRounded.propTypes = {
   /**
    * Selected: default false
    */
-  selected: PropTypes.bool
+  selected: PropTypes.bool,
+  /**
+     * buttonClassName
+     */
+  buttonClassName: PropTypes.string
 
 }
 
@@ -109,7 +114,8 @@ ButtonFullRounded.defaultProps = {
   hoverEffect: '',
   bordered: false,
   tip: '',
-  selected: false
+  selected: false,
+  buttonClassName: ''
 }
 
 export default ButtonFullRounded

package/src/components/FollowUs.jsx

@@ -1,9 +1,28 @@
-import React from 'react'
+import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import styles from './FollowUs.module.css'
 import Icons from './icons'
 import { MAIN_GREEN, WHITE, MEDIUM, SMALL, MAIN_DARK_BLUE, LIGHT_GREEN } from './constants'
 
+function SocialElement ({ href, iconName, iconClassName, iconColor, iconSize }) {
+  const [hover, setHover] = useState(false)
+
+  const icon = React.createElement(Icons[`${iconName}`], {
+    color: iconColor,
+    size: iconSize,
+    tip: '',
+    disabled: !hover
+  })
+
+  return (
+    <div className={iconClassName} onMouseLeave={() => setHover(false)} onMouseOver={() => setHover(true)}>
+      <a href={href} target='_blank' rel='noopener noreferrer'>
+        {icon}
+      </a>
+    </div>
+  )
+}
+
 function FollowUs ({ label, labelClassName, useOnFrontpage, iconColor, iconSize, labelColor }) {
   const suffix = useOnFrontpage ? 'Frontpage' : 'Dashboard'
   const className = styles[`container${suffix}`]
@@ -14,26 +33,35 @@ function FollowUs ({ label, labelClassName, useOnFrontpage, iconColor, iconSize,
       <div className={labelClassName}>
         {label}
       </div>
-      <div className={iconClassName}>
-        <a href='https://twitter.com/platformatic' target='_blank' rel='noopener noreferrer'>
-          <Icons.SocialXIcon color={iconColor} size={iconSize} />
-        </a>
-      </div>
-      <div className={iconClassName}>
-        <a href='https://www.linkedin.com/company/platformatic/' target='_blank' rel='noopener noreferrer'>
-          <Icons.SocialLinkedInIcon color={iconColor} size={iconSize} />
-        </a>
-      </div>
-      <div className={iconClassName}>
-        <a href='https://github.com/platformatic' target='_blank' rel='noopener noreferrer'>
-          <Icons.SocialGitHubIcon color={iconColor} size={iconSize} />
-        </a>
-      </div>
-      <div className={iconClassName}>
-        <a href='https://discord.gg/platformatic' target='_blank' rel='noopener noreferrer'>
-          <Icons.SocialDiscordIcon color={iconColor} size={iconSize} />
-        </a>
-      </div>
+
+      <SocialElement
+        href='https://twitter.com/platformatic'
+        iconName='SocialXIcon'
+        iconClassName={iconClassName}
+        iconColor={iconColor}
+        iconSize={iconSize}
+      />
+      <SocialElement
+        href='https://www.linkedin.com/company/platformatic/'
+        iconName='SocialLinkedInIcon'
+        iconClassName={iconClassName}
+        iconColor={iconColor}
+        iconSize={iconSize}
+      />
+      <SocialElement
+        href='https://github.com/platformatic'
+        iconName='SocialGitHubIcon'
+        iconClassName={iconClassName}
+        iconColor={iconColor}
+        iconSize={iconSize}
+      />
+      <SocialElement
+        href='https://discord.gg/platformatic'
+        iconName='SocialDiscordIcon'
+        iconClassName={iconClassName}
+        iconColor={iconColor}
+        iconSize={iconSize}
+      />
     </div>
   )
 }

package/src/components/forms/Input.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import styles from './Input.module.css'
 import commonStyles from '../Common.module.css'
 import PlatformaticIcon from '../PlatformaticIcon'
-import { MAIN_DARK_BLUE, MAIN_GREEN, WHITE } from '../constants'
+import { MAIN_DARK_BLUE, MAIN_GREEN, RICH_BLACK, TRANSPARENT, WHITE } from '../constants'
 import BorderedBox from '../BorderedBox'
 
 function Input ({
@@ -19,7 +19,7 @@ function Input ({
   afterIcon,
   focused,
   placeholderApart,
-  backgroundTransparent,
+  backgroundColor,
   inputTextClassName,
   verticalPaddingClassName,
   dataAttrName,
@@ -29,7 +29,8 @@ function Input ({
   let inputClassName = `${commonStyles.fullWidth} ${styles.input} ${inputTextClassName}`
   inputClassName += verticalPaddingClassName || `${styles.inputDefaultVerticalPadding}`
   inputClassName += commonStyles[`bordered--${borderColor}`] + ' ' + commonStyles[`text--${borderColor}`]
-  if (backgroundTransparent) inputClassName += ` ${commonStyles['background-color-transparent']}`
+  inputClassName += ' ' + commonStyles[`background-color-${backgroundColor}`]
+
   const showError = errorMessage.length > 0
   if (showError) inputClassName += ' ' + commonStyles['bordered--error-red']
   if (disabled) inputClassName += ' ' + commonStyles['apply-opacity-30']
@@ -83,7 +84,11 @@ Input.propTypes = {
   /**
    * color of border
    */
-  borderColor: PropTypes.oneOf([MAIN_GREEN, MAIN_DARK_BLUE, WHITE]),
+  borderColor: PropTypes.oneOf([MAIN_GREEN, MAIN_DARK_BLUE, WHITE, RICH_BLACK]),
+  /**
+   * color of border
+   */
+  backgroundColor: PropTypes.oneOf([MAIN_GREEN, MAIN_DARK_BLUE, WHITE, RICH_BLACK, TRANSPARENT]),
   /**
    * onChange
    */
@@ -147,6 +152,7 @@ Input.defaultProps = {
   value: '',
   name: '',
   borderColor: MAIN_GREEN,
+  backgroundColor: WHITE,
   errorMessage: '',
   onChange: () => {},
   disabled: false,
@@ -154,7 +160,6 @@ Input.defaultProps = {
   afterIcon: null,
   focused: false,
   shadowPlaceholder: false,
-  backgroundTransparent: false,
   inputTextClassName: '',
   verticalPaddingClassName: '',
   dataAttrName: '',

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

@@ -45,6 +45,6 @@
 }
 .input.active,
 .input:focus {
-  @apply shadow-main-dark-blue;
+  @apply shadow-white;
   outline: none;
 }

package/src/components/forms/InputWithSeparator.jsx

@@ -4,20 +4,41 @@ import PropTypes from 'prop-types'
 import inputStyles from './Input.module.css'
 import styles from './InputWithSeparator.module.css'
 import commonStyles from '../Common.module.css'
-import { BACKGROUND_COLOR_OPAQUE, MAIN_DARK_BLUE, MAIN_GREEN, MEDIUM, TRANSPARENT } from '../constants'
+import { BACKGROUND_COLOR_OPAQUE, MAIN_DARK_BLUE, MAIN_GREEN, MEDIUM, OPACITY_30, RICH_BLACK, SMALL, TRANSPARENT, WHITE } from '../constants'
 import BorderedBox from '../BorderedBox'
 import ButtonFullRounded from '../ButtonFullRounded'
 
-function InputWithSeparator ({ placeholder, name, borderColor, errorMessage, onChange, disabled, afterIcon, value, separator }) {
+function InputWithSeparator ({
+  placeholder,
+  name,
+  borderColor,
+  backgroundColor,
+  errorMessage,
+  onChange,
+  disabled,
+  afterIcon,
+  value,
+  separator,
+  inputTextClassName
+}) {
+  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 [chunks, setChunks] = useState([])
-  const [inputClassName, setInputClassName] = useState(`${styles.flexNone} ${styles.smallMargin} ${commonStyles.fullWidth}`)
+  const [inputClassName, setInputClassName] = useState(normalClassName())
   const chunkClasses = `${styles.flexNone} ${styles.smallPadding} ${styles.smallMargin}`
-
-  let className = styles.inputContainer + ' ' + commonStyles[`bordered--${borderColor}`] + ' ' + commonStyles[`text--${borderColor}`] + ' ' + styles.smallPadding
+  let className = styles.inputContainer + ' ' + commonStyles[`bordered--${borderColor}-30`] + ' ' + commonStyles[`text--${borderColor}`]
   const showError = errorMessage.length > 0
   if (showError) className += ' ' + commonStyles['bordered--error-red']
   if (disabled) className += ' ' + commonStyles['apply-opacity-30']
 
+  useEffect(() => {
+    if (chunks.length > 0) {
+      setInputClassName(withChunksClassName())
+    } else {
+      setInputClassName(normalClassName())
+    }
+  }, [chunks.length])
+
   function handleRemove (chunk) {
     const index = chunks.findIndex(c => c === chunk)
     if (index > -1) {
@@ -40,24 +61,24 @@ function InputWithSeparator ({ placeholder, name, borderColor, errorMessage, onC
     onChange({ value: event.target.value, chunks })
   }
 
-  useEffect(() => {
-    if (chunks.length > 0) {
-      setInputClassName(`${styles.flexNone} ${styles.smallMargin}`)
-    } else {
-      setInputClassName(`${styles.flexNone} ${styles.smallMargin} ${commonStyles.fullWidth}`)
-    }
-  }, [chunks.length])
+  function normalClassName () {
+    return `${baseClassName} ${commonStyles.fullWidth} `
+  }
+
+  function withChunksClassName () {
+    return baseClassName
+  }
 
   function renderChunk (chunk, index) {
     return (
-      <BorderedBox color={TRANSPARENT} backgroundColor={MAIN_DARK_BLUE} backgroundColorOpacity={20} classes={chunkClasses} key={index}>
+      <BorderedBox color={TRANSPARENT} backgroundColor={borderColor} backgroundColorOpacity={OPACITY_30} classes={chunkClasses} key={index}>
         <div className={styles.chunkContent}>
-          <span className={styles.chunkText}>{chunk}</span>
+          <span className={`${styles.chunkText} ${inputTextClassName}`}>{chunk}</span>
           <ButtonFullRounded
             iconName='CircleCloseIcon'
-            iconSize={MEDIUM}
-            iconColor={MAIN_DARK_BLUE}
-            hoverEffect={BACKGROUND_COLOR_OPAQUE}
+            iconSize={SMALL}
+            iconColor={WHITE}
+            buttonClassName={buttonClassName}
             onClick={() => handleRemove(chunk)}
             bordered={false}
             alt='Close'
@@ -109,10 +130,18 @@ InputWithSeparator.propTypes = {
    * separator
    */
   separator: PropTypes.string,
+  /**
+   * inputTextClassName
+   */
+  inputTextClassName: PropTypes.string,
+  /**
+   * color of border
+   */
+  borderColor: PropTypes.oneOf([MAIN_GREEN, MAIN_DARK_BLUE, WHITE, RICH_BLACK]),
   /**
    * color of border
    */
-  borderColor: PropTypes.oneOf([MAIN_GREEN, MAIN_DARK_BLUE]),
+  backgroundColor: PropTypes.oneOf([MAIN_GREEN, MAIN_DARK_BLUE, WHITE, RICH_BLACK, TRANSPARENT]),
   /**
    * onChange
    */
@@ -136,12 +165,14 @@ InputWithSeparator.defaultProps = {
   placeholder: '',
   value: '',
   name: '',
-  borderColor: 'main-green',
+  borderColor: MAIN_GREEN,
+  backgroundColor: WHITE,
   errorMessage: '',
   onChange: () => {},
   disabled: false,
   afterIcon: null,
-  separator: ''
+  separator: '',
+  inputTextClassName: ''
 }
 
 export default InputWithSeparator

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

@@ -2,14 +2,20 @@
   @apply flex gap-x-2 w-full items-center;
 }
 .chunkText {
-  @apply text-sm text-main-dark-blue;
+  @apply text-sm;
 }
 .inputContainer {
-  @apply flex min-h-[46px] border border-solid box-border rounded-md items-center gap-[0.1rem] flex-wrap relative grow;
+  @apply flex min-h-[46px] border border-solid box-border rounded-md items-center gap-[0.1rem] flex-wrap relative grow px-2;
+}
+.input {
+  @apply h-full m-0 border-0;
+  padding-block: 0;
+  padding-inline: 0;
+  background: inherit;
 }
 .smallPadding {
   @apply p-1 !important
-} 
+}
 .flexNone {
   @apply flex-none !important;
 }
@@ -25,3 +31,9 @@
 .container {
   @apply flex w-full items-center;
 }
+
+.input.active,
+.input:focus {
+  @apply shadow-white;
+  outline: none;
+}

package/tailwind.config.cjs

@@ -23,7 +23,8 @@ module.exports = {
         'dark-blue': '0px 0px 4px rgba(0, 52, 79, 0.5)',
         'light-blue': '0px 0px 4px rgba(233, 247, 255, 0.5)',
         'error-red': '0px 0px 4px rgba(250, 33, 33, 0.5)',
-        'tertiary-blue': '0px 0px 4px rgba(37, 136, 228, 0.5)'
+        'tertiary-blue': '0px 0px 4px rgba(37, 136, 228, 0.5)',
+        white: '0px 0px 4px rgba(255, 255, 255, 0.5)'
       },
       opacity: {
         15: '.15'