@platformatic/ui-components 0.1.52 → 0.1.54

package/src/components/icons/AppEmptyIcon.jsx

@@ -1,94 +1,127 @@
-import React from 'react'
-export default function AppEmptyIcon () {
-  return (
-    <svg
-      width={81}
-      height={80}
-      viewBox='0 0 81 80'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-    >
-      <path
-        d='M34.8199 45.5671H24.4589C23.9066 45.5671 23.4589 46.0149 23.4589 46.5671V66.3802C23.4589 66.9324 23.9066 67.3802 24.4589 67.3802H56.5418C57.0941 67.3802 57.5418 66.9324 57.5418 66.3802V46.5671C57.5418 46.0149 57.0941 45.5671 56.5418 45.5671H46.1808'
-        stroke='#21FA90'
-        strokeWidth={3}
-        strokeLinecap='round'
-      />
-      <rect
-        x={34.8199}
-        y={67.3799}
-        width={11.3609}
-        height={5.45325}
-        stroke='#21FA90'
-        strokeWidth={3}
-      />
-      <path
-        d='M29.1394 73.8333C29.1394 73.281 29.5871 72.8333 30.1394 72.8333H50.8613C51.4136 72.8333 51.8613 73.281 51.8613 73.8333V76.9232H29.1394V73.8333Z'
-        stroke='#21FA90'
-        strokeWidth={3}
-      />
-      <path
-        d='M40.5004 42.8403L43.051 50.3765L51.3053 50.3765L44.6275 55.0342L47.1782 62.5704L40.5004 57.9128L33.8226 62.5704L36.3732 55.0342L29.6954 50.3765L37.9497 50.3765L40.5004 42.8403Z'
-        stroke='#21FA90'
-        strokeWidth={3}
-        strokeLinejoin='round'
-      />
-      <path
-        d='M19.1982 57.0413H9.25739V37.1597'
-        stroke='#21FA90'
-        strokeWidth={3}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M29.139 39.9999V14.4377'
-        stroke='#21FA90'
-        strokeWidth={3}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M61.8018 57.0414H71.7426V45.6804'
-        stroke='#21FA90'
-        strokeWidth={3}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M49.0207 41.4201V32.8994H58.9615V17.2781'
-        stroke='#21FA90'
-        strokeWidth={3}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <circle
-        cx={9.25738}
-        cy={31.4793}
-        r={5.68047}
-        stroke='#21FA90'
-        strokeWidth={3}
-      />
-      <circle
-        cx={29.139}
-        cy={8.75738}
-        r={5.68047}
-        stroke='#21FA90'
-        strokeWidth={3}
-      />
-      <circle
-        cx={58.9615}
-        cy={11.5977}
-        r={5.68047}
-        stroke='#21FA90'
-        strokeWidth={3}
-      />
-      <circle
-        cx={71.7426}
-        cy={40.0001}
-        r={5.68047}
-        stroke='#21FA90'
-        strokeWidth={3}
-      />
-    </svg>
-  )
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const AppEmptyIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case 'extra-large':
+      icon = (
+        <svg
+          width={81}
+          height={80}
+          viewBox='0 0 81 80'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path
+            d='M34.8199 45.5671H24.4589C23.9066 45.5671 23.4589 46.0149 23.4589 46.5671V66.3802C23.4589 66.9324 23.9066 67.3802 24.4589 67.3802H56.5418C57.0941 67.3802 57.5418 66.9324 57.5418 66.3802V46.5671C57.5418 46.0149 57.0941 45.5671 56.5418 45.5671H46.1808'
+            stroke='none'
+            strokeWidth={3}
+            strokeLinecap='round'
+          />
+          <rect
+            x={34.8199}
+            y={67.3799}
+            width={11.3609}
+            height={5.45325}
+            stroke='none'
+            strokeWidth={3}
+          />
+          <path
+            d='M29.1394 73.8333C29.1394 73.281 29.5871 72.8333 30.1394 72.8333H50.8613C51.4136 72.8333 51.8613 73.281 51.8613 73.8333V76.9232H29.1394V73.8333Z'
+            stroke='none'
+            strokeWidth={3}
+          />
+          <path
+            d='M40.5004 42.8403L43.051 50.3765L51.3053 50.3765L44.6275 55.0342L47.1782 62.5704L40.5004 57.9128L33.8226 62.5704L36.3732 55.0342L29.6954 50.3765L37.9497 50.3765L40.5004 42.8403Z'
+            stroke='none'
+            strokeWidth={3}
+            strokeLinejoin='round'
+          />
+          <path
+            d='M19.1982 57.0413H9.25739V37.1597'
+            stroke='none'
+            strokeWidth={3}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+          <path
+            d='M29.139 39.9999V14.4377'
+            stroke='none'
+            strokeWidth={3}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+          <path
+            d='M61.8018 57.0414H71.7426V45.6804'
+            stroke='none'
+            strokeWidth={3}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+          <path
+            d='M49.0207 41.4201V32.8994H58.9615V17.2781'
+            stroke='none'
+            strokeWidth={3}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+          <circle
+            cx={9.25738}
+            cy={31.4793}
+            r={5.68047}
+            stroke='none'
+            strokeWidth={3}
+          />
+          <circle
+            cx={29.139}
+            cy={8.75738}
+            r={5.68047}
+            stroke='none'
+            strokeWidth={3}
+          />
+          <circle
+            cx={58.9615}
+            cy={11.5977}
+            r={5.68047}
+            stroke='none'
+            strokeWidth={3}
+          />
+          <circle
+            cx={71.7426}
+            cy={40.0001}
+            r={5.68047}
+            stroke='none'
+            strokeWidth={3}
+          />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
 }
+
+AppEmptyIcon.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'])
+}
+
+AppEmptyIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default AppEmptyIcon

