imbric-theme 0.5.0 → 0.5.2

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

@@ -5,15 +5,15 @@ import Link from 'next/link'
 import styles from './LinkItem.module.css'
 import { options } from './constants'
 import withStyles from '../../hocs/withStyles'
-import Paragraph from '../Paragraph'
+// 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'])}>
-        <Paragraph size={size} color={color} weight="semibold" isInline>
+      <a target={target} className={getStyles('link', ['color'])}>
+        {/* <Paragraph size={size} color={color} weight="semibold" isInline> */}
           {children}
-        </Paragraph>
+        {/* </Paragraph> */}
       </a>
     </Link>
   )
@@ -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/Navbar/Navbar.js

@@ -11,7 +11,7 @@ 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 }) => {
+export const Navbar = ({ getStyles, viewTabsNav, viewOptionsNav, children, linkLogout, defaultValueLanguage, optionsSelectLanguage, handleChangeLanguage, languageSwitchLink }) => {
 
 
   const router = useRouter();
@@ -36,7 +36,6 @@ export const Navbar = ({ getStyles, viewTabsNav, viewOptionsNav, children, linkL
           color="base"
           size="xs"
           weight="light"
-          isInline
         >
           {children}
         </Heading>
@@ -89,7 +88,7 @@ export const Navbar = ({ getStyles, viewTabsNav, viewOptionsNav, children, linkL
               />
             ))}
 
-            <DynamicSelect
+            {/* <DynamicSelect
               isClearable={false}
               // defaultValue={{
               //   label: 'ES',
@@ -108,7 +107,9 @@ export const Navbar = ({ getStyles, viewTabsNav, viewOptionsNav, children, linkL
               //     value: 'en'
               //   }
               // ]}
-            />
+            /> */}
+
+            {languageSwitchLink}
 
             <Icon
               size='lg'
@@ -118,6 +119,8 @@ export const Navbar = ({ getStyles, viewTabsNav, viewOptionsNav, children, linkL
               onClick={linkLogout}
             />
 
+
+
           </div>
 
         ) : null}
@@ -143,6 +146,7 @@ Navbar.propTypes = {
   viewOptionsNav: PropTypes.bool,
   linkLogout: PropTypes.func,
   handleChange: PropTypes.func,
+  languageSwitchLink: PropTypes.any.isRequired,
 }
 
 Navbar.defaultProps = {

package/layout/Sidebar/Sidebar.js

@@ -60,7 +60,7 @@ export const Sidebar = ({ getStyles, menuCollapseView, options }) => {
                     {options.map((item, index) => (
                       item.view ?
                         <ItemMenu
-                          key={index}
+                          key={'sidebarItem' + index}
                           icon={item.icon}
                           subMenu={item.viewSubMenu}
                           itemSubmenu={item.submenu}

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/DynamicSelect/DynamicSelect.js

@@ -91,7 +91,7 @@ export const DynamicSelect = ({ getStyles, optionsSelect, defaultValue, placehol
 
 DynamicSelect.propTypes = {
   getStyles: PropTypes.func.isRequired,
-  defaultValue: PropTypes.object,
+  defaultValue: PropTypes.any,
   placeholder: PropTypes.string,
   isMulti: PropTypes.bool,
   isClearable: PropTypes.bool,

package/molecules/FooterTable/FooterTable.js

@@ -21,9 +21,9 @@ export const FooterTable = ({ getStyles, range, setPage, setDataPage, page, slic
       <div className={styles.tableFooter}>
         {range.map((el, index) => (
 
-          <>
+
             <button
-              key={index}
+              key={'footer' + index}
               className={`${styles.button} ${page === el ? styles.activeButton : styles.inactiveButton
                 }`}
               onClick={() => { setPage(el); setDataPage(el) }}
@@ -35,7 +35,7 @@ export const FooterTable = ({ getStyles, range, setPage, setDataPage, page, slic
             </button>
 
 
-          </>
+          
 
         ))}
       </div>

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

@@ -91,7 +91,7 @@ export const InputAutocomplete = ({
         <Horizontal size="xs" />
 
         <Input
-          autocomplete={'off'}
+          autoComplete={'off'}
           id={idOnInput}
           type='text'
           name={idOnInput}
@@ -108,7 +108,7 @@ export const InputAutocomplete = ({
       :
 
       <Input
-        autocomplete={'off'}
+        autoComplete={'off'}
         id={idOnInput}
         type='text'
         name={idOnInput}
@@ -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>
@@ -172,7 +175,7 @@ InputAutocomplete.propTypes = {
   getStyles: PropTypes.func.isRequired,
   placeholderOnInput: PropTypes.string,
   idOnInput: PropTypes.string,
-  suggestedAddresses: PropTypes.object,
+  suggestedAddresses: PropTypes.array,
   handleOnInputChange: PropTypes.func,
   handleOnFocus: PropTypes.func,
   handleOnBlur: PropTypes.func,

package/molecules/RowTable/RowTable.js

@@ -102,7 +102,7 @@ export const RowTable = ({
                           {/* <Check id={item[itemTd.accessor]} isChecked={item.isSelected} /> */}
 
                           <Toggle
-                            id={item[itemTd.accessor]}
+                            id={'idToggle' + item.id}
                             checked={item.isSelected}
                             label=""
                             onChangeCheckbox={(e) => { handleClickCheckbox(e, item) }}
@@ -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.0",
+  "version": "0.5.2",
   "description": "Components library IMBRIC",
   "private": false,
   "main": "index.js",