@platformatic/ui-components 0.5.0 → 0.5.1

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/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/OutdatedServiceIcon.jsx

@@ -0,0 +1,105 @@
+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 OutdatedServiceIcon = ({
+  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}
+        >
+          <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 7H4.5L6 4L7.25 6.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <circle cx='10' cy='10' r='4' stroke='none' />
+          <path d='M8.05401 9.73612C8.03615 9.84904 8.02686 9.96504 8.02686 10.0833C8.02686 11.2339 8.90611 12.1667 9.99072 12.1667C10.3001 12.1667 10.5928 12.0908 10.8531 11.9556M11.8714 10.6851C11.9255 10.4946 11.9546 10.2926 11.9546 10.0833C11.9546 8.93274 11.0753 8 9.99072 8C9.55425 8 9.15103 8.15105 8.82499 8.40657' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M11.3496 10.0312L11.8626 10.7075L12.5001 10.1633' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M8.6543 10.2297L8.03758 9.65921L7.49977 10.3134' 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='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.5 10.5H6.75L9 6L10.875 9.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <circle cx='15' cy='15' r='6' stroke='none' strokeWidth={1.5} />
+          <path d='M12.0813 14.6042C12.0545 14.7736 12.0405 14.9476 12.0405 15.125C12.0405 16.8509 13.3594 18.25 14.9863 18.25C15.4504 18.25 15.8895 18.1362 16.28 17.9334M17.8074 16.0277C17.8885 15.7419 17.9321 15.4389 17.9321 15.125C17.9321 13.3991 16.6132 12 14.9863 12C14.3316 12 13.7268 12.2266 13.2377 12.6098' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M17.0239 15.0469L17.7935 16.0613L18.7497 15.2449' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M12.9819 15.3445L12.0569 14.4887L11.2501 15.47' 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='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='M17.5 17.5H11.25L15 10L18.125 16.25' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <circle cx='25' cy='25' r='10' stroke='none' strokeWidth={2} />
+          <path d='M20.1353 24.3403C20.0906 24.6226 20.0674 24.9126 20.0674 25.2084C20.0674 28.0849 22.2655 30.4167 24.977 30.4167C25.7505 30.4167 26.4823 30.227 27.1331 29.8889M29.6788 26.7128C29.814 26.2365 29.8867 25.7314 29.8867 25.2084C29.8867 22.3319 27.6886 20 24.977 20C23.8859 20 22.8778 20.3776 22.0627 21.0164' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M28.3735 25.0781L29.6561 26.7688L31.2498 25.4082' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M21.6362 25.5742L20.0944 24.1479L18.7499 25.7835' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+OutdatedServiceIcon.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 OutdatedServiceIcon

package/src/components/icons/ResourceIcon.jsx

@@ -0,0 +1,111 @@
+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 ResourceIcon = ({
+  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}
+        >
+          <path d='M7 5V3C7 2.44772 6.55228 2 6 2H3C2.44772 2 2 2.44772 2 3V6C2 6.55228 2.44772 7 3 7H5.125' stroke='none' />
+          <path d='M9 11.9167L9 13C9 13.5523 9.44771 14 10 14L13 14C13.5523 14 14 13.5523 14 13L14 10C14 9.44772 13.5523 9 13 9L10.875 9' stroke='none' />
+          <path d='M11 7L13 7C13.5523 7 14 6.55228 14 6L14 3C14 2.44772 13.5523 2 13 2L10 2C9.44772 2 9 2.44772 9 3L9 4.5' stroke='none' />
+          <path d='M5 9L3 9C2.44772 9 2 9.44772 2 10L2 13C2 13.5523 2.44771 14 3 14L6 14C6.55228 14 7 13.5523 7 13L7 11.5' stroke='none' />
+          <rect x='5' y='5' width='6' height='7' rx='1' stroke='none' />
+          <path d='M6.39355 6.40991H9.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M6.39355 8.37695H9.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M6.39355 10.3442H9.5' 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='M10.5 7.5V4C10.5 3.44772 10.0523 3 9.5 3H4C3.44772 3 3 3.44772 3 4V9.5C3 10.0523 3.44772 10.5 4 10.5H7.6875' stroke='none' strokeWidth={1.5} />
+          <path d='M13.5 17.875L13.5 20C13.5 20.5523 13.9477 21 14.5 21L20 21C20.5523 21 21 20.5523 21 20L21 14.5C21 13.9477 20.5523 13.5 20 13.5L16.3125 13.5' stroke='none' strokeWidth={1.5} />
+          <path d='M16.5 10.5L20 10.5C20.5523 10.5 21 10.0523 21 9.5L21 4C21 3.44772 20.5523 3 20 3L14.5 3C13.9477 3 13.5 3.44772 13.5 4L13.5 6.75' stroke='none' strokeWidth={1.5} />
+          <path d='M7.5 13.5L4 13.5C3.44772 13.5 3 13.9477 3 14.5L3 20C3 20.5523 3.44771 21 4 21L9.5 21C10.0523 21 10.5 20.5523 10.5 20L10.5 17.25' stroke='none' strokeWidth={1.5} />
+          <rect x='7.5' y='7.5' width='9' height='10.5' rx='1' stroke='none' strokeWidth={1.5} />
+          <path d='M9.59033 9.61475H14.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M9.59033 12.5654H14.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M9.59033 15.5164H14.25' 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='M17.5 12.5V6C17.5 5.44772 17.0523 5 16.5 5H6C5.44772 5 5 5.44772 5 6V16.5C5 17.0523 5.44772 17.5 6 17.5H12.8125' stroke='none' strokeWidth={2} />
+          <path d='M22.5 29.7917L22.5 34C22.5 34.5523 22.9477 35 23.5 35L34 35C34.5523 35 35 34.5523 35 34L35 23.5C35 22.9477 34.5523 22.5 34 22.5L27.1875 22.5' stroke='none' strokeWidth={2} />
+          <path d='M27.5 17.5L34 17.5C34.5523 17.5 35 17.0523 35 16.5L35 6C35 5.44772 34.5523 5 34 5L23.5 5C22.9477 5 22.5 5.44772 22.5 6L22.5 12.5' stroke='none' strokeWidth={2} />
+          <path d='M12.5 22.5L6 22.5C5.44772 22.5 5 22.9477 5 23.5L5 34C5 34.5523 5.44771 35 6 35L16.5 35C17.0523 35 17.5 34.5523 17.5 34L17.5 30' stroke='none' strokeWidth={2} />
+          <rect x='12.5' y='12.5' width='15' height='17.5' rx='1' stroke='none' strokeWidth={2} />
+          <path d='M15.9839 16.0249H23.75' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M15.9839 20.9424H23.75' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M15.9839 25.8606H23.75' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+ResourceIcon.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 ResourceIcon

package/src/components/icons/ZoomInIcon.jsx

@@ -0,0 +1,99 @@
+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 ZoomInIcon = ({
+  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='7' cy='7' r='5' stroke='none' />
+          <path d='M7 5V9.5' stroke='none' strokeLinecap='round' />
+          <path d='M9.25 7.25L4.75 7.25' stroke='none' strokeLinecap='round' />
+          <path d='M14 14L11 11' 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='10.5' cy='10.5' r='7.5' stroke='none' strokeWidth={1.5} />
+          <path d='M10.5 7.5V14.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <path d='M13.875 10.875L7.125 10.875' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <path d='M21 21L16.5 16.5' 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='17.5' cy='17.5' r='12.5' stroke='none' strokeWidth={2} />
+          <path d='M17.5 12.5V23.75' stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M23.125 18.125L11.875 18.125' stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M35 35L27.5 27.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+ZoomInIcon.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 ZoomInIcon

package/src/components/icons/ZoomOutIcon.jsx

@@ -0,0 +1,96 @@
+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 ZoomOutIcon = ({
+  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='7' cy='7' r='5' stroke='none' />
+          <path d='M9.25 7.25L4.75 7.25' stroke='none' strokeLinecap='round' />
+          <path d='M14 14L11 11' 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='10.5' cy='10.5' r='7.5' stroke='none' strokeWidth={1.5} />
+          <path d='M13.875 10.875L7.125 10.875' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <path d='M21 21L16.5 16.5' 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='17.5' cy='17.5' r='12.5' stroke='none' strokeWidth={2} />
+          <path d='M23.125 18.125L11.875 18.125' stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M35 35L27.5 27.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+ZoomOutIcon.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 ZoomOutIcon