@platformatic/ui-components 0.1.55 → 0.1.56

package/package.json

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

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

@@ -76,12 +76,12 @@ const WorkspaceFailIcon = ({ color, size }) => {
           xmlns='http://www.w3.org/2000/svg'
           className={className}
         >
-          <rect x={15} y={15} width={37.5} height={37.5} rx={1} stroke='none' stroke-width={6} />
-          <rect x={45} y={105} width={30} height={37.7622} rx={1} transform='rotate(-180 45 105)' stroke='none' stroke-width={6} />
-          <rect x={105} y={105} width={45} height={37.7622} rx={1} transform='rotate(-180 105 105)' stroke='none' stroke-width={6} />
-          <circle cx={86.25} cy={33.75} r={18.75} stroke='none' stroke-width={6} />
-          <path d='M82.2188 39.2499L91.2812 29.25' stroke='none' stroke-width={6} strokeLinecap='round' strokeLinejoin='round' />
-          <path d='M91.7499 38.781L81.75 29.7185' stroke='none' stroke-width={6} strokeLinecap='round' strokeLinejoin='round' />
+          <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>
       )

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')
+  }
+}