package/src/components/icons/AppIcon.jsx

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

package/src/components/icons/AppListIcon.jsx

@@ -1,73 +1,103 @@
-import React from 'react'
+import * as React from 'react'
+import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-export default function AppListIcon ({ color = 'white' }) {
-  const className = styles[`${color}`]
-  return (
-    <svg
-      width={49}
-      height={67}
-      viewBox='0 0 49 67'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-      className={className}
-    >
-      <path
-        d='M19.6628 38.0801H11.9961C11.4438 38.0801 10.9961 38.5278 10.9961 39.0801V53.7201C10.9961 54.2724 11.4438 54.7201 11.9961 54.7201H35.9961C36.5484 54.7201 36.9961 54.2724 36.9961 53.7201V39.0801C36.9961 38.5278 36.5484 38.0801 35.9961 38.0801H28.3294'
-        stroke='none'
-        strokeWidth={2}
-        strokeLinecap='round'
-      />
-      <rect
-        x={19.6631}
-        y={54.72}
-        width={8.66667}
-        height={4.16}
-        stroke='white'
-        strokeWidth={2}
-      />
-      <path
-        d='M15.3291 59.8799C15.3291 59.3276 15.7768 58.8799 16.3291 58.8799H31.6624C32.2147 58.8799 32.6624 59.3276 32.6624 59.8799V61.9999H15.3291V59.8799Z'
-        stroke='white'
-        strokeWidth={2}
-      />
-      <path
-        d='M23.9958 36L25.9416 41.749H32.2383L27.1441 45.302L29.0899 51.051L23.9958 47.498L18.9016 51.051L20.8474 45.302L15.7533 41.749H22.05L23.9958 36Z'
-        stroke='white'
-        strokeWidth={2}
-        strokeLinejoin='round'
-      />
-      <path
-        d='M20.9961 34H15.9961V25H13.9961'
-        stroke='white'
-        strokeWidth={2}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M19.9961 29.5V9'
-        stroke='white'
-        strokeWidth={2}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M27.9961 35H32V27H38.9961V19'
-        stroke='white'
-        strokeWidth={2}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M26 31.5V22H30.9961V14.5'
-        stroke='white'
-        strokeWidth={2}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <circle cx={11.9961} cy={25} r={2} stroke='white' strokeWidth={2} />
-      <circle cx={19.9961} cy={7} r={2} stroke='white' strokeWidth={2} />
-      <circle cx={30.9961} cy={12} r={2} stroke='white' strokeWidth={2} />
-      <circle cx={38.9961} cy={17} r={2} stroke='white' strokeWidth={2} />
-    </svg>
-  )
+
+const AppListIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case 'extra-large':
+      icon = (
+        <svg
+          width={81}
+          height={80}
+          viewBox='0 0 81 80'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path
+            d='M19.6628 38.0801H11.9961C11.4438 38.0801 10.9961 38.5278 10.9961 39.0801V53.7201C10.9961 54.2724 11.4438 54.7201 11.9961 54.7201H35.9961C36.5484 54.7201 36.9961 54.2724 36.9961 53.7201V39.0801C36.9961 38.5278 36.5484 38.0801 35.9961 38.0801H28.3294'
+            stroke='none'
+            strokeWidth={2}
+            strokeLinecap='round'
+          />
+          <rect
+            x={19.6631}
+            y={54.72}
+            width={8.66667}
+            height={4.16}
+            stroke='none'
+            strokeWidth={2}
+          />
+          <path
+            d='M15.3291 59.8799C15.3291 59.3276 15.7768 58.8799 16.3291 58.8799H31.6624C32.2147 58.8799 32.6624 59.3276 32.6624 59.8799V61.9999H15.3291V59.8799Z'
+            stroke='none'
+            strokeWidth={2}
+          />
+          <path
+            d='M23.9958 36L25.9416 41.749H32.2383L27.1441 45.302L29.0899 51.051L23.9958 47.498L18.9016 51.051L20.8474 45.302L15.7533 41.749H22.05L23.9958 36Z'
+            stroke='none'
+            strokeWidth={2}
+            strokeLinejoin='round'
+          />
+          <path
+            d='M20.9961 34H15.9961V25H13.9961'
+            stroke='none'
+            strokeWidth={2}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+          <path
+            d='M19.9961 29.5V9'
+            stroke='none'
+            strokeWidth={2}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+          <path
+            d='M27.9961 35H32V27H38.9961V19'
+            stroke='none'
+            strokeWidth={2}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+          <path
+            d='M26 31.5V22H30.9961V14.5'
+            stroke='none'
+            strokeWidth={2}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+          <circle cx={11.9961} cy={25} r={2} stroke='none' strokeWidth={2} />
+          <circle cx={19.9961} cy={7} r={2} stroke='none' strokeWidth={2} />
+          <circle cx={30.9961} cy={12} r={2} stroke='none' strokeWidth={2} />
+          <circle cx={38.9961} cy={17} r={2} stroke='none' strokeWidth={2} />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
 }
+
+AppListIcon.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'])
+}
+
+AppListIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default AppListIcon

