imbric-theme 0.3.6 → 0.3.8

package/atoms/Modal/Modal.js

@@ -8,7 +8,9 @@ import Icon from '../Icon'
 import Container from '../../layout/Container'
 import isEmpty from '../../utils/isEmpty'
 
+
 import useMedia from '../../hook/useMedia'
+import Heading from '../Heading'
 
 // Sync with ./Modal.module.css#L13-L17
 const FADE_OUT_ANIMATION_TIME = 400
@@ -33,6 +35,7 @@ export const Modal = ({
   getStyles,
   type,
   isPlayground,
+  titleModal,
 }) => {
   const isDesktop = useMedia(['(min-width: 992px)'], [true])
   const [onFadeOut, setOnFadeOut] = useState(false)
@@ -54,7 +57,7 @@ export const Modal = ({
         <div className={getStyles('heading')}>
           {!!onClose && (
             <Icon
-              color={isDesktop && type === 'secondary' ? 'primary' : 'inverted'}
+              color={isDesktop && type === 'secondary' ? 'primary' : 'primary'}
               name={isDesktop ? 'cross' : 'angleLeft'}
               background={isDesktop ? 'transparent' : 'muted'}
               onClick={handleClose}
@@ -71,6 +74,9 @@ export const Modal = ({
               })}
             />
           )}
+					<Heading color='black' size='lg' weight='light'>
+						{titleModal}
+					</Heading>
         </div>
         <Container>{children}</Container>
       </div>
@@ -88,11 +94,13 @@ Modal.propTypes = {
   }),
   type: PropTypes.oneOf(options.types),
   isPlayground: PropTypes.bool,
+  titleModal: PropTypes.string,
 }
 
 Modal.defaultProps = {
   getStyles: () => {},
   type: 'primary',
+  titleModal: 'Ejemplo titulo'
 }
 
 export default withStyles(styles)(Modal)

package/atoms/Modal/Modal.module.css

@@ -4,7 +4,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--modal-backdrop-color);
+  background: rgb(0 0 0 / 50%);
   inset: 0;
 }
 
@@ -24,7 +24,7 @@
   padding: 16px 32px;
 }
 
-:not(.is-playground) > .modal {
+:not(.is-playground)>.modal {
   animation: fadeInModal 0.4s ease-in forwards;
   opacity: 0;
 }
@@ -45,7 +45,7 @@
 }
 
 .type-primary {
-  background-color: var(--color-primary);
+  background-color: var(--color-primary-inverted);
 }
 
 .type-secondary {
@@ -54,8 +54,8 @@
 
 @media (min-width: 992px) {
   .modal {
-    max-width: var(--modal-desktop-max-width);
-    height: var(--modal-desktop-height);
+    max-width: 465px;
+    height: auto;
     border-radius: var(--border-radius-sm);
   }
 
@@ -82,4 +82,4 @@
   to {
     opacity: 0;
   }
-}
+}

package/layout/DynamicTable/DynamicTable.js

@@ -164,7 +164,7 @@ DynamicTable.defaultProps = {
   isViewRange: true,
   isViewAddColumn: true,
   isViewDownloadDoc: true,
-  isLayoutDate: 'DateRangePicker',
+  isLayoutDate: 'Calendar',
   handleSelectRange: () => { },
   handleDownloadExcel: () => { },
 }

package/molecules/ColumnTable/ColumnTable.js

