imbric-theme 0.7.0 → 0.7.2

package/atoms/Modal/Modal.js

@@ -37,6 +37,7 @@ export const Modal = ({
   isPlayground,
   titleModal,
   isFullWidth,
+  isFullWidthSoft,
 }) => {
   const isDesktop = useMedia(['(min-width: 992px)'], [true])
   const [onFadeOut, setOnFadeOut] = useState(false)
@@ -52,13 +53,13 @@ export const Modal = ({
       onClick={handleClose}
     >
       <div
-        className={getStyles(isFullWidth ? 'modal-full' : 'modal', ['type'])}
+        className={getStyles(isFullWidth ? 'modal-full' : isFullWidthSoft ? 'modal-full-soft' : 'modal', ['type'])}
         onClick={createHandlerClick()}
       >
         <div className={getStyles('heading')}>
           {!!onClose && (
             <Icon
-            id='btnColsedModal'
+              id='btnColsedModal'
               color={isDesktop && type === 'secondary' ? 'primary' : 'primary'}
               name={isDesktop ? 'cross' : 'angleLeft'}
               background={isDesktop ? 'transparent' : 'muted'}
@@ -76,13 +77,19 @@ export const Modal = ({
               })}
             />
           )}
-					<Heading color='black' size='lg' weight='light'>
-						{titleModal}
-					</Heading>
+          <Heading color='black' size='lg' weight='light'>
+            {titleModal}
+          </Heading>
         </div>
 
-        {isFullWidth ? <div className={getStyles('container-full')}>{children}</div> : <Container><div className={getStyles('container')}>{children}</div></Container>}
-        
+        {isFullWidth ?
+          <div className={getStyles('container-full')}>{children}</div>
+          :
+          isFullWidthSoft ? <div className={getStyles('container-full-soft')}>{children}</div>
+            :
+            <Container><div className={getStyles('container')}>{children}</div></Container>
+        }
+
       </div>
     </div>
   )
@@ -99,14 +106,16 @@ Modal.propTypes = {
   type: PropTypes.oneOf(options.types),
   isPlayground: PropTypes.bool,
   isFullWidth: PropTypes.bool,
+  isFullWidthSoft: PropTypes.bool,
   titleModal: PropTypes.string,
 }
 
 Modal.defaultProps = {
-  getStyles: () => {},
+  getStyles: () => { },
   type: 'primary',
   titleModal: 'Ejemplo titulo',
-  isFullWidth: false
+  isFullWidth: false,
+  isFullWidthSoft: false
 }
 
 export default withStyles(styles)(Modal)

package/atoms/Modal/Modal.module.css

@@ -32,6 +32,14 @@
   padding: 16px 32px;
 }
 
