imbric-theme 0.5.3 → 0.5.5

package/atoms/AlertModal/AlertModal.js

@@ -7,13 +7,15 @@ import withStyles from '../../hocs/withStyles'
 import withReactContent from 'sweetalert2-react-content'
 import Swal from 'sweetalert2'
 
-export const AlertModal = ({ 
+export const AlertModal = ({
   children,
   getStyles,
   titleAlert,
   subTitleAlert,
   iconAlert,
   txtBtnAlert,
+  txtBtnAlertCancel,
+  showCancelButton,
   onConfirm,
   onDismiss,
 }) => {
@@ -25,9 +27,11 @@ export const AlertModal = ({
     icon: iconAlert,
     html: subTitleAlert,
     confirmButtonText: txtBtnAlert,
+    cancelButtonText: txtBtnAlertCancel,
+    showCancelButton: showCancelButton,
   }).then((result) => {
     if (result.isConfirmed || (result.isDismissed && !onDismiss)) {
-      onConfirm()  
+      onConfirm()
     } else if (result.isDismissed) {
       onDismiss()
     }
@@ -41,21 +45,25 @@ AlertModal.propTypes = {
   children: PropTypes.node,
   getStyles: PropTypes.func.isRequired,
   titleAlert: PropTypes.string.isRequired,
-  subTitleAlert:  PropTypes.string.isRequired,
-  txtBtnAlert:  PropTypes.string.isRequired,
+  subTitleAlert: PropTypes.string.isRequired,
+  txtBtnAlert: PropTypes.string.isRequired,
+  txtBtnAlertCancel: PropTypes.string,
   iconAlert: PropTypes.oneOf(options.icon),
   onConfirm: PropTypes.func,
   onDismiss: PropTypes.func,
+  showCancelButton: PropTypes.bool,
 }
 
 AlertModal.defaultProps = {
-  getStyles: () => {},
-  onConfirm: () => {},
+  getStyles: () => { },
+  onConfirm: () => { },
   // onDismiss: () => {}, // Not default for use onConfirm if is undefined
   titleAlert: 'Felicidades!',
-  subTitleAlert:  'Todo ha ido correctamente',
+  subTitleAlert: 'Todo ha ido correctamente',
   txtBtnAlert: 'Ok',
+  txtBtnAlertCancel: 'Cancelar',
   iconAlert: 'success',
+  showCancelButton: false,
 }
 
 export default withStyles(styles)(AlertModal)

package/atoms/Checkbox/Checkbox.js

@@ -13,6 +13,7 @@ export const Checkbox = ({
   name,
   linkCheck,
   nameLinkCheck,
+  handleClick,
 }) => {
   const [checked, setChecked] = useState(value)
 
@@ -29,6 +30,7 @@ export const Checkbox = ({
           setChecked(!checked)
           onChange(e)
         }}
+        onclick={handleClick}
       />
       <label htmlFor={name} className={getStyles('checkbox-custom-label')}>
         {label}
@@ -65,6 +67,7 @@ Checkbox.defaultProps = {
   label: 'Aceptas los terminos',
   nameLinkCheck: '',
   linkCheck: '',
+  handleClick: () => {},
 }
 
 export default withStyles(styles)(Checkbox)

package/atoms/Label/Label.module.css

@@ -35,4 +35,8 @@
 
 .color-tertiary {
   color: var(--color-tertiary);
+}
+
+.color-info {
+  color: var(--color-brand-azure-radiance);
 }

package/atoms/Label/constants.js

@@ -1 +1 @@
-export const options = { colors: ['label', 'base', 'muted', 'inverted', 'primary', 'tertiary'], }
+export const options = { colors: ['label', 'base', 'muted', 'inverted', 'primary', 'tertiary', 'info'], }

package/layout/Navbar/Navbar.js

@@ -1,21 +1,31 @@
-import React from 'react'
+import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import styles from './Navbar.module.css'
 import withStyles from '../../hocs/withStyles'
 import { useRouter } from "next/router";
-import Link from 'next/link'
-import DynamicSelect from '../../molecules/DynamicSelect'
+import ReactTooltip from 'react-tooltip'
 
 import Heading from '../../atoms/Heading/Heading'
 import Tabs from '../../molecules/Tabs/Tabs'
 import Icon from '../../atoms/Icon'
-import { options } from './constants'
 
-export const Navbar = ({ getStyles, viewTabsNav, viewOptionsNav, children, linkLogout, defaultValueLanguage, optionsSelectLanguage, handleChangeLanguage, languageSwitchLink }) => {
+export const Navbar = ({ getStyles, viewTabsNav, viewOptionsNav, children, linkLogout, linkLegal, linkInfo, linkProfile, txtTootipLegal, txtTootipInfo, txtTootipProfile, languageSwitchLink }) => {
 
 
   const router = useRouter();
 
+  // STATE TOOLTIP
+  const [isToolTipMounted, setIsToolTipMounted] = useState(false)
+
+  // TOOLTIP
+  const handleMouseEnter = () => {
+    setIsToolTipMounted(true)
+  }
+  const handleMouseLeave = () => {
+    setIsToolTipMounted(false)
+  }
+
+
   const handleClick = (e, path) => {
 
     console.log("I clicked on the About Page" + path);
@@ -28,6 +38,8 @@ export const Navbar = ({ getStyles, viewTabsNav, viewOptionsNav, children, linkL
   };
 
 
+
+
   return (
     <>
       <header className={getStyles('navbar')}>
@@ -74,19 +86,81 @@ export const Navbar = ({ getStyles, viewTabsNav, viewOptionsNav, children, linkL
 
         {viewOptionsNav ? (
           <div className={getStyles('navbar__actions')}>
-            {/* <div className={getStyles('navbar__item')}>Legal</div>
-          <div className={getStyles('navbar__item')}>User Guide</div> */}
 
-            {options.map((item, index) => (
+
+            <span
+              data-tip
+              data-for='legal'
+              onMouseEnter={handleMouseEnter}
+              onMouseLeave={handleMouseLeave}
+            >
+              <Icon
+                size='lg'
+                name='legal'
+                color='highlight'
+                background='transparent'
+                onClick={linkLegal}
+              />
+
+            </span>
+
+            {isToolTipMounted ? (
+              <ReactTooltip id='legal' type='error'>
+                <span>{txtTootipLegal}</span>
+              </ReactTooltip>
+            ) : null}
+
+
+
+
+            <span
+              data-tip
+              data-for='info'
+              onMouseEnter={handleMouseEnter}
+              onMouseLeave={handleMouseLeave}
+            >
+              <Icon
+                size='lg'
+                name='info'
+                color='highlight'
+                background='transparent'
+                onClick={linkInfo}
+              />
+
+            </span>
+
+            {isToolTipMounted ? (
+              <ReactTooltip id='info' type='error'>
+                <span>{txtTootipInfo}</span>
+              </ReactTooltip>
+            ) : null}
+
+
+
+            <span
+              data-tip
+              data-for='profile'
+              onMouseEnter={handleMouseEnter}
+              onMouseLeave={handleMouseLeave}
+            >
               <Icon
-                key={index}
                 size='lg'
-                name={item.icon}
+                name='profile'
                 color='highlight'
                 background='transparent'
-                onClick={(e) => handleClick(e, item.href)}
+                onClick={linkProfile}
               />
-            ))}
+
+            </span>
+
+            {isToolTipMounted ? (
+              <ReactTooltip id='profile' type='error'>
+                <span>{txtTootipProfile}</span>
+              </ReactTooltip>
+            ) : null}
+
+
+
 
             {/* <DynamicSelect
               isClearable={false}
@@ -145,6 +219,9 @@ Navbar.propTypes = {
   viewTabsNav: PropTypes.bool,
   viewOptionsNav: PropTypes.bool,
   linkLogout: PropTypes.func,
+  linkLegal: PropTypes.func,
+  linkInfo: PropTypes.func,
+  linkProfile: PropTypes.func,
   handleChange: PropTypes.func,
   languageSwitchLink: PropTypes.any.isRequired,
 }

package/molecules/Dropdown/Dropdown.js

@@ -47,7 +47,7 @@ Dropdown.propTypes = {
       value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     })
   ).isRequired,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.any]),
   id: PropTypes.string,
   isInline: PropTypes.bool,
 }

package/molecules/RowTable/RowTable.js

@@ -122,12 +122,27 @@ export const RowTable = ({
 
                           {item[itemTd.accessor].map((itemTdObj, index, array) => (
 
-                            <span key={itemTdObj.id}>{itemTdObj[itemTd.subAccessor]}
+                            <>
 
-                              {array.length - 1 !== index ?
-                                <span>, </span> : null}
+                              <span className={getStyles('tdlabelAlt')} key={itemTdObj.id + 'label'}>
 
-                            </span>
+                                {itemTdObj[itemTd.subAccessorAlt]}
+
+                                {array.length - 1 !== index ?
+                                  <span>, </span> : null}
+                                :&nbsp;
+                              </span>
+
+                              <span key={itemTdObj.id}>
+
+                                {itemTdObj[itemTd.subAccessor]}
+
+                                {array.length - 1 !== index ?
+                                  <span>, </span> : null}
+
+                              </span>
+
+                            </>
 
                           ))}
 

package/molecules/RowTable/RowTable.module.css

@@ -34,4 +34,8 @@
 .tr-content:hover {
   background-color: #edf1fe;
   cursor: pointer;
+}
+
+.tdlabelAlt {
+  font-weight: bold;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imbric-theme",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "description": "Components library IMBRIC",
   "private": false,
   "main": "index.js",