@platformatic/ui-components 0.1.123 → 0.1.125

package/src/components/constants.js

@@ -9,6 +9,8 @@ export const TRANSPARENT = 'transparent'
 export const TERTIARY_BLUE = 'tertiary-blue'
 export const ERROR_RED = 'error-red'
 export const WARNING_YELLOW = 'warning-yellow'
+export const RICH_BLACK = 'rich-black'
+
 export const NONE = 'none'
 export const EXTRA_SMALL = 'extra-small'
 export const SMALL = 'small'
@@ -26,14 +28,15 @@ export const HOVER_EFFECTS_BUTTONS = [BOX_SHADOW, BACKGROUND_COLOR_OPAQUE, UNDER
 export const MODAL_SIZES = [SMALL, MEDIUM, FULL_WIDTH]
 
 export const COLORS_ICON = [MAIN_GREEN, WHITE, MAIN_DARK_BLUE, ERROR_RED, WARNING_YELLOW, TERTIARY_BLUE]
-export const COLORS_BUTTON = [MAIN_GREEN, DARK_GREEN, LIGHT_GREEN, MAIN_DARK_BLUE, DARK_BLUE, LIGHT_BLUE, WHITE, ERROR_RED, TERTIARY_BLUE, TRANSPARENT]
+export const COLORS_BUTTON = [MAIN_GREEN, DARK_GREEN, LIGHT_GREEN, MAIN_DARK_BLUE, DARK_BLUE, LIGHT_BLUE, WHITE, ERROR_RED, TERTIARY_BLUE, TRANSPARENT, RICH_BLACK]
 export const COLORS_BORDERED_BOX = [MAIN_GREEN, ERROR_RED, WHITE, DARK_BLUE, MAIN_DARK_BLUE, WARNING_YELLOW, TRANSPARENT, LIGHT_BLUE, TERTIARY_BLUE]
 
 export const MODAL_POPUP = 'popup'
+export const MODAL_POPUP_V2 = 'popup-v2'
 export const MODAL_COVER = 'cover'
 export const MODAL_FULL_DARK = 'full-dark'
 export const MODAL_FULL_LIGHT = 'full-light'
-export const MODAL_LAYOUTS = [MODAL_POPUP, MODAL_COVER, MODAL_FULL_DARK, MODAL_FULL_LIGHT]
+export const MODAL_LAYOUTS = [MODAL_POPUP_V2, MODAL_POPUP, MODAL_COVER, MODAL_FULL_DARK, MODAL_FULL_LIGHT]
 
 export const FREE = 'free'
 export const BASIC = 'basic'
@@ -49,6 +52,11 @@ export const ROLE_USER = 'user'
 export const ROLE_OWNER = 'owner'
 
 export const MARGIN_10 = 10
+export const MARGIN_8 = 8
 export const MARGIN_0 = 0
 
+export const OPACITY_10 = 10
 export const OPACITY_20 = 20
+export const OPACITY_30 = 30
+export const OPACITY_60 = 60
+export const OPACITY_100 = 100

package/src/components/forms/Field.jsx

@@ -1,19 +1,30 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Field.module.css'
+import { ERROR_RED, MAIN_DARK_BLUE, WHITE } from '../constants'
 
-function Field ({ title, titleColor, helper, children, disabled, required }) {
+function Field ({
+  title,
+  titleColor,
+  helper,
+  children,
+  disabled,
+  required,
+  titleClassName,
+  helperClassName
+}) {
   let className = `${styles.container}`
   if (disabled) className += ` ${styles.disabled}`
-  let classnameTitle = `${styles.title} `
-  classnameTitle += styles[`text-color-${titleColor}`]
+  const styledTitle = titleClassName || (`${styles.title} ` + styles[`text-color-${titleColor}`])
+  let styledHelper = helperClassName || styles.helper
+  styledHelper += ` ${styles.helperPadding}`
   let titleTmp = title
   if (required) { titleTmp += ' *' }
 
   return (
     <div className={className}>
-      <p className={classnameTitle}>{titleTmp}</p>
-      {helper && <p className={styles.helper}>{helper}</p>}
+      <p className={styledTitle}>{titleTmp}</p>
+      {helper && <p className={styledHelper}>{helper}</p>}
       <div className={styles.content}>
         {children}
       </div>
@@ -29,7 +40,7 @@ Field.propTypes = {
   /**
    * titleColor
    */
-  titleColor: PropTypes.oneOf(['error-red', 'main-dark-blue']),
+  titleColor: PropTypes.oneOf([ERROR_RED, MAIN_DARK_BLUE, WHITE]),
   /**
    * helper
    */
@@ -45,7 +56,15 @@ Field.propTypes = {
   /**
    * required
    */
-  required: PropTypes.bool
+  required: PropTypes.bool,
+  /**
+   * titleClassName
+   */
+  titleClassName: PropTypes.string,
+  /**
+   * titleClassName
+   */
+  helperClassName: PropTypes.string
 }
 
 Field.defaultProps = {
@@ -54,7 +73,9 @@ Field.defaultProps = {
   helper: '',
   children: null,
   disabled: false,
-  required: false
+  required: false,
+  titleClassName: '',
+  helperClassName: ''
 }
 
 export default Field

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

@@ -1,5 +1,5 @@
 .container {
-  @apply flex flex-col w-full;
+  @apply flex flex-col w-full gap-y-1;
 }
 .title {
   @apply font-semibold pb-2;
@@ -10,6 +10,9 @@
 .text-color-error-red {
   @apply text-error-red;
 }
+.text-color-white {
+  @apply text-white;
+}
 .helper{
   @apply text-sm pb-4;
 }
@@ -21,4 +24,7 @@
 }
 .disabled {
   @apply opacity-20;
+}
+.helperPadding {
+  @apply pb-3
 }

package/src/components/forms/Input.jsx

@@ -4,12 +4,32 @@ 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 } from '../constants'
+import { MAIN_DARK_BLUE, MAIN_GREEN, WHITE } from '../constants'
 import BorderedBox from '../BorderedBox'
 
-function Input ({ placeholder, value, name, borderColor, errorMessage, onChange, disabled, beforeIcon, afterIcon, focused, placeholderApart }) {
-  let inputClassName = `${commonStyles.fullWidth} ${styles.input} `
+function Input ({
+  placeholder,
+  value,
+  name,
+  borderColor,
+  errorMessage,
+  onChange,
+  disabled,
+  beforeIcon,
+  afterIcon,
+  focused,
+  placeholderApart,
+  backgroundTransparent,
+  inputTextClassName,
+  verticalPaddingClassName,
+  dataAttrName,
+  dataAttrValue,
+  readOnly
+}) {
+  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']}`
   const showError = errorMessage.length > 0
   if (showError) inputClassName += ' ' + commonStyles['bordered--error-red']
   if (disabled) inputClassName += ' ' + commonStyles['apply-opacity-30']
@@ -17,11 +37,26 @@ function Input ({ placeholder, value, name, borderColor, errorMessage, onChange,
   if (afterIcon) inputClassName += ' ' + styles.afterIconPadding
   const inputPlaceholder = placeholderApart ? '' : placeholder
 
+  const dataProps = {}
+  if (dataAttrName && dataAttrValue) {
+    dataProps[`data-${dataAttrName}`] = dataAttrValue
+  }
+
   const cmp = (
-    <div className={styles.container}>
+    <div className={styles.container} {...dataProps}>
       <div className={styles.inputContainer}>
         {beforeIcon && <div className={styles.beforeInputIcon}><PlatformaticIcon iconName={beforeIcon.iconName} size='small' data-testid='before-icon' color={beforeIcon.color} onClick={() => beforeIcon.onClick()} /></div>}
-        <input type='text' name={name} value={value} className={inputClassName} onChange={onChange} disabled={disabled} placeholder={inputPlaceholder} />
+        <input
+          type='text'
+          name={name}
+          value={value}
+          className={inputClassName}
+          onChange={onChange}
+          disabled={disabled}
+          placeholder={inputPlaceholder}
+          readOnly={readOnly}
+          aria-readonly={readOnly}
+        />
         {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>
@@ -48,7 +83,7 @@ Input.propTypes = {
   /**
    * color of border
    */
-  borderColor: PropTypes.oneOf([MAIN_GREEN, MAIN_DARK_BLUE]),
+  borderColor: PropTypes.oneOf([MAIN_GREEN, MAIN_DARK_BLUE, WHITE]),
   /**
    * onChange
    */
@@ -80,7 +115,31 @@ Input.propTypes = {
   /**
    * placeholderApart
    */
-  placeholderApart: PropTypes.bool
+  placeholderApart: PropTypes.bool,
+  /**
+   * backgroundTransparent
+   */
+  backgroundTransparent: PropTypes.bool,
+  /**
+   * inputTextClassName
+   */
+  inputTextClassName: PropTypes.string,
+  /**
+   * verticalPaddingClassName
+   */
+  verticalPaddingClassName: PropTypes.string,
+  /**
+   * dataAttrName
+  */
+  dataAttrName: PropTypes.string,
+  /**
+   * dataAttrValue
+  */
+  dataAttrValue: PropTypes.string,
+  /**
+   * readOnly
+  */
+  readOnly: PropTypes.bool
 }
 
 Input.defaultProps = {
@@ -94,7 +153,13 @@ Input.defaultProps = {
   beforeIcon: null,
   afterIcon: null,
   focused: false,
-  shadowPlaceholder: false
+  shadowPlaceholder: false,
+  backgroundTransparent: false,
+  inputTextClassName: '',
+  verticalPaddingClassName: '',
+  dataAttrName: '',
+  dataAttrValue: '',
+  readOnly: false
 }
 
 export default Input

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

@@ -2,10 +2,15 @@
   @apply flex flex-col w-full relative;
 }
 .inputContainer {
-  @apply flex h-10 relative z-20;
+  @apply flex min-h-[2.5rem] relative z-20;
 }
 .input {
-  @apply border border-solid box-border rounded-md px-2 py-2.5 z-10;
+  padding-block: 0px;
+  padding-inline: 0px;
+  @apply border border-solid box-border rounded-md px-2 z-10;
+}
+.inputDefaultVerticalPadding {
+  @apply py-2.5;
 }
 .afterInputIcon,
 .beforeInputIcon {
@@ -42,4 +47,4 @@
 .input:focus {
   @apply shadow-main-dark-blue;
   outline: none;
-}
+}

package/src/components/forms/Select.jsx

@@ -3,31 +3,68 @@ import React, { useState, useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 import styles from './Select.module.css'
 import commonStyles from '../Common.module.css'
-import { MAIN_DARK_BLUE, MAIN_GREEN, SMALL } from '../constants'
+import { MAIN_DARK_BLUE, MAIN_GREEN, RICH_BLACK, SMALL, WHITE } from '../constants'
 import PlatformaticIcon from '../PlatformaticIcon'
 
 function Select ({
+  defaultContainerClassName,
   placeholder,
   name,
   value,
   options,
+  defaultOptionsClassName,
+  optionsBorderedBottom,
   borderColor,
+  borderListColor,
   errorMessage,
   onChange,
   onSelect,
   onClear,
   disabled,
-  optionsIconColor,
-  optionSelected
+  mainColor,
+  optionSelected,
+  dataAttrName,
+  dataAttrValue,
+  backgroundColor
+
 }) {
   const inputRef = useRef()
   const [showOptions, setShowOptions] = useState(false)
   const [isSelected, setIsSelected] = useState(false)
+  const [isOnFocus, setIsOnFocus] = useState(false)
   const showError = errorMessage.length > 0
-  let inputClassName = `${commonStyles.fullWidth} ${styles.select} `
-  inputClassName += ' ' + commonStyles[`bordered--${borderColor}`] + ' ' + commonStyles[`text--${borderColor}`]
+  const containerClassName = `${styles.container} ${defaultContainerClassName} `
+  let inputClassName = `${commonStyles.fullWidth} ${styles.select}`
+  inputClassName += ' ' + styles[`select-${mainColor}`]
+  inputClassName += ' ' + commonStyles[`text--${borderColor}`]
+  let optionsClassName = `${styles.options} ${defaultOptionsClassName} `
   if (showError) inputClassName += ' ' + commonStyles['bordered--error-red']
   if (disabled) inputClassName += ' ' + commonStyles['apply-opacity-30']
+  inputClassName += ' ' + commonStyles[`background-color-${backgroundColor}`]
+  optionsClassName += commonStyles[`background-color-${backgroundColor}`]
+
+  if (borderListColor) {
+    optionsClassName += ' ' + styles['bordered-options']
+    optionsClassName += ' ' + commonStyles[`bordered--${borderListColor}-30`]
+  }
+  let singleOptionClassName = `${styles.option} ` + commonStyles[`bordered--${mainColor}-15`] + ' ' + commonStyles[`hover-background-color-opaque-${mainColor}`]
+  if (optionsBorderedBottom) {
+    singleOptionClassName += ` ${styles['bordered-bottom']}`
+  }
+
+  const [wrapperClassName, setWrapperClassName] = useState(normalClassName())
+  function onFocusClassName () {
+    return inputClassName + ' ' + commonStyles[`bordered--${borderColor}-100`]
+  }
+
+  function normalClassName () {
+    return inputClassName + ' ' + commonStyles[`bordered--${borderColor}-15`]
+  }
+
+  const dataProps = {}
+  if (dataAttrName && dataAttrValue) {
+    dataProps[`data-${dataAttrName}`] = dataAttrValue
+  }
 
   function handleNotSelectable (callback = () => {}) {
     setIsSelected(true)
@@ -65,7 +102,7 @@ function Select ({
   function renderLi (option, index) {
     return (
       <li
-        key={index} className={styles.option} onClick={() => {
+        key={index} className={singleOptionClassName} onClick={() => {
           if (option.notSelectable) {
             return handleNotSelectable(option.onClick && option.onClick())
           }
@@ -73,8 +110,8 @@ function Select ({
         }}
       >
         <div className={styles.liContent}>
-          {option.iconName && <PlatformaticIcon iconName={option.iconName} color={optionsIconColor} size={SMALL} onClick={null} />}
-          <span>{option.label}</span>
+          {option.iconName && <PlatformaticIcon iconName={option.iconName} color={mainColor} size={SMALL} onClick={null} />}
+          <span className={commonStyles[`text--${mainColor}`]}>{option.label}</span>
         </div>
       </li>
     )
@@ -83,8 +120,8 @@ function Select ({
   function renderOptions () {
     if (value.length === 0) {
       return (
-        <ul className={styles.options}>
-          {options.length > 0 ? options.map((option, index) => renderLi(option, index)) : <li className={styles.option}><div className={styles.liContent}>No data found</div></li>}
+        <ul className={optionsClassName}>
+          {options.length > 0 ? options.map((option, index) => renderLi(option, index)) : <li className={singleOptionClassName}><div className={styles.liContent}><span className={commonStyles[`text--${mainColor}`]}>No data found</span></div></li>}
         </ul>
       )
     }
@@ -92,8 +129,8 @@ function Select ({
     const filteredOptions = options.filter(option => !option.notFilterable).filter(option => option.label.toLowerCase().includes(value.toLowerCase()))
 
     return (
-      <ul className={styles.options}>
-        {filteredOptions.length > 0 ? filteredOptions.map((option, index) => renderLi(option, index)) : <li className={styles.option}><div className={styles.liContent}>No data found</div></li>}
+      <ul className={optionsClassName}>
+        {filteredOptions.length > 0 ? filteredOptions.map((option, index) => renderLi(option, index)) : <li className={singleOptionClassName}><div className={styles.liContent}><span className={commonStyles[`text--${mainColor}`]}>No data found</span></div></li>}
         {notFilterableOptions.length > 0 && notFilterableOptions.map((option, index) => renderLi(option, index))}
       </ul>
     )
@@ -110,6 +147,10 @@ function Select ({
   }
 
   function handleFocus () {
+    if (!isOnFocus) {
+      setIsOnFocus(true)
+      setWrapperClassName(onFocusClassName())
+    }
     setShowOptions(true)
   }
 
@@ -118,14 +159,16 @@ function Select ({
     setTimeout(() => {
       if (showOptions) {
         setShowOptions(false)
+        setIsOnFocus(false)
+        setWrapperClassName(normalClassName())
       }
     }, 250)
   }
 
   return (
-    <div className={styles.container}>
+    <div className={containerClassName} {...dataProps}>
       <div className={styles.selectContainer}>
-        <input type='text' name={name} value={value} className={inputClassName} ref={inputRef} onChange={onChange} disabled={disabled} placeholder={placeholder} onFocus={() => handleFocus()} onBlur={(e) => handleBlur(e)} />
+        <input type='text' name={name} value={value} className={wrapperClassName} ref={inputRef} onChange={onChange} disabled={disabled} placeholder={placeholder} onFocus={() => handleFocus()} onBlur={(e) => handleBlur(e)} />
         <div className={styles.icons}>
           {value?.length > 0 && <PlatformaticIcon iconName='CloseIcon' color={borderColor} onClick={() => clearValue()} />}
           <PlatformaticIcon iconName={showOptions ? 'ArrowUpIcon' : 'ArrowDownIcon'} color={borderColor} onClick={() => disabled ? null : setShowOptions(!showOptions)} />
@@ -138,6 +181,10 @@ function Select ({
 }
 
 Select.propTypes = {
+  /**
+   * defaultContainerClassName
+   */
+  defaultContainerClassName: PropTypes.string,
   /**
    * placeholder
    */
@@ -167,10 +214,22 @@ Select.propTypes = {
     notFilterable: PropTypes.bool,
     onClick: PropTypes.func
   })),
+  /**
+   * defaultOptionsClassName
+   */
+  defaultOptionsClassName: PropTypes.string,
+  /**
+   * optionsBorderedBottom
+   */
+  optionsBorderedBottom: PropTypes.bool,
   /**
    * color of border
    */
-  borderColor: PropTypes.oneOf([MAIN_GREEN, MAIN_DARK_BLUE]),
+  borderColor: PropTypes.oneOf([MAIN_GREEN, MAIN_DARK_BLUE, WHITE]),
+  /**
+   * color of border UL
+   */
+  borderListColor: PropTypes.oneOf([MAIN_GREEN, MAIN_DARK_BLUE, WHITE]),
   /**
    * onChange
    */
@@ -188,9 +247,9 @@ Select.propTypes = {
    */
   disabled: PropTypes.bool,
   /**
-   * optionsIconColor
+   * mainColor
    */
-  optionsIconColor: PropTypes.string,
+  mainColor: PropTypes.oneOf([MAIN_DARK_BLUE, WHITE]),
   /**
    * optionSelected
    */
@@ -200,23 +259,42 @@ Select.propTypes = {
       PropTypes.string,
       PropTypes.number
     ])
-  })
+  }),
+  /**
+   * dataAttrName
+  */
+  dataAttrName: PropTypes.string,
+  /**
+   * dataAttrValue
+  */
+  dataAttrValue: PropTypes.string,
+  /**
+   * backgroundColor
+  */
+  backgroundColor: PropTypes.oneOf([MAIN_DARK_BLUE, WHITE, RICH_BLACK])
 }
 
 Select.defaultProps = {
+  defaultContainerClassName: '',
   placeholder: 'this is the default',
   name: '',
   value: '',
   id: '',
   options: [],
+  defaultOptionsClassName: '',
+  optionsBorderedBottom: true,
   borderColor: MAIN_GREEN,
+  borderListColor: '',
   errorMessage: '',
   onChange: () => {},
   onSelect: () => {},
   onClear: () => {},
   disabled: false,
-  optionsIconColor: MAIN_DARK_BLUE,
-  optionSelected: null
+  mainColor: MAIN_DARK_BLUE,
+  optionSelected: null,
+  dataAttrName: '',
+  dataAttrValue: '',
+  backgroundColor: WHITE
 }
 
 export default Select

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

@@ -7,19 +7,30 @@
 .select {
   @apply px-2 h-full border border-solid box-border rounded-md ;
 }
-.select.active,
-.select:focus {
+
+.select-main-dark-blue.active,
+.select-main-dark-blue:focus {
   @apply shadow-main-dark-blue outline-none;
 }
+.select-white.active,
+.select-white:focus {
+  @apply shadow-white outline-none;
+}
 .options {
-  @apply absolute left-0 top-[42px] bg-white w-full max-h-[216px] overflow-y-scroll z-20;
-  box-shadow: 0px 0px 10px rgb(0 40 61 / 25%);
+  @apply absolute left-0 top-[42px] w-full max-h-[216px] overflow-y-scroll z-20;
+}
+.bordered-options {
+  @apply border border-solid rounded-md
 }
 .option {
-  @apply w-full border-b border-main-dark-blue/[.15] font-light cursor-pointer hover:bg-main-dark-blue hover:bg-opacity-10 z-10;
+  @apply w-full font-light cursor-pointer z-10;
+}
+.bordered-bottom {
+  @apply border-b
 }
 .icons {
-  @apply absolute top-[50%] right-[0.5rem] translate-y-[-50%] flex gap-x-2;
+  @apply absolute top-[50%] right-[0.5rem] flex gap-x-2;
+  transform: translateY(-50%);
 }
 .liContent {
   @apply px-4 py-2 inline-flex items-center gap-x-1 relative z-[-1];

package/src/components/forms/ToggleSwitch.jsx

@@ -4,10 +4,10 @@ import PropTypes from 'prop-types'
 import styles from './ToggleSwitch.module.css'
 import commonStyles from '../Common.module.css'
 
-function ToggleSwitch ({ name, label, errorMessage, onChange, checked, disabled }) {
+function ToggleSwitch ({ name, label, labelClassName, errorMessage, onChange, checked, disabled }) {
   let className = `${styles.switch} `
   if (disabled) className += styles.disabled
-
+  const styleLabel = labelClassName || styles.defaultLabel
   return (
     <>
       <div className={styles.container}>
@@ -15,7 +15,7 @@ function ToggleSwitch ({ name, label, errorMessage, onChange, checked, disabled
           <input type='checkbox' name={name} onChange={onChange} checked={checked} disabled={disabled} />
           <span className={`${styles.slider} ${styles.round}`} />
         </label>
-        <span className={styles.label}>{label}</span>
+        <span className={styleLabel}>{label}</span>
       </div>
       {errorMessage.length > 0 && <span className={commonStyles['error-message']}>{errorMessage}</span>}
     </>
@@ -46,7 +46,12 @@ ToggleSwitch.propTypes = {
   /**
    * onChange of border
    */
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  /**
+   * labelClassName
+   */
+  labelClassName: PropTypes.string
+
 }
 
 ToggleSwitch.defaultProps = {
@@ -55,7 +60,8 @@ ToggleSwitch.defaultProps = {
   errorMessage: '',
   checked: false,
   disabled: false,
-  onChange: () => {}
+  onChange: () => {},
+  labelClassName: ''
 }
 
 export default ToggleSwitch

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

@@ -1,5 +1,5 @@
 .container {
-  @apply flex w-full h-10 items-center;
+  @apply flex w-full h-10 items-center gap-x-2;
 }
 .switch {
   @apply relative inline-block w-[50px] h-[24px] cursor-pointer;
@@ -13,7 +13,7 @@
   -webkit-transition: .4s;
   transition: .4s;
 }
-.label {
+.defaultLabel {
   @apply px-2 text-xs font-normal text-main-dark-blue;
 }
 .slider:before {

package/src/components/icons/AddIcon.jsx

@@ -3,8 +3,11 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const AddIcon = ({ color, size }) => {
-  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+const AddIcon = ({ color, size, disabled }) => {
+  let className = `${styles.svgClassName} ` + styles[`${color}`]
+  if (disabled) {
+    className += ` ${styles.iconDisabled}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -68,12 +71,16 @@ AddIcon.propTypes = {
   /**
    * Size
    */
-  size: PropTypes.oneOf(SIZES)
+  size: PropTypes.oneOf(SIZES),
+  /**
+   * disabled
+   */
+  disabled: PropTypes.bool
 }
-
 AddIcon.defaultProps = {
   color: MAIN_DARK_BLUE,
-  size: MEDIUM
+  size: MEDIUM,
+  disabled: false
 }
 
 export default AddIcon

package/src/components/icons/AlertIcon.jsx

@@ -3,8 +3,11 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, ERROR_RED } from '../constants'
 
-const AlertIcon = ({ color, size }) => {
-  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+const AlertIcon = ({ color, size, disabled }) => {
+  let className = `${styles.svgClassName} ` + styles[`${color}`]
+  if (disabled) {
+    className += ` ${styles.iconDisabled}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -71,12 +74,16 @@ AlertIcon.propTypes = {
   /**
    * Size
    */
-  size: PropTypes.oneOf(SIZES)
+  size: PropTypes.oneOf(SIZES),
+  /**
+   * disabled
+   */
+  disabled: PropTypes.bool
 }
-
 AlertIcon.defaultProps = {
   color: ERROR_RED,
-  size: MEDIUM
+  size: MEDIUM,
+  disabled: false
 }
 
 export default AlertIcon