@platformatic/ui-components 0.5.0 → 0.5.2

package/src/components/icons/DeploymentHistoryIcon.jsx

@@ -0,0 +1,118 @@
+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 DeploymentHistoryIcon = ({
+  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='7' y='6' width='7' height='7' rx='1' stroke='none' />
+          <path d='M10 8H12.5' stroke='none' strokeLinecap='round' />
+          <path d='M10 9.5H12.5' stroke='none' strokeLinecap='round' />
+          <path d='M10 11H12.5' stroke='none' strokeLinecap='round' />
+          <path d='M7.2821 5L7.2821 4.98418C7.2821 4.78938 7.2252 4.59882 7.1184 4.43591L5.93956 2.63781C5.74213 2.33666 5.3007 2.33666 5.10327 2.63781L3.92443 4.43591C3.81763 4.59882 3.76073 4.78957 3.76073 4.98437C3.76073 6.36226 3.76073 6.82617 3.76073 7.03551L2 9.13364L4.11282 9.13364L4.46496 9.97289L5.72684 9.97289' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M3.76025 11.2322L3.76025 12.9107' stroke='none' strokeLinecap='round' strokeLinejoin='bevel' />
+          <path d='M5.52197 12.0715L5.52197 13.75' stroke='none' strokeLinecap='round' strokeLinejoin='bevel' />
+          <circle cx='8.5' cy='8' r='0.5' fill='none' className={filledClassName} />
+          <circle cx='8.5' cy='9.5' r='0.5' fill='none' className={filledClassName} />
+          <circle cx='8.5' cy='11' 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}
+        >
+          <rect x='10.5' y='9' width='10.5' height='10.5' rx='1' stroke='none' strokeWidth={1.5} />
+          <path d='M15 12H18.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <path d='M15 14.25H18.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <path d='M15 16.5H18.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <path d='M10.9232 7.5L10.9232 7.32699C10.9232 7.13218 10.8663 6.94162 10.7594 6.77871L8.70027 3.63781C8.50284 3.33666 8.06141 3.33666 7.86397 3.63781L5.8048 6.77871C5.69799 6.94162 5.64109 7.13326 5.64109 7.32806C5.64109 9.51036 5.64109 10.2318 5.64109 10.5533L3 13.7005L6.16923 13.7005L6.69744 14.9593L8.59027 14.9593' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M5.64062 16.8481L5.64062 19.3659' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='bevel' />
+          <path d='M8.2832 18.1072L8.2832 20.6249' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='bevel' />
+          <circle cx='12.75' cy='12' r='0.75' fill='none' className={filledClassName} />
+          <circle cx='12.75' cy='14.25' r='0.75' fill='none' className={filledClassName} />
+          <circle cx='12.75' cy='16.5' 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}
+        >
+          <rect x='17.5' y='15' width='17.5' height='17.5' rx='1' stroke='none' strokeWidth={2} />
+          <path d='M25 20H31.25' stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M25 23.75H31.25' stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M25 27.5H31.25' stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M18.2053 12.5L18.2053 12.0126C18.2053 11.8178 18.1484 11.6272 18.0416 11.4643L14.2217 5.63781C14.0243 5.33666 13.5828 5.33666 13.3854 5.63781L9.56553 11.4643C9.45872 11.6272 9.40182 11.819 9.40182 12.0138C9.40182 15.8069 9.40182 17.0434 9.40182 17.5888L5 22.8341L10.2821 22.8341L11.1624 24.9322L14.3171 24.9322' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M9.40039 28.0801L9.40039 32.2763' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='bevel' />
+          <path d='M13.8047 30.1787L13.8047 34.375' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='bevel' />
+          <circle cx='21.25' cy='20' r='1.25' fill='none' className={filledClassName} />
+          <circle cx='21.25' cy='23.75' r='1.25' fill='none' className={filledClassName} />
+          <circle cx='21.25' cy='27.5' r='1.25' fill='none' className={filledClassName} />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+DeploymentHistoryIcon.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 DeploymentHistoryIcon

