@platformatic/ui-components 0.1.49 → 0.1.51

package/src/components/icons/AppIcon.jsx

@@ -1,38 +1,85 @@
-import React from 'react'
-export default function AppIcon () {
-  return (
-    <svg
-      width={32}
-      height={33}
-      viewBox='0 0 32 33'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-    >
-      <path
-        d='M12 6.75317H5C4.44772 6.75317 4 7.20089 4 7.75317V21.1132C4 21.6655 4.44772 22.1132 5 22.1132H27C27.5523 22.1132 28 21.6655 28 21.1132V7.75317C28 7.20089 27.5523 6.75317 27 6.75317H20'
-        stroke='#00283D'
-        strokeWidth={2}
-        strokeLinecap='round'
-      />
-      <rect
-        x={12}
-        y={22.1133}
-        width={8}
-        height={3.84}
-        stroke='#00283D'
-        strokeWidth={2}
-      />
-      <path
-        d='M8 26.9534C8 26.4011 8.44772 25.9534 9 25.9534H23C23.5523 25.9534 24 26.4011 24 26.9534V28.8334H8V26.9534Z'
-        stroke='#00283D'
-        strokeWidth={2}
-      />
-      <path
-        d='M16 4.83325L17.7961 10.14H23.6085L18.9062 13.4198L20.7023 18.7265L16 15.4468L11.2977 18.7265L13.0938 13.4198L8.39155 10.14H14.2039L16 4.83325Z'
-        stroke='#00283D'
-        strokeWidth={2}
-        strokeLinejoin='round'
-      />
-    </svg>
-  )
-}
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const AppIcon = ({ 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 2.95996H3C2.44772 2.95996 2 3.40768 2 3.95996V9.63996C2 10.1922 2.44772 10.64 3 10.64H13C13.5523 10.64 14 10.1922 14 9.63996V3.95996C14 3.40768 13.5523 2.95996 13 2.95996H10' stroke='none' strokeLinecap='round' />
+          <rect x={6} y={10.64} width={4} height={1.92} stroke='none' />
+          <path d='M4 13.5601C4 13.0078 4.44772 12.5601 5 12.5601H11C11.5523 12.5601 12 13.0078 12 13.5601V14.0001H4V13.5601Z' stroke='none' />
+          <path d='M8 2L8.89806 4.65337H11.8042L9.45308 6.29325L10.3511 8.94662L8 7.30675L5.64886 8.94662L6.54692 6.29325L4.19577 4.65337H7.10194L8 2Z' stroke='none' strokeLinejoin='round' />
+
+        </svg>
+      )
+      break
+    case 'normal':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M9 4.43994H4C3.44772 4.43994 3 4.88766 3 5.43994V14.9599C3 15.5122 3.44772 15.9599 4 15.9599H20C20.5523 15.9599 21 15.5122 21 14.9599V5.43994C21 4.88766 20.5523 4.43994 20 4.43994H15' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <rect x={9} y={15.96} width={6} height={2.88} stroke='none' strokeWidth={1.5} />
+          <path d='M6 19.84C6 19.2877 6.44772 18.84 7 18.84H17C17.5523 18.84 18 19.2877 18 19.84V21H6V19.84Z' stroke='none' strokeWidth={1.5} />
+          <path d='M12 3L13.3471 6.98006H17.7063L14.1796 9.43988L15.5267 13.4199L12 10.9601L8.47329 13.4199L9.82037 9.43988L6.29366 6.98006H10.6529L12 3Z' 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='M15 7.40002H6C5.44772 7.40002 5 7.84774 5 8.40002V25.6C5 26.1523 5.44772 26.6 6 26.6H34C34.5523 26.6 35 26.1523 35 25.6V8.40002C35 7.84774 34.5523 7.40002 34 7.40002H25' stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <rect x={15} y={26.6} width={10} height={4.8} stroke='none' strokeWidth={2} />
+          <path d='M10 32.4C10 31.8477 10.4477 31.4 11 31.4H29C29.5523 31.4 30 31.8477 30 32.4V35H10V32.4Z' stroke='none' strokeWidth={2} />
+          <path d='M20 5L22.2451 11.6334H29.5106L23.6327 15.7331L25.8779 22.3666L20 18.2669L14.1221 22.3666L16.3673 15.7331L10.4894 11.6334H17.7549L20 5Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+AppIcon.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'])
+}
+
+AppIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
+}
+
+export default AppIcon

package/src/components/icons/AppListIcon.jsx

@@ -1,73 +1,73 @@
-import React from 'react'
-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>
-  )
-}
+import React from 'react'
+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>
+  )
+}

package/src/components/icons/ArrowDownFullIcon.jsx

@@ -0,0 +1,76 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const ArrowDownFullIcon = ({ color, size }) => {
+  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'
+          className={className}
+        >
+          <path d='M7.29289 10.2929L3.70711 6.70711C3.07714 6.07714 3.52331 5 4.41421 5H11.5858C12.4767 5 12.9229 6.07714 12.2929 6.70711L8.70711 10.2929C8.31658 10.6834 7.68342 10.6834 7.29289 10.2929Z' fill='none' className={filledClassName} />
+        </svg>
+      )
+      break
+    case 'normal':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M11.2929 15.7929L4.70711 9.20711C4.07714 8.57714 4.52331 7.5 5.41421 7.5H18.5858C19.4767 7.5 19.9229 8.57714 19.2929 9.2071L12.7071 15.7929C12.3166 16.1834 11.6834 16.1834 11.2929 15.7929Z' fill='none' className={filledClassName} />
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M19.2929 26.7929L6.70711 14.2071C6.07714 13.5771 6.52331 12.5 7.41421 12.5H32.5858C33.4767 12.5 33.9229 13.5771 33.2929 14.2071L20.7071 26.7929C20.3166 27.1834 19.6834 27.1834 19.2929 26.7929Z' fill='none' className={filledClassName} />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+ArrowDownFullIcon.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'])
+}
+
+ArrowDownFullIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
+}
+
+export default ArrowDownFullIcon

package/src/components/icons/ArrowDownIcon.jsx

@@ -0,0 +1,75 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const ArrowDownIcon = ({ 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 5L8 11L14 5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case 'normal':
+      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 7L12 16L21 7' 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 11.6667L20 26.6667L35 11.6667' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+ArrowDownIcon.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'])
+}
+
+ArrowDownIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
+}
+
+export default ArrowDownIcon

package/src/components/icons/ArrowLeftIcon.jsx

@@ -0,0 +1,75 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const ArrowLeftIcon = ({ 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='M11 2L5 8L11 14' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case 'normal':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M16.5 3L7.5 12L16.5 21' 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='M27.5 5L12.5 20L27.5 35' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+ArrowLeftIcon.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'])
+}
+
+ArrowLeftIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
+}
+
+export default ArrowLeftIcon

package/src/components/icons/ArrowRightIcon.jsx

@@ -0,0 +1,75 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const ArrowRightIcon = ({ 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='M5 14L11 8L5 2' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case 'normal':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M7.5 21L16.5 12L7.5 3' 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='M12.5 35L27.5 20L12.5 5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+ArrowRightIcon.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'])
+}
+
+ArrowRightIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
+}
+
+export default ArrowRightIcon

package/src/components/icons/ArrowUpIcon.jsx

@@ -0,0 +1,75 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const ArrowDownIcon = ({ 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='M14 11L8 5L2 11' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case 'normal':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M21 16.5L12 7.5L3 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}
+        >
+          <path d='M35 27.5L20 12.5L5 27.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+ArrowDownIcon.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'])
+}
+
+ArrowDownIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
+}
+
+export default ArrowDownIcon