@platformatic/ui-components 0.1.52 → 0.1.54

package/src/components/icons/CircleExclamationIcon.jsx

@@ -1,29 +1,92 @@
 import * as React from 'react'
+import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-const CircleExclamationIcon = ({ color = 'white', tip = '' }) => {
-  const className = styles[`${color}`]
-
-  return (
-    <svg
-      width={24}
-      height={24}
-      viewBox='0 0 24 24'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-      className={className}
-      data-tip={tip}
-    >
-      <circle cx={12} cy={12} r={9} stroke='none' strokeWidth={1.5} />
-      <path
-        d='M12 8.25V13.5'
-        stroke='none'
-        strokeWidth={1.5}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <circle cx={12} cy={15.75} r={0.75} fill='none' />
-    </svg>
-  )
+
+const CircleExclamationIcon = ({ color, size, tip }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  const filledClassName = styles[`filled-${color}`]
+  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'
+          data-tip={tip}
+          className={className}
+        >
+          <circle cx={8} cy={8} r={6} stroke='none' />
+          <path d='M8 5.5V9' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <circle cx={8} cy={10.5} 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}
+          data-tip={tip}
+        >
+          <circle cx={12} cy={12} r={9} stroke='none' strokeWidth={1.5} />
+          <path d='M12 8.25V13.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <circle cx={12} cy={15.75} 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}
+          data-tip={tip}
+        >
+          <circle cx={20} cy={20} r={15} stroke='none' strokeWidth={2} />
+          <path d='M20 13.75V22.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <circle cx={20} cy={26.25} r={1.25} fill='none' className={filledClassName} />
+
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+CircleExclamationIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large']),
+  /**
+   * tip
+   */
+  tip: PropTypes.string
+}
+
+CircleExclamationIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium',
+  tip: ''
 }
 
 export default CircleExclamationIcon

package/src/components/icons/CloseIcon.jsx

