@platformatic/ui-components 0.1.54 → 0.1.56

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@platformatic/ui-components",
   "description": "Platformatic UI Components",
-  "version": "0.1.54",
+  "version": "0.1.56",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {

package/renovate.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "config:base"
+  ]
+}

package/src/components/InfoBox.jsx

@@ -5,10 +5,10 @@ import styles from './InfoBox.module.css'
 import Button from './Button'
 import PlatformaticIcon from './PlatformaticIcon'
 
-function InfoBox ({ children, iconLogo, helpText, buttonProps }) {
+function InfoBox ({ children, iconName, iconColor, helpText, buttonProps }) {
   return (
     <div className={styles.container}>
-      <PlatformaticIcon size='extra-large' iconName={iconLogo} />
+      <PlatformaticIcon size='extra-large' iconName={iconName} color={iconColor} />
       {children}
       <p className={styles.helpText}>{helpText}</p>
       {buttonProps && (<Button type='button' size='extra-large' label={buttonProps.label} color={buttonProps.color} backgroundColor={buttonProps.backgroundColor} onClick={() => buttonProps.onClick()} fullWidth bold />)}
@@ -22,9 +22,13 @@ InfoBox.propTypes = {
    */
   children: PropTypes.node,
   /**
-   * iconLogo
+   * iconName
    */
-  iconLogo: PropTypes.string,
+  iconName: PropTypes.string,
+  /**
+   * iconColor
+   */
+  iconColor: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
   /**
    * helpText
    */
@@ -42,8 +46,9 @@ InfoBox.propTypes = {
 
 InfoBox.defaultProps = {
   children: null,
-  iconLogo: null,
-  helpText: null,
+  iconName: '',
+  iconColor: 'green',
+  helpText: '',
   buttonProps: null
 }
 

package/src/components/PlatformaticIcon.jsx

@@ -5,15 +5,18 @@ import Icons from './icons'
 import styles from './PlatformaticIcon.module.css'
 
 function PlatformaticIcon ({ iconName, color, onClick, size, classes, tip }) {
-  let icon = React.createElement(Icons[`${iconName}`], {
-    color,
-    size,
-    tip
-  })
-  if (onClick) {
-    let className = styles.cursorPointer
-    if (classes) className += ` ${classes}`
-    icon = (<span className={className} onClick={onClick}>{icon}</span>)
+  let icon = <></>
+  if (iconName) {
+    icon = React.createElement(Icons[`${iconName}`], {
+      color,
+      size,
+      tip
+    })
+    if (onClick) {
+      let className = styles.cursorPointer
+      if (classes) className += ` ${classes}`
+      icon = (<span className={className} onClick={onClick}>{icon}</span>)
+    }
   }
   return icon
 }
@@ -46,12 +49,12 @@ PlatformaticIcon.propTypes = {
 }
 
 PlatformaticIcon.defaultProps = {
-  iconName: null,
+  iconName: '',
   color: 'green',
   size: 'small',
   onClick: () => {},
   classes: null,
-  tip: null
+  tip: ''
 }
 
 export default PlatformaticIcon

package/src/components/Sidebar.jsx

@@ -29,8 +29,15 @@ function Sidebar (props) {
       {collapsed
         ? (
           <>
+            <button type='button' className={styles.buttonCollapse} onClick={() => { setCollapsed(false) }}>
+              <PlatformaticIcon
+                iconName='CircleArrowRightIcon'
+                color='white'
+                size='medium'
+              />
+            </button>
             <button type='button' className={styles.buttonExpand} onClick={() => { setCollapsed(false) }}>
-              <Icons.WorkspaceStaticIcon color='white' />
+              <Icons.WorkspaceStaticIcon color='white' size='large' />
             </button>
             <div className={styles.titleCollapsed} data-testid='lateral-bar-title'>
               {title}
@@ -38,7 +45,7 @@ function Sidebar (props) {
             <HorizontalSeparator marginBottom={2} marginTop={2} />
             <div className={styles.bottom}>
               <button type='button' className={styles.buttonSettings} onClick={onClickSettings}>
-                <Icons.GearIcon color='white' />
+                <Icons.GearIcon color='white' size='large' />
               </button>
             </div>
           </>
@@ -47,7 +54,7 @@ function Sidebar (props) {
           <>
             <button type='button' className={styles.buttonCollapse} onClick={() => { setCollapsed(true) }}>
               <PlatformaticIcon
-                iconName='CircleBackIcon'
+                iconName='CircleArrowLeftIcon'
                 color='white'
                 size='medium'
               />

package/src/components/Sidebar.module.css

@@ -6,7 +6,7 @@
   @apply max-w-[96px] text-center;
 }
 .buttonExpand {
-  @apply border rounded-md p-0 border-white;
+  @apply border rounded-md p-1 border-white;
 }
 .buttonSettings {
   @apply border rounded-md p-1 border-white;

package/src/components/icons/AlertIcon.jsx

@@ -19,7 +19,7 @@ const AlertIcon = ({ color, size }) => {
         >
           <path d='M14 14H2L8 2L14 14Z' stroke='none' strokeLinejoin='round' />
           <path d='M8 6V10.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
-          <circle cx='8' cy='12' r='0.5' fill='none' />
+          <circle cx={8} cy={12} r='0.5' fill='none' />
         </svg>
       )
       break

package/src/components/icons/ArrowUpIcon.jsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 
-const ArrowDownIcon = ({ color, size }) => {
+const ArrowUpIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
 
@@ -56,7 +56,7 @@ const ArrowDownIcon = ({ color, size }) => {
   return icon
 }
 
-ArrowDownIcon.propTypes = {
+ArrowUpIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
@@ -67,9 +67,9 @@ ArrowDownIcon.propTypes = {
   size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
 }
 
-ArrowDownIcon.defaultProps = {
+ArrowUpIcon.defaultProps = {
   color: 'main-dark-blue',
   size: 'medium'
 }
 
-export default ArrowDownIcon
+export default ArrowUpIcon

package/src/components/icons/{CircleBackIcon.jsx → CircleArrowLeftIcon.jsx}

@@ -2,7 +2,7 @@ import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 
-const CircleBackIcon = ({ color, size }) => {
+const CircleArrowLeftIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
 
@@ -10,16 +10,16 @@ const CircleBackIcon = ({ color, size }) => {
     case 'small':
       icon = (
         <svg
-          width={16}
-          height={16}
-          viewBox='0 0 16 16'
+          width={18}
+          height={18}
+          viewBox='0 0 18 18'
           fill='none'
           xmlns='http://www.w3.org/2000/svg'
           className={className}
         >
-          <circle cx={8} cy={8} r={7} stroke='none' />
+          <circle cx={9} cy={9} r={8} stroke='none' />
           <path
-            d='M9 5L6 9L9 13'
+            d='M10 5L6 9L10 13'
             stroke='none'
             strokeLinecap='round'
             strokeLinejoin='round'
@@ -30,17 +30,18 @@ const CircleBackIcon = ({ color, size }) => {
     case 'medium':
       icon = (
         <svg
-          width={24}
-          height={24}
-          viewBox='0 0 24 24'
+          width={26}
+          height={26}
+          viewBox='0 0 26 26'
           fill='none'
           xmlns='http://www.w3.org/2000/svg'
           className={className}
         >
-          <circle cx={12} cy={12} r={11} fill='none' stroke='none' />
+          <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'
           />
@@ -48,13 +49,34 @@ const CircleBackIcon = ({ color, size }) => {
       )
       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
 }
 
-CircleBackIcon.propTypes = {
+CircleArrowLeftIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
@@ -65,9 +87,9 @@ CircleBackIcon.propTypes = {
   size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
 }
 
-CircleBackIcon.defaultProps = {
+CircleArrowLeftIcon.defaultProps = {
   color: 'main-dark-blue',
   size: 'medium'
 }
 
-export default CircleBackIcon
+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/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

package/src/components/icons/CircleTwoArrowsUpIcon.jsx

@@ -0,0 +1,87 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const CircleTwoArrowsUpIcon = ({ 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}
+          transform='rotate(180)'
+        >
+          <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}
+          transform='rotate(180)'
+        >
+          <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}
+          transform='rotate(180)'
+        >
+          <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
+}
+
+CircleTwoArrowsUpIcon.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'])
+}
+
+CircleTwoArrowsUpIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default CircleTwoArrowsUpIcon

package/src/components/icons/ExploreDocIcon.jsx

@@ -0,0 +1,95 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const ExploreDocIcon = ({ 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='M3 5V3C3 2.44772 3.44772 2 4 2H12C12.5523 2 13 2.44772 13 3V13C13 13.5523 12.5523 14 12 14H3' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M5.08325 4H10.6388' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M10 6L11 6' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M10 9L11 9' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M8 12L11 12' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <circle cx={6} cy={8.5} r={2.5} stroke='none' />
+          <path d='M4 10L1 13' 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='M4.5 7.5V4C4.5 3.44772 4.94772 3 5.5 3H18.5C19.0523 3 19.5 3.44772 19.5 4V20C19.5 20.5523 19.0523 21 18.5 21H4.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M7.625 6H15.9583' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M15 9L16.5 9' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M15 13.5L16.5 13.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M12 18L16.5 18' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <circle cx={9} cy={12.75} r={3.75} stroke='none' strokeWidth={1.5} />
+          <path d='M6 15L1.5 19.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='M7.5 12.5V6C7.5 5.44772 7.94772 5 8.5 5H31.5C32.0523 5 32.5 5.44772 32.5 6V34C32.5 34.5523 32.0523 35 31.5 35H7.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M12.708 10H26.5969' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M25 15L27.5 15' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M25 22.5L27.5 22.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M20 30L27.5 30' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <circle cx={15} cy={21.25} r={6.25} stroke='none' strokeWidth={2} />
+          <path d='M10 25L2.5 32.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+ExploreDocIcon.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'])
+}
+
+ExploreDocIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default ExploreDocIcon

package/src/components/icons/LayersIcon.jsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 
-const AddIcon = ({ color, size }) => {
+const LayersIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
 
@@ -62,7 +62,7 @@ const AddIcon = ({ color, size }) => {
   return icon
 }
 
-AddIcon.propTypes = {
+LayersIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
@@ -73,9 +73,9 @@ AddIcon.propTypes = {
   size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
 }
 
-AddIcon.defaultProps = {
+LayersIcon.defaultProps = {
   color: 'main-dark-blue',
   size: 'medium'
 }
 
-export default AddIcon
+export default LayersIcon

package/src/components/icons/SocialGitLabIcon.jsx

@@ -31,7 +31,7 @@ const SocialGitLabIcon = ({ color, size }) => {
           </g>
           <defs>
             <clipPath id='clip0_852_2118'>
-              <rect width='13.3333' height='12.1637' fill='white' transform='translate(1.33337 2)' />
+              <rect width={13.3333} height={12.1637} fill='none' className={filledClassName} transform='translate(1.33337 2)' />
             </clipPath>
           </defs>
 
@@ -61,7 +61,7 @@ const SocialGitLabIcon = ({ color, size }) => {
           </g>
           <defs>
             <clipPath id='clip0_315_245'>
-              <rect width='20' height='18.2456' fill='white' transform='translate(2 3)' />
+              <rect width={20} height={18.2456} fill='none' className={filledClassName} transform='translate(2 3)' />
             </clipPath>
           </defs>
         </svg>
@@ -90,7 +90,7 @@ const SocialGitLabIcon = ({ color, size }) => {
           </g>
           <defs>
             <clipPath id='clip0_852_2190'>
-              <rect width='33.3333' height='30.4094' fill='white' transform='translate(3.33337 5)' />
+              <rect width={33.3333} height={30.4094} fill='none' className={filledClassName} transform='translate(3.33337 5)' />
             </clipPath>
           </defs>
         </svg>

package/src/components/icons/{Users2Icon.jsx → TwoUsersIcon.jsx}

@@ -2,7 +2,7 @@ import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 
-const Users2Icon = ({ color, size }) => {
+const TwoUsersIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
 
@@ -65,7 +65,7 @@ const Users2Icon = ({ color, size }) => {
   return icon
 }
 
-Users2Icon.propTypes = {
+TwoUsersIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
@@ -76,9 +76,9 @@ Users2Icon.propTypes = {
   size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
 }
 
-Users2Icon.defaultProps = {
+TwoUsersIcon.defaultProps = {
   color: 'main-dark-blue',
   size: 'medium'
 }
 
-export default Users2Icon
+export default TwoUsersIcon

package/src/components/icons/WorkspaceFailIcon.jsx

@@ -0,0 +1,112 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const WorkspaceFailIcon = ({ 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={2} y={2} width={5} height={5} rx={1} stroke='none' />
+          <rect x={6} y={14} width={4} height='5.03496' rx={1} transform='rotate(-180 6 14)' stroke='none' />
+          <rect x={14} y={14} width={6} height='5.03497' rx={1} transform='rotate(-180 14 14)' stroke='none' />
+          <circle cx={11.5} cy={4.5} r={2.5} stroke='none' />
+          <path d='M10.9624 5.23332L12.1707 3.89999' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M12.2332 5.17081L10.8999 3.96247' 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={3} y={3} width={7.5} height={7.5} rx={1} stroke='none' strokeWidth={1.5} />
+          <rect x={9} y={21} width={6} height={7.55245} rx={1} transform='rotate(-180 9 21)' stroke='none' strokeWidth={1.5} />
+          <rect x={21} y={21} width={9} height={7.55245} rx={1} transform='rotate(-180 21 21)' stroke='none' strokeWidth={1.5} />
+          <circle cx={17.25} cy={6.75} r={3.75} stroke='none' strokeWidth={1.5} />
+          <path d='M16.4436 7.84999L18.2561 5.85001' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M18.3498 7.75623L16.3499 5.94373' 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={5} y={5} width={12.5} height={12.5} rx={1} stroke='none' strokeWidth={2} />
+          <rect x={15} y={35} width={10} height={12.5874} rx={1} transform='rotate(-180 15 35)' stroke='none' strokeWidth={2} />
+          <rect x={35} y={35} width={15} height={12.5874} rx={1} transform='rotate(-180 35 35)' stroke='none' strokeWidth={2} />
+          <circle cx={28.75} cy={11.25} r={6.25} stroke='none' strokeWidth={2} />
+          <path d='M27.4062 13.0833L30.4271 9.75' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M30.5833 12.927L27.25 9.9062' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    case 'extra-large':
+      icon = (
+        <svg
+          width={120}
+          height={120}
+          viewBox='0 0 120 120'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={15} y={15} width={37.5} height={37.5} rx={1} stroke='none' strokeWidth={6} />
+          <rect x={45} y={105} width={30} height={37.7622} rx={1} transform='rotate(-180 45 105)' stroke='none' strokeWidth={6} />
+          <rect x={105} y={105} width={45} height={37.7622} rx={1} transform='rotate(-180 105 105)' stroke='none' strokeWidth={6} />
+          <circle cx={86.25} cy={33.75} r={18.75} stroke='none' strokeWidth={6} />
+          <path d='M82.2188 39.2499L91.2812 29.25' stroke='none' strokeWidth={6} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M91.7499 38.781L81.75 29.7185' stroke='none' strokeWidth={6} strokeLinecap='round' strokeLinejoin='round' />
+
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+WorkspaceFailIcon.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'])
+}
+
+WorkspaceFailIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default WorkspaceFailIcon

package/src/components/icons/index.js

@@ -19,15 +19,19 @@ import CalendarIcon from './CalendarIcon'
 import Calendar1DayIcon from './Calendar1DayIcon'
 import Calendar7DaysIcon from './Calendar7DaysIcon'
 import CircleAddIcon from './CircleAddIcon'
-import CircleBackIcon from './CircleBackIcon'
+import CircleArrowLeftIcon from './CircleArrowLeftIcon'
+import CircleArrowRightIcon from './CircleArrowRightIcon'
 import CircleExclamationIcon from './CircleExclamationIcon'
 import CircleCheckMarkIcon from './CircleCheckMarkIcon'
 import CircleCloseIcon from './CircleCloseIcon'
 import CircleCloseHoverIcon from './CircleCloseHoverIcon'
+import CircleTwoArrowsDownIcon from './CircleTwoArrowsDownIcon'
+import CircleTwoArrowsUpIcon from './CircleTwoArrowsUpIcon'
 import CloseIcon from './CloseIcon'
 import CopyPasteIcon from './CopyPasteIcon'
 import DatabaseIcon from './DatabaseIcon'
 import EditIcon from './EditIcon'
+import ExploreDocIcon from './ExploreDocIcon'
 import EnlargeIcon from './EnlargeIcon'
 import EntryIcon from './EntryIcon'
 import GearIcon from './GearIcon'
@@ -49,9 +53,10 @@ import SocialNPMIcon from './SocialNPMIcon'
 import SocialTwitterIcon from './SocialTwitterIcon'
 import StopIcon from './StopIcon'
 import TerminalIcon from './TerminalIcon'
-import Users2Icon from './Users2Icon'
+import TwoUsersIcon from './TwoUsersIcon'
 import UpgradeIcon from './UpgradeIcon'
 import WorkspaceDynamicIcon from './WorkspaceDynamicIcon'
+import WorkspaceFailIcon from './WorkspaceFailIcon'
 import WorkspaceReadyIcon from './WorkspaceReadyIcon'
 import WorkspaceStaticIcon from './WorkspaceStaticIcon'
 
@@ -77,15 +82,19 @@ export default {
   Calendar1DayIcon,
   Calendar7DaysIcon,
   CircleAddIcon,
-  CircleBackIcon,
+  CircleArrowLeftIcon,
+  CircleArrowRightIcon,
   CircleCheckMarkIcon,
   CircleExclamationIcon,
   CircleCloseIcon,
   CircleCloseHoverIcon,
+  CircleTwoArrowsDownIcon,
+  CircleTwoArrowsUpIcon,
   CloseIcon,
   CopyPasteIcon,
   DatabaseIcon,
   EditIcon,
+  ExploreDocIcon,
   EnlargeIcon,
   EntryIcon,
   GearIcon,
@@ -108,8 +117,9 @@ export default {
   SocialTwitterIcon,
   TerminalIcon,
   UpgradeIcon,
-  Users2Icon,
+  TwoUsersIcon,
   WorkspaceDynamicIcon,
+  WorkspaceFailIcon,
   WorkspaceReadyIcon,
   WorkspaceStaticIcon
 }

package/src/stories/InfoBox.stories.jsx

@@ -23,7 +23,7 @@ export default {
 const Template = (args) => <InfoBox {...args}><p>this will be your custom title</p></InfoBox>
 export const InfoBoxSample = Template.bind({})
 InfoBoxSample.args = {
-  iconLogo: 'UpgradeIcon',
+  iconName: 'UpgradeIcon',
   helpText: 'Helper text',
   buttonProps: {
     label: 'Sample button',
@@ -36,7 +36,7 @@ InfoBoxSample.args = {
 const ContainedTemplate = (args) => <div style={{ maxWidth: '300px' }}><InfoBox {...args} /></div>
 export const InfoBoxContained = ContainedTemplate.bind({})
 InfoBoxContained.args = {
-  iconLogo: 'UpgradeIcon',
+  iconName: 'UpgradeIcon',
   helpText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et dui facilisis, molestie urna sed, volutpat nibh.',
   buttonProps: {
     label: 'Sample button',
@@ -44,3 +44,15 @@ InfoBoxContained.args = {
     onClick: () => alert('Clicked ContainedTemplate')
   }
 }
+
+export const InfoBoxErrorContained = ContainedTemplate.bind({})
+InfoBoxErrorContained.args = {
+  iconName: 'WorkspaceFailIcon',
+  iconColor: 'red',
+  helpText: 'Write your own content',
+  buttonProps: {
+    label: 'Sample button',
+    color: 'white',
+    onClick: () => alert('Clicked ContainedErrorTemplate')
+  }
+}

package/src/stories/PlatformaticIcon.stories.jsx

@@ -2,15 +2,47 @@ import React from 'react'
 import PlatformaticIcon from '../components/PlatformaticIcon'
 import Icons from '../components/icons'
 
+const colors = ['green', 'white', 'red', 'main-dark-blue']
+
 const divStyle = {
-  width: '100%',
+  width: '100%'
+}
+
+const row = {
   display: 'flex',
-  flexGap: '10px'
+  width: '100%',
+  columnGap: '1rem',
+  alignItems: 'center'
+}
+
+const col = {
+  flex: 1
+}
+
+const paragraph = {
+  color: 'white',
+  fontSize: '12px'
 }
 
 export default {
   title: 'Platformatic/PlatformaticIcon',
-  component: PlatformaticIcon
+  component: PlatformaticIcon,
+  argTypes: {
+    color: {
+      type: 'string',
+      control: {
+        type: 'radio',
+        options: colors
+      }
+    },
+    size: {
+      type: 'string',
+      control: {
+        type: 'radio',
+        options: ['small', 'medium', 'large', 'extra-large']
+      }
+    }
+  }
 }
 
 const Template = (args) => <PlatformaticIcon {...args} />
@@ -22,36 +54,36 @@ PlatformaticIconDefault.args = {
 
 const AllIconsTemplate = (args) => {
   const icons = Object.values(Icons)
+
   return (
     <>
-      <p className='text-white'> Platformatic all icons size {args.size}</p>
       <div style={divStyle}>
-        {icons.map(IconComponent => <PlatformaticIcon key={IconComponent.name} iconName={IconComponent.name} {...args} />)}
+        <p style={paragraph}> All Platformatic Icons: {icons.length} </p>
+        {icons.map((IconComponent, index) => (
+          <div style={row} key={index}>
+            <div style={col}>
+              <p style={paragraph}>#{index + 1}: {IconComponent.name}</p>
+            </div>
+            <div style={col}>
+              <PlatformaticIcon key={IconComponent.name} iconName={IconComponent.name} size='small' {...args} />
+            </div>
+            <div style={col}>
+              <PlatformaticIcon key={IconComponent.name} iconName={IconComponent.name} size='medium' {...args} />
+            </div>
+            <div style={col}>
+              <PlatformaticIcon key={IconComponent.name} iconName={IconComponent.name} size='large' {...args} />
+            </div>
+            <div style={col}>
+              <PlatformaticIcon key={IconComponent.name} iconName={IconComponent.name} size='extra-large' {...args} />
+            </div>
+          </div>
+        ))}
       </div>
     </>
   )
 }
-export const PlatformaticIconSmall = AllIconsTemplate.bind({})
-PlatformaticIconSmall.args = {
+export const PlatformaticIconAll = AllIconsTemplate.bind({})
+PlatformaticIconAll.args = {
   color: 'white',
-  size: 'small',
   onClick: null
 }
-
-export const PlatformaticIconNormal = AllIconsTemplate.bind({})
-PlatformaticIconNormal.args = {
-  color: 'white',
-  size: 'medium'
-}
-
-export const PlatformaticIconLarge = AllIconsTemplate.bind({})
-PlatformaticIconLarge.args = {
-  color: 'green',
-  size: 'large'
-}
-
-export const PlatformaticIconExtraLarge = AllIconsTemplate.bind({})
-PlatformaticIconExtraLarge.args = {
-  color: 'green',
-  size: 'extra-large'
-}