@platformatic/ui-components 0.1.57 → 0.1.59

package/src/components/icons/CircleArrowRightIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const CircleArrowRightIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -83,11 +84,11 @@ CircleArrowRightIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 CircleArrowRightIcon.defaultProps = {

package/src/components/icons/CircleCheckMarkIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const CircleCheckMarkIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -63,11 +64,11 @@ CircleCheckMarkIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 CircleCheckMarkIcon.defaultProps = {

package/src/components/icons/CircleCloseHoverIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const CircleCloseHoverIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -53,11 +54,11 @@ CircleCloseHoverIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 CircleCloseHoverIcon.defaultProps = {

package/src/components/icons/CircleCloseIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const CircleCloseIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -43,11 +44,11 @@ CircleCloseIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 CircleCloseIcon.defaultProps = {

package/src/components/icons/CircleExclamationIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const CircleExclamationIcon = ({ color, size, tip }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -72,11 +73,11 @@ CircleExclamationIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large']),
+  size: PropTypes.oneOf(SIZES),
   /**
    * tip
    */

package/src/components/icons/CircleFullIcon.jsx

@@ -0,0 +1,77 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
+
+const CircleFullIcon = ({ 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}
+        >
+          <circle cx={8} cy={8} r={6} 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}
+        >
+          <circle cx={12} cy={12} r={9} 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}
+        >
+          <circle cx={20} cy={20} r={15} fill='none' className={filledClassName} />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+CircleFullIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES)
+}
+
+CircleFullIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default CircleFullIcon

package/src/components/icons/CircleTwoArrowsDownIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const CircleTwoArrowsDownIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -69,11 +70,11 @@ CircleTwoArrowsDownIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 CircleTwoArrowsDownIcon.defaultProps = {

package/src/components/icons/CircleTwoArrowsUpIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const CircleTwoArrowsUpIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -72,11 +73,11 @@ CircleTwoArrowsUpIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 CircleTwoArrowsUpIcon.defaultProps = {

package/src/components/icons/CloseIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const CloseIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -64,11 +65,11 @@ CloseIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 CloseIcon.defaultProps = {

package/src/components/icons/CopyPasteIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const CopyPasteIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -66,11 +67,11 @@ CopyPasteIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 CopyPasteIcon.defaultProps = {

package/src/components/icons/DatabaseIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const DatabaseIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -66,11 +67,11 @@ DatabaseIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 DatabaseIcon.defaultProps = {

package/src/components/icons/EditIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const EditIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -66,11 +67,11 @@ EditIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 EditIcon.defaultProps = {

package/src/components/icons/EnlargeIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const EnlargeIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -70,11 +71,11 @@ EnlargeIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 EnlargeIcon.defaultProps = {

package/src/components/icons/EntryIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const EntryIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -67,11 +68,11 @@ EntryIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 EntryIcon.defaultProps = {

package/src/components/icons/ExploreDocIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const ExploreDocIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -80,11 +81,11 @@ ExploreDocIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 ExploreDocIcon.defaultProps = {

package/src/components/icons/GearIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const GearIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -63,11 +64,11 @@ GearIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 GearIcon.defaultProps = {

package/src/components/icons/GraphQLIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const GraphQLIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -83,11 +84,11 @@ GraphQLIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 GraphQLIcon.defaultProps = {

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

@@ -1,16 +1,17 @@
-.green > circle,
-.green > ellipse,
-.green > rect, 
-.green > line, 
-.green > path {
+.main-green > circle,
+.main-green > ellipse,
+.main-green > rect, 
+.main-green > line, 
+.main-green > path {
   @apply stroke-main-green;
 }
 
-.red > circle,
-.red > ellipse,
-.red > rect,
-.red > line, 
-.red > path {
+
+.error-red > circle,
+.error-red > ellipse,
+.error-red > rect,
+.error-red > line, 
+.error-red > path {
   @apply stroke-error-red;
 }
 
@@ -28,18 +29,29 @@
 .main-dark-blue > path {
   @apply stroke-main-dark-blue;
 }
+.warning-yellow > circle,
+.warning-yellow > ellipse,
+.warning-yellow > rect,
+.warning-yellow > line,
+.warning-yellow > path {
+  @apply stroke-warning-yellow;
+}
+
 .filled-white {
   @apply fill-white
 }
-.filled-red{
+.filled-error-red{
   @apply fill-error-red;
 }
 .filled-main-dark-blue {
   @apply fill-main-dark-blue ;
 }
-.filled-green {
+.filled-main-green {
   @apply fill-main-green ;
 }
+.filled-warning-yellow {
+  @apply fill-warning-yellow ;
+}
 
 .fill-circle-green > circle {
   @apply fill-white;

package/src/components/icons/KeyIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const KeyIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -70,11 +71,11 @@ KeyIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 KeyIcon.defaultProps = {

package/src/components/icons/LayersIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const LayersIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -66,11 +67,11 @@ LayersIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 LayersIcon.defaultProps = {

package/src/components/icons/LensIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const LensIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -64,11 +65,11 @@ LensIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 LensIcon.defaultProps = {

package/src/components/icons/LiveIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const LiveIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -70,11 +71,11 @@ LiveIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 LiveIcon.defaultProps = {

package/src/components/icons/LogOutIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const LogOutIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -66,11 +67,11 @@ LogOutIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 LogOutIcon.defaultProps = {

package/src/components/icons/MetricsIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const MetricsIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -70,11 +71,11 @@ MetricsIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 MetricsIcon.defaultProps = {

package/src/components/icons/PlayIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const PlayIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -60,11 +61,11 @@ PlayIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 PlayIcon.defaultProps = {