imbric-theme 0.5.1 → 0.5.3

package/atoms/Button/Button.js

@@ -23,9 +23,11 @@ export const Button = ({
   isFloatRight,
   isFloatLeft,
   onClick,
+  id,
   getStyles,
 }) => (
   <button
+  id={id}
     type="submit"
     disabled={isMuted}
     className={getStyles('button', ['type'], {
@@ -65,6 +67,7 @@ Button.propTypes = {
   isMuted: PropTypes.bool,
   isFloatRight: PropTypes.bool,
   isFloatLeft: PropTypes.bool,
+  id: PropTypes.string,
 }
 
 Button.defaultProps = {
@@ -74,6 +77,7 @@ Button.defaultProps = {
   isInline: false,
   isFloatRight: false,
   isFloatLeft: false,
+  id: '',
 }
 
 export default withStyles(styles)(Button)

package/atoms/Input/Input.js

@@ -36,6 +36,7 @@ export const Input = ({
   colorIcon,
   backgroundIcon,
   pattern,
+  min,
 }) => (
 
   <>
@@ -72,6 +73,7 @@ export const Input = ({
           onKeyDown={onKeyDown}
           autoComplete={autoComplete}
           disabled={disabled}
+          min={min}
         ></input>
 
       </div> :
@@ -94,6 +96,7 @@ export const Input = ({
         onKeyDown={onKeyDown}
         autoComplete={autoComplete}
         disabled={disabled}
+        min={min}
       ></input>
 
     }
@@ -124,6 +127,7 @@ Input.propTypes = {
   backgroundIcon: PropTypes.string,
   autoComplete: PropTypes.string,
   disabled: PropTypes.bool,
+  min: PropTypes.any,
 }
 
 Input.defaultProps = {

package/atoms/LinkItem/LinkItem.js

@@ -7,10 +7,10 @@ import { options } from './constants'
 import withStyles from '../../hocs/withStyles'
 // import Paragraph from '../Paragraph'
 
-export const LinkItem = ({ children, size, color, getStyles, isHref }) => {
+export const LinkItem = ({ children, size, color, getStyles, isHref, target }) => {
   return (
     <Link href={isHref} passHref>
-      <a target="_blank" className={getStyles('link', ['color'])}>
+      <a target={target} className={getStyles('link', ['color'])}>
         {/* <Paragraph size={size} color={color} weight="semibold" isInline> */}
           {children}
         {/* </Paragraph> */}
@@ -24,6 +24,7 @@ LinkItem.propTypes = {
   getStyles: PropTypes.func.isRequired,
   color: PropTypes.oneOf(options.colors),
   size: PropTypes.oneOf(options.sizes),
+  target: PropTypes.string,
 }
 
 LinkItem.defaultProps = {
@@ -31,6 +32,7 @@ LinkItem.defaultProps = {
   color: 'primary',
   size: 'md',
   isHref: '/',
+  target: ''
 }
 
 export default withStyles(styles)(LinkItem)

package/atoms/Modal/Modal.js

@@ -58,6 +58,7 @@ export const Modal = ({
         <div className={getStyles('heading')}>
           {!!onClose && (
             <Icon
+            id='btnColsedModal'
               color={isDesktop && type === 'secondary' ? 'primary' : 'primary'}
               name={isDesktop ? 'cross' : 'angleLeft'}
               background={isDesktop ? 'transparent' : 'muted'}

package/layout/DynamicTable/DynamicTable.js

@@ -7,8 +7,9 @@ import DynamicSelect from '../../molecules/DynamicSelect'
 import DatePicker from '../../molecules/DatePicker'
 import Label from '../../atoms/Label'
 import Icon from '../../atoms/Icon'
+import Button from '../../atoms/Button'
 import { Horizontal, Vertical } from '../../layout/Spacer/components'
-import LoadingError from '../../molecules/LoadingError'
+// import LoadingError from '../../molecules/LoadingError'
 // import ColumnTable from '../../molecules/ColumnTable'
 // import RowTable from '../../molecules/RowTable'
 // import FooterTable from '../../molecules/FooterTable'
@@ -16,7 +17,7 @@ import LoadingError from '../../molecules/LoadingError'
 // import useStateDate from '../../hook/useStateDate';
 
 
-export const DynamicTable = ({ getStyles, optionsData, opColumns, opAddColumns, isLayoutDate, isViewRange, isViewAddColumn, isViewDownloadDoc, handleAddColumn, handleSelectRange, handleDownloadExcel, handleDefaultValue, labelDinamicSelect, placeholderDinamicSelect, isLoadingDinamicSelect, labelSinceDateRange, labelTillDateRange }) => {
+export const DynamicTable = ({ getStyles, optionsData, opColumns, opAddColumns, isLayoutDate, isViewRange, isViewAddColumn, isViewBtn, isViewDownloadDoc, typeBtn, titleBtn, handleBtn, handleAddColumn, handleSelectRange, handleDownloadExcel, handleDefaultValue, labelDinamicSelect, placeholderDinamicSelect, isLoadingDinamicSelect, labelSinceDateRange, labelTillDateRange }) => {
 
   const [tableData, setTableData] = useState(optionsData);
   const [columnsData, setColumnsData] = useState(opColumns);
@@ -120,7 +121,26 @@ export const DynamicTable = ({ getStyles, optionsData, opColumns, opAddColumns,
 
           </div>
         ) : null}
+
         <Horizontal size="md" />
+
+        {isViewBtn ? (
+          <div className={getStyles('opFunctionBox3')}>
+
+            <Button
+              type={typeBtn}
+              isInline={true}
+              onClick={handleBtn}
+            >
+              {titleBtn}
+            </Button>
+
+            <Horizontal size="md" />
+
+          </div>
+        ) : null}
+
+
         {isViewDownloadDoc ? (
           <div className={getStyles('opFunctionBox3')}>
             <Icon
@@ -158,6 +178,7 @@ DynamicTable.propTypes = {
   isViewRange: PropTypes.bool,
   isViewAddColumn: PropTypes.bool,
   isViewDownloadDoc: PropTypes.bool,
+  isViewBtn: PropTypes.bool,
   onChangeInput: PropTypes.func,
   handleAddColumn: PropTypes.func,
   isError: PropTypes.string,
@@ -168,6 +189,9 @@ DynamicTable.propTypes = {
   placeholderDinamicSelect: PropTypes.string,
   labelSinceDateRange: PropTypes.string,
   labelTillDateRange: PropTypes.string,
+  typeBtn: PropTypes.string,
+  titleBtn: PropTypes.string,
+  handleBtn: PropTypes.func,
 }
 
 DynamicTable.defaultProps = {
@@ -176,6 +200,7 @@ DynamicTable.defaultProps = {
   isViewRange: true,
   isViewAddColumn: true,
   isViewDownloadDoc: true,
+  isViewBtn: false,
   isLayoutDate: 'Calendar',
   handleSelectRange: () => { },
   handleDownloadExcel: () => { },
@@ -183,6 +208,9 @@ DynamicTable.defaultProps = {
   placeholderDinamicSelect: 'Seleccionar columnas',
   labelSinceDateRange: 'Desde',
   labelTillDateRange: 'Hasta',
+  typeBtn: 'primary',
+  titleBtn: '',
+  handleBtn: () => { },
 }
 
 export default withStyles(styles)(DynamicTable)

package/molecules/CardDefault/CardDefault.js

@@ -27,6 +27,7 @@ export const CardDefault = ({ children, titleCardDefault, titleBtnCardDefault, t
     <div className={getStyles('card-default-actions')}>
 
       <Button
+        id='idBtnCardDefault'
         onClick={onClickBtnCardDefault}
         type={typeBtnCardDefault}
       >

package/molecules/CardProductTypesBooking/CardProductTypesBooking.js

@@ -17,9 +17,10 @@ export const CardProductTypesBooking = ({
   priceProductTypes,
   priceProductTypesSub,
   selectCard,
+  availableCard,
   getStyles
 }) => {
-  return <div className={getStyles('card-product-types-booking', {'selectCard': selectCard})} onClick={onClick}>
+  return <div className={getStyles('card-product-types-booking', { 'selectCard': selectCard }, { 'availableCard': !availableCard })} onClick={availableCard ? onClick : null}>
 
     <div className={getStyles('labelNotification')}>
       {textNotification}
@@ -67,6 +68,7 @@ CardProductTypesBooking.propTypes = {
   priceProductTypes: PropTypes.string,
   priceProductTypesSub: PropTypes.string,
   selectCard: PropTypes.bool,
+  availableCard: PropTypes.bool,
   getStyles: PropTypes.func.isRequired,
 
 }
@@ -80,7 +82,8 @@ CardProductTypesBooking.defaultProps = {
   textDescription: 'Envío urgente de sobres y paquetes pequeños con taxi.',
   priceProductTypes: '30€ - 30€',
   priceProductTypesSub: 'Máx.',
-  selectCard: 'false'
+  selectCard: 'false',
+  availableCard: 'false'
 }
 
 export default withStyles(styles)(CardProductTypesBooking)

package/molecules/CardProductTypesBooking/CardProductTypesBooking.module.css

@@ -99,6 +99,11 @@
   background-image: linear-gradient(to bottom, #39b54a 0%, #00a3ff 100%), linear-gradient(to bottom, #39b54a 0%, #00a3ff 100%);
 }
 
+.availableCard {
+  cursor: no-drop;
+  opacity: .4;
+}
+
 /* .selectCard:before {
   content: '';
   position: absolute;

package/molecules/DatePicker/DatePicker.js

@@ -203,6 +203,7 @@ export const DatePicker = ({ getStyles, isLayoutDate, onChangeRange, sinceDateRa
 
               <div className={getStyles('btnSave')} onClick={handleClickCloseCalendar}>
                 <Icon
+                id='iconClosedDatePicker'
                   name="checkCircle"
                   color="inverted"
                   onClick={function noRefCheck() { }}

package/molecules/FooterTable/FooterTable.module.css

@@ -1,11 +1,13 @@
 .footer-table {
   display: flex;
+  width: 100%;
+  justify-content: space-between;
 }
 
 .tableFooter {
-  background-color: #f1f1f1;
+  /* background-color: #f1f1f1; */
   padding: 4px 0px;
-  width: 100%;
+  width: 400px;
   font-weight: 500;
   text-align: left;
   font-size: 16px;
@@ -14,7 +16,8 @@
   border-bottom-right-radius: 0px;
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
+  overflow-x: auto;
 }
 
 .button {

package/molecules/InputAutocomplete/InputAutocomplete.js

@@ -124,17 +124,20 @@ export const InputAutocomplete = ({
       <div className={getStyles('input-autocomplete-box-results')}>
         <ul className={getStyles('input-autocomplete-ul')}>
           {suggestedAddresses.map((itemAddresses, index) => (
-            <li key={index} className={getStyles('input-autocomplete-li')} onClick={handleOnSelect}>
+            <li id={'idLiItem' + index} key={index} className={getStyles('input-autocomplete-li')} onClick={handleOnSelect}>
               {viewIconList ?
                 <div className={getStyles('input-autocomplete-li-icon')}>
-
-                  <Picture
-                    src={itemAddresses.iconURL}
-                    width={15}
-                    height={15}
-                  />
-                </div> : null}
-              {itemAddresses.name}
+                    <Picture
+                      src={itemAddresses.iconURL ? itemAddresses.iconURL : "../../static/google-maps.png"}
+                      width={15}
+                      height={15}
+                    />
+                </div>
+                :
+                null
+
+              }
+              {itemAddresses.name ? itemAddresses.name : itemAddresses.addressField}
             </li>
           ))}
         </ul>

package/molecules/RowTable/RowTable.js

@@ -125,7 +125,7 @@ export const RowTable = ({
                             <span key={itemTdObj.id}>{itemTdObj[itemTd.subAccessor]}
 
                               {array.length - 1 !== index ?
-                                <span>, </span> : null }
+                                <span>, </span> : null}
 
                             </span>
 
@@ -156,6 +156,7 @@ export const RowTable = ({
                               {itemTd.viewUserView ?
                                 <>
                                   <Icon
+                                    id="userView"
                                     background="base"
                                     name="userView"
                                     onClick={(e) => { onClickActionUserView(e, item) }}
@@ -168,6 +169,7 @@ export const RowTable = ({
                               {itemTd.viewListInvoice ?
                                 <>
                                   <Icon
+                                    id={"listInvoice" + index}
                                     background="base"
                                     name="listInvoice"
                                     onClick={(e) => { onClickActionListInvoice(e, item) }}
@@ -179,6 +181,7 @@ export const RowTable = ({
                               {itemTd.viewListXLS && item.fileType === 'xls' ?
                                 <>
                                   <Icon
+                                    id={"listXLS" + index}
                                     background="base"
                                     name="listXLS"
                                     onClick={(e) => { onClickActionListXLS(e, item) }}
@@ -190,6 +193,7 @@ export const RowTable = ({
                               {itemTd.viewListCSV && item.fileType === 'xml' ?
                                 <>
                                   <Icon
+                                    id={"listCSV" + index}
                                     background="base"
                                     name="listCSV"
                                     onClick={(e) => { onClickActionListCSV(e, item) }}
@@ -201,6 +205,7 @@ export const RowTable = ({
                               {itemTd.viewListPDF && item.fileType === 'pdf' ?
                                 <>
                                   <Icon
+                                    id={"listPDF" + index}
                                     background="base"
                                     name="listPDF"
                                     onClick={(e) => { onClickActionListPDF(e, item) }}
@@ -214,6 +219,7 @@ export const RowTable = ({
                               {itemTd.viewEdit ?
                                 <>
                                   <Icon
+                                    id={"edit" + index}
                                     background="base"
                                     name="edit"
                                     onClick={(e) => { onClickActionEdit(e, item) }}

package/package.json

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