@platformatic/ui-components 0.4.0 → 0.5.1

package/src/components/icons/MetricsLogsIcon.jsx

@@ -0,0 +1,124 @@
+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 MetricsLogsIcon = ({
+  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 = <></>
+  const filledClassName = styles[`filled-${color}`]
+
+  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}
+        >
+          <rect x='3.90918' y='4.84204' width='1.90909' height='6.63159' rx='0.5' stroke='none' />
+          <path d='M7.72705 5.78938V3.44727C7.72705 3.17112 7.95091 2.94727 8.22705 2.94727H9.13614C9.41229 2.94727 9.63614 3.17112 9.63614 3.44727V5.78938' stroke='none' strokeLinecap='round' />
+          <path d='M11.5909 5.5L11.552 2.5065C11.5484 2.22784 11.7733 2 12.052 2H12.9609C13.2345 2 13.4573 2.21991 13.4608 2.49349L13.5 5.5' stroke='none' strokeLinecap='round' />
+          <path d='M2 2V13.3684H5.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <rect x='7' y='7' width='7' height='7' rx='1' stroke='none' />
+          <path d='M7 8.75H14' stroke='none' />
+          <circle cx='7.87492' cy='7.87492' r='0.291667' fill='none' className={filledClassName} />
+          <circle cx='8.74992' cy='7.87492' r='0.291667' fill='none' className={filledClassName} />
+          <circle cx='9.62492' cy='7.87492' r='0.291667' fill='none' className={filledClassName} />
+          <path d='M8.16675 9.91675H11.0834' stroke='none' strokeLinecap='round' />
+          <path d='M8.75 11.0833H12.8333' stroke='none' strokeLinecap='round' />
+          <path d='M8.75 12.25H12.8333' stroke='none' strokeLinecap='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}
+        >
+          <rect x='5.86377' y='7.26318' width='2.86364' height='9.94739' rx='0.5' stroke='none' strokeWidth={1.5} />
+          <path d='M11.5906 8.68431V4.92114C11.5906 4.645 11.8144 4.42114 12.0906 4.42114H13.9542C14.2304 4.42114 14.4542 4.645 14.4542 4.92114V8.68431' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <path d='M17.3864 8.25L17.3247 3.5065C17.3211 3.22784 17.546 3 17.8247 3H19.6881C19.9617 3 20.1845 3.21991 20.1881 3.49349L20.25 8.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <path d='M3 3V20.0527H8.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <rect x='10.5' y='10.5' width='10.5' height='10.5' rx='1' stroke='none' strokeWidth={1.5} />
+          <path d='M10.5 13.125H21' stroke='none' strokeWidth={1.5} />
+          <circle cx='11.8125' cy='11.8125' r='0.4375' fill='none' className={filledClassName} />
+          <circle cx='13.125' cy='11.8125' r='0.4375' fill='none' className={filledClassName} />
+          <circle cx='14.4375' cy='11.8125' r='0.4375' fill='none' className={filledClassName} />
+          <path d='M12.25 14.875H16.625' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <path d='M13.125 16.625H19.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <path d='M13.125 18.375H19.25' stroke='none' strokeWidth={1.5} strokeLinecap='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}
+        >
+          <rect x='9.77295' y='12.1052' width='4.77273' height='16.579' rx='0.5' stroke='none' strokeWidth={2} />
+          <path d='M19.3176 14.4737V7.86841C19.3176 7.59227 19.5415 7.36841 19.8176 7.36841H23.5904C23.8665 7.36841 24.0904 7.59227 24.0904 7.86841V14.4737' stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M28.9775 13.75L28.8704 5.5065C28.8667 5.22784 29.0916 5 29.3703 5H33.1428C33.4164 5 33.6392 5.21991 33.6427 5.49349L33.7502 13.75' stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M5 5V33.4211H13.75' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <rect x='17.5' y='17.5' width='17.5' height='17.5' rx='1' stroke='none' strokeWidth={2} />
+          <path d='M17.5 21.875H35' stroke='none' strokeWidth={2} />
+          <circle cx='19.6874' cy='19.6874' r='0.729167' fill='none' className={filledClassName} />
+          <circle cx='21.8749' cy='19.6874' r='0.729167' fill='none' className={filledClassName} />
+          <circle cx='24.0624' cy='19.6874' r='0.729167' fill='none' className={filledClassName} />
+          <path d='M20.4167 24.7917H27.7084' stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M21.875 27.7083H32.0833' stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M21.875 30.625H32.0833' stroke='none' strokeWidth={2} strokeLinecap='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+MetricsLogsIcon.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 MetricsLogsIcon

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

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

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

