@platformatic/ui-components 0.1.53 → 0.1.55

package/src/components/icons/CircleArrowLeftIcon.jsx

@@ -0,0 +1,95 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const CircleArrowLeftIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={18}
+          height={18}
+          viewBox='0 0 18 18'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx={9} cy={9} r={8} stroke='none' />
+          <path
+            d='M10 5L6 9L10 13'
+            stroke='none'
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+        </svg>
+      )
+      break
+    case 'medium':
+      icon = (
+        <svg
+          width={26}
+          height={26}
+          viewBox='0 0 26 26'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx={13} cy={13} r={12} fill='none' stroke='none' strokeWidth={1.5} />
+          <path
+            d='M14.5 7L8.5 13L14.5 19'
+            stroke='none'
+            strokeWidth={1.5}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+        </svg>
+      )
+      break
+
+    case 'large':
+      icon = (
+        <svg
+          width={42}
+          height={42}
+          viewBox='0 0 42 42'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx={21} cy={21} r={20} fill='none' stroke='none' strokeWidth={2} />
+          <path
+            d='M23.5 11L13.5 21L23.5 31'
+            stroke='none'
+            strokeWidth={2}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+CircleArrowLeftIcon.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'])
+}
+
+CircleArrowLeftIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default CircleArrowLeftIcon

package/src/components/icons/CircleArrowRightIcon.jsx

@@ -0,0 +1,98 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const CircleArrowRightIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={18}
+          height={18}
+          viewBox='0 0 18 18'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          transform='rotate(180)'
+          className={className}
+        >
+          <circle cx={9} cy={9} r={8} stroke='none' />
+          <path
+            d='M10 5L6 9L10 13'
+            stroke='none'
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+        </svg>
+      )
+      break
+    case 'medium':
+      icon = (
+        <svg
+          width={26}
+          height={26}
+          viewBox='0 0 26 26'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          transform='rotate(180)'
+          className={className}
+        >
+          <circle cx={13} cy={13} r={12} fill='none' stroke='none' strokeWidth={1.5} />
+          <path
+            d='M14.5 7L8.5 13L14.5 19'
+            stroke='none'
+            strokeWidth={1.5}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+        </svg>
+      )
+      break
+
+    case 'large':
+      icon = (
+        <svg
+          width={42}
+          height={42}
+          viewBox='0 0 42 42'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          transform='rotate(180)'
+          className={className}
+        >
+          <circle cx={21} cy={21} r={20} fill='none' stroke='none' strokeWidth={2} />
+          <path
+            d='M23.5 11L13.5 21L23.5 31'
+            stroke='none'
+            strokeWidth={2}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+CircleArrowRightIcon.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'])
+}
+
+CircleArrowRightIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default CircleArrowRightIcon

package/src/components/icons/CircleCheckMarkIcon.jsx

@@ -1,9 +1,11 @@
 import * as React from 'react'
