imbric-theme 1.1.5 → 1.1.6

package/atoms/Input/Input.js

@@ -7,7 +7,6 @@ import withStyles from '../../hocs/withStyles'
 import Icon from '../Icon'
 import { Horizontal } from '../../layout/Spacer/components'
 
-
 // const handleChange = ({ onChange }) => () => {
 //   onChange()
 // }
@@ -52,7 +51,6 @@ export const Input = ({
   inputExtra,
   cleanSelected,
 }) => {
-
   const onClickDeleteInput = (results, id) => {
     console.log('hola')
     console.log(id)
@@ -67,7 +65,6 @@ export const Input = ({
     if (cleanSelected) {
       cleanSelected()
     }
-
   }
 
   const pulsar = (e, id) => {
@@ -80,11 +77,8 @@ export const Input = ({
 
   return (
     <>
-
-      {isViewIcon ?
-
+      {isViewIcon ? (
         <div className={getStyles('box-icon-input')}>
-
           <Icon
             id={idIcon}
             name={nameIcon}
@@ -120,123 +114,125 @@ export const Input = ({
             min={min}
             accept={accept}
           ></input>
+        </div>
+      ) : type === 'password' ? (
+        <div className={getStyles('box-icon-input')}>
+          <input
+            className={getStyles('input', {
+              'is-inline': isInline,
+              'is-inline-code': isInlineCode,
+              'is-input-filter': isInputFilter,
+              'is-input-secondary': isInputSecondary,
+              'is-date': isDate,
+            })}
+            readOnly={readonly}
+            type={type}
+            id={id}
+            value={value}
+            placeholder={placeholder}
+            onChange={onChange}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            onClick={onClick}
+            onKeyDown={onKeyDown}
+            autoComplete={autoComplete}
+            disabled={disabled}
+            min={min}
+            onInput={onInput}
+            accept={accept}
+          ></input>
 
-        </div> :
-
-        type === 'password' ?
-
-          <div className={getStyles('box-icon-input')}>
-
-            <input
-              className={getStyles('input', {
-                'is-inline': isInline,
-                'is-inline-code': isInlineCode,
-                'is-input-filter': isInputFilter,
-                'is-input-secondary': isInputSecondary,
-                'is-date': isDate,
-              })}
-              readOnly={readonly}
-              type={type}
-              id={id}
-              value={value}
-              placeholder={placeholder}
-              onChange={onChange}
-              onFocus={onFocus}
-              onBlur={onBlur}
-              onClick={onClick}
-              onKeyDown={onKeyDown}
-              autoComplete={autoComplete}
-              disabled={disabled}
-              min={min}
-              onInput={onInput}
-              accept={accept}
-            ></input>
-
-            <Horizontal size="xs" />
-
-            <Icon
-              background={!viewPass ? "inverted" : "success"}
-              color={!viewPass ? "base" : "inverted"}
-              isClickable
-              name="userView"
-              onClick={onClickViewPass}
-              size="sm"
-            />
-
-
-          </div>
-
-          : isOpenModal
+          <Horizontal size="xs" />
 
-            ?
-            <div style={{ pointerEvents: disabled ? 'none' : 'all' }} id="onClickModalDynamicSelect_dynamic" className={getStyles('DynamicSelect_dynamic-select__oduOS')}>
-              <div className={getStyles('css-1mfv3n-container')}>
-                <div style={{ zIndex: 1, background: disabled ? '#eeeeee' : 'hsl(0, 0%, 100%)' }} className={getStyles('css-mlo5or-control')}>
-                  <div onClick={(op) => onClickModal(op, id)} style={{ height: '36px' }} className={getStyles('css-1huup54-ValueContainer')}>
-                    <div className={getStyles('css-qc6sy-singleValue')}>{value}</div>
-                  </div>
-                  <div className={getStyles('css-1hb7zxy-IndicatorsContainer')}>
-                    {value !== '' ? <div onClick={(op) => onClickDeleteInput(op, id)} className={getStyles('css-tlfecz-indicatorContainer')} aria-hidden="true">
-                      <svg height="20" width="20" viewBox="0 0 20 20" aria-hidden="true" focusable="false" className={getStyles('css-tj5bde-Svg')} >
-                        <path d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"></path>
-                      </svg>
-                    </div> : null}
-                    <span className={getStyles('css-1okebmr-indicatorSeparator')}>
-                    </span>
-                    <div onClick={(op) => onClickModal(op, id)} className={getStyles('css-tlfecz-indicatorContainer')} aria-hidden="true">
-                      <svg height="20" width="20" viewBox="0 0 20 20" aria-hidden="true" focusable="false" className={getStyles('css-tj5bde-Svg')}>
-                        <path
-                          fillRule="evenodd"
-                          clipRule="evenodd"
-                          d="M10 20C4.48612 20 0 15.5139 0 10C0 4.48612 4.48612 0 10 0C15.5139 0 20 4.48612 20 10C20 15.5139 15.5139 20 10 20ZM10 1.09864C5.09155 1.09864 1.09864 5.09155 1.09864 10C1.09864 14.9084 5.09155 18.9014 10 18.9014C14.9084 18.9014 18.9014 14.9084 18.9014 10C18.9014 5.09155 14.9084 1.09864 10 1.09864Z"
-                        />
-                        <path
-                          fillRule="evenodd"
-                          clipRule="evenodd"
-                          d="M4.68396 9.4093H15.316V10.5906H4.68396V9.4093Z"
-                        />
-                        <path
-                          fillRule="evenodd"
-                          clipRule="evenodd"
-                          d="M9.40942 4.68396H10.5908V15.316H9.40942V4.68396Z"
-                        />
-                      </svg>
-                    </div>
+          <Icon
+            background={!viewPass ? 'inverted' : 'success'}
+            color={!viewPass ? 'base' : 'inverted'}
+            isClickable
+            name="userView"
+            onClick={onClickViewPass}
+            size="sm"
+          />
+        </div>
+      ) : isOpenModal ? (
+        <div
+          style={{ pointerEvents: disabled ? 'none' : 'all' }}
+          id="onClickModalDynamicSelect_dynamic"
+          className={getStyles('DynamicSelect_dynamic-select__oduOS')}
+        >
+          <div className={getStyles('css-1mfv3n-container')}>
+            <div
+              style={{
+                zIndex: 1,
+                background: disabled ? '#eeeeee' : 'hsl(0, 0%, 100%)',
+              }}
+              className={getStyles('css-mlo5or-control')}
+            >
+              <div
+                onClick={(op) => onClickModal(op, id)}
+                style={{ height: '36px' }}
+                className={getStyles('css-1huup54-ValueContainer')}
+              >
+                <div className={getStyles('css-qc6sy-singleValue')}>
+                  {value}
+                </div>
+              </div>
+              <div className={getStyles('css-1hb7zxy-IndicatorsContainer')}>
+                {value !== '' ? (
+                  <div
+                    onClick={(op) => onClickDeleteInput(op, id)}
+                    className={getStyles('css-tlfecz-indicatorContainer')}
+                    aria-hidden="true"
+                  >
+                    <svg
+                      height="20"
+                      width="20"
+                      viewBox="0 0 20 20"
+                      aria-hidden="true"
+                      focusable="false"
+                      className={getStyles('css-tj5bde-Svg')}
+                    >
+                      <path d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"></path>
+                    </svg>
                   </div>
+                ) : null}
+                <span
+                  className={getStyles('css-1okebmr-indicatorSeparator')}
+                ></span>
+                <div
+                  onClick={(op) => onClickModal(op, id)}
+                  className={getStyles('css-tlfecz-indicatorContainer')}
+                  aria-hidden="true"
+                >
+                  <svg
+                    height="20"
+                    width="20"
+                    viewBox="0 0 20 20"
+                    aria-hidden="true"
+                    focusable="false"
+                    className={getStyles('css-tj5bde-Svg')}
+                  >
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M10 20C4.48612 20 0 15.5139 0 10C0 4.48612 4.48612 0 10 0C15.5139 0 20 4.48612 20 10C20 15.5139 15.5139 20 10 20ZM10 1.09864C5.09155 1.09864 1.09864 5.09155 1.09864 10C1.09864 14.9084 5.09155 18.9014 10 18.9014C14.9084 18.9014 18.9014 14.9084 18.9014 10C18.9014 5.09155 14.9084 1.09864 10 1.09864Z"
+                    />
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M4.68396 9.4093H15.316V10.5906H4.68396V9.4093Z"
+                    />
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M9.40942 4.68396H10.5908V15.316H9.40942V4.68396Z"
+                    />
+                  </svg>
                 </div>
-                <input
-                  inputmode="none"
-                  style={{ top: '0px', position: 'absolute', zIndex: 0 }}
-                  className={getStyles('input', {
-                    'is-inline': isInline,
-                    'is-inline-code': isInlineCode,
-                    'is-input-filter': isInputFilter,
-                    'is-input-secondary': isInputSecondary,
-                    'is-date': isDate,
-                  })}
-                  readOnly={'true'}
-                  // type={'hidden'}
-                  id={id}
-                  value={value}
-                  placeholder={placeholder}
-                  onChange={onChange}
-                  onFocus={onFocus}
-                  onBlur={onBlur}
-                  onClick={onClick}
-                  // onKeyDown={onKeyDown}
-                  maxLength={maxLength}
-                  autoComplete={autoComplete}
-                  disabled={disabled}
-                  min={min}
-                  autoFocus={autoFocus}
-                  onInput={onInput}
-                  accept={accept}
-                  onKeyDown={(op) => pulsar(op, id)}
-                ></input>
               </div>
             </div>
-
-            : <input
+            <input
+              inputmode="none"
+              style={{ top: '0px', position: 'absolute', zIndex: 0 }}
               className={getStyles('input', {
                 'is-inline': isInline,
                 'is-inline-code': isInlineCode,
@@ -244,8 +240,8 @@ export const Input = ({
                 'is-input-secondary': isInputSecondary,
                 'is-date': isDate,
               })}
-              readOnly={readonly}
-              type={type}
+              readOnly={'true'}
+              // type={'hidden'}
               id={id}
               value={value}
               placeholder={placeholder}
@@ -253,7 +249,7 @@ export const Input = ({
               onFocus={onFocus}
               onBlur={onBlur}
               onClick={onClick}
-              onKeyDown={onKeyDown}
+              // onKeyDown={onKeyDown}
               maxLength={maxLength}
               autoComplete={autoComplete}
               disabled={disabled}
@@ -261,9 +257,38 @@ export const Input = ({
               autoFocus={autoFocus}
               onInput={onInput}
               accept={accept}
+              onKeyDown={(op) => pulsar(op, id)}
             ></input>
-      }
-
+          </div>
+        </div>
+      ) : (
+        <input
+          className={getStyles('input', {
+            'is-inline': isInline,
+            'is-inline-code': isInlineCode,
+            'is-input-filter': isInputFilter,
+            'is-input-secondary': isInputSecondary,
+            'is-date': isDate,
+          })}
+          readOnly={readonly}
+          type={type}
+          id={id}
+          value={value}
+          placeholder={placeholder}
+          onChange={onChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          onClick={onClick}
+          onKeyDown={onKeyDown}
+          maxLength={maxLength}
+          autoComplete={autoComplete}
+          disabled={disabled}
+          min={min}
+          autoFocus={autoFocus}
+          onInput={onInput}
+          accept={accept}
+        ></input>
+      )}
     </>
   )
 }
@@ -316,15 +341,15 @@ Input.defaultProps = {
   isInputFilter: false,
   isInputSecondary: false,
   isDate: false,
-  onChange: () => { },
-  onFocus: () => { },
-  onBlur: () => { },
-  onClick: () => { },
-  onClickModal: () => { },
-  onKeyDown: () => { },
-  onKeyUp: () => { },
-  onInput: () => { },
-  getStyles: () => { },
+  onChange: () => {},
+  onFocus: () => {},
+  onBlur: () => {},
+  onClick: () => {},
+  onClickModal: () => {},
+  onKeyDown: () => {},
+  onKeyUp: () => {},
+  onInput: () => {},
+  getStyles: () => {},
   isViewIcon: false,
   idIcon: 'Ejemplo',
   nameIcon: 'user',
@@ -334,7 +359,7 @@ Input.defaultProps = {
   autoComplete: 'on',
   disabled: false,
   readonly: false,
-  onClickViewPass: () => { },
+  onClickViewPass: () => {},
   viewPass: false,
   accept: '',
   isOpenModal: false,

package/atoms/Label/Label.js

@@ -7,9 +7,15 @@ import withStyles from '../../hocs/withStyles'
 
 export const Label = ({ children, getStyles, isHint, isPointer, onClick }) => {
   return (
-
-    <label onClick={onClick} className={getStyles('label', ['color'], { 'is-hint': isHint, 'is-pointer': isPointer })}>{children}</label>
-
+    <label
+      onClick={onClick}
+      className={getStyles('label', ['color'], {
+        'is-hint': isHint,
+        'is-pointer': isPointer,
+      })}
+    >
+      {children}
+    </label>
   )
 }
 
@@ -22,11 +28,11 @@ Label.propTypes = {
 }
 
 Label.defaultProps = {
-  getStyles: () => { },
+  getStyles: () => {},
   children: ' ',
   isHint: false,
   color: 'label',
-  onClick: () => { },
+  onClick: () => {},
 }
 
 export default withStyles(styles)(Label)

package/atoms/Modal/Modal.js

@@ -67,13 +67,20 @@ export const Modal = ({
       onClick={handleClose}
     >
       <div
-        className={getStyles(isFullWidth ? 'modal-full' : isFullWidthSoft ? 'modal-full-soft' : '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'}
@@ -84,7 +91,9 @@ export const Modal = ({
           {viewSecondaryAction && secondaryAction && !isEmpty(secondaryAction) && (
             <>
               <Icon
-                color={isDesktop && type === 'secondary' ? 'primary' : 'primary'}
+                color={
+                  isDesktop && type === 'secondary' ? 'primary' : 'primary'
+                }
                 name={secondaryAction?.icon}
                 background={isDesktop ? 'transparent' : 'muted'}
                 onClick={handleSecondaryAction({
@@ -94,73 +103,76 @@ export const Modal = ({
               />
 
               <Horizontal size="xs" />
-
-            </>
-
-          )}
-
-
-
-          {viewArrowsAction && arrowsActionLeft && arrowsActionRight && !isEmpty(arrowsActionLeft) && !isEmpty(arrowsActionRight) && (
-            <>
-
-              {arrowsActionRight.view ? <Icon
-                color={isDesktop && type === 'secondary' ? 'primary' : 'primary'}
-                name={arrowsActionRight?.icon}
-                background={isDesktop ? 'transparent' : 'muted'}
-                onClick={handleArrowsActionRight({
-                  onArrowsActionRight: arrowsActionRight?.handler,
-                })}
-                size={isDesktop ? 'lg' : 'md'}
-              /> : null}
-
-              {arrowsActionLeft.view ? <Icon
-                color={isDesktop && type === 'secondary' ? 'primary' : 'primary'}
-                name={arrowsActionLeft?.icon}
-                background={isDesktop ? 'transparent' : 'muted'}
-                onClick={handleArrowsActionLeft({
-                  onArrowsActionLeft: arrowsActionLeft?.handler,
-                })}
-                size={isDesktop ? 'lg' : 'md'}
-              /> : null}
-
-              <Horizontal size="xs" />
-
             </>
-
           )}
 
-
-
-
-          {isClickTitle ?
-
-            <span style={{ cursor: 'pointer', textDecoration: 'underline', color: 'var(--color-primary)' }} onClick={onClickTitle}>
-              <Heading color='primary' size='lg' weight='light'>
+          {viewArrowsAction &&
+            arrowsActionLeft &&
+            arrowsActionRight &&
+            !isEmpty(arrowsActionLeft) &&
+            !isEmpty(arrowsActionRight) && (
+              <>
+                {arrowsActionRight.view ? (
+                  <Icon
+                    color={
+                      isDesktop && type === 'secondary' ? 'primary' : 'primary'
+                    }
+                    name={arrowsActionRight?.icon}
+                    background={isDesktop ? 'transparent' : 'muted'}
+                    onClick={handleArrowsActionRight({
+                      onArrowsActionRight: arrowsActionRight?.handler,
+                    })}
+                    size={isDesktop ? 'lg' : 'md'}
+                  />
+                ) : null}
+
+                {arrowsActionLeft.view ? (
+                  <Icon
+                    color={
+                      isDesktop && type === 'secondary' ? 'primary' : 'primary'
+                    }
+                    name={arrowsActionLeft?.icon}
+                    background={isDesktop ? 'transparent' : 'muted'}
+                    onClick={handleArrowsActionLeft({
+                      onArrowsActionLeft: arrowsActionLeft?.handler,
+                    })}
+                    size={isDesktop ? 'lg' : 'md'}
+                  />
+                ) : null}
+
+                <Horizontal size="xs" />
+              </>
+            )}
+
+          {isClickTitle ? (
+            <span
+              style={{
+                cursor: 'pointer',
+                textDecoration: 'underline',
+                color: 'var(--color-primary)',
+              }}
+              onClick={onClickTitle}
+            >
+              <Heading color="primary" size="lg" weight="light">
                 {titleModal}
               </Heading>
             </span>
-
-            :
-
-            <Heading color='black' size='lg' weight='light'>
+          ) : (
+            <Heading color="black" size="lg" weight="light">
               {titleModal}
             </Heading>
-
-          }
-
-
-
+          )}
         </div>
 
-        {isFullWidth ?
+        {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>
-        }
-
+        ) : isFullWidthSoft ? (
+          <div className={getStyles('container-full-soft')}>{children}</div>
+        ) : (
+          <Container>
+            <div className={getStyles('container')}>{children}</div>
+          </Container>
+        )}
       </div>
     </div>
   )
@@ -185,14 +197,14 @@ Modal.propTypes = {
 }
 
 Modal.defaultProps = {
-  getStyles: () => { },
+  getStyles: () => {},
   type: 'primary',
   titleModal: 'Ejemplo titulo',
   isFullWidth: false,
   isFullWidthSoft: false,
   isClickTitle: false,
   viewSecondaryAction: false,
-  viewArrowsAction: false
+  viewArrowsAction: false,
 }
 
 export default withStyles(styles)(Modal)