package/src/components/icons/EntrypointIcon.jsx

@@ -7,9 +7,16 @@ const EntrypointIcon = ({
   color = MAIN_DARK_BLUE,
   size = MEDIUM,
   disabled = false,
-  inactive = false
+  inactive = false,
+  addImportantToColor = false
 }) => {
-  let className = `${styles.svgClassName} ` + styles[`${color}`]
+  let className = `${styles.svgClassName} `
+  // this will be useful if the css is used inside some integrated part, like using icons inside other svg generator
+  if (!addImportantToColor) {
+    className += styles[`${color}`]
+  } else {
+    className += styles[`important-${color}`]
+  }
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
@@ -88,7 +95,11 @@ EntrypointIcon.propTypes = {
   /**
    * inactive
    */
-  inactive: PropTypes.bool
+  inactive: PropTypes.bool,
+  /**
+   * addImportantToColor
+   */
+  addImportantToColor: PropTypes.bool
 }
 
 export default EntrypointIcon

package/src/components/icons/ExpandIcon.jsx

@@ -7,9 +7,17 @@ const ExpandIcon = ({
   color = MAIN_DARK_BLUE,
   size = MEDIUM,
   disabled = false,
-  inactive = false
+  inactive = false,
+  addImportantToColor = false
 }) => {
-  let className = `${styles.svgClassName} ` + styles[`${color}`]
+  let className = `${styles.svgClassName} `
+  // this will be useful if the css is used inside some integrated part, like using icons inside other svg generator
+  if (!addImportantToColor) {
+    className += styles[`${color}`]
+  } else {
+    className += styles[`important-${color}`]
+  }
+
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
@@ -93,7 +101,11 @@ ExpandIcon.propTypes = {
   /**
    * inactive
    */
-  inactive: PropTypes.bool
+  inactive: PropTypes.bool,
+  /**
+   * addImportantToColor
+   */
+  addImportantToColor: PropTypes.bool
 }
 
 export default ExpandIcon

package/src/components/icons/FailureRateIcon.jsx

@@ -0,0 +1,104 @@
+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 FailureRateIcon = ({
+  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='M9.5 7L7 2L2 12H6' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M7 5.18188V8.3637' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <circle cx='6.99991' cy='10.1818' r='0.909091' fill='none' className={filledClassName} />
+          <circle cx='11' cy='11' r='3' stroke='none' />
+          <path d='M9.91191 11.9777L11.6543 10.0223H12.0881L10.3457 11.9777H9.91191ZM10.1343 11.0782C10.0103 11.0782 9.90097 11.0568 9.8062 11.014C9.71142 10.9693 9.63609 10.9069 9.58019 10.8268C9.52673 10.7449 9.5 10.649 9.5 10.5391C9.5 10.4292 9.52673 10.3343 9.58019 10.2542C9.63609 10.1741 9.71142 10.1117 9.8062 10.067C9.90097 10.0223 10.0103 10 10.1343 10C10.2582 10 10.3676 10.0223 10.4623 10.067C10.5571 10.1117 10.6312 10.1741 10.6847 10.2542C10.7382 10.3343 10.7649 10.4292 10.7649 10.5391C10.7649 10.649 10.7382 10.7449 10.6847 10.8268C10.6312 10.9069 10.5571 10.9693 10.4623 11.014C10.3676 11.0568 10.2582 11.0782 10.1343 11.0782ZM10.1343 10.8492C10.2145 10.8492 10.2789 10.824 10.3275 10.7737C10.3761 10.7216 10.4004 10.6434 10.4004 10.5391C10.4004 10.4348 10.3761 10.3575 10.3275 10.3073C10.2789 10.2551 10.2145 10.2291 10.1343 10.2291C10.0565 10.2291 9.9921 10.2551 9.94107 10.3073C9.89247 10.3575 9.86817 10.4348 9.86817 10.5391C9.86817 10.6415 9.89247 10.7188 9.94107 10.7709C9.9921 10.8231 10.0565 10.8492 10.1343 10.8492ZM11.8657 12C11.7442 12 11.6349 11.9786 11.5377 11.9358C11.4429 11.8911 11.3688 11.8287 11.3153 11.7486C11.2618 11.6667 11.2351 11.5708 11.2351 11.4609C11.2351 11.351 11.2618 11.2561 11.3153 11.176C11.3688 11.0959 11.4429 11.0335 11.5377 10.9888C11.6349 10.9441 11.7442 10.9218 11.8657 10.9218C11.9921 10.9218 12.1027 10.9441 12.1974 10.9888C12.2922 11.0335 12.3663 11.0959 12.4198 11.176C12.4733 11.2561 12.5 11.351 12.5 11.4609C12.5 11.5708 12.4733 11.6667 12.4198 11.7486C12.3663 11.8287 12.2922 11.8911 12.1974 11.9358C12.1027 11.9786 11.9921 12 11.8657 12ZM11.8657 11.7709C11.9459 11.7709 12.0103 11.7458 12.0589 11.6955C12.1075 11.6434 12.1318 11.5652 12.1318 11.4609C12.1318 11.3585 12.1075 11.2812 12.0589 11.2291C12.0103 11.1769 11.9459 11.1508 11.8657 11.1508C11.788 11.1508 11.7236 11.1769 11.6725 11.2291C11.6239 11.2793 11.5996 11.3566 11.5996 11.4609C11.5996 11.5652 11.6239 11.6434 11.6725 11.6955C11.7236 11.7458 11.788 11.7709 11.8657 11.7709Z' 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='M14.25 10.5L10.5 3L3 18H9' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M10.5 7.77271V12.5454' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <circle cx='10.5001' cy='15.2728' r='1.36364' fill='none' className={filledClassName} />
+          <circle cx='16.5' cy='16.5' r='4.5' stroke='none' strokeWidth={1.5} />
+          <path d='M14.8679 17.9665L17.4815 15.0335H18.1321L15.5185 17.9665H14.8679ZM15.2014 16.6173C15.0155 16.6173 14.8515 16.5852 14.7093 16.5209C14.5671 16.4539 14.4541 16.3603 14.3703 16.2402C14.2901 16.1173 14.25 15.9735 14.25 15.8087C14.25 15.6439 14.2901 15.5014 14.3703 15.3813C14.4541 15.2612 14.5671 15.1676 14.7093 15.1006C14.8515 15.0335 15.0155 15 15.2014 15C15.3873 15 15.5513 15.0335 15.6935 15.1006C15.8357 15.1676 15.9468 15.2612 16.027 15.3813C16.1072 15.5014 16.1473 15.6439 16.1473 15.8087C16.1473 15.9735 16.1072 16.1173 16.027 16.2402C15.9468 16.3603 15.8357 16.4539 15.6935 16.5209C15.5513 16.5852 15.3873 16.6173 15.2014 16.6173ZM15.2014 16.2737C15.3217 16.2737 15.4183 16.236 15.4912 16.1606C15.5641 16.0824 15.6005 15.9651 15.6005 15.8087C15.6005 15.6522 15.5641 15.5363 15.4912 15.4609C15.4183 15.3827 15.3217 15.3436 15.2014 15.3436C15.0848 15.3436 14.9882 15.3827 14.9116 15.4609C14.8387 15.5363 14.8022 15.6522 14.8022 15.8087C14.8022 15.9623 14.8387 16.0782 14.9116 16.1564C14.9882 16.2346 15.0848 16.2737 15.2014 16.2737ZM17.7986 18C17.6163 18 17.4523 17.9679 17.3065 17.9036C17.1643 17.8366 17.0532 17.743 16.973 17.6229C16.8928 17.5 16.8527 17.3561 16.8527 17.1913C16.8527 17.0265 16.8928 16.8841 16.973 16.764C17.0532 16.6439 17.1643 16.5503 17.3065 16.4832C17.4523 16.4162 17.6163 16.3827 17.7986 16.3827C17.9882 16.3827 18.154 16.4162 18.2962 16.4832C18.4383 16.5503 18.5495 16.6439 18.6297 16.764C18.7099 16.8841 18.75 17.0265 18.75 17.1913C18.75 17.3561 18.7099 17.5 18.6297 17.6229C18.5495 17.743 18.4383 17.8366 18.2962 17.9036C18.154 17.9679 17.9882 18 17.7986 18ZM17.7986 17.6564C17.9189 17.6564 18.0155 17.6187 18.0884 17.5433C18.1613 17.4651 18.1978 17.3478 18.1978 17.1913C18.1978 17.0377 18.1613 16.9218 18.0884 16.8436C18.0155 16.7654 17.9189 16.7263 17.7986 16.7263C17.682 16.7263 17.5854 16.7654 17.5088 16.8436C17.4359 16.919 17.3995 17.0349 17.3995 17.1913C17.3995 17.3478 17.4359 17.4651 17.5088 17.5433C17.5854 17.6187 17.682 17.6564 17.7986 17.6564Z' 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='M23.75 17.5L17.5 5L5 30H15' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M17.5 12.9546V20.9091' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <circle cx='17.5' cy='25.4546' r='2.27273' fill='none' className={filledClassName} />
+          <circle cx='27.5' cy='27.5' r='7.5' stroke='none' strokeWidth={2} />
+          <path d='M24.7798 29.9441L29.1358 25.0559H30.2202L25.8642 29.9441H24.7798ZM25.3357 27.6955C25.0258 27.6955 24.7524 27.642 24.5155 27.5349C24.2786 27.4232 24.0902 27.2672 23.9505 27.067C23.8168 26.8622 23.75 26.6224 23.75 26.3478C23.75 26.0731 23.8168 25.8357 23.9505 25.6355C24.0902 25.4353 24.2786 25.2793 24.5155 25.1676C24.7524 25.0559 25.0258 25 25.3357 25C25.6455 25 25.9189 25.0559 26.1558 25.1676C26.3928 25.2793 26.5781 25.4353 26.7117 25.6355C26.8454 25.8357 26.9122 26.0731 26.9122 26.3478C26.9122 26.6224 26.8454 26.8622 26.7117 27.067C26.5781 27.2672 26.3928 27.4232 26.1558 27.5349C25.9189 27.642 25.6455 27.6955 25.3357 27.6955ZM25.3357 27.1229C25.5361 27.1229 25.6971 27.0601 25.8187 26.9344C25.9402 26.804 26.0009 26.6085 26.0009 26.3478C26.0009 26.0871 25.9402 25.8939 25.8187 25.7682C25.6971 25.6378 25.5361 25.5726 25.3357 25.5726C25.1413 25.5726 24.9803 25.6378 24.8527 25.7682C24.7312 25.8939 24.6704 26.0871 24.6704 26.3478C24.6704 26.6038 24.7312 26.797 24.8527 26.9274C24.9803 27.0577 25.1413 27.1229 25.3357 27.1229ZM29.6643 30C29.3606 30 29.0872 29.9465 28.8442 29.8394C28.6072 29.7277 28.4219 29.5717 28.2883 29.3715C28.1546 29.1667 28.0878 28.9269 28.0878 28.6522C28.0878 28.3776 28.1546 28.1401 28.2883 27.9399C28.4219 27.7398 28.6072 27.5838 28.8442 27.4721C29.0872 27.3603 29.3606 27.3045 29.6643 27.3045C29.9803 27.3045 30.2567 27.3603 30.4936 27.4721C30.7306 27.5838 30.9159 27.7398 31.0495 27.9399C31.1832 28.1401 31.25 28.3776 31.25 28.6522C31.25 28.9269 31.1832 29.1667 31.0495 29.3715C30.9159 29.5717 30.7306 29.7277 30.4936 29.8394C30.2567 29.9465 29.9803 30 29.6643 30ZM29.6643 29.4274C29.8648 29.4274 30.0258 29.3645 30.1473 29.2388C30.2688 29.1085 30.3296 28.9129 30.3296 28.6522C30.3296 28.3962 30.2688 28.203 30.1473 28.0726C30.0258 27.9423 29.8648 27.8771 29.6643 27.8771C29.4699 27.8771 29.3089 27.9423 29.1813 28.0726C29.0598 28.1983 28.9991 28.3915 28.9991 28.6522C28.9991 28.9129 29.0598 29.1085 29.1813 29.2388C29.3089 29.3645 29.4699 29.4274 29.6643 29.4274Z' fill='none' className={filledClassName} />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+FailureRateIcon.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 FailureRateIcon

package/src/components/icons/Icons.module.css

@@ -6,6 +6,14 @@
   @apply stroke-rich-black;
 }
 
+.important-rich-black > circle,
+.important-rich-black > ellipse,
+.important-rich-black > rect,
+.important-rich-black > line, 
+.important-rich-black > path {
+  @apply !stroke-rich-black;
+}
+
 .error-red > circle,
 .error-red > ellipse,
 .error-red > rect,
@@ -14,6 +22,14 @@
   @apply stroke-error-red;
 }
 
+.important-error-red > circle,
+.important-error-red > ellipse,
+.important-error-red > rect,
+.important-error-red > line, 
+.important-error-red > path {
+  @apply !stroke-error-red;
+}
+
 .main-dark-blue > circle,
 .main-dark-blue > ellipse,
 .main-dark-blue > rect,
@@ -22,6 +38,14 @@
   @apply stroke-main-dark-blue;
 }
 
+.important-main-dark-blue > circle,
+.important-main-dark-blue > ellipse,
+.important-main-dark-blue > rect,
+.important-main-dark-blue > line,
+.important-main-dark-blue > path {
+  @apply !stroke-main-dark-blue;
+}
+
 .main-green > circle,
 .main-green > ellipse,
 .main-green > rect, 
@@ -30,6 +54,14 @@
   @apply stroke-main-green;
 }
 