package/src/components/icons/ArrowDownFullIcon.jsx

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

package/src/components/icons/ArrowDownIcon.jsx

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

package/src/components/icons/ArrowLeftIcon.jsx

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

package/src/components/icons/ArrowRightIcon.jsx

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

package/src/components/icons/ArrowUpIcon.jsx

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

package/src/components/icons/BellIcon.jsx

@@ -0,0 +1,78 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const BellIcon = ({ 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 2C5.79086 2 4 3.62806 4 5.63636V9.5L2 12H14L12 9V5.63636C12 3.62806 10.2091 2 8 2Z' stroke='none' strokeLinejoin='round' />
+          <path d='M10 12C10 13.1046 9.10457 14 8 14C6.89543 14 6 13.1046 6 12' 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='M12 3C8.68629 3 6 5.44208 6 8.45455V14.25L3 18H21L18 13.5V8.45455C18 5.44208 15.3137 3 12 3Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
+          <path d='M15 18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18' 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='M20 5C14.4772 5 10 9.07014 10 14.0909V23.75L5 30H35L30 22.5V14.0909C30 9.07014 25.5228 5 20 5Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
+          <path d='M25 30C25 32.7614 22.7614 35 20 35C17.2386 35 15 32.7614 15 30' stroke='none' strokeWidth={2} />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+BellIcon.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'])
+}
+
+BellIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default BellIcon