@platformatic/ui-components 0.5.0 → 0.5.2

package/src/components/icons/OutdatedServiceIcon.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 OutdatedServiceIcon = ({
+  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='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,
+  /**
+   * addImportantToColor
+   */
+  addImportantToColor: 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/TaxonomyIcon.jsx

@@ -0,0 +1,126 @@
+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 TaxonomyIcon = ({
+  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='M9.10561 9.68632C9.70888 9.68632 10.1975 9.21302 10.1975 8.62862C10.1975 8.04422 9.70888 7.57092 9.10561 7.57092C8.50234 7.57092 8.01367 8.04422 8.01367 8.62862C8.01367 9.21302 8.50234 9.68632 9.10561 9.68632Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M9.71357 5.88177V6.2471C9.71357 6.31678 9.75765 6.37955 9.8244 6.40403L10.2998 6.58042C10.3647 6.60427 10.4377 6.58795 10.4856 6.53773L10.7142 6.29732C10.7816 6.22639 10.8962 6.22576 10.9642 6.29732L11.5158 6.86979C11.5775 6.93382 11.5782 7.03363 11.5177 7.09828L11.2236 7.41465C11.177 7.46487 11.1657 7.53705 11.1947 7.59857L11.3937 8.01976C11.422 8.07877 11.4825 8.11769 11.5492 8.11769H11.854C11.9484 8.11769 12.0253 8.19301 12.0253 8.28529V8.99209C12.0253 9.08499 11.9484 9.15969 11.854 9.15969H11.5335C11.4592 9.15969 11.3937 9.20677 11.3704 9.27582L11.2085 9.7623C11.189 9.81942 11.2029 9.88219 11.2444 9.92676L11.5076 10.2117C11.5719 10.2814 11.5656 10.3894 11.4932 10.4509L10.8861 10.9713C10.8162 11.0309 10.7104 11.0259 10.6474 10.9593L10.4359 10.7359C10.3899 10.6869 10.3181 10.6693 10.2539 10.6913L9.8118 10.8426C9.74253 10.8664 9.69656 10.9298 9.69656 11.0014V11.3341C9.69656 11.427 9.61974 11.5017 9.52528 11.5017H8.7186C8.62415 11.5017 8.54732 11.4264 8.54732 11.3341V11.0014C8.54732 10.9298 8.50135 10.8664 8.43208 10.8426L7.99002 10.6913C7.92578 10.6693 7.85463 10.6863 7.80803 10.7359L7.59644 10.9593C7.53347 11.0259 7.42767 11.0315 7.35778 10.9713L6.75072 10.4509C6.67831 10.3894 6.67201 10.2814 6.73624 10.2117L6.99946 9.92676C7.0404 9.88219 7.05425 9.81942 7.03536 9.7623L6.87352 9.27582C6.85022 9.20677 6.78473 9.15969 6.71042 9.15969H6.39052C6.29606 9.15969 6.21924 9.08437 6.21924 8.99209V8.28529C6.21924 8.19238 6.29606 8.11769 6.39052 8.11769H6.69531C6.76206 8.11769 6.82314 8.08002 6.85085 8.01976L7.04984 7.59857C7.07881 7.53705 7.06747 7.46487 7.0215 7.41465L6.72742 7.09828C6.66697 7.03363 6.6676 6.93382 6.72931 6.86979L7.28095 6.29732C7.34896 6.22701 7.46357 6.22701 7.53032 6.29732L7.75891 6.53773C7.80614 6.58795 7.87982 6.60427 7.94468 6.58042L8.42012 6.40403C8.48687 6.37955 8.53095 6.31678 8.53095 6.2471V5.88177C8.53095 5.78887 8.60777 5.71417 8.70223 5.71417H9.53976C9.63422 5.71417 9.71105 5.7895 9.71105 5.88177H9.71357Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M9.0874 5.8567V3.90912' stroke='none' />
+          <path d='M9.12351 4.07145C9.69736 4.07145 10.1626 3.60774 10.1626 3.03573C10.1626 2.46371 9.69736 2 9.12351 2C8.54967 2 8.08447 2.46371 8.08447 3.03573C8.08447 3.60774 8.54967 4.07145 9.12351 4.07145Z' stroke='none' />
+          <path d='M6.22185 8.64246H3.42773' stroke='none' />
+          <path d='M2.75252 9.4284C3.16812 9.4284 3.50504 9.09256 3.50504 8.67828C3.50504 8.264 3.16812 7.92816 2.75252 7.92816C2.33691 7.92816 2 8.264 2 8.67828C2 9.09256 2.33691 9.4284 2.75252 9.4284Z' stroke='none' />
+          <path d='M11.3086 6.62433L12.4559 5.54541' stroke='none' />
+          <path d='M12.887 5.88305C13.3357 5.88305 13.6994 5.52051 13.6994 5.0733C13.6994 4.62609 13.3357 4.26355 12.887 4.26355C12.4384 4.26355 12.0747 4.62609 12.0747 5.0733C12.0747 5.52051 12.4384 5.88305 12.887 5.88305Z' stroke='none' />
+          <path d='M11.165 10.7842L12.24 11.9273' stroke='none' />
+          <path d='M12.8851 13.7534C13.5007 13.7534 13.9997 13.2559 13.9997 12.6423C13.9997 12.0287 13.5007 11.5312 12.8851 11.5312C12.2695 11.5312 11.7705 12.0287 11.7705 12.6423C11.7705 13.2559 12.2695 13.7534 12.8851 13.7534Z' stroke='none' />
+          <path d='M7.04161 10.4999L5.06934 12.3636' stroke='none' />
+          <path d='M4.46678 14C5.04062 14 5.50582 13.5363 5.50582 12.9643C5.50582 12.3923 5.04062 11.9286 4.46678 11.9286C3.89293 11.9286 3.42773 12.3923 3.42773 12.9643C3.42773 13.5363 3.89293 14 4.46678 14Z' stroke='none' />
+
+        </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.6584 14.5295C14.5633 14.5295 15.2963 13.8195 15.2963 12.9429C15.2963 12.0663 14.5633 11.3564 13.6584 11.3564C12.7535 11.3564 12.0205 12.0663 12.0205 12.9429C12.0205 13.8195 12.7535 14.5295 13.6584 14.5295Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M14.5706 8.82269V9.37068C14.5706 9.4752 14.6367 9.56935 14.7368 9.60608L15.45 9.87066C15.5473 9.90644 15.6569 9.88195 15.7287 9.80663L16.0715 9.44601C16.1726 9.33961 16.3445 9.33867 16.4465 9.44601L17.274 10.3047C17.3666 10.4008 17.3675 10.5505 17.2768 10.6475L16.8357 11.122C16.7658 11.1973 16.7488 11.3056 16.7923 11.3979L17.0907 12.0297C17.1332 12.1182 17.2239 12.1766 17.3241 12.1766H17.7812C17.9229 12.1766 18.0382 12.2895 18.0382 12.428V13.4882C18.0382 13.6275 17.9229 13.7396 17.7812 13.7396H17.3004C17.189 13.7396 17.0907 13.8102 17.0558 13.9138L16.813 14.6435C16.7837 14.7292 16.8045 14.8233 16.8669 14.8902L17.2617 15.3176C17.3581 15.4222 17.3486 15.5841 17.24 15.6764L16.3294 16.4569C16.2246 16.5464 16.0659 16.5389 15.9714 16.439L15.654 16.1038C15.5851 16.0304 15.4774 16.004 15.381 16.037L14.7179 16.2639C14.614 16.2997 14.5451 16.3948 14.5451 16.5021V17.0012C14.5451 17.1405 14.4298 17.2526 14.2882 17.2526H13.0782C12.9365 17.2526 12.8212 17.1396 12.8212 17.0012V16.5021C12.8212 16.3948 12.7523 16.2997 12.6484 16.2639L11.9853 16.037C11.8889 16.004 11.7822 16.0295 11.7123 16.1038L11.3949 16.439C11.3004 16.5389 11.1418 16.5473 11.0369 16.4569L10.1263 15.6764C10.0177 15.5841 10.0083 15.4222 10.1046 15.3176L10.4994 14.8902C10.5608 14.8233 10.5816 14.7292 10.5533 14.6435L10.3105 13.9138C10.2756 13.8102 10.1773 13.7396 10.0659 13.7396H9.58603C9.44434 13.7396 9.3291 13.6266 9.3291 13.4882V12.428C9.3291 12.2886 9.44434 12.1766 9.58603 12.1766H10.0432C10.1433 12.1766 10.235 12.1201 10.2765 12.0297L10.575 11.3979C10.6185 11.3056 10.6015 11.1973 10.5325 11.122L10.0914 10.6475C10.0007 10.5505 10.0016 10.4008 10.0942 10.3047L10.9217 9.44601C11.0237 9.34055 11.1956 9.34055 11.2957 9.44601L11.6386 9.80663C11.7095 9.88195 11.82 9.90644 11.9173 9.87066L12.6304 9.60608C12.7305 9.56935 12.7967 9.4752 12.7967 9.37068V8.82269C12.7967 8.68334 12.9119 8.57129 13.0536 8.57129H14.3099C14.4516 8.57129 14.5668 8.68428 14.5668 8.82269H14.5706Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M13.6309 8.78501V5.86365' stroke='none' strokeWidth={1.5} />
+          <path d='M13.6855 6.10718C14.5463 6.10718 15.2441 5.41162 15.2441 4.55359C15.2441 3.69557 14.5463 3 13.6855 3C12.8247 3 12.127 3.69557 12.127 4.55359C12.127 5.41162 12.8247 6.10718 13.6855 6.10718Z' stroke='none' strokeWidth={1.5} />
+          <path d='M9.33278 12.9637H5.1416' stroke='none' strokeWidth={1.5} />
+          <path d='M4.12878 14.1426C4.75218 14.1426 5.25755 13.6388 5.25755 13.0174C5.25755 12.396 4.75218 11.8922 4.12878 11.8922C3.50537 11.8922 3 12.396 3 13.0174C3 13.6388 3.50537 14.1426 4.12878 14.1426Z' stroke='none' strokeWidth={1.5} />
+          <path d='M16.9629 9.9365L18.6838 8.31812' stroke='none' strokeWidth={1.5} />
+          <path d='M19.3308 8.82458C20.0038 8.82458 20.5493 8.28077 20.5493 7.60995C20.5493 6.93913 20.0038 6.39532 19.3308 6.39532C18.6579 6.39532 18.1123 6.93913 18.1123 7.60995C18.1123 8.28077 18.6579 8.82458 19.3308 8.82458Z' stroke='none' strokeWidth={1.5} />
+          <path d='M16.7476 16.1764L18.36 17.891' stroke='none' strokeWidth={1.5} />
+          <path d='M19.3277 20.63C20.251 20.63 20.9996 19.8839 20.9996 18.9635C20.9996 18.043 20.251 17.2969 19.3277 17.2969C18.4043 17.2969 17.6558 18.043 17.6558 18.9635C17.6558 19.8839 18.4043 20.63 19.3277 20.63Z' stroke='none' strokeWidth={1.5} />
+          <path d='M10.5624 15.7498L7.604 18.5454' stroke='none' strokeWidth={1.5} />
+          <path d='M6.70016 21.0001C7.56093 21.0001 8.25873 20.3045 8.25873 19.4465C8.25873 18.5884 7.56093 17.8929 6.70016 17.8929C5.83939 17.8929 5.1416 18.5884 5.1416 19.4465C5.1416 20.3045 5.83939 21.0001 6.70016 21.0001Z' stroke='none' strokeWidth={1.5} />
+
+        </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.764 24.2158C24.2722 24.2158 25.4939 23.0326 25.4939 21.5715C25.4939 20.1105 24.2722 18.9273 22.764 18.9273C21.2558 18.9273 20.0342 20.1105 20.0342 21.5715C20.0342 23.0326 21.2558 24.2158 22.764 24.2158Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M24.2842 14.7045V15.6178C24.2842 15.792 24.3944 15.9489 24.5612 16.0101L25.7498 16.4511C25.912 16.5107 26.0946 16.4699 26.2143 16.3444L26.7857 15.7433C26.9542 15.566 27.2407 15.5644 27.4107 15.7433L28.7898 17.1745C28.9441 17.3346 28.9457 17.5841 28.7945 17.7457L28.0593 18.5367C27.9428 18.6622 27.9145 18.8427 27.9869 18.9965L28.4844 20.0494C28.5552 20.197 28.7064 20.2942 28.8733 20.2942H29.6352C29.8714 20.2942 30.0634 20.4826 30.0634 20.7132V22.4803C30.0634 22.7125 29.8714 22.8993 29.6352 22.8993H28.8339C28.6481 22.8993 28.4844 23.017 28.4262 23.1896L28.0216 24.4058C27.9728 24.5486 28.0074 24.7055 28.1113 24.8169L28.7694 25.5294C28.9299 25.7036 28.9142 25.9735 28.7331 26.1273L27.2155 27.4282C27.0408 27.5773 26.7763 27.5647 26.6189 27.3984L26.0899 26.8397C25.975 26.7173 25.7955 26.6734 25.6349 26.7283L24.5297 27.1065C24.3566 27.1661 24.2417 27.3246 24.2417 27.5035V28.3353C24.2417 28.5675 24.0496 28.7543 23.8134 28.7543H21.7968C21.5606 28.7543 21.3685 28.5659 21.3685 28.3353V27.5035C21.3685 27.3246 21.2536 27.1661 21.0804 27.1065L19.9753 26.7283C19.8147 26.6734 19.6368 26.7158 19.5203 26.8397L18.9913 27.3984C18.8339 27.5647 18.5694 27.5789 18.3947 27.4282L16.8771 26.1273C16.696 25.9735 16.6803 25.7036 16.8408 25.5294L17.4989 24.8169C17.6012 24.7055 17.6359 24.5486 17.5886 24.4058L17.184 23.1896C17.1258 23.017 16.9621 22.8993 16.7763 22.8993H15.9766C15.7404 22.8993 15.5483 22.7109 15.5483 22.4803V20.7132C15.5483 20.481 15.7404 20.2942 15.9766 20.2942H16.7385C16.9054 20.2942 17.0581 20.2001 17.1274 20.0494L17.6248 18.9965C17.6973 18.8427 17.6689 18.6622 17.554 18.5367L16.8188 17.7457C16.6677 17.5841 16.6692 17.3346 16.8235 17.1745L18.2026 15.7433C18.3726 15.5676 18.6592 15.5676 18.826 15.7433L19.3975 16.3444C19.5156 16.4699 19.6998 16.5107 19.8619 16.4511L21.0505 16.0101C21.2174 15.9489 21.3276 15.792 21.3276 15.6178V14.7045C21.3276 14.4722 21.5197 14.2855 21.7558 14.2855H23.8496C24.0858 14.2855 24.2779 14.4738 24.2779 14.7045H24.2842Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M22.7183 14.6417V9.77277' stroke='none' strokeWidth={2} />
+          <path d='M22.809 10.1786C24.2436 10.1786 25.4066 9.01936 25.4066 7.58932C25.4066 6.15928 24.2436 5 22.809 5C21.3744 5 20.2114 6.15928 20.2114 7.58932C20.2114 9.01936 21.3744 10.1786 22.809 10.1786Z' stroke='none' strokeWidth={2} />
+          <path d='M15.5546 21.6061H8.56934' stroke='none' strokeWidth={2} />
+          <path d='M6.88129 23.571C7.9203 23.571 8.76259 22.7314 8.76259 21.6957C8.76259 20.66 7.9203 19.8204 6.88129 19.8204C5.84228 19.8204 5 20.66 5 21.6957C5 22.7314 5.84228 23.571 6.88129 23.571Z' stroke='none' strokeWidth={2} />
+          <path d='M28.2715 16.5608L31.1397 13.8635' stroke='none' strokeWidth={2} />
+          <path d='M32.2179 14.7076C33.3395 14.7076 34.2487 13.8013 34.2487 12.6832C34.2487 11.5652 33.3395 10.6589 32.2179 10.6589C31.0963 10.6589 30.187 11.5652 30.187 12.6832C30.187 13.8013 31.0963 14.7076 32.2179 14.7076Z' stroke='none' strokeWidth={2} />
+          <path d='M27.9126 26.9606L30.5999 29.8183' stroke='none' strokeWidth={2} />
+          <path d='M32.2128 34.3834C33.7517 34.3834 34.9993 33.1398 34.9993 31.6058C34.9993 30.0717 33.7517 28.8281 32.2128 28.8281C30.6738 28.8281 29.4263 30.0717 29.4263 31.6058C29.4263 33.1398 30.6738 34.3834 32.2128 34.3834Z' stroke='none' strokeWidth={2} />
+          <path d='M17.604 26.2497L12.6733 30.9091' stroke='none' strokeWidth={2} />
+          <path d='M11.1669 35.0001C12.6016 35.0001 13.7645 33.8408 13.7645 32.4108C13.7645 30.9807 12.6016 29.8215 11.1669 29.8215C9.73232 29.8215 8.56934 30.9807 8.56934 32.4108C8.56934 33.8408 9.73232 35.0001 11.1669 35.0001Z' stroke='none' strokeWidth={2} />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+TaxonomyIcon.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 TaxonomyIcon

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