@@ -22,7 +22,7 @@ const CloseIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'normal':
+    case 'medium':
       icon = (
         <svg
           width={24}
@@ -73,7 +73,7 @@ CloseIcon.propTypes = {
 
 CloseIcon.defaultProps = {
   color: 'main-dark-blue',
-  size: 'normal'
+  size: 'medium'
 }
 
 export default CloseIcon

package/src/components/icons/CopyPasteIcon.jsx

@@ -23,7 +23,7 @@ const CopyPasteIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'normal':
+    case 'medium':
       icon = (
         <svg
           width={24}
@@ -75,7 +75,7 @@ CopyPasteIcon.propTypes = {
 
 CopyPasteIcon.defaultProps = {
   color: 'main-dark-blue',
-  size: 'normal'
+  size: 'medium'
 }
 
 export default CopyPasteIcon

package/src/components/icons/DatabaseIcon.jsx

@@ -23,7 +23,7 @@ const DatabaseIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'normal':
+    case 'medium':
       icon = (
         <svg
           width={24}
@@ -75,7 +75,7 @@ DatabaseIcon.propTypes = {
 
 DatabaseIcon.defaultProps = {
   color: 'main-dark-blue',
-  size: 'normal'
+  size: 'medium'
 }
 
 export default DatabaseIcon

package/src/components/icons/EditIcon.jsx

@@ -23,7 +23,7 @@ const EditIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'normal':
+    case 'medium':
       icon = (
         <svg
           width={24}
@@ -75,7 +75,7 @@ EditIcon.propTypes = {
 
 EditIcon.defaultProps = {
   color: 'main-dark-blue',
-  size: 'normal'
+  size: 'medium'
 }
 
 export default EditIcon

package/src/components/icons/EnlargeIcon.jsx

@@ -0,0 +1,85 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const EnlargeIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  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.71436 2H14.0001V6.28571' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M13.5715 2.42859L8.85718 7.14287' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M6.28564 14L1.99993 14L1.99993 9.71429' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M2.42854 13.5714L7.14282 8.85713' 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='M14.5715 3H21.0001V9.42857' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M20.3571 3.64288L13.2856 10.7143' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M9.42847 21L2.9999 21L2.9999 14.5714' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M3.64293 20.3571L10.7144 13.2857' 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='M24.2856 5H34.9999V15.7143' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M33.9288 6.07141L22.1431 17.8571' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M15.7144 35L5.00007 35L5.00007 24.2857' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M6.07122 33.9286L17.8569 22.1429' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+EnlargeIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+EnlargeIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default EnlargeIcon

package/src/components/icons/EntryIcon.jsx

@@ -0,0 +1,82 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const EntryIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  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='M6.96787 12.3747L6.96787 13C6.96787 13.5523 7.41558 14 7.96787 14L12.3547 14C12.907 14 13.3547 13.5523 13.3547 13L13.3547 3C13.3547 2.44772 12.907 2 12.3547 2L7.96787 2C7.41558 2 6.96787 2.44772 6.96787 3L6.96787 3.3747' stroke='none' strokeLinecap='round' />
+          <path d='M6.65698 4.87469L9.88284 7.90515L6.65698 10.9356' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M1.9999 7.6665L9.09678 7.6665' 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.4519 18.562L10.4519 20C10.4519 20.5523 10.8996 21 11.4519 21L19.0322 21C19.5845 21 20.0322 20.5523 20.0322 20L20.0322 4C20.0322 3.44772 19.5845 3 19.0322 3L11.4519 3C10.8996 3 10.4519 3.44772 10.4519 4L10.4519 5.06204' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <path d='M9.98535 7.31201L14.8241 11.8577L9.98535 16.4034' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M3.00009 11.4998L13.6454 11.4998' 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.4198 30.9367L17.4198 34C17.4198 34.5523 17.8675 35 18.4198 35L32.387 35C32.9392 35 33.387 34.5523 33.387 34L33.387 6C33.387 5.44772 32.9392 5 32.387 5L18.4198 5C17.8675 5 17.4198 5.44772 17.4198 6L17.4198 8.43674' stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M16.6426 12.1868L24.7072 19.7629L16.6426 27.3391' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M4.99999 19.1663L22.7422 19.1663' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+EntryIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+EntryIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default EntryIcon

package/src/components/icons/GearIcon.jsx

@@ -22,7 +22,7 @@ const GearIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'normal':
+    case 'medium':
       icon = (
         <svg
           width={24}
@@ -32,8 +32,8 @@ const GearIcon = ({ color, size }) => {
           xmlns='http://www.w3.org/2000/svg'
           className={className}
         >
-          <path d='M12.0012 15.4929C13.8832 15.4929 15.4089 13.9928 15.4089 12.1424C15.4089 10.2919 13.8832 8.79182 12.0012 8.79182C10.1192 8.79182 8.59351 10.2919 8.59351 12.1424C8.59351 13.9928 10.1192 15.4929 12.0012 15.4929Z' stroke='#00283D' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
-          <path d='M13.8293 3.52204V4.65914C13.8293 4.87555 13.9664 5.07108 14.173 5.14702L15.6481 5.69563C15.8489 5.76967 16.0767 5.71841 16.2234 5.56275L16.932 4.81481C17.1405 4.5946 17.4958 4.5927 17.7062 4.81291L19.4168 6.59355C19.608 6.79287 19.6099 7.1023 19.4226 7.30352L18.5113 8.28686C18.3665 8.44252 18.3318 8.66842 18.4225 8.85826L19.0403 10.1681C19.1272 10.3522 19.3164 10.4718 19.523 10.4718H20.4691C20.7625 10.4718 21 10.7053 21 10.9939V13.1922C21 13.4807 20.7625 13.7142 20.4691 13.7142H19.4747C19.245 13.7142 19.0403 13.8604 18.9689 14.0749L18.4669 15.5879C18.4071 15.7663 18.4495 15.9618 18.5789 16.1004L19.3956 16.9869C19.5944 17.2033 19.5751 17.5393 19.3512 17.7311L17.4687 19.3503C17.2525 19.5364 16.9243 19.5193 16.7293 19.3124L16.0728 18.6176C15.93 18.4657 15.7079 18.4107 15.5091 18.479L14.1383 18.9498C13.924 19.0238 13.7811 19.2213 13.7811 19.4434V20.478C13.7811 20.7665 13.5436 21 13.2501 21H10.7479C10.4545 21 10.217 20.7665 10.217 20.478V19.4434C10.217 19.2213 10.0741 19.0238 9.85981 18.9498L8.48901 18.479C8.29014 18.4107 8.06811 18.4638 7.92524 18.6176L7.2688 19.3124C7.0738 19.5193 6.74558 19.5364 6.52934 19.3503L4.64689 17.7311C4.42293 17.5393 4.40363 17.2033 4.60249 16.9869L5.41918 16.1004C5.54661 15.9618 5.58908 15.7663 5.53116 15.5879L5.02918 14.0749C4.95774 13.8604 4.75308 13.7142 4.52333 13.7142H3.53094C3.23748 13.7142 3 13.4807 3 13.1922V10.9939C3 10.7053 3.23748 10.4718 3.53094 10.4718H4.47699C4.68358 10.4718 4.87279 10.3541 4.95967 10.1681L5.5775 8.85826C5.66824 8.66653 5.63156 8.44252 5.48868 8.28686L4.57739 7.30352C4.39011 7.1023 4.39204 6.79097 4.58318 6.59355L6.29379 4.81291C6.50424 4.5946 6.85949 4.5946 7.068 4.81481L7.77657 5.56275C7.92331 5.71841 8.15113 5.76967 8.35192 5.69563L9.82699 5.14702C10.0336 5.07108 10.1707 4.87555 10.1707 4.65914V3.52204C10.1707 3.2335 10.4081 3 10.7016 3H13.2984C13.5919 3 13.8293 3.2335 13.8293 3.52204Z' stroke='#00283D' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M12.0012 15.4929C13.8832 15.4929 15.4089 13.9928 15.4089 12.1424C15.4089 10.2919 13.8832 8.79182 12.0012 8.79182C10.1192 8.79182 8.59351 10.2919 8.59351 12.1424C8.59351 13.9928 10.1192 15.4929 12.0012 15.4929Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M13.8293 3.52204V4.65914C13.8293 4.87555 13.9664 5.07108 14.173 5.14702L15.6481 5.69563C15.8489 5.76967 16.0767 5.71841 16.2234 5.56275L16.932 4.81481C17.1405 4.5946 17.4958 4.5927 17.7062 4.81291L19.4168 6.59355C19.608 6.79287 19.6099 7.1023 19.4226 7.30352L18.5113 8.28686C18.3665 8.44252 18.3318 8.66842 18.4225 8.85826L19.0403 10.1681C19.1272 10.3522 19.3164 10.4718 19.523 10.4718H20.4691C20.7625 10.4718 21 10.7053 21 10.9939V13.1922C21 13.4807 20.7625 13.7142 20.4691 13.7142H19.4747C19.245 13.7142 19.0403 13.8604 18.9689 14.0749L18.4669 15.5879C18.4071 15.7663 18.4495 15.9618 18.5789 16.1004L19.3956 16.9869C19.5944 17.2033 19.5751 17.5393 19.3512 17.7311L17.4687 19.3503C17.2525 19.5364 16.9243 19.5193 16.7293 19.3124L16.0728 18.6176C15.93 18.4657 15.7079 18.4107 15.5091 18.479L14.1383 18.9498C13.924 19.0238 13.7811 19.2213 13.7811 19.4434V20.478C13.7811 20.7665 13.5436 21 13.2501 21H10.7479C10.4545 21 10.217 20.7665 10.217 20.478V19.4434C10.217 19.2213 10.0741 19.0238 9.85981 18.9498L8.48901 18.479C8.29014 18.4107 8.06811 18.4638 7.92524 18.6176L7.2688 19.3124C7.0738 19.5193 6.74558 19.5364 6.52934 19.3503L4.64689 17.7311C4.42293 17.5393 4.40363 17.2033 4.60249 16.9869L5.41918 16.1004C5.54661 15.9618 5.58908 15.7663 5.53116 15.5879L5.02918 14.0749C4.95774 13.8604 4.75308 13.7142 4.52333 13.7142H3.53094C3.23748 13.7142 3 13.4807 3 13.1922V10.9939C3 10.7053 3.23748 10.4718 3.53094 10.4718H4.47699C4.68358 10.4718 4.87279 10.3541 4.95967 10.1681L5.5775 8.85826C5.66824 8.66653 5.63156 8.44252 5.48868 8.28686L4.57739 7.30352C4.39011 7.1023 4.39204 6.79097 4.58318 6.59355L6.29379 4.81291C6.50424 4.5946 6.85949 4.5946 7.068 4.81481L7.77657 5.56275C7.92331 5.71841 8.15113 5.76967 8.35192 5.69563L9.82699 5.14702C10.0336 5.07108 10.1707 4.87555 10.1707 4.65914V3.52204C10.1707 3.2335 10.4081 3 10.7016 3H13.2984C13.5919 3 13.8293 3.2335 13.8293 3.52204Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
         </svg>
       )
       break
@@ -72,7 +72,7 @@ GearIcon.propTypes = {
 
 GearIcon.defaultProps = {
   color: 'main-dark-blue',
-  size: 'normal'
+  size: 'medium'
 }
 
 export default GearIcon

package/src/components/icons/GraphQLIcon.jsx

@@ -0,0 +1,98 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const GraphQLIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  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.91626 10.593L8.00028 2.80688L13.0835 10.593H2.91626Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M2.91626 5.42096V10.6484L8.00028 13.2618L13.0835 10.6484V5.42096L8.00028 2.80688L2.91626 5.42096Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M8.00003 3.61374C8.50041 3.61374 8.90606 3.25249 8.90606 2.80687C8.90606 2.36125 8.50041 2 8.00003 2C7.49964 2 7.09399 2.36125 7.09399 2.80687C7.09399 3.25249 7.49964 3.61374 8.00003 3.61374Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M2.91677 6.20468C3.41716 6.20468 3.82281 5.84343 3.82281 5.39781C3.82281 4.95219 3.41716 4.59094 2.91677 4.59094C2.41639 4.59094 2.01074 4.95219 2.01074 5.39781C2.01074 5.84343 2.41639 6.20468 2.91677 6.20468Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M13.0833 6.20468C13.5837 6.20468 13.9893 5.84343 13.9893 5.39781C13.9893 4.95219 13.5837 4.59094 13.0833 4.59094C12.5829 4.59094 12.1772 4.95219 12.1772 5.39781C12.1772 5.84343 12.5829 6.20468 13.0833 6.20468Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M8.01121 13.9904C8.51157 13.9851 8.91237 13.6196 8.90643 13.174C8.90049 12.7284 8.49006 12.3715 7.98971 12.3768C7.48936 12.3821 7.08855 12.7476 7.09449 13.1932C7.10043 13.6388 7.51086 13.9957 8.01121 13.9904Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M13.094 11.3995C13.5943 11.3942 13.9951 11.0287 13.9892 10.5831C13.9833 10.1375 13.5728 9.78055 13.0725 9.78583C12.5721 9.79112 12.1713 10.1566 12.1773 10.6022C12.1832 11.0478 12.5936 11.4047 13.094 11.3995Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M2.92747 11.3999C3.42783 11.3947 3.82863 11.0291 3.82269 10.5836C3.81675 10.138 3.40632 9.78103 2.90597 9.78632C2.40562 9.79161 2.00481 10.1571 2.01075 10.6027C2.01669 11.0483 2.42712 11.4052 2.92747 11.3999Z' 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='M4.37427 15.8895L12.0003 4.21033L19.6252 15.8895H4.37427Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M4.37427 8.13143V15.9727L12.0003 19.8928L19.6252 15.9727V8.13143L12.0003 4.21033L4.37427 8.13143Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M11.9999 5.42061C12.7505 5.42061 13.359 4.87874 13.359 4.2103C13.359 3.54187 12.7505 3 11.9999 3C11.2493 3 10.6409 3.54187 10.6409 4.2103C10.6409 4.87874 11.2493 5.42061 11.9999 5.42061Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M4.37492 9.30708C5.1255 9.30708 5.73397 8.76521 5.73397 8.09678C5.73397 7.42835 5.1255 6.88647 4.37492 6.88647C3.62434 6.88647 3.01587 7.42835 3.01587 8.09678C3.01587 8.76521 3.62434 9.30708 4.37492 9.30708Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M19.6249 9.30708C20.3755 9.30708 20.984 8.76521 20.984 8.09678C20.984 7.42835 20.3755 6.88647 19.6249 6.88647C18.8743 6.88647 18.2659 7.42835 18.2659 8.09678C18.2659 8.76521 18.8743 9.30708 19.6249 9.30708Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M12.0169 20.9857C12.7675 20.9777 13.3687 20.4295 13.3598 19.7611C13.3509 19.0927 12.7352 18.5573 11.9847 18.5652C11.2342 18.5732 10.633 19.1214 10.6419 19.7898C10.6508 20.4582 11.2664 20.9936 12.0169 20.9857Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M19.641 17.0991C20.3915 17.0911 20.9927 16.5429 20.9838 15.8745C20.9749 15.2061 20.3592 14.6707 19.6087 14.6786C18.8582 14.6866 18.257 15.2348 18.2659 15.9032C18.2748 16.5716 18.8904 17.107 19.641 17.0991Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M4.39121 17.0999C5.14174 17.092 5.74294 16.5437 5.73404 15.8753C5.72513 15.207 5.10948 14.6716 4.35895 14.6795C3.60842 14.6874 3.00722 15.2357 3.01613 15.9041C3.02504 16.5725 3.64068 17.1079 4.39121 17.0999Z' 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='M7.29053 26.4824L20.0006 7.01721L32.7088 26.4824H7.29053Z' 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='M19.9999 9.03434C21.2509 9.03434 22.265 8.13123 22.265 7.01717C22.265 5.90312 21.2509 5 19.9999 5C18.749 5 17.7349 5.90312 17.7349 7.01717C17.7349 8.13123 18.749 9.03434 19.9999 9.03434Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M7.29169 15.5118C8.54266 15.5118 9.55678 14.6086 9.55678 13.4946C9.55678 12.3805 8.54266 11.4774 7.29169 11.4774C6.04072 11.4774 5.02661 12.3805 5.02661 13.4946C5.02661 14.6086 6.04072 15.5118 7.29169 15.5118Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M32.7082 15.5118C33.9592 15.5118 34.9733 14.6086 34.9733 13.4946C34.9733 12.3805 33.9592 11.4774 32.7082 11.4774C31.4572 11.4774 30.4431 12.3805 30.4431 13.4946C30.4431 14.6086 31.4572 15.5118 32.7082 15.5118Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M20.0282 34.9759C21.279 34.9627 22.281 34.0489 22.2662 32.935C22.2514 31.821 21.2253 30.9287 19.9744 30.9419C18.7235 30.9551 17.7215 31.8689 17.7364 32.9829C17.7512 34.0968 18.7773 34.9892 20.0282 34.9759Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M32.7349 28.4985C33.9858 28.4853 34.9878 27.5715 34.973 26.4576C34.9581 25.3436 33.9321 24.4512 32.6812 24.4645C31.4303 24.4777 30.4283 25.3915 30.4431 26.5054C30.458 27.6194 31.4841 28.5117 32.7349 28.4985Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M7.31869 28.4997C8.56957 28.4865 9.57157 27.5728 9.55673 26.4588C9.54188 25.3448 8.5158 24.4525 7.26492 24.4657C6.01404 24.4789 5.01204 25.3927 5.02688 26.5067C5.04173 27.6206 6.0678 28.513 7.31869 28.4997Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+GraphQLIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+GraphQLIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default GraphQLIcon

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

@@ -1,22 +1,28 @@
 .green > circle,
+.green > ellipse,
 .green > rect, 
 .green > line, 
 .green > path {
   @apply stroke-main-green;
 }
+
 .red > circle,
+.red > ellipse,
 .red > rect,
 .red > line, 
 .red > path {
   @apply stroke-error-red;
 }
+
 .white > circle,
+.white > ellipse,
 .white > rect,
 .white > line,
 .white > path {
   @apply stroke-white;
 }
 .main-dark-blue > circle,
+.main-dark-blue > ellipse,
 .main-dark-blue > rect,
 .main-dark-blue > line,
 .main-dark-blue > path {

package/src/components/icons/KeyIcon.jsx

@@ -0,0 +1,85 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const KeyIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  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={5} cy={10.9015} r={3} stroke='none' />
+          <circle cx={5} cy={10.9015} r={3} stroke='none' />
+          <path d='M7.1521 8.51137L13.0401 2' stroke='none' strokeLinecap='round' />
+          <path d='M13.6705 4.16214L12.9248 3.39704C12.7259 3.19305 12.3971 3.19614 12.2021 3.40384L10.9611 4.72602C10.7805 4.91841 10.7805 5.21801 10.9611 5.4104L11.7103 6.20857C11.9096 6.42096 12.2476 6.41865 12.4441 6.20354L13.6817 4.8483C13.8603 4.65272 13.8554 4.35181 13.6705 4.16214Z' stroke='none' strokeLinecap='round' />
+
+        </svg>
+      )
+      break
+    case 'medium':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx={7.5} cy={16.3523} r={4.5} stroke='none' strokeWidth={1.5} />
+          <circle cx={7.5} cy={16.3523} r={4.5} stroke='none' strokeWidth={1.5} />
+          <path d='M10.728 12.7671L19.56 3' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <path d='M20.6705 6.41224L19.2048 4.90852C19.006 4.70452 18.6772 4.70762 18.4822 4.91532L16.2812 7.26024C16.1006 7.45263 16.1006 7.75224 16.2812 7.94463L17.7504 9.50986C17.9497 9.72225 18.2877 9.71994 18.4841 9.50483L20.6817 7.0984C20.8603 6.90282 20.8554 6.6019 20.6705 6.41224Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx={12.5} cy={27.2538} r={7.5} stroke='none' strokeWidth={2} />
+          <circle cx={12.5} cy={27.2538} r={7.5} stroke='none' strokeWidth={2} />
+          <path d='M17.8799 21.2784L32.5998 5' stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M34.6705 10.9122L31.765 7.93122C31.5661 7.72723 31.2373 7.73032 31.0423 7.93802L26.9213 12.3285C26.7407 12.5208 26.7407 12.8204 26.9213 13.0128L29.8305 16.1122C30.0299 16.3246 30.3678 16.3223 30.5643 16.1072L34.6817 11.5984C34.8603 11.4028 34.8554 11.1019 34.6705 10.9122Z' stroke='none' strokeWidth={2} strokeLinecap='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+KeyIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+KeyIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default KeyIcon