package/src/components/icons/NodeJSMetricsIcon.jsx

@@ -0,0 +1,106 @@
+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 NodeJSMetricsIcon = ({
+  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 = <></>
+  const filledClassName = styles[`filled-${color}`]
+
+  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}
+        >
+          <rect x='3.5' y='4.25' width='1.5' height='5.25' rx='0.5' stroke='none' />
+          <path d='M6.5 7.5V5.5C6.5 5.22386 6.72386 5 7 5H7.5C7.77614 5 8 5.22386 8 5.5V6' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M9.5 5.5V2.5C9.5 2.22386 9.72386 2 10 2H10.5C10.7761 2 11 2.22386 11 2.5V5' stroke='none' strokeLinecap='round' />
+          <path d='M2 2V11H6' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M10.1826 6.08565C10.3761 5.97145 10.6227 5.97145 10.8114 6.08565L13.7001 7.77602C13.8803 7.88143 14.0012 8.091 14 8.30684V11.6951C14 11.9197 13.8682 12.1343 13.6783 12.2372L10.8053 13.9188C10.6046 14.033 10.3603 14.0267 10.1669 13.9L9.30471 13.383C9.24546 13.3466 9.18017 13.3177 9.13785 13.2587C9.17412 13.2073 9.23942 13.201 9.29262 13.1784C9.41233 13.1383 9.52237 13.078 9.6324 13.014C9.66021 12.9939 9.69407 13.0015 9.72067 13.019L10.4559 13.4608C10.5079 13.4921 10.5611 13.4507 10.607 13.4244L13.428 11.7717C13.4631 11.7541 13.4825 11.7164 13.4788 11.6763V8.3219C13.4825 8.27673 13.4583 8.23531 13.4184 8.21774L10.5538 6.54244C10.5199 6.51859 10.4752 6.51859 10.4413 6.54244L7.5792 8.22025C7.54051 8.23908 7.51391 8.27924 7.51874 8.32441V11.68C7.51511 11.7202 7.53567 11.7566 7.57074 11.7742L8.33494 12.2222C8.47884 12.3025 8.65538 12.3477 8.81257 12.2887C8.95405 12.2335 9.04837 12.0917 9.04716 11.9348V8.59924C9.04474 8.5503 9.08948 8.50888 9.13543 8.5139H9.50302C9.55139 8.51265 9.58887 8.56536 9.58283 8.61555V11.9724C9.58283 12.2711 9.46433 12.5949 9.1983 12.7417C8.87061 12.9174 8.46554 12.881 8.14268 12.7116L7.32043 12.2397C7.12817 12.1381 7 11.921 7 11.6964V8.3081C7.00121 8.08347 7.12092 7.87766 7.30955 7.771L10.1826 6.08565ZM11.0157 8.43484C11.4329 8.40975 11.8803 8.41853 12.2563 8.63187C12.5478 8.795 12.7086 9.13885 12.7134 9.47517C12.705 9.52034 12.6602 9.54544 12.6179 9.54168C12.497 9.54168 12.3761 9.54293 12.2539 9.54168C12.2019 9.54419 12.1729 9.49399 12.1657 9.44756C12.1306 9.28693 12.0459 9.12756 11.9008 9.05101C11.6771 8.9343 11.4184 8.94057 11.1741 8.94308C10.9964 8.95312 10.8053 8.96944 10.6542 9.07736C10.5381 9.16018 10.503 9.32834 10.5441 9.45885C10.5828 9.55548 10.6904 9.5856 10.7775 9.61446C11.2805 9.75125 11.8138 9.73995 12.3083 9.9169C12.5127 9.98968 12.7122 10.1327 12.7823 10.3549C12.8742 10.6523 12.8343 11.0087 12.63 11.2471C12.4643 11.4441 12.2237 11.5483 11.9831 11.6085C11.6626 11.6826 11.3313 11.6838 11.006 11.6512C10.7001 11.6148 10.3833 11.532 10.1475 11.3161C9.94558 11.1342 9.84764 10.8518 9.85731 10.5782C9.85973 10.5318 9.90447 10.5004 9.94679 10.5042H10.3095C10.3579 10.5004 10.3942 10.5444 10.3966 10.592C10.4196 10.7426 10.474 10.9058 10.6034 10.9936C10.8513 11.1593 11.1632 11.148 11.4462 11.153C11.682 11.1417 11.9456 11.1392 12.1378 10.9773C12.2394 10.8857 12.2696 10.7313 12.2418 10.5983C12.2116 10.4866 12.0967 10.4339 12 10.3975C11.503 10.2344 10.9637 10.2934 10.4716 10.1089C10.2721 10.0361 10.0786 9.89682 10.0024 9.68348C9.8948 9.3823 9.94437 9.00959 10.1705 8.77869C10.3881 8.54904 10.7074 8.45994 11.0097 8.42857L11.0145 8.43484H11.0157Z' fill='none' className={filledClassName} stroke='none' strokeWidth={0.2} />
+
+        </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}
+        >
+          <rect x='5.24976' y='6.375' width='2.25' height='7.875' rx='0.75' stroke='none' strokeWidth={1.5} />
+          <path d='M9.75 11.25V8.25C9.75 7.83579 10.0858 7.5 10.5 7.5H11.25C11.6642 7.5 12 7.83579 12 8.25V9' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M14.2502 8.25V3.75C14.2502 3.33579 14.586 3 15.0002 3H15.7502C16.1645 3 16.5002 3.33579 16.5002 3.75V7.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <path d='M3 3V16.5H9' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M15.2739 9.12847C15.5641 8.95718 15.9341 8.95718 16.217 9.12847L20.5502 11.664C20.8204 11.8221 21.0018 12.1365 21 12.4603V17.5427C21 17.8796 20.8023 18.2015 20.5175 18.3558L16.208 20.8782C15.9069 21.0495 15.5405 21.0401 15.2503 20.85L13.9571 20.0744C13.8682 20.0199 13.7702 19.9766 13.7068 19.8881C13.7612 19.8109 13.8591 19.8015 13.9389 19.7676C14.1185 19.7074 14.2836 19.617 14.4486 19.521C14.4903 19.4909 14.5411 19.5022 14.581 19.5286L15.6838 20.1912C15.7618 20.2382 15.8416 20.1761 15.9105 20.1366L20.1421 17.6575C20.1947 17.6311 20.2237 17.5747 20.2182 17.5144V12.4829C20.2237 12.4151 20.1874 12.353 20.1276 12.3266L15.8307 9.81365C15.7799 9.77789 15.7128 9.77789 15.662 9.81365L11.3688 12.3304C11.3108 12.3586 11.2709 12.4189 11.2781 12.4866V17.5201C11.2727 17.5803 11.3035 17.6349 11.3561 17.6613L12.5024 18.3333C12.7183 18.4537 12.9831 18.5215 13.2189 18.433C13.4311 18.3502 13.5725 18.1375 13.5707 17.9022V12.8989C13.5671 12.8254 13.6342 12.7633 13.7031 12.7709H14.2545C14.3271 12.769 14.3833 12.848 14.3742 12.9233V17.9587C14.3742 18.4067 14.1965 18.8923 13.7975 19.1126C13.3059 19.3761 12.6983 19.3215 12.214 19.0674L10.9807 18.3596C10.6923 18.2071 10.5 17.8815 10.5 17.5445V12.4621C10.5018 12.1252 10.6814 11.8165 10.9643 11.6565L15.2739 9.12847ZM16.5236 12.6523C17.1493 12.6146 17.8204 12.6278 18.3845 12.9478C18.8216 13.1925 19.0629 13.7083 19.0701 14.2128C19.0574 14.2805 18.9903 14.3182 18.9268 14.3125C18.7455 14.3125 18.5641 14.3144 18.3809 14.3125C18.3029 14.3163 18.2594 14.241 18.2485 14.1713C18.1959 13.9304 18.0689 13.6913 17.8513 13.5765C17.5157 13.4014 17.1276 13.4109 16.7612 13.4146C16.4946 13.4297 16.208 13.4542 15.9813 13.616C15.8071 13.7403 15.7545 13.9925 15.8162 14.1883C15.8742 14.3332 16.0357 14.3784 16.1663 14.4217C16.9208 14.6269 17.7207 14.6099 18.4625 14.8753C18.769 14.9845 19.0683 15.1991 19.1735 15.5323C19.3114 15.9784 19.2515 16.513 18.945 16.8707C18.6965 17.1662 18.3355 17.3224 17.9746 17.4128C17.4939 17.5238 16.997 17.5257 16.5091 17.4768C16.0502 17.4222 15.575 17.298 15.2213 16.9742C14.9184 16.7012 14.7715 16.2777 14.786 15.8674C14.7896 15.7977 14.8567 15.7506 14.9202 15.7563H15.4643C15.5369 15.7506 15.5913 15.8165 15.5949 15.8881C15.6294 16.1139 15.711 16.3587 15.9051 16.4904C16.2769 16.7389 16.7449 16.7219 17.1693 16.7295C17.523 16.7125 17.9184 16.7088 18.2068 16.4659C18.3591 16.3285 18.4045 16.097 18.3627 15.8975C18.3174 15.7299 18.1451 15.6509 18 15.5963C17.2545 15.3516 16.4456 15.4401 15.7074 15.1633C15.4081 15.0542 15.1179 14.8452 15.0036 14.5252C14.8422 14.0735 14.9166 13.5144 15.2557 13.168C15.5822 12.8236 16.0611 12.6899 16.5145 12.6429L16.5218 12.6523H16.5236Z' fill='none' className={filledClassName} stroke='none' strokeWidth={0.3} />
+
+        </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}
+        >
+          <rect x='8.74976' y='10.625' width='3.75' height='13.125' rx='1.25' stroke='none' strokeWidth={2} />
+          <path d='M16.25 18.75V13.75C16.25 13.0596 16.8096 12.5 17.5 12.5H18.75C19.4404 12.5 20 13.0596 20 13.75V15' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M23.7502 13.75V6.25C23.7502 5.55964 24.3099 5 25.0002 5H26.2502C26.9406 5 27.5002 5.55964 27.5002 6.25V12.5' stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M5 5V27.5H15' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M25.4565 15.2141C25.9401 14.9286 26.5568 14.9286 27.0284 15.2141L34.2503 19.44C34.7007 19.7036 35.003 20.2275 35 20.7671V29.2378C35 29.7993 34.6705 30.3358 34.1959 30.5931L27.0133 34.797C26.5115 35.0825 25.9008 35.0668 25.4172 34.75L23.2618 33.4574C23.1137 33.3664 22.9504 33.2943 22.8446 33.1468C22.9353 33.0182 23.0985 33.0025 23.2316 32.946C23.5308 32.8456 23.8059 32.6951 24.081 32.5351C24.1505 32.4849 24.2352 32.5037 24.3017 32.5476L26.1397 33.6519C26.2696 33.7304 26.4026 33.6268 26.5175 33.5609L33.5701 29.4291C33.6578 29.3852 33.7061 29.2911 33.6971 29.1907V20.8048C33.7061 20.6918 33.6457 20.5883 33.5459 20.5444L26.3845 16.3561C26.2999 16.2965 26.188 16.2965 26.1034 16.3561L18.948 20.5506C18.8513 20.5977 18.7848 20.6981 18.7969 20.811V29.2001C18.7878 29.3005 18.8392 29.3915 18.9268 29.4354L20.8374 30.5554C21.1971 30.7562 21.6384 30.8692 22.0314 30.7217C22.3851 30.5837 22.6209 30.2291 22.6179 29.837V21.4981C22.6118 21.3757 22.7237 21.2722 22.8386 21.2848H23.7575C23.8785 21.2816 23.9722 21.4134 23.9571 21.5389V29.9311C23.9571 30.6778 23.6608 31.4872 22.9958 31.8543C22.1765 32.2935 21.1638 32.2025 20.3567 31.779L18.3011 30.5993C17.8204 30.3452 17.5 29.8025 17.5 29.2409V20.7702C17.503 20.2087 17.8023 19.6942 18.2739 19.4275L25.4565 15.2141ZM27.5393 21.0871C28.5822 21.0244 29.7007 21.0463 30.6409 21.5797C31.3694 21.9875 31.7714 22.8471 31.7835 23.6879C31.7624 23.8009 31.6505 23.8636 31.5447 23.8542C31.2424 23.8542 30.9401 23.8573 30.6348 23.8542C30.5048 23.8605 30.4323 23.735 30.4141 23.6189C30.3265 23.2173 30.1149 22.8189 29.7521 22.6275C29.1929 22.3357 28.5459 22.3514 27.9353 22.3577C27.4909 22.3828 27.0133 22.4236 26.6354 22.6934C26.3452 22.9005 26.2575 23.3209 26.3603 23.6471C26.4571 23.8887 26.7261 23.964 26.9438 24.0362C28.2013 24.3781 29.5344 24.3499 30.7708 24.7922C31.2817 24.9742 31.7805 25.3319 31.9558 25.8872C32.1856 26.6307 32.0858 27.5217 31.575 28.1178C31.1608 28.6103 30.5592 28.8707 29.9577 29.0213C29.1566 29.2064 28.3283 29.2095 27.5151 29.128C26.7503 29.037 25.9583 28.8299 25.3688 28.2903C24.864 27.8354 24.6191 27.1295 24.6433 26.4456C24.6493 26.3295 24.7612 26.2511 24.867 26.2605H25.7739C25.8948 26.2511 25.9855 26.3609 25.9915 26.4801C26.049 26.8566 26.185 27.2644 26.5085 27.484C27.1282 27.8981 27.9081 27.8699 28.6155 27.8825C29.2049 27.8542 29.864 27.848 30.3446 27.4432C30.5985 27.2142 30.6741 26.8283 30.6046 26.4958C30.529 26.2166 30.2418 26.0848 30 25.9938C28.7575 25.586 27.4093 25.7334 26.1789 25.2722C25.6802 25.0903 25.1965 24.742 25.006 24.2087C24.737 23.4558 24.8609 22.524 25.4262 21.9467C25.9704 21.3726 26.7684 21.1499 27.5242 21.0714L27.5363 21.0871H27.5393Z' fill='none' className={filledClassName} stroke='none' strokeWidth={0.5} />
+
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+NodeJSMetricsIcon.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 NodeJSMetricsIcon

