imbric-theme 0.7.1 → 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;
@@ -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/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.1",
+  "version": "0.7.2",
   "description": "Components library IMBRIC",
   "private": false,
   "main": "index.js",