@platformatic/ui-components 0.1.142 → 0.1.143

package/src/components/icons/PlatformaticRuntimeIcon.jsx

@@ -3,11 +3,14 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const PlatformaticRuntimeIcon = ({ color, size, disabled }) => {
+const PlatformaticRuntimeIcon = ({ color, size, disabled, inactive }) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -87,12 +90,17 @@ PlatformaticRuntimeIcon.propTypes = {
   /**
    * disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
 }
 PlatformaticRuntimeIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
   size: MEDIUM,
-  disabled: false
+  disabled: false,
+  inactive: false
 }
 
 export default PlatformaticRuntimeIcon

package/src/components/icons/PlatformaticServiceIcon.jsx

@@ -3,11 +3,14 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const PlatformaticServiceIcon = ({ color, size, disabled }) => {
+const PlatformaticServiceIcon = ({ color, size, disabled, inactive }) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -87,12 +90,17 @@ PlatformaticServiceIcon.propTypes = {
   /**
    * disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
 }
 PlatformaticServiceIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
   size: MEDIUM,
-  disabled: false
+  disabled: false,
+  inactive: false
 }
 
 export default PlatformaticServiceIcon

package/src/components/icons/PlayIcon.jsx

@@ -3,11 +3,14 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const PlayIcon = ({ color, size, disabled }) => {
+const PlayIcon = ({ color, size, disabled, inactive }) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -72,12 +75,17 @@ PlayIcon.propTypes = {
   /**
    * disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
 }
 PlayIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
   size: MEDIUM,
-  disabled: false
+  disabled: false,
+  inactive: false
 }
 
 export default PlayIcon

package/src/components/icons/PreviewPRIcon.jsx

@@ -3,11 +3,14 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const PreviewPRIcon = ({ color, size, disabled }) => {
+const PreviewPRIcon = ({ color, size, disabled, inactive }) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -96,12 +99,17 @@ PreviewPRIcon.propTypes = {
   /**
    * disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
 }
 PreviewPRIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
   size: MEDIUM,
-  disabled: false
+  disabled: false,
+  inactive: false
 }
 
 export default PreviewPRIcon

package/src/components/icons/PullRequestIcon.jsx

@@ -3,11 +3,14 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const PullRequestIcon = ({ color, size, disabled }) => {
+const PullRequestIcon = ({ color, size, disabled, inactive }) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -89,12 +92,17 @@ PullRequestIcon.propTypes = {
   /**
    * disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
 }
 PullRequestIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
   size: MEDIUM,
-  disabled: false
+  disabled: false,
+  inactive: false
 }
 
 export default PullRequestIcon

package/src/components/icons/PullRequestLoadingIcon.jsx

@@ -3,11 +3,14 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, MEDIUM, EXTRA_LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const PullRequestLoadingIcon = ({ color, size, disabled }) => {
+const PullRequestLoadingIcon = ({ color, size, disabled, inactive }) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   const filledClassName = styles[`filled-${color}`]
 
   let icon = <></>
@@ -56,12 +59,17 @@ PullRequestLoadingIcon.propTypes = {
   /**
    * disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
 }
 PullRequestLoadingIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
   size: MEDIUM,
-  disabled: false
+  disabled: false,
+  inactive: false
 }
 
 export default PullRequestLoadingIcon

package/src/components/icons/RequestOwnershipIcon.jsx

@@ -3,11 +3,14 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const RequestOwnershipIcon = ({ color, size, disabled }) => {
+const RequestOwnershipIcon = ({ color, size, disabled, inactive }) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -80,12 +83,17 @@ RequestOwnershipIcon.propTypes = {
   /**
    * disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
 }
 RequestOwnershipIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
   size: MEDIUM,
-  disabled: false
+  disabled: false,
+  inactive: false
 }
 
 export default RequestOwnershipIcon

package/src/components/icons/RestartIcon.jsx

@@ -3,11 +3,14 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const RestartIcon = ({ color, size, disabled }) => {
+const RestartIcon = ({ color, size, disabled, inactive }) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -75,12 +78,17 @@ RestartIcon.propTypes = {
   /**
    * disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
 }
 RestartIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
   size: MEDIUM,
-  disabled: false
+  disabled: false,
+  inactive: false
 }
 
 export default RestartIcon

package/src/components/icons/RocketIcon.jsx

@@ -3,11 +3,14 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const RocketIcon = ({ color, size, disabled }) => {
+const RocketIcon = ({ color, size, disabled, inactive }) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -87,12 +90,17 @@ RocketIcon.propTypes = {
   /**
    * disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
 }
 RocketIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
   size: MEDIUM,
-  disabled: false
+  disabled: false,
+  inactive: false
 }
 
 export default RocketIcon

package/src/components/icons/RunningIcon.jsx

@@ -3,11 +3,14 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const RunningIcon = ({ color, size, disabled }) => {
+const RunningIcon = ({ color, size, disabled, inactive }) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -79,12 +82,17 @@ RunningIcon.propTypes = {
   /**
    * disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
 }
 RunningIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
   size: MEDIUM,
-  disabled: false
+  disabled: false,
+  inactive: false
 }
 
 export default RunningIcon

package/src/components/icons/SendIcon.jsx

@@ -3,11 +3,14 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const SendIcon = ({ color, size, disabled }) => {
+const SendIcon = ({ color, size, disabled, inactive }) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -72,12 +75,17 @@ SendIcon.propTypes = {
   /**
    * disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
 }
 SendIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
   size: MEDIUM,
-  disabled: false
+  disabled: false,
+  inactive: false
 }
 
 export default SendIcon

package/src/components/icons/ServiceIcon.jsx

@@ -3,11 +3,14 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const ServiceIcon = ({ color, size, disabled }) => {
+const ServiceIcon = ({ color, size, disabled, inactive }) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -86,12 +89,17 @@ ServiceIcon.propTypes = {
   /**
    * disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
 }
 ServiceIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
   size: MEDIUM,
-  disabled: false
+  disabled: false,
+  inactive: false
 }
 
 export default ServiceIcon

package/src/components/icons/SlotIcon.jsx

@@ -3,11 +3,14 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const SlotIcon = ({ color, size, disabled }) => {
+const SlotIcon = ({ color, size, disabled, inactive }) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -84,12 +87,17 @@ SlotIcon.propTypes = {
   /**
    * disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
 }
 SlotIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
   size: MEDIUM,
-  disabled: false
+  disabled: false,
+  inactive: false
 }
 
 export default SlotIcon

package/src/components/icons/SocialDiscordIcon.jsx

@@ -3,11 +3,14 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const SocialDiscordIcon = ({ color, size, disabled }) => {
+const SocialDiscordIcon = ({ color, size, disabled, inactive }) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   const filledClassName = styles[`filled-${color}`]
   let icon = <></>
 
@@ -76,12 +79,17 @@ SocialDiscordIcon.propTypes = {
   /**
    * disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
 }
 SocialDiscordIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
   size: MEDIUM,
-  disabled: false
+  disabled: false,
+  inactive: false
 }
 
 export default SocialDiscordIcon

package/src/components/icons/SocialGitHubIcon.jsx

@@ -3,11 +3,14 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const SocialGitHubIcon = ({ color, size, disabled }) => {
+const SocialGitHubIcon = ({ color, size, disabled, inactive }) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   const filledClassName = styles[`filled-${color}`]
   let icon = <></>
 
@@ -95,12 +98,17 @@ SocialGitHubIcon.propTypes = {
   /**
    * disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
 }
 SocialGitHubIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
   size: MEDIUM,
-  disabled: false
+  disabled: false,
+  inactive: false
 }
 
 export default SocialGitHubIcon

package/src/components/icons/SocialGitLabIcon.jsx

@@ -3,11 +3,14 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const SocialGitLabIcon = ({ color, size, disabled }) => {
+const SocialGitLabIcon = ({ color, size, disabled, inactive }) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   const filledClassName = styles[`filled-${color}`]
   let icon = <></>
 
@@ -119,12 +122,17 @@ SocialGitLabIcon.propTypes = {
   /**
    * disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
 }
 SocialGitLabIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
   size: MEDIUM,
-  disabled: false
+  disabled: false,
+  inactive: false
 }
 
 export default SocialGitLabIcon

package/src/components/icons/SocialLinkedInIcon.jsx

@@ -3,11 +3,14 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const SocialLinkedInIcon = ({ color, size, disabled }) => {
+const SocialLinkedInIcon = ({ color, size, disabled, inactive }) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   const filledClassName = styles[`filled-${color}`]
   let icon = <></>
 
@@ -82,12 +85,17 @@ SocialLinkedInIcon.propTypes = {
   /**
    * disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
 }
 SocialLinkedInIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
   size: MEDIUM,
-  disabled: false
+  disabled: false,
+  inactive: false
 }
 
 export default SocialLinkedInIcon

package/src/components/icons/SocialNPMIcon.jsx

@@ -3,11 +3,14 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const SocialNPMIcon = ({ color, size, disabled }) => {
+const SocialNPMIcon = ({ color, size, disabled, inactive }) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   const filledClassName = styles[`filled-${color}`]
   let icon = <></>
 
@@ -74,12 +77,17 @@ SocialNPMIcon.propTypes = {
   /**
    * disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
 }
 SocialNPMIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
   size: MEDIUM,
-  disabled: false
+  disabled: false,
+  inactive: false
 }
 
 export default SocialNPMIcon

package/src/components/icons/SocialXIcon.jsx

@@ -3,11 +3,14 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const SocialXIcon = ({ color, size, disabled }) => {
+const SocialXIcon = ({ color, size, disabled, inactive }) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   const filledClassName = styles[`filled-${color}`]
   let icon = <></>
 
@@ -75,12 +78,17 @@ SocialXIcon.propTypes = {
   /**
    * disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
 }
 SocialXIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
   size: MEDIUM,
-  disabled: false
+  disabled: false,
+  inactive: false
 }
 
 export default SocialXIcon