@@ -61,24 +61,26 @@ export const ColumnTable = ({ getStyles, handleSorting, columnUppercase, onChang
 
                     <Horizontal size="xs" />
 
-                    {cl === "default" ?
-                      <Icon
-                        name="angleUpDown"
-                        size="xs"
-                      />
-                      : cl === "" ? null
-
-                        : cl === "angleDown"
-                          ? <Icon
-                            name="angleDown"
-                            size="xs"
-                          />
+                    {item.sortable ?
 
-                          : <Icon
-                            name="angleUp"
+                        cl === "default" ?
+                          <Icon
+                            name="angleUpDown"
                             size="xs"
                           />
-
+                          : cl === "" ? null
+
+                            : cl === "angleDown"
+                              ? <Icon
+                                name="angleDown"
+                                size="xs"
+                              />
+
+                              : <Icon
+                                name="angleUp"
+                                size="xs"
+                              />
+                        : null
                     }
                   </span>
 

package/molecules/RowTable/RowTable.js

@@ -6,6 +6,8 @@ import { options } from './constants'
 import withStyles from '../../hocs/withStyles'
 
 import Moment from 'react-moment'
+import Icon from '../../atoms/Icon'
+import { Horizontal, Vertical } from '../../layout/Spacer/components'
 
 export const RowTable = ({ getStyles, slice, columnsData }) => {
   return (
@@ -17,33 +19,51 @@ export const RowTable = ({ getStyles, slice, columnsData }) => {
             <tr key={index}>
               {columnsData.map((itemTd) => (
                 itemTd.activeView ?
-
                   (
-                    itemTd.subAccessor !== '' ?
 
-                      <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor][itemTd.subAccessor]}</td> :
 
-                      itemTd.typeFilter === 'date' ?
+                    itemTd.subAccessor === 'action' ?
+
+                      <td className={getStyles('td')} key={[itemTd.accessor]}>
+
+                        <Icon
+                          background="base"
+                          name="settings"
+                          onClick={function noRefCheck() { }}
+                        />
+                        <Horizontal size="xs" />
+                        <Icon
+                          background="base"
+                          name="trash"
+                          onClick={function noRefCheck() { }}
+                        />
+                      </td> :
+
+                      itemTd.subAccessor !== '' ?
+
+                        <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor][itemTd.subAccessor]}</td> :
+
+                        itemTd.typeFilter === 'date' ?
 
-                        <td className={getStyles('td')} key={[itemTd.accessor]}>
-                          <Moment format="DD/MM/YYYY hh:mm:ss">
-                            {item[itemTd.accessor]}
-                          </Moment>
-                        </td>
+                          <td className={getStyles('td')} key={[itemTd.accessor]}>
+                            <Moment format="DD/MM/YYYY hh:mm:ss">
+                              {item[itemTd.accessor]}
+                            </Moment>
+                          </td>
 
-                        : itemTd.typeFilter === 'number' ?
+                          : itemTd.typeFilter === 'number' ?
 
-                          itemTd.subTypeFilter ?
+                            itemTd.subTypeFilter ?
 
-                            <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor].toFixed(2).toString().replace(/\./g, ',')} €</td>
-                            :
-                            <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor]}</td>
+                              <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor].toFixed(2).toString().replace(/\./g, ',')} €</td>
+                              :
+                              <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor]}</td>
 
-                          : itemTd.subTypeFilter ?
+                            : itemTd.subTypeFilter ?
 
-                            <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor].toString().replace(/\./g, ',').slice(0, 5)} €</td>
-                            :
-                            <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor]}</td>
+                              <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor].toString().replace(/\./g, ',').slice(0, 5)} €</td>
+                              :
+                              <td className={getStyles('td')} key={[itemTd.accessor]}>{item[itemTd.accessor]}</td>
 
                   ) : null
               ))}

package/molecules/RowTable/constants.js

@@ -300,6 +300,19 @@ export const options = {
             nameInput: 'ID Proveedor',
             placeholder: 'ID Proveedor'
         },
+        {
+            accessor: 'action',
+            subAccessor: 'action',
+            activeView: true,
+            idInput: 'action',
+            nameInput: 'Acciones',
+            placeholder: 'Acciones',
+            sortable: false,
+            subTypeFilter: false,
+            title: '',
+            typeFilter: 'text',
+            viewIsFilter: false,
+        },
     ],
 
  }

package/package.json

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