+.important-main-green > circle,
+.important-main-green > ellipse,
+.important-main-green > rect, 
+.important-main-green > line, 
+.important-main-green > path {
+  @apply !stroke-main-green;
+}
+
 .tertiary-blue > circle,
 .tertiary-blue > ellipse,
 .tertiary-blue > rect,
@@ -38,6 +70,14 @@
   @apply stroke-tertiary-blue;
 }
 
+.important-tertiary-blue > circle,
+.important-tertiary-blue > ellipse,
+.important-tertiary-blue > rect,
+.important-tertiary-blue > line,
+.important-tertiary-blue > path {
+  @apply !stroke-tertiary-blue;
+}
+
 .warning-yellow > circle,
 .warning-yellow > ellipse,
 .warning-yellow > rect,
@@ -46,6 +86,14 @@
   @apply stroke-warning-yellow;
 }
 
+.important-warning-yellow > circle,
+.important-warning-yellow > ellipse,
+.important-warning-yellow > rect,
+.important-warning-yellow > line,
+.important-warning-yellow > path {
+  @apply !stroke-warning-yellow;
+}
+
 .white > circle,
 .white > ellipse,
 .white > rect,
@@ -54,6 +102,14 @@
   @apply stroke-white;
 }
 
+.important-white > circle,
+.important-white > ellipse,
+.important-white > rect,
+.important-white > line,
+.important-white > path {
+  @apply !stroke-white;
+}
+
 .filled-rich-black {
   @apply fill-rich-black
 }

