imbric-theme 1.1.0 → 1.1.1

package/atoms/Label/Label.module.css

@@ -7,6 +7,7 @@
   font-size: var(--font-size-mini);
   font-weight: var(--font-weight-light);
   line-height: var(--line-height-tight);
+  align-items: center;
 }
 
 .is-hint {

package/atoms/Modal/Modal.js

@@ -8,9 +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'
+import { Horizontal } from '../../layout/Spacer/components/Horizontal'
 
 // Sync with ./Modal.module.css#L13-L17
 const FADE_OUT_ANIMATION_TIME = 400
@@ -28,9 +28,21 @@ const handleSecondaryAction = ({ onSecondaryAction }) => () => {
   onSecondaryAction()
 }
 
+const handleArrowsActionLeft = ({ onArrowsActionLeft }) => () => {
+  onArrowsActionLeft()
+}
+
+const handleArrowsActionRight = ({ onArrowsActionRight }) => () => {
+  onArrowsActionRight()
+}
+
 export const Modal = ({
   onClose,
   secondaryAction,
+  viewSecondaryAction,
+  arrowsActionLeft,
+  arrowsActionRight,
+  viewArrowsAction,
   children,
   getStyles,
   type,
@@ -69,17 +81,58 @@ export const Modal = ({
               size={isDesktop ? 'lg' : 'md'}
             />
           )}
-          {secondaryAction && !isEmpty(secondaryAction) && (
-            <Icon
-              color="inverted"
-              name={secondaryAction?.icon}
-              background="muted"
-              onClick={handleSecondaryAction({
-                onSecondaryAction: secondaryAction?.handler,
-              })}
-            />
+          {viewSecondaryAction && secondaryAction && !isEmpty(secondaryAction) && (
+            <>
+              <Icon
+                color={isDesktop && type === 'secondary' ? 'primary' : 'primary'}
+                name={secondaryAction?.icon}
+                background={isDesktop ? 'transparent' : 'muted'}
+                onClick={handleSecondaryAction({
+                  onSecondaryAction: secondaryAction?.handler,
+                })}
+                size={isDesktop ? 'lg' : 'md'}
+              />
+
+              <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}>
@@ -127,6 +180,8 @@ Modal.propTypes = {
   isFullWidthSoft: PropTypes.bool,
   titleModal: PropTypes.string,
   isClickTitle: PropTypes.bool,
+  viewSecondaryAction: PropTypes.bool,
+  viewArrowsAction: PropTypes.bool,
 }
 
 Modal.defaultProps = {
@@ -135,7 +190,9 @@ Modal.defaultProps = {
   titleModal: 'Ejemplo titulo',
   isFullWidth: false,
   isFullWidthSoft: false,
-  isClickTitle: false
+  isClickTitle: false,
+  viewSecondaryAction: false,
+  viewArrowsAction: false
 }
 
 export default withStyles(styles)(Modal)

package/atoms/Paragraph/Paragraph.module.css

@@ -42,6 +42,10 @@
   font-size: var(--paragraph-font-size-lg);
 }
 
+.size-xl {
+  font-size: var(--paragraph-font-size-xl);
+}
+
 .weight-normal {
   font-weight: var(--font-weight-normal);
 }
@@ -69,4 +73,4 @@
 
 .is-centered {
   text-align: center;
-}
+}

package/atoms/Paragraph/constants.js

@@ -1,5 +1,5 @@
 export const options = {
   colors: ['base', 'muted', 'inverted', 'primary', 'tertiary'],
-  sizes: ['xs', 'sm', 'md', 'lg'],
+  sizes: ['xs', 'sm', 'md', 'lg', 'xl'],
   weights: ['normal', 'medium', 'semibold'],
 }

package/atoms/Textarea/Textarea.js

@@ -20,6 +20,7 @@ export const Textarea = ({
   viewBoxCopyCode,
   txtBtnCopyCode,
   txtTootipCopyCode,
+  maxlength,
 }) => {
 
 
@@ -103,6 +104,7 @@ export const Textarea = ({
         onChange={onChange}
         value={value}
         disabled={disabled}
+        maxlength={maxlength}
       >
         {children}
       </textarea>
@@ -121,6 +123,7 @@ Textarea.propTypes = {
   viewBoxCopyCode: PropTypes.bool,
   txtBtnCopyCode: PropTypes.string,
   txtTootipCopyCode: PropTypes.string,
+  maxlength: PropTypes.string,
 }
 
 Textarea.defaultProps = {
@@ -131,7 +134,8 @@ Textarea.defaultProps = {
   disabled: false,
   viewBoxCopyCode: false,
   txtBtnCopyCode: 'COPIAR',
-  txtTootipCopyCode: 'yeeeee'
+  txtTootipCopyCode: 'yeeeee',
+  maxlength: '',
 }
 
 export default withStyles(styles)(Textarea)

package/hook/useStateDate.js

@@ -1,28 +1,21 @@
 import { useEffect, useState } from 'react'
-import {
-  addDays,
-  startOfMonth,
-  endOfDay,
-} from "date-fns";
+import { addDays, startOfMonth, endOfDay } from 'date-fns'
 
 const useStateDate = (rangeDefault) => {
-
   const [state, setState] = useState([
     {
-      startDate: rangeDefault === 'quarter' ? addDays(new Date(), -59) : startOfMonth(new Date()),
+      startDate:
+        rangeDefault === 'quarter'
+          ? addDays(new Date(), -79)
+          : startOfMonth(new Date()),
       endDate: endOfDay(new Date()),
       key: 'selection',
-    }
+    },
   ])
 
   // startDate: startOfMonth(new Date()),
   // endDate: endOfDay(new Date())
-
-
-  useEffect(() => {
-
-  }, [state]);
-
+  useEffect(() => { }, [state])
 
   return { state, setState }
 }

package/layout/DynamicTable/DynamicTable.js

@@ -35,16 +35,20 @@ export const DynamicTable = ({
   isViewLeftBtn,
   isViewLeftBtnSecondary,
   isViewLeftBtnTertiary,
+  isViewLeftBtnExtra,
   isViewDownloadDoc,
   typeBtn,
   typeBtnSecondary,
   typeBtnTertiary,
+  typeBtnExtra,
   titleBtn,
   titleBtnSecondary,
   titleBtnTertiary,
+  titleBtnExtra,
   handleBtn,
   handleBtnSecondary,
   handleBtnTertiary,
+  handleBtnExtra,
   handleAddColumn,
   handleFilterTable,
   handleFilterSecondaryTable,
@@ -233,18 +237,18 @@ export const DynamicTable = ({
         ) : null}
 
 
-        {isViewLeftBtnTertiary ? (
+        {isViewLeftBtnExtra ? (
 
           <>
 
             <div className={getStyles('opFunctionBox3')}>
 
               <Button
-                type={typeBtnTertiary}
+                type={typeBtnExtra}
                 isInline={true}
-                onClick={handleBtnTertiary}
+                onClick={handleBtnExtra}
               >
-                {titleBtnTertiary}
+                {titleBtnExtra}
               </Button>
 
             </div>
@@ -495,12 +499,16 @@ DynamicTable.propTypes = {
   handleBtn: PropTypes.func,
   isViewLeftBtnSecondary: PropTypes.bool,
   isViewLeftBtnTertiary: PropTypes.bool,
+  isViewLeftBtnExtra: PropTypes.bool,
   typeBtnSecondary: PropTypes.string,
   typeBtnTertiary: PropTypes.string,
+  typeBtnExtra: PropTypes.string,
   titleBtnSecondary: PropTypes.string,
   titleBtnTertiary: PropTypes.string,
+  titleBtnExtra: PropTypes.string,
   handleBtnSecondary: PropTypes.func,
   handleBtnTertiary: PropTypes.func,
+  handleBtnExtra: PropTypes.func,
   txtTootipFileDownload: PropTypes.string,
   titleHeadingTable: PropTypes.string,
   titleHeadingTableSecundary: PropTypes.string,
@@ -542,12 +550,16 @@ DynamicTable.defaultProps = {
   handleBtn: () => { },
   isViewLeftBtnSecondary: false,
   isViewLeftBtnTertiary: false,
+  isViewLeftBtnExtra: false,
   typeBtnSecondary: 'primary',
   typeBtnTertiary: 'primary',
+  typeBtnExtra: 'primary',
   titleBtnSecondary: '',
   titleBtnTertiary: '',
+  titleBtnExtra: '',
   handleBtnSecondary: () => { },
   handleBtnTertiary: () => { },
+  handleBtnExtra: () => { },
   txtTootipFileDownload: '',
   titleHeadingTable: 'Total: 200',
   titleHeadingTableSecundary: '',

package/molecules/RowTable/RowTable.js

@@ -1171,7 +1171,7 @@ export const RowTable = ({
                                           ?
                                           <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{(item[itemTd.accessor] / 1000).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
                                           :
-                                          <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor].toFixed(2).toString().replace(/\./g, ',')} {itemTd.characterExtra}</td>
+                                          <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor]?.toFixed(2)?.toString()?.replace(/\./g, ',')} { item[itemTd.accessor] ? itemTd.characterExtra : ''}</td>
                                         :
                                         <td style={{ color: item.colorTxtRow }} className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>{item[itemTd.accessor]}</td>
 

package/package.json

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

package/styles/GrupoMutua.css

@@ -370,6 +370,7 @@
     --paragraph-font-size-sm: 1.2rem;
     --paragraph-font-size-md: 1.4rem;
     --paragraph-font-size-lg: 1.6rem;
+    --paragraph-font-size-xl: 2rem;
 
     --textarea-border-radius: 10px;
 

package/styles/default.css

@@ -370,6 +370,7 @@
     --paragraph-font-size-sm: 1.2rem;
     --paragraph-font-size-md: 1.4rem;
     --paragraph-font-size-lg: 1.6rem;
+    --paragraph-font-size-xl: 2rem;
 
     --textarea-border-radius: 10px;
 

package/styles/radiotaxiaragon.css

@@ -370,6 +370,7 @@
     --paragraph-font-size-sm: 1.2rem;
     --paragraph-font-size-md: 1.4rem;
     --paragraph-font-size-lg: 1.6rem;
+    --paragraph-font-size-xl: 2rem;
 
     --textarea-border-radius: 10px;
 

package/styles/spartan.css

@@ -370,6 +370,7 @@
     --paragraph-font-size-sm: 1.2rem;
     --paragraph-font-size-md: 1.4rem;
     --paragraph-font-size-lg: 1.6rem;
+    --paragraph-font-size-xl: 2rem;
 
     --textarea-border-radius: 10px;
 

package/styles/tagos.css

@@ -370,6 +370,8 @@
     --paragraph-font-size-sm: 1.2rem;
     --paragraph-font-size-md: 1.4rem;
     --paragraph-font-size-lg: 1.6rem;
+    --paragraph-font-size-xl: 2rem;
+    --paragraph-font-size-xl: 2rem;
 
     --textarea-border-radius: 10px;
 

package/styles/taxisvalencia.css

@@ -370,6 +370,7 @@
     --paragraph-font-size-sm: 1.2rem;
     --paragraph-font-size-md: 1.4rem;
     --paragraph-font-size-lg: 1.6rem;
+    --paragraph-font-size-xl: 2rem;
 
     --textarea-border-radius: 10px;