@platformatic/ui-components 0.4.0 → 0.5.1

package/src/components/icons/CheckListIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const CheckListIcon = ({ color, size, disabled, inactive }) => {
+const CheckListIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -103,11 +108,5 @@ CheckListIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-CheckListIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default CheckListIcon

package/src/components/icons/CircleAddIcon.jsx

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

package/src/components/icons/CircleArrowLeftIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const CircleArrowLeftIcon = ({ color, size, disabled, inactive }) => {
+const CircleArrowLeftIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -101,11 +106,5 @@ CircleArrowLeftIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-CircleArrowLeftIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default CircleArrowLeftIcon

package/src/components/icons/CircleArrowRightIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const CircleArrowRightIcon = ({ color, size, disabled, inactive }) => {
+const CircleArrowRightIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -104,11 +109,5 @@ CircleArrowRightIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-CircleArrowRightIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default CircleArrowRightIcon

package/src/components/icons/CircleCheckMarkButtonIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, MEDIUM, MAIN_DARK_BLUE } from '../constants'
 
-const CircleCheckMarkButtonIcon = ({ color, size, disabled, inactive }) => {
+const CircleCheckMarkButtonIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -47,11 +52,4 @@ CircleCheckMarkButtonIcon.propTypes = {
   size: PropTypes.oneOf([MEDIUM])
 }
 
-CircleCheckMarkButtonIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
-
 export default CircleCheckMarkButtonIcon

package/src/components/icons/CircleCheckMarkFullIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, MEDIUM, MAIN_DARK_BLUE } from '../constants'
 
-const CircleCheckMarkFullIcon = ({ color, size, disabled, inactive }) => {
+const CircleCheckMarkFullIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = styles.svgClassName
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -55,11 +60,5 @@ CircleCheckMarkFullIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-CircleCheckMarkFullIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default CircleCheckMarkFullIcon

package/src/components/icons/CircleCheckMarkIcon.jsx

@@ -3,7 +3,13 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const CircleCheckMarkIcon = ({ color, size, checked, disabled, inactive }) => {
+const CircleCheckMarkIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  checked = true,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -84,10 +90,5 @@ CircleCheckMarkIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-CircleCheckMarkIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  checked: true
-}
 
 export default CircleCheckMarkIcon

package/src/components/icons/CircleCloseHoverIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, MEDIUM, MAIN_DARK_BLUE } from '../constants'
 
-const CircleCloseHoverIcon = ({ color, size, disabled, inactive }) => {
+const CircleCloseHoverIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -74,11 +79,5 @@ CircleCloseHoverIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-CircleCloseHoverIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default CircleCloseHoverIcon

package/src/components/icons/CircleCloseIcon.jsx

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

package/src/components/icons/CircleCopyPasteIcon.jsx

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

package/src/components/icons/CircleDownloadIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, MEDIUM, MAIN_DARK_BLUE } from '../constants'
 
-const CircleDownloadIcon = ({ color, size, disabled, inactive }) => {
+const CircleDownloadIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -56,11 +61,5 @@ CircleDownloadIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-CircleDownloadIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default CircleDownloadIcon

package/src/components/icons/CircleEditIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MAIN_DARK_BLUE, MEDIUM } from '../constants'
 
-const CircleEditIcon = ({ color, size, disabled, inactive }) => {
+const CircleEditIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = SMALL,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -76,11 +81,5 @@ CircleEditIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-CircleEditIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: SMALL,
-  disabled: false,
-  inactive: false
-}
 
 export default CircleEditIcon

package/src/components/icons/CircleExclamationIcon.jsx

@@ -3,7 +3,13 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const CircleExclamationIcon = ({ color, size, tip, disabled, inactive }) => {
+const CircleExclamationIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  tip = '',
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -90,10 +96,4 @@ CircleExclamationIcon.propTypes = {
   tip: PropTypes.string
 }
 
-CircleExclamationIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  tip: ''
-}
-
 export default CircleExclamationIcon

package/src/components/icons/CircleFullIcon.jsx

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

package/src/components/icons/CircleGearIcon.jsx

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

package/src/components/icons/CirclePlayIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const CirclePlayIcon = ({ color, size, disabled, inactive }) => {
+const CirclePlayIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -88,11 +93,5 @@ CirclePlayIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-CirclePlayIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default CirclePlayIcon

package/src/components/icons/CircleRestartIcon.jsx

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

package/src/components/icons/CircleStopIcon.jsx

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

package/src/components/icons/CircleSubtractIcon.jsx

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

package/src/components/icons/CircleTwoArrowsDownIcon.jsx

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

package/src/components/icons/CircleTwoArrowsUpIcon.jsx

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

package/src/components/icons/CloseIcon.jsx

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

package/src/components/icons/CloudIcon.jsx

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

package/src/components/icons/CodeTestingIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const CodeTestingIcon = ({ color, size, disabled, inactive }) => {
+const CodeTestingIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -109,11 +114,5 @@ CodeTestingIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-CodeTestingIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default CodeTestingIcon

package/src/components/icons/ComputerIcon.jsx

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

package/src/components/icons/ConfigureDatabaseIcon.jsx

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