@platformatic/ui-components 0.4.0 → 0.5.1

package/src/components/icons/AppEditIcon.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 AppEditIcon = ({ color, size, disabled, inactive }) => {
+const AppEditIcon = ({
+  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 @@ AppEditIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-AppEditIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default AppEditIcon

package/src/components/icons/AppEmptyIcon.jsx

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

package/src/components/icons/AppIcon.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 AppIcon = ({ color, size, disabled, inactive }) => {
+const AppIcon = ({
+  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 @@ AppIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-AppIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default AppIcon

package/src/components/icons/AppListIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, MEDIUM, EXTRA_LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const AppListIcon = ({ color, size, disabled, inactive }) => {
+const AppListIcon = ({
+  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 @@ AppListIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-AppListIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default AppListIcon

package/src/components/icons/AppSettingsIcon.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 AppSettingsIcon = ({ color, size, disabled, inactive }) => {
+const AppSettingsIcon = ({
+  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 @@ AppSettingsIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-AppSettingsIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default AppSettingsIcon

package/src/components/icons/AppWorkspace.jsx

@@ -1,13 +1,21 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-import { COLORS_ICON, LARGE, MEDIUM, SIZES, SMALL } from '../constants'
+import { COLORS_ICON, LARGE, MAIN_DARK_BLUE, MEDIUM, SIZES, SMALL } from '../constants'
 
-const AppWorkspace = ({ color, size, disabled }) => {
+const AppWorkspace = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -89,9 +97,4 @@ AppWorkspace.propTypes = {
   size: PropTypes.oneOf(SIZES)
 }
 
-AppWorkspace.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
-}
-
 export default AppWorkspace

package/src/components/icons/ApplicationTypeIcon.jsx

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

package/src/components/icons/ArrowDownFullIcon.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 ArrowDownFullIcon = ({ color, size, disabled, inactive }) => {
+const ArrowDownFullIcon = ({
+  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 @@ ArrowDownFullIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-ArrowDownFullIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default ArrowDownFullIcon

package/src/components/icons/ArrowDownIcon.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 ArrowDownIcon = ({ color, size, disabled, inactive }) => {
+const ArrowDownIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -81,11 +86,5 @@ ArrowDownIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-ArrowDownIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default ArrowDownIcon

package/src/components/icons/ArrowLeftIcon.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 ArrowLeftIcon = ({ color, size, disabled, inactive }) => {
+const ArrowLeftIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -81,11 +86,5 @@ ArrowLeftIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-ArrowLeftIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default ArrowLeftIcon

package/src/components/icons/ArrowLongLeftIcon.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 ArrowLongLeftIcon = ({ color, size, disabled, inactive }) => {
+const ArrowLongLeftIcon = ({
+  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 @@ ArrowLongLeftIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-ArrowLongLeftIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default ArrowLongLeftIcon

package/src/components/icons/ArrowLongRightIcon.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 ArrowLongRightIcon = ({ color, size, disabled, inactive }) => {
+const ArrowLongRightIcon = ({
+  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 @@ ArrowLongRightIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-ArrowLongRightIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default ArrowLongRightIcon

package/src/components/icons/ArrowRightIcon.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 ArrowRightIcon = ({ color, size, disabled, inactive }) => {
+const ArrowRightIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -81,11 +86,5 @@ ArrowRightIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-ArrowRightIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default ArrowRightIcon

package/src/components/icons/ArrowUpIcon.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 ArrowUpIcon = ({ color, size, disabled, inactive }) => {
+const ArrowUpIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -81,11 +86,5 @@ ArrowUpIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-ArrowUpIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default ArrowUpIcon

package/src/components/icons/BellIcon.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 BellIcon = ({ color, size, disabled, inactive }) => {
+const BellIcon = ({
+  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 @@ BellIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-BellIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default BellIcon

package/src/components/icons/BillingIcon.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 BillingIcon = ({ color, size, disabled, inactive }) => {
+const BillingIcon = ({
+  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 @@ BillingIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-BillingIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default BillingIcon

package/src/components/icons/BranchIcon.jsx

@@ -0,0 +1,102 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
+
+const BranchIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
+  let className = `${styles.svgClassName} ` + styles[`${color}`]
+  if (disabled) {
+    className += ` ${styles.iconDisabled}`
+  }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
+  let icon = <></>
+
+  switch (size) {
+    case SMALL:
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx='3.8001' cy='4.8' r='1.8' transform='rotate(90 3.8001 4.8)' stroke='none' />
+          <circle cx='12.2' cy='4.8' r='1.8' transform='rotate(90 12.2 4.8)' stroke='none' />
+          <line x1='10.3999' y1='4.69995' x2='5.5999' y2='4.69995' stroke='none' />
+          <circle cx='11.8001' cy='10.8' r='1.8' transform='rotate(90 11.8001 10.8)' stroke='none' />
+          <path d='M6 5V5C7.10457 5 8 5.89543 8 7L8 9C8 10.1046 8.89543 11 10 11V11' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case MEDIUM:
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx='5.6999' cy='7.2' r='2.7' transform='rotate(90 5.6999 7.2)' stroke='none' strokeWidth={1.5} />
+          <circle cx='18.3' cy='7.2' r='2.7' transform='rotate(90 18.3 7.2)' stroke='none' strokeWidth={1.5} />
+          <line x1='15.6001' y1='7.05005' x2='8.4001' y2='7.05005' stroke='none' strokeWidth={1.5} />
+          <circle cx='17.6999' cy='16.1999' r='2.7' transform='rotate(90 17.6999 16.1999)' stroke='none' strokeWidth={1.5} />
+          <path d='M8.99951 7.49988V7.49988C10.6564 7.49988 11.9995 8.84303 11.9995 10.4999L11.9995 13.4999C11.9995 15.1567 13.3427 16.4999 14.9995 16.4999V16.4999' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case LARGE:
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx='9.5' cy='12' r='4.5' transform='rotate(90 9.5 12)' stroke='none' strokeWidth={2} />
+          <circle cx='30.5' cy='12' r='4.5' transform='rotate(90 30.5 12)' stroke='none' strokeWidth={2} />
+          <line x1='26' y1='11.5' x2='14' y2='11.5' stroke='none' strokeWidth={2} />
+          <circle cx='29.5' cy='26.9999' r='4.5' transform='rotate(90 29.5 26.9999)' stroke='none' strokeWidth={2} />
+          <path d='M14.9995 12.4999V12.4999C17.7609 12.4999 19.9995 14.7385 19.9995 17.4999L19.9995 22.4999C19.9995 25.2613 22.2381 27.4999 24.9995 27.4999V27.4999' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+BranchIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES),
+  /**
+   * disabled
+   */
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
+}
+
+export default BranchIcon

package/src/components/icons/BuiltInLoggingIcon.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 BuiltInLoggingIcon = ({ color, size, disabled, inactive }) => {
+const BuiltInLoggingIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -112,11 +117,5 @@ BuiltInLoggingIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-BuiltInLoggingIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default BuiltInLoggingIcon

package/src/components/icons/CLIIcon.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 CLIIcon = ({ color, size, disabled, inactive }) => {
+const CLIIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -105,11 +110,5 @@ CLIIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-CLIIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default CLIIcon

package/src/components/icons/Calendar1DayIcon.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 Calendar1DayIcon = ({ color, size, disabled, inactive }) => {
+const Calendar1DayIcon = ({
+  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 @@ Calendar1DayIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-Calendar1DayIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default Calendar1DayIcon

package/src/components/icons/Calendar7DaysIcon.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 Calendar7DaysIcon = ({ color, size, disabled, inactive }) => {
+const Calendar7DaysIcon = ({
+  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 @@ Calendar7DaysIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-Calendar7DaysIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default Calendar7DaysIcon

package/src/components/icons/CalendarIcon.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 CalendarIcon = ({ color, size, disabled, inactive }) => {
+const CalendarIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -108,11 +113,5 @@ CalendarIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-CalendarIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default CalendarIcon