+.modal-full-soft {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  padding: 16px 32px;
+}
+
 :not(.is-playground)>.modal {
   animation: fadeInModal 0.4s ease-in forwards;
   opacity: 0;
@@ -71,7 +79,7 @@
 
 @media (min-width: 992px) {
   .modal {
-    max-width: 465px;
+    max-width: 520px;
     height: auto;
     border-radius: var(--border-radius-sm);
     /* max-height: 100%;
@@ -84,6 +92,12 @@
     padding: 16px 32px;
   }
 
+  .modal-full-soft {
+    width: 90%;
+    height: auto;
+    border-radius: var(--border-radius-sm);
+  }
+
   .heading {
     flex-direction: row-reverse;
   }
@@ -98,6 +112,13 @@
     overflow: auto;
     min-width: 100%;
   }
+
+  .container-full-soft {
+    max-height: 600px;
+    overflow: auto;
+    min-width: 100%;
+  }
+
 }
 
 @keyframes fadeInModal {

package/layout/Navbar/Navbar.js

@@ -9,8 +9,25 @@ import Heading from '../../atoms/Heading/Heading'
 import Tabs from '../../molecules/Tabs/Tabs'
 import Icon from '../../atoms/Icon'
 
-export const Navbar = ({ getStyles, viewTabsNav, viewOptionsNav, children, linkLogout, linkLegal, linkInfo, linkProfile, txtTootipLegal, txtTootipInfo, txtTootipProfile, languageSwitchLink }) => {
-
+export const Navbar = ({
+  getStyles,
+  viewTabsNav,
+  viewOptionsNav,
+  isViewLegal,
+  isViewInfo,
+  isViewProfile,
+  isViewLogout,
+  children,
+  linkLogout,
+  linkLegal,
+  linkInfo,
+  linkProfile,
+  txtTootipLegal,
+  txtTootipInfo,
+  txtTootipProfile,
+  languageSwitchLink,
+
+}) => {
 
   const router = useRouter();
 
@@ -87,114 +104,97 @@ export const Navbar = ({ getStyles, viewTabsNav, viewOptionsNav, children, linkL
         {viewOptionsNav ? (
           <div className={getStyles('navbar__actions')}>
 
-
-            <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>
+            {isViewLegal ? (
+              <>
+                <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}
+              </>
             ) : 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>
+            {isViewInfo ? (
+              <>
+                <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}
+              </>
             ) : null}
 
+            {isViewProfile ? (
+              <>
+                <span
+                  data-tip
+                  data-for='profile'
+                  onMouseEnter={handleMouseEnter}
+                  onMouseLeave={handleMouseLeave}
+                >
+                  <Icon
+                    size='lg'
+                    name='profile'
+                    color='highlight'
+                    background='transparent'
+                    onClick={linkProfile}
+                  />
+
+                </span>
+
+                {isToolTipMounted ? (
+                  <ReactTooltip id='profile' type='error'>
+                    <span>{txtTootipProfile}</span>
+                  </ReactTooltip>
+                ) : null}
+              </>
+            ) : null}
 
+            {languageSwitchLink}
 
-            <span
-              data-tip
-              data-for='profile'
-              onMouseEnter={handleMouseEnter}
-              onMouseLeave={handleMouseLeave}
-            >
+            {isViewLogout ? (
               <Icon
                 size='lg'
-                name='profile'
+                name='logout'
                 color='highlight'
                 background='transparent'
-                onClick={linkProfile}
+                onClick={linkLogout}
               />
-
-            </span>
-
-            {isToolTipMounted ? (
-              <ReactTooltip id='profile' type='error'>
-                <span>{txtTootipProfile}</span>
-              </ReactTooltip>
             ) : null}
 
 
-
-
-            {/* <DynamicSelect
-              isClearable={false}
-              // defaultValue={{
-              //   label: 'ES',
-              //   value: 'es'
-              // }}
-              defaultValue={defaultValueLanguage}
-              onChange={handleChangeLanguage}
-              optionsSelect={optionsSelectLanguage}
-              // optionsSelect={[
-              //   {
-              //     label: 'ES',
-              //     value: 'es'
-              //   },
-              //   {
-              //     label: 'EN',
-              //     value: 'en'
-              //   }
-              // ]}
-            /> */}
-
-            {languageSwitchLink}
-
-            <Icon
-              size='lg'
-              name='logout'
-              color='highlight'
-              background='transparent'
-              onClick={linkLogout}
-            />
-
-
-
           </div>
 
         ) : null}
@@ -224,12 +224,20 @@ Navbar.propTypes = {
   linkProfile: PropTypes.func,
   handleChange: PropTypes.func,
   languageSwitchLink: PropTypes.any.isRequired,
+  isViewLegal: PropTypes.bool,
+  isViewInfo: PropTypes.bool,
+  isViewProfile: PropTypes.bool,
+  isViewLogout: PropTypes.bool,
 }
 
 Navbar.defaultProps = {
   viewTabsNav: false,
   viewOptionsNav: true,
   getStyles: () => { },
+  isViewLegal: true,
+  isViewInfo: true,
+  isViewProfile: true,
+  isViewLogout: true,
 }
 
 export default withStyles(styles)(Navbar)

package/molecules/RowTable/RowTable.js

@@ -679,12 +679,22 @@ export const RowTable = ({
 
                             ?
 
-                            <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
-                              <Moment format="DD/MM/YYYY hh:mm:ss">
-                                {item[itemTd.accessor]}
-                              </Moment>
-                            </td>
+                            itemTd.typeFilterSub === 'date_only' ?
 
+                              <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
+                                <Moment format="DD/MM/YYYY">
+                                  {item[itemTd.accessor]}
+                                </Moment>
+                              </td>
+
+                              :
+
+                              <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
+                                {/* <Moment format="DD/MM/YYYY hh:mm:ss"> */}
+                                <Moment format="DD/MM/YYYY HH:mm">
+                                  {item[itemTd.accessor]}
+                                </Moment>
+                              </td>
                             :
 
                             itemTd.typeFilter === 'select'

package/package.json

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