package/src/components/icons/NotCompliantServiceIcon.jsx

@@ -0,0 +1,103 @@
+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 NotCompliantServiceIcon = ({
+  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 = <></>
+  const filledClassName = styles[`filled-${color}`]
+
+  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}
+        >
+          <path d='M8.85445 4.51968C8.81412 4.43803 8.82956 4.34087 8.89392 4.27392L9.29894 3.85098C9.38217 3.76443 9.38132 3.63134 9.29636 3.54561L8.53609 2.77975C8.44256 2.68503 8.28467 2.68585 8.192 2.78056L7.87708 3.10226C7.81186 3.16921 7.71061 3.19126 7.62137 3.15941L6.96578 2.92345C6.87397 2.89079 6.81304 2.80669 6.81304 2.71361V2.22453C6.81304 2.10043 6.7075 2 6.57707 2H5.42293C5.2925 2 5.18696 2.10043 5.18696 2.22453V2.71361C5.18696 2.80669 5.12603 2.89079 5.03422 2.92345L4.37863 3.15941C4.28939 3.19126 4.18814 3.16921 4.12292 3.10226L3.808 2.78056C3.71533 2.68585 3.55744 2.68585 3.46391 2.77975L2.70364 3.54561C2.61868 3.63053 2.61783 3.76443 2.70106 3.85098L3.10608 4.27392C3.16958 4.34087 3.18588 4.43722 3.14555 4.51968L2.87096 5.08306C2.83235 5.16307 2.74826 5.2137 2.65644 5.2137H2.23598C2.10555 5.2137 2 5.31412 2 5.43823V6.38372C2 6.50783 2.10555 6.60826 2.23598 6.60826H2.67704C2.77915 6.60826 2.87011 6.67113 2.90186 6.76339L3.12496 7.41413C3.1507 7.49088 3.13182 7.57498 3.07519 7.63458L2.71222 8.01588C2.62383 8.10896 2.63241 8.25348 2.73195 8.33594L3.56859 9.03241C3.6647 9.11242 3.81058 9.10508 3.89724 9.01608L4.189 8.71724C4.25249 8.65111 4.35117 8.62825 4.43956 8.65764' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M7.29219 6.58437L6 4L4.5 7H7' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <circle cx='10' cy='10' r='4' stroke='none' />
+          <path d='M10 7.5V10.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <circle cx='10' cy='12' r='0.5' fill='none' className={filledClassName} />
+        </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}
+        >
+          <path d='M13.2817 6.77952C13.2212 6.65705 13.2443 6.51131 13.3409 6.41088L13.9484 5.77647C14.0733 5.64664 14.072 5.44701 13.9445 5.31842L12.8041 4.16962C12.6638 4.02755 12.427 4.02877 12.288 4.17084L11.8156 4.65339C11.7178 4.75382 11.5659 4.78688 11.432 4.73912L10.4487 4.38517C10.311 4.33618 10.2196 4.21003 10.2196 4.07042V3.3368C10.2196 3.15064 10.0612 3 9.8656 3H8.1344C7.93875 3 7.78044 3.15064 7.78044 3.3368V4.07042C7.78044 4.21003 7.68905 4.33618 7.55132 4.38517L6.56795 4.73912C6.43409 4.78688 6.28221 4.75382 6.18438 4.65339L5.712 4.17084C5.57299 4.02877 5.33616 4.02877 5.19586 4.16962L4.05545 5.31842C3.92803 5.44579 3.92674 5.64664 4.05159 5.77647L4.65912 6.41088C4.75437 6.51131 4.77883 6.65582 4.71833 6.77952L4.30645 7.62459C4.24853 7.74461 4.12239 7.82054 3.98466 7.82054H3.35396C3.15832 7.82054 3 7.97118 3 8.15734V9.57558C3 9.76174 3.15832 9.91238 3.35396 9.91238H4.01555C4.16872 9.91238 4.30516 10.0067 4.35278 10.1451L4.68744 11.1212C4.72605 11.2363 4.69774 11.3625 4.61279 11.4519L4.06833 12.0238C3.93575 12.1634 3.94862 12.3802 4.09793 12.5039L5.35289 13.5486C5.49705 13.6686 5.71586 13.6576 5.84587 13.5241L6.28349 13.0759C6.37874 12.9767 6.52676 12.9424 6.65934 12.9865' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M10.9383 9.87656L9 6L6.75 10.5H10.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <circle cx='15' cy='15' r='6' stroke='none' strokeWidth={1.5} />
+          <path d='M15 11.25V15.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <circle cx='15' cy='18' r='0.75' fill='none' className={filledClassName} />
+        </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}
+        >
+          <path d='M22.1361 11.2992C22.0353 11.0951 22.0739 10.8522 22.2348 10.6848L23.2473 9.62744C23.4554 9.41107 23.4533 9.07836 23.2409 8.86403L21.3402 6.94936C21.1064 6.71258 20.7117 6.71462 20.48 6.95141L19.6927 7.75565C19.5297 7.92303 19.2765 7.97814 19.0534 7.89853L17.4145 7.30862C17.1849 7.22697 17.0326 7.01672 17.0326 6.78403V5.56134C17.0326 5.25107 16.7687 5 16.4427 5H13.5573C13.2313 5 12.9674 5.25107 12.9674 5.56134V6.78403C12.9674 7.01672 12.8151 7.22697 12.5855 7.30862L10.9466 7.89853C10.7235 7.97814 10.4703 7.92303 10.3073 7.75565L9.52 6.95141C9.28832 6.71462 8.8936 6.71462 8.65977 6.94936L6.75909 8.86403C6.54671 9.07631 6.54457 9.41107 6.75265 9.62744L7.7652 10.6848C7.92395 10.8522 7.96471 11.093 7.86388 11.2992L7.17741 12.7076C7.08088 12.9077 6.87064 13.0342 6.6411 13.0342H5.58994C5.26386 13.0342 5 13.2853 5 13.5956V15.9593C5 16.2696 5.26386 16.5206 5.58994 16.5206H6.69259C6.94787 16.5206 7.17527 16.6778 7.25464 16.9085L7.8124 18.5353C7.87676 18.7272 7.82956 18.9374 7.68798 19.0865L6.78054 20.0397C6.55958 20.2724 6.58104 20.6337 6.82988 20.8399L8.92148 22.581C9.16175 22.7811 9.52644 22.7627 9.74311 22.5402L10.4725 21.7931C10.6312 21.6278 10.8779 21.5706 11.0989 21.6441' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M18.2305 16.4609L15 10L11.25 17.5H17.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <circle cx='25' cy='25' r='10' stroke='none' strokeWidth={2} />
+          <path d='M25 18.75V26.25' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <circle cx='25' cy='30' r='1.25' fill='none' className={filledClassName} />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+NotCompliantServiceIcon.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 NotCompliantServiceIcon

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