package/src/components/icons/InfrastructureIcon.jsx

@@ -0,0 +1,118 @@
+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 InfrastructureIcon = ({
+  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='M3.5 6H8M8 6V3M8 6L13 10.5M2.5 10.5L7.5 10L13 5.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M2.91602 5.42096V10.6484L8.00003 13.2618L13.0833 10.6484V5.42096L8.00003 2.80688L2.91602 5.42096Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M8.05 3.6C8.49183 3.6 8.85 3.24183 8.85 2.8C8.85 2.35817 8.49183 2 8.05 2C7.60817 2 7.25 2.35817 7.25 2.8C7.25 3.24183 7.60817 3.6 8.05 3.6Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M8.05 6.6C8.49183 6.6 8.85 6.24183 8.85 5.8C8.85 5.35817 8.49183 5 8.05 5C7.60817 5 7.25 5.35817 7.25 5.8C7.25 6.24183 7.60817 6.6 8.05 6.6Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M8.05 10.6C8.49183 10.6 8.85 10.2418 8.85 9.8C8.85 9.35817 8.49183 9 8.05 9C7.60817 9 7.25 9.35817 7.25 9.8C7.25 10.2418 7.60817 10.6 8.05 10.6Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M2.81074 6.19094C3.25257 6.19094 3.61074 5.83277 3.61074 5.39094C3.61074 4.94911 3.25257 4.59094 2.81074 4.59094C2.36891 4.59094 2.01074 4.94911 2.01074 5.39094C2.01074 5.83277 2.36891 6.19094 2.81074 6.19094Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M12.9772 6.19094C13.4191 6.19094 13.7772 5.83277 13.7772 5.39094C13.7772 4.94911 13.4191 4.59094 12.9772 4.59094C12.5354 4.59094 12.1772 4.94911 12.1772 5.39094C12.1772 5.83277 12.5354 6.19094 12.9772 6.19094Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M8.07128 13.9776C8.51308 13.973 8.86646 13.611 8.86057 13.1692C8.85468 12.7275 8.49176 12.3731 8.04996 12.3778C7.60815 12.3824 7.25477 12.7444 7.26066 13.1862C7.26655 13.6279 7.62947 13.9823 8.07128 13.9776Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M12.9878 11.3868C13.4296 11.3821 13.783 11.0202 13.7771 10.5784C13.7712 10.1366 13.4083 9.78229 12.9665 9.78695C12.5247 9.79162 12.1713 10.1536 12.1772 10.5953C12.1831 11.0371 12.546 11.3915 12.9878 11.3868Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M2.82128 11.3873C3.26308 11.3826 3.61646 11.0207 3.61057 10.5789C3.60468 10.1371 3.24176 9.78277 2.79996 9.78744C2.35815 9.79211 2.00477 10.154 2.01066 10.5958C2.01655 11.0376 2.37947 11.392 2.82128 11.3873Z' 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}
+        >
+          <path d='M5.25 9H12M12 9V4.5M12 9L19.5 15.75M3.75 15.75L11.25 15L19.5 8.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M4.37451 8.13143V15.9727L12.0005 19.8928L19.6254 15.9727V8.13143L12.0005 4.21033L4.37451 8.13143Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M12.075 5.4C12.7377 5.4 13.275 4.86274 13.275 4.2C13.275 3.53726 12.7377 3 12.075 3C11.4123 3 10.875 3.53726 10.875 4.2C10.875 4.86274 11.4123 5.4 12.075 5.4Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M12.075 9.9C12.7377 9.9 13.275 9.36274 13.275 8.7C13.275 8.03726 12.7377 7.5 12.075 7.5C11.4123 7.5 10.875 8.03726 10.875 8.7C10.875 9.36274 11.4123 9.9 12.075 9.9Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M12.075 15.9C12.7377 15.9 13.275 15.3627 13.275 14.7C13.275 14.0373 12.7377 13.5 12.075 13.5C11.4123 13.5 10.875 14.0373 10.875 14.7C10.875 15.3627 11.4123 15.9 12.075 15.9Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M4.21611 9.28647C4.87885 9.28647 5.41611 8.74922 5.41611 8.08647C5.41611 7.42373 4.87885 6.88647 4.21611 6.88647C3.55337 6.88647 3.01611 7.42373 3.01611 8.08647C3.01611 8.74922 3.55337 9.28647 4.21611 9.28647Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M19.4656 9.28647C20.1284 9.28647 20.6656 8.74922 20.6656 8.08647C20.6656 7.42373 20.1284 6.88647 19.4656 6.88647C18.8029 6.88647 18.2656 7.42373 18.2656 8.08647C18.2656 8.74922 18.8029 9.28647 19.4656 9.28647Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M12.1069 20.9664C12.7696 20.9594 13.2997 20.4166 13.2909 19.7539C13.282 19.0912 12.7376 18.5597 12.0749 18.5667C11.4122 18.5737 10.8822 19.1166 10.891 19.7792C10.8998 20.4419 11.4442 20.9735 12.1069 20.9664Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M19.4819 17.0801C20.1446 17.0731 20.6747 16.5302 20.6659 15.8675C20.657 15.2048 20.1126 14.6733 19.4499 14.6803C18.7872 14.6873 18.2572 15.2302 18.266 15.8929C18.2748 16.5556 18.8192 17.0871 19.4819 17.0801Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M4.23192 17.081C4.89462 17.0739 5.42469 16.5311 5.41586 15.8684C5.40703 15.2057 4.86264 14.6742 4.19993 14.6812C3.53723 14.6882 3.00716 15.2311 3.01599 15.8937C3.02482 16.5564 3.56921 17.088 4.23192 17.081Z' 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}
+        >
+          <path d='M8.75 15H20M20 15V7.5M20 15L32.5 26.25M6.25 26.25L18.75 25L32.5 13.75' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M7.29053 13.5524V26.6211L20.0006 33.1546L32.7088 26.6211V13.5524L20.0006 7.01721L7.29053 13.5524Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M20.125 9C21.2296 9 22.125 8.10457 22.125 7C22.125 5.89543 21.2296 5 20.125 5C19.0204 5 18.125 5.89543 18.125 7C18.125 8.10457 19.0204 9 20.125 9Z' fill='none' className={filledClassName} stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M20.125 16.5C21.2296 16.5 22.125 15.6046 22.125 14.5C22.125 13.3954 21.2296 12.5 20.125 12.5C19.0204 12.5 18.125 13.3954 18.125 14.5C18.125 15.6046 19.0204 16.5 20.125 16.5Z' fill='none' className={filledClassName} stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M20.125 26.5C21.2296 26.5 22.125 25.6046 22.125 24.5C22.125 23.3954 21.2296 22.5 20.125 22.5C19.0204 22.5 18.125 23.3954 18.125 24.5C18.125 25.6046 19.0204 26.5 20.125 26.5Z' fill='none' className={filledClassName} stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M7.02686 15.4774C8.13142 15.4774 9.02686 14.582 9.02686 13.4774C9.02686 12.3728 8.13142 11.4774 7.02686 11.4774C5.92229 11.4774 5.02686 12.3728 5.02686 13.4774C5.02686 14.582 5.92229 15.4774 7.02686 15.4774Z' fill='none' className={filledClassName} stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M32.4429 15.4774C33.5474 15.4774 34.4429 14.582 34.4429 13.4774C34.4429 12.3728 33.5474 11.4774 32.4429 11.4774C31.3383 11.4774 30.4429 12.3728 30.4429 13.4774C30.4429 14.582 31.3383 15.4774 32.4429 15.4774Z' fill='none' className={filledClassName} stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M20.1782 34.9441C21.2827 34.9324 22.1661 34.0276 22.1514 32.9231C22.1367 31.8187 21.2294 30.9328 20.1249 30.9444C19.0204 30.9561 18.1369 31.8609 18.1517 32.9654C18.1664 34.0699 19.0737 34.9558 20.1782 34.9441Z' fill='none' className={filledClassName} stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M32.4697 28.4669C33.5742 28.4552 34.4577 27.5504 34.4429 26.4459C34.4282 25.3415 33.5209 24.4556 32.4164 24.4673C31.3119 24.4789 30.4284 25.3838 30.4432 26.4882C30.4579 27.5927 31.3652 28.4786 32.4697 28.4669Z' fill='none' className={filledClassName} stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M7.05319 28.4681C8.1577 28.4565 9.04115 27.5516 9.02643 26.4472C9.01171 25.3427 8.1044 24.4568 6.99989 24.4685C5.89538 24.4802 5.01193 25.385 5.02665 26.4894C5.04137 27.5939 5.94869 28.4798 7.05319 28.4681Z' fill='none' className={filledClassName} stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+InfrastructureIcon.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 InfrastructureIcon