+import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 
-const CircleCheckMarkIcon = ({ color = 'green', size = 'small' }) => {
+const CircleCheckMarkIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
+
   switch (size) {
     case 'small':
       icon = (
@@ -15,18 +17,23 @@ const CircleCheckMarkIcon = ({ color = 'green', size = 'small' }) => {
           xmlns='http://www.w3.org/2000/svg'
           className={className}
         >
-          <circle
-            cx={8}
-            cy={8}
-            r={6}
-            stroke='none'
-          />
-          <path
-            d='M5 8L7.5 10L11 6'
-            stroke='none'
-            strokeLinecap='round'
-            strokeLinejoin='round'
-          />
+          <circle cx={8} cy={8} r={6} stroke='none' />
+          <path d='M5 8L7.5 10L11 6' 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={12} cy={12} r={9} stroke='none' strokeWidth={1.5} />
+          <path d='M7.5 12L11.25 15L16.5 9' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
         </svg>
       )
       break
@@ -34,33 +41,38 @@ const CircleCheckMarkIcon = ({ color = 'green', size = 'small' }) => {
       icon = (
         <svg
           width={40}
-          height={41}
-          viewBox='0 0 40 41'
+          height={40}
+          viewBox='0 0 40 40'
           fill='none'
           xmlns='http://www.w3.org/2000/svg'
           className={className}
         >
-          <circle
-            cx={20}
-            cy={20.3334}
-            r={15}
-            stroke='none'
-            strokeWidth={2.5}
-          />
-          <path
-            d='M12.5 20.3334L18.75 25.3334L27.5 15.3334'
-            stroke='none'
-            strokeWidth={2.5}
-            strokeLinecap='round'
-            strokeLinejoin='round'
-          />
+          <circle cx={20} cy={20} r={15} stroke='none' strokeWidth={2} />
+          <path d='M12.5 20L18.75 25L27.5 15' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
         </svg>
       )
       break
+
     default:
       break
   }
   return icon
 }
 
+CircleCheckMarkIcon.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'])
+}
+
+CircleCheckMarkIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
 export default CircleCheckMarkIcon

package/src/components/icons/CircleCloseHoverIcon.jsx

@@ -1,42 +1,68 @@
 import * as React from 'react'
+import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 
-const CircleCloseHoverIcon = ({ color = 'green' }) => {
-  const className = styles[`${color}`] + ' ' + styles[`fill-circle-${color}`]
-  return (
-    <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={12}
-        r={11.25}
-        fill='none'
-        fillOpacity={0.2}
-        stroke='none'
-        strokeWidth={1.5}
-      />
-      <path
-        d='M6 6L18 18'
-        stroke='none'
-        strokeWidth={1.5}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M6 18L18 6'
-        stroke='none'
-        strokeWidth={1.5}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-    </svg>
-  )
+const CircleCloseHoverIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+
+  switch (size) {
+    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={12}
+            r={11.25}
+            fill='none'
+            fillOpacity={0.2}
+            stroke='none'
+            strokeWidth={1.5}
+          />
+          <path
+            d='M6 6L18 18'
+            stroke='none'
+            strokeWidth={1.5}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+          <path
+            d='M6 18L18 6'
+            stroke='none'
+            strokeWidth={1.5}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+CircleCloseHoverIcon.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'])
+}
+
+CircleCloseHoverIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
 }
 
 export default CircleCloseHoverIcon

package/src/components/icons/CircleCloseIcon.jsx

@@ -1,32 +1,58 @@
 import * as React from 'react'
+import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 
-const CircleCloseIcon = ({ color = 'green' }) => {
-  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}
-    >
-      <circle cx={12} cy={12} r={11.5} stroke='none' />
-      <path
-        d='M6 6L18 18'
-        stroke='none'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M6 18L18 6'
-        stroke='none'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-    </svg>
-  )
+const CircleCloseIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+
+  switch (size) {
+    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={12} r={11.5} stroke='none' />
+          <path
+            d='M6 6L18 18'
+            stroke='none'
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+          <path
+            d='M6 18L18 6'
+            stroke='none'
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+CircleCloseIcon.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'])
+}
+
+CircleCloseIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
 }
 
 export default CircleCloseIcon

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/CircleTwoArrowsDownIcon.jsx

@@ -0,0 +1,84 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const CircleTwoArrowsDownIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={18}
+          height={18}
+          viewBox='0 0 18 18'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx={9} cy={9} r={8} stroke='none' />
+          <path d='M6 9.40009L9 12.4001L12 9.40009' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M6 6L9 9L12 6' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+
+        </svg>
+      )
+      break
+    case 'medium':
+      icon = (
+        <svg
+          width={26}
+          height={26}
+          viewBox='0 0 26 26'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx={13} cy={13} r={12} stroke='none' strokeWidth={1.5} />
+          <path d='M8.5 13.6001L13 18.1001L17.5 13.6001' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M8.5 8.5L13 13L17.5 8.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+
+        </svg>
+      )
+      break
+
+    case 'large':
+      icon = (
+        <svg
+          width={42}
+          height={42}
+          viewBox='0 0 42 42'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx={21} cy={21} r={20} stroke='none' strokeWidth={2} />
+          <path d='M13.5 22.0002L21 29.5002L28.5 22.0002' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M13.5 13.5L21 21L28.5 13.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+CircleTwoArrowsDownIcon.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'])
+}
+
+CircleTwoArrowsDownIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default CircleTwoArrowsDownIcon