@platformatic/ui-components 0.1.55 → 0.1.57

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@platformatic/ui-components",
   "description": "Platformatic UI Components",
-  "version": "0.1.55",
+  "version": "0.1.57",
   "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/ListElement.jsx

@@ -1,23 +1,56 @@
 import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faCircleCheck } from '@fortawesome/free-regular-svg-icons'
+import PropTypes from 'prop-types'
+import PlatformaticIcon from './PlatformaticIcon'
 import styles from './ListElement.module.css'
-export default function List ({ title, detail }) {
+
+function List ({ title, detail, marginSize, titleAspect }) {
+  let className = `${styles.container} `
+  className += styles[`margin-${marginSize}`]
+
+  let classNameTitle = `${styles.title} `
+  classNameTitle += styles[`${titleAspect}`]
+
   return (
-    <div className={styles.container}>
-      <div className={styles.iconCol}>
-        <div data-testid='list-element-title-icon' className={styles.icon}>
-          <FontAwesomeIcon icon={faCircleCheck} />
-        </div>
-      </div>
-      <div className={styles.textCol}>
-        <div className={styles.title} data-testid='list-element-title'>
+    <div className={className}>
+      <div className={styles.row}>
+        <PlatformaticIcon iconName='CircleCheckMarkIcon' color='green' data-testid='list-element-title-icon' onClick={null} />
+        <div className={classNameTitle} data-testid='list-element-title'>
           {title}
         </div>
-        <div data-test-id='list-element-detail'>
-          {detail}
-        </div>
       </div>
+      {detail &&
+        (
+          <div className={styles.textCol} data-test-id='list-element-detail'>
+            {detail}
+          </div>
+        )}
     </div>
   )
 }
+List.propTypes = {
+  /**
+   * title
+   */
+  title: PropTypes.string,
+  /**
+   * detail
+   */
+  detail: PropTypes.string,
+  /**
+   * marginSize
+   */
+  marginSize: PropTypes.oneOf(['small', 'medium']),
+  /**
+   * titleAspect
+   */
+  titleAspect: PropTypes.oneOf(['boldAndGreen', 'lightAndWhite'])
+}
+
+List.defaultProps = {
+  title: '',
+  detail: '',
+  marginSize: 'medium',
+  titleAspect: 'boldAndGreen'
+}
+
+export default List

package/src/components/ListElement.module.css

@@ -1,21 +1,26 @@
 .container {
-  @apply flex flex-row my-4
+  @apply flex flex-col my-4
 }
-
-.iconCol {
-  @apply flex flex-col w-6
+.margin-medium {
+  @apply my-4
 }
-
-.icon {
-  @apply text-light-green
+.margin-small {
+  @apply my-2
 }
-
 .title {
-  @apply flex text-light-green font-bold w-full
+  @apply w-full;
+}
+.boldAndGreen {
+  @apply text-light-green font-bold;
+}
+.lightAndWhite {
+  @apply text-white font-light;
+}
+.row {
+  @apply flex gap-x-2 items-center w-full;
 }
-
 .textCol {
-  @apply flex flex-col text-white text-justify w-full
+  @apply flex flex-col text-white text-justify w-full ml-6;
 }
 
 .detailSpace {

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

package/src/stories/List.stories.jsx

@@ -15,7 +15,7 @@ ListWithNoElements.args = {
 
 const TemplateWithElements = (args) => (
   <List {...args}>
-    <ListElement title='List Element 1' detail='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et dui facilisis, molestie urna sed, volutpat nibh.' />
+    <ListElement title='List Element 1' detail='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et dui facilisis, molestie urna sed, volutpat nibh.' titleAspect='boldAndGreen' />
     <ListElement title='List Element 2' detail='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et dui facilisis, molestie urna sed, volutpat nibh.' />
   </List>
 )
@@ -27,3 +27,15 @@ ListWithElements.args = {
 
 export const ListWithElementsNoTitle = TemplateWithElements.bind({})
 ListWithElementsNoTitle.args = {}
+
+const TemplateWithElementsVariants = (args) => (
+  <List {...args}>
+    <ListElement title='List Element 1' titleAspect='boldAndGreen' marginSize='small' />
+    <ListElement title='List Element 2' titleAspect='lightAndWhite' marginSize='small' />
+  </List>
+)
+
+export const ListWithElementsVariants = TemplateWithElementsVariants.bind({})
+ListWithElementsVariants.args = {
+  title: 'List Title'
+}