package/src/components/icons/InternetIcon.jsx

@@ -0,0 +1,117 @@
+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 InternetIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false,
+  addImportantToColor = false
+}) => {
+  let className = `${styles.svgClassName} `
+  // this will be useful if the css is used inside some integrated part, like using icons inside other svg generator
+  if (!addImportantToColor) {
+    className += styles[`${color}`]
+  } else {
+    className += styles[`important-${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}
+        >
+          <path d='M2 8H14' stroke='none' strokeLinejoin='round' />
+          <circle cx='8' cy='8' r='6' stroke='none' />
+          <path d='M3 4C3.5 4.33333 4.8 5 8 5C11.2 5 12.8333 4.16667 13 4' stroke='none' strokeLinejoin='round' />
+          <path d='M8 14C8.66667 13.4 10 11.84 10 8C10 4.16 8.33333 2.2 8 2' stroke='none' strokeLinejoin='round' />
+          <path d='M8 14C7.33333 13.4 6 11.84 6 8C6 4.16 7.66667 2.2 8 2' stroke='none' strokeLinejoin='round' />
+          <path d='M13 12C12.5 11.6667 11.2 11 8 11C4.8 11 3.16667 11.8333 3 12' stroke='none' 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}
+        >
+          <path d='M3 12H21' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
+          <circle cx='12' cy='12' r='9' stroke='none' strokeWidth={1.5} />
+          <path d='M4.5 6C5.25 6.5 7.2 7.5 12 7.5C16.8 7.5 19.25 6.25 19.5 6' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
+          <path d='M12 21C13 20.1 15 17.76 15 12C15 6.24 12.5 3.3 12 3' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
+          <path d='M12 21C11 20.1 9 17.76 9 12C9 6.24 11.5 3.3 12 3' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
+          <path d='M19.5 18C18.75 17.5 16.8 16.5 12 16.5C7.2 16.5 4.75 17.75 4.5 18' stroke='none' strokeWidth={1.5} 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}
+        >
+          <path d='M5 20H35' stroke='none' strokeWidth={2} strokeLinejoin='round' />
+          <circle cx='20' cy='20' r='15' stroke='none' strokeWidth={2} />
+          <path d='M7.5 10C8.75 10.8333 12 12.5 20 12.5C28 12.5 32.0833 10.4167 32.5 10' stroke='none' strokeWidth={2} strokeLinejoin='round' />
+          <path d='M20 35C21.6667 33.5 25 29.6 25 20C25 10.4 20.8333 5.5 20 5' stroke='none' strokeWidth={2} strokeLinejoin='round' />
+          <path d='M20 35C18.3333 33.5 15 29.6 15 20C15 10.4 19.1667 5.5 20 5' stroke='none' strokeWidth={2} strokeLinejoin='round' />
+          <path d='M32.5 30C31.25 29.1667 28 27.5 20 27.5C12 27.5 7.91667 29.5833 7.5 30' stroke='none' strokeWidth={2} strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+InternetIcon.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,
+  /**
+   * addImportantToColor
+   */
+  addImportantToColor: PropTypes.bool
+}
+
+export default InternetIcon