package/src/components/icons/OtherLogosGoogleIcon.jsx

@@ -0,0 +1,69 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, MAIN_DARK_BLUE } from '../constants'
+
+const OtherLogosGoogleIcon = ({
+  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={17}
+          viewBox='0 0 16 17'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M8.00134 16.4925C7.76873 16.5046 7.53662 16.4886 7.30537 16.4678C6.40269 16.3865 5.53635 16.1626 4.70974 15.7899C4.07464 15.5036 3.48287 15.1464 2.94498 14.7021C1.59293 13.5852 0.694186 12.1777 0.24771 10.4831C0.0962698 9.9079 0.0181621 9.32183 0.00281348 8.72639C-0.0355582 7.23047 0.318825 5.83372 1.05027 4.53054C1.0571 4.51827 1.06631 4.50736 1.07449 4.49594C1.24708 4.79554 1.41984 5.09513 1.59242 5.3949C2.06431 6.21478 2.53517 7.03517 3.00791 7.85436C3.35923 8.4631 3.71207 9.07098 4.06697 9.67766C4.14337 9.8082 4.20391 9.9488 4.30453 10.0647L4.30215 10.0642C4.30095 10.0763 4.30283 10.0856 4.31852 10.0834L4.31783 10.0819C4.30811 10.1069 4.32466 10.1235 4.33745 10.141C4.36763 10.1949 4.39986 10.2479 4.42783 10.3028C4.68143 10.7999 5.022 11.2274 5.45261 11.5823C5.76692 11.8411 6.11141 12.0509 6.48899 12.2058C6.65834 12.2753 6.83246 12.3275 7.00863 12.3769C7.24977 12.4444 7.49637 12.4831 7.74332 12.4977C8.12823 12.5206 8.51211 12.4873 8.88935 12.3989C9.6636 12.2176 10.3294 11.8447 10.8809 11.2711C10.9863 11.1613 11.0856 11.0456 11.1876 10.9326C11.2063 10.9652 11.178 10.9855 11.1652 11.0074C10.5015 12.1586 9.83653 13.3093 9.17245 14.4601C8.78157 15.1373 8.39171 15.8149 8.00134 16.4925Z' fill='#2A9B49' />
+          <path d='M4.30475 10.0647C4.20413 9.94883 4.14359 9.80823 4.06718 9.67769C3.71229 9.07101 3.35961 8.46313 3.00813 7.85439C2.53522 7.0352 2.06435 6.2148 1.59264 5.39492C1.42022 5.09516 1.24729 4.79556 1.07471 4.49597C1.25684 4.1611 1.47667 3.85128 1.71065 3.55151C2.02939 3.14302 2.38548 2.76844 2.77875 2.43238C3.53817 1.78343 4.38763 1.2853 5.33174 0.953836C6.12919 0.673669 6.95052 0.522509 7.79691 0.50257C8.40386 0.488425 9.00553 0.531541 9.59833 0.660036C11.9122 1.16158 13.6775 2.43357 14.905 4.45507C14.9122 4.467 14.917 4.48046 14.923 4.49307C14.8917 4.49358 14.8605 4.49461 14.8293 4.49461C12.6962 4.49478 10.5631 4.49495 8.42996 4.49546C8.38476 4.49546 8.33957 4.5004 8.29455 4.50296C8.28892 4.5033 8.28329 4.50432 8.27766 4.50415C7.01447 4.44075 5.93836 4.8564 5.06894 5.77734C4.40366 6.48219 4.06463 7.33411 3.99897 8.29475C3.98328 8.5238 3.99471 8.75573 4.02711 8.98631C4.07554 9.33277 4.15945 9.66832 4.28769 9.99331C4.29673 10.016 4.31515 10.0371 4.30509 10.0647H4.30475Z' fill='#DF382C' />
+          <path d='M8.29404 4.50309C8.33924 4.50054 8.38443 4.4956 8.42945 4.4956C10.5626 4.49508 12.6957 4.49491 14.8288 4.49474C14.86 4.49474 14.8912 4.49372 14.9224 4.49321C15.1341 4.8366 15.3022 5.2013 15.4482 5.57604C15.7917 6.45813 15.9762 7.37174 15.9979 8.31943C16.0258 9.54133 15.7838 10.7058 15.279 11.8173C15.2732 11.83 15.2654 11.842 15.2586 11.8542C15.1324 11.785 15.0048 11.7184 14.8802 11.6465C14.3486 11.3396 13.818 11.0311 13.2871 10.7233C12.9298 10.5163 12.5746 10.3055 12.2141 10.1042C12.0664 10.0217 11.9291 9.91914 11.768 9.86103C11.7702 9.85012 11.7712 9.8387 11.7749 9.82814C12.0057 9.16368 12.0746 8.48269 11.9361 7.79301C11.6319 6.27714 10.7423 5.25344 9.29426 4.71492C8.97177 4.59495 8.63427 4.54076 8.2937 4.50326L8.29404 4.50309Z' fill='#FABE0F' />
+          <path d='M11.7684 9.8611C11.9294 9.91921 12.0666 10.0218 12.2145 10.1043C12.575 10.3056 12.9303 10.5164 13.2875 10.7234C13.8184 11.0312 14.3492 11.3396 14.8806 11.6466C15.0052 11.7185 15.1328 11.7853 15.259 11.8543C15.1115 12.1994 14.9234 12.5225 14.7218 12.8378C14.4119 13.3225 14.0533 13.7693 13.6431 14.1723C12.4782 15.3167 11.0932 16.0456 9.48841 16.3547C9.06155 16.437 8.6311 16.4864 8.19588 16.4909C8.13108 16.4915 8.06644 16.5101 8.00146 16.4924C8.39183 15.815 8.78186 15.1372 9.17257 14.46C9.83682 13.309 10.5016 12.1585 11.1653 11.0073C11.178 10.9853 11.2064 10.9651 11.1877 10.9325L11.1867 10.9337C11.2249 10.9371 11.217 10.8974 11.2347 10.8819C11.23 10.8296 11.2736 10.8025 11.2982 10.7669C11.4924 10.4841 11.6413 10.1782 11.7684 9.86093V9.8611Z' fill='#FBC320' />
+          <path d='M4.31811 10.0821C4.33738 10.0976 4.3425 10.1177 4.33773 10.1412C4.32493 10.1237 4.30839 10.1071 4.31811 10.0821Z' fill='#DF382C' />
+          <path d='M4.3023 10.0642C4.32157 10.0589 4.31713 10.0738 4.31867 10.0835C4.30298 10.0857 4.3011 10.0763 4.3023 10.0642Z' fill='#DF382C' />
+          <path d='M11.1865 10.9339C11.1898 10.9047 11.2024 10.8843 11.2346 10.8821C11.2167 10.8976 11.2247 10.9373 11.1865 10.9339Z' fill='#2A9B49' />
+          <path d='M7.992 11.7498C6.18461 11.7422 4.91733 10.3415 4.76623 8.87249C4.66152 7.8551 4.96525 6.96467 5.67726 6.22471C6.23629 5.64376 6.92442 5.32286 7.72784 5.26117C8.66973 5.18891 9.50027 5.46687 10.1971 6.10457C10.8252 6.67939 11.1765 7.40094 11.2377 8.252C11.3054 9.19135 11.0171 10.0158 10.3806 10.7089C9.75147 11.394 8.87302 11.7536 7.99183 11.75L7.992 11.7498Z' fill='#1A73E7' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+OtherLogosGoogleIcon.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 OtherLogosGoogleIcon

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