@platformatic/ui-components 0.1.56 → 0.1.57

package/package.json

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

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