@platformatic/ui-components 0.1.52 → 0.1.54

package/src/components/icons/LayersIcon.jsx

@@ -0,0 +1,81 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const AddIcon = ({ 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='M10.5 9.38763L14 10.9803L8.19355 13.9999L2 10.9803L5.83132 9.34583' stroke='none' strokeLinejoin='round' />
+          <path d='M11.0968 6.24634L14 7.56744L8.19355 10.5871L2 7.56744L5.09677 6.24634' stroke='none' strokeLinejoin='round' />
+          <path d='M8.19355 7.66186L2 4.6422L8.19355 2L14 4.6422L8.19355 7.66186Z' stroke='none' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case 'medium':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M15.75 14.0815L21 16.4705L12.2903 21L3 16.4705L8.74699 14.0188' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
+          <path d='M16.6452 9.36963L21 11.3513L12.2903 15.8808L3 11.3513L7.64516 9.36963' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
+          <path d='M12.2903 11.4928L3 6.9633L12.2903 3L21 6.9633L12.2903 11.4928Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M26.25 23.4693L35 27.4509L20.4839 35.0001L5 27.4509L14.5783 23.3647' stroke='none' strokeWidth={2} strokeLinejoin='round' />
+          <path d='M27.7419 15.616L35 18.9187L20.4839 26.4679L5 18.9187L12.7419 15.616' stroke='none' strokeWidth={2} strokeLinejoin='round' />
+          <path d='M20.4839 19.1547L5 11.6055L20.4839 5L35 11.6055L20.4839 19.1547Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+AddIcon.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'])
+}
+
+AddIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default AddIcon

package/src/components/icons/LensIcon.jsx

@@ -0,0 +1,79 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const LensIcon = ({ 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={7} cy={7} r={5} stroke='none' />
+          <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='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='M35 35L27.5 27.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+LensIcon.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'])
+}
+
+LensIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default LensIcon

package/src/components/icons/LiveIcon.jsx

@@ -1,8 +1,12 @@
 import * as React from 'react'
+import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-const LiveIcon = ({ color = 'green', size = 'normal' }) => {
+
+const LiveIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  const filledClassName = styles[`filled-${color}`]
   let icon = <></>
+
   switch (size) {
     case 'small':
       icon = (
@@ -14,30 +18,68 @@ const LiveIcon = ({ color = 'green', size = 'normal' }) => {
           xmlns='http://www.w3.org/2000/svg'
           className={className}
         >
-          <circle cx={8} cy={8.75137} r={1.5} fill='none' />
-          <path
-            d='M6 6.51529C5.38625 7.06461 5 7.8629 5 8.7514C5 9.6399 5.38625 10.4382 6 10.9875M10 6.51529C10.6137 7.06461 11 7.8629 11 8.7514C11 9.6399 10.6137 10.4382 10 10.9875'
-            stroke='none'
-            strokeLinecap='round'
-            strokeLinejoin='round'
-          />
-          <path
-            d='M11 5.39722C11.9206 6.2212 12.5 7.41863 12.5 8.75138C12.5 10.0841 11.9206 11.2816 11 12.1055M5 5.39722C4.07938 6.2212 3.5 7.41863 3.5 8.75138C3.5 10.0841 4.07938 11.2816 5 12.1055'
-            stroke='none'
-            strokeLinecap='round'
-          />
-          <path
-            d='M12 4.27916C13.2275 5.3778 14 6.97437 14 8.75137C14 10.6328 13.134 12.312 11.779 13.412M4.33558 4C2.91494 5.09726 2 6.81747 2 8.75137C2 10.5434 2.78563 12.152 4.03126 13.2514'
-            stroke='none'
-            strokeLinecap='round'
-          />
+          <circle cx={8} cy={8.75134} r={1.5} fill='none' className={filledClassName} />
+          <path d='M6 6.51526C5.38625 7.06458 5 7.86287 5 8.75137C5 9.63987 5.38625 10.4382 6 10.9875M10 6.51526C10.6137 7.06458 11 7.86287 11 8.75137C11 9.63986 10.6137 10.4382 10 10.9875' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M11 5.39722C11.9206 6.2212 12.5 7.41863 12.5 8.75138C12.5 10.0841 11.9206 11.2816 11 12.1055M5 5.39722C4.07938 6.2212 3.5 7.41863 3.5 8.75138C3.5 10.0841 4.07938 11.2816 5 12.1055' stroke='none' strokeLinecap='round' />
+          <path d='M12 4.27916C13.2275 5.3778 14 6.97437 14 8.75137C14 10.6328 13.134 12.312 11.779 13.412M4.33558 4C2.91494 5.09726 2 6.81747 2 8.75137C2 10.5434 2.78563 12.152 4.03126 13.2514' 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={12} cy={13.1271} r={2.25} fill='none' className={filledClassName} />
+          <path d='M9 9.77295C8.07938 10.5969 7.5 11.7944 7.5 13.1271C7.5 14.4599 8.07938 15.6573 9 16.4813M15 9.77295C15.9206 10.5969 16.5 11.7944 16.5 13.1271C16.5 14.4599 15.9206 15.6573 15 16.4813' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M16.5 8.09583C17.8809 9.3318 18.75 11.1279 18.75 13.1271C18.75 15.1262 17.8809 16.9223 16.5 18.1583M7.5 8.09583C6.11906 9.3318 5.25 11.1279 5.25 13.1271C5.25 15.1262 6.11906 16.9223 7.5 18.1583' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <path d='M18 6.41874C19.8412 8.0667 21 10.4616 21 13.1271C21 15.9492 19.7011 18.4679 17.6684 20.1181M6.50337 6C4.37242 7.64589 3 10.2262 3 13.1271C3 15.8151 4.17845 18.2279 6.0469 19.8771' 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={20} cy={21.8784} r={3.75} fill='none' className={filledClassName} />
+          <path d='M15 16.2882C13.4656 17.6615 12.5 19.6572 12.5 21.8785C12.5 24.0997 13.4656 26.0954 15 27.4687M25 16.2882C26.5344 17.6615 27.5 19.6572 27.5 21.8785C27.5 24.0997 26.5344 26.0954 25 27.4687' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M27.5 13.493C29.8016 15.553 31.25 18.5466 31.25 21.8784C31.25 25.2103 29.8016 28.2039 27.5 30.2638M12.5 13.493C10.1984 15.553 8.75 18.5466 8.75 21.8784C8.75 25.2103 10.1984 28.2039 12.5 30.2638' stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M30 10.6979C33.0687 13.4445 35 17.4359 35 21.8784C35 26.582 32.8351 30.7799 29.4474 33.5301M10.8389 10C7.28736 12.7431 5 17.0437 5 21.8784C5 26.3585 6.96408 30.3799 10.0782 33.1284' stroke='none' strokeWidth={2} strokeLinecap='round' />
+        </svg>
+      )
+      break
+
     default:
       break
   }
   return icon
 }
 
+LiveIcon.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'])
+}
+
+LiveIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
 export default LiveIcon

package/src/components/icons/LogOutIcon.jsx

@@ -0,0 +1,81 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const LogOutIcon = ({ 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='M8.38687 5.5V3C8.38687 2.44772 7.93915 2 7.38687 2H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44771 14 3 14H7.38687C7.93915 14 8.38687 13.5523 8.38687 13V11.5' stroke='none' strokeLinecap='round' />
+          <path d='M10.7742 5.3031L14 8.33356L10.7742 11.364' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M13.3548 8.3335L6.25796 8.3335' 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='M12.5803 8.25V4C12.5803 3.44772 12.1326 3 11.5803 3H4C3.44772 3 3 3.44772 3 4V20C3 20.5523 3.44772 21 4 21H11.5803C12.1326 21 12.5803 20.5523 12.5803 20V17.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <path d='M16.1611 7.95459L20.9999 12.5003L16.1611 17.046' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M20.0321 12.5003L9.38681 12.5003' 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='M20.9672 13.75V6C20.9672 5.44772 20.5195 5 19.9672 5H6C5.44772 5 5 5.44772 5 6V34C5 34.5523 5.44772 35 6 35H19.9672C20.5195 35 20.9672 34.5523 20.9672 34V28.75' stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M26.9353 13.2577L34.9999 20.8338L26.9353 28.41' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M33.387 20.8338L15.6448 20.8338' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+LogOutIcon.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'])
+}
+
+LogOutIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default LogOutIcon

package/src/components/icons/MetricsIcon.jsx

@@ -1,52 +1,85 @@
 import * as React from 'react'
+import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-const MetricsIcon = ({ color = 'white' }) => {
-  const className = styles[`${color}`]
-  return (
-    <svg
-      width={40}
-      height={40}
-      viewBox='0 0 40 40'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-      className={className}
-    >
-      <rect
-        x={10}
-        y={12.5}
-        width={5}
-        height={17.5}
-        rx={0.5}
-        stroke='none'
-        strokeWidth={2}
-      />
-      <rect
-        x={20}
-        y={20}
-        width={5}
-        height={10}
-        rx={0.5}
-        stroke='none'
-        strokeWidth={2}
-      />
-      <rect
-        x={30}
-        y={5}
-        width={5}
-        height={25}
-        rx={0.5}
-        stroke='none'
-        strokeWidth={2}
-      />
-      <path
-        d='M5 5V35H35'
-        stroke='none'
-        strokeWidth={2}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-    </svg>
-  )
+
+const MetricsIcon = ({ 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}
+        >
+          <rect x={4} y={5} width={2} height={7} rx={0.5} stroke='none' />
+          <rect x={8} y={8} width={2} height={4} rx={0.5} stroke='none' />
+          <rect x={12} y={2} width={2} height={10} rx={0.5} stroke='none' />
+          <path d='M2 2V14H14' 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}
+        >
+          <rect x={6} y={7.5} width={3} height={10.5} rx={0.5} stroke='none' strokeWidth={1.5} />
+          <rect x={12} y={12} width={3} height={6} rx={0.5} stroke='none' strokeWidth={1.5} />
+          <rect x={18} y={3} width={3} height={15} rx={0.5} stroke='none' strokeWidth={1.5} />
+          <path d='M3 3V21H21' 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}
+        >
+          <rect x={10} y={12.5} width={5} height={17.5} rx={0.5} stroke='none' strokeWidth={2} />
+          <rect x={20} y={20} width={5} height={10} rx={0.5} stroke='none' strokeWidth={2} />
+          <rect x={30} y={5} width={5} height={25} rx={0.5} stroke='none' strokeWidth={2} />
+          <path d='M5 5V35H35' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+MetricsIcon.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'])
+}
+
+MetricsIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
 }
 
 export default MetricsIcon

package/src/components/icons/PlayIcon.jsx

@@ -1,20 +1,75 @@
 import * as React from 'react'
+import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-const PlayIcon = ({ color = 'green', size = 'normal' }) => {
+
+const PlayIcon = ({ 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}>
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
           <path d='M2 2L14 8L2 14V2Z' 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='M3 3L21 12L3 21V3Z' 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='M5 5L35 20L5 35V5Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
     default:
       break
   }
   return icon
 }
 
+PlayIcon.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'])
+}
+
+PlayIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
 export default PlayIcon