imbric-theme 0.4.8 → 0.5.0

package/atoms/AlertModal/AlertModal.js

@@ -7,44 +7,29 @@ import withStyles from '../../hocs/withStyles'
 import withReactContent from 'sweetalert2-react-content'
 import Swal from 'sweetalert2'
 
-export const handleClickConfirmed = ( resultIsConfirmed ) => {
-  resultIsConfirmed
-}
-
-
-export const AlertModal = ({ children, getStyles, titleAlert, subTitleAlert, iconAlert, txtBtnAlert, resultIsConfirmed, resultIsDenied }) => {
+export const AlertModal = ({ 
+  children,
+  getStyles,
+  titleAlert,
+  subTitleAlert,
+  iconAlert,
+  txtBtnAlert,
+  onConfirm,
+  onDismiss,
+}) => {
 
   const MySwal = withReactContent(Swal)
 
-  // MySwal.fire({
-  //   title: <p>Hello World</p>,
-  //   didOpen: () => {
-  //     // `MySwal` is a subclass of `Swal` with all the same instance & static methods
-  //     MySwal.showLoading()
-  //   },
-  // }).then(() => {
-  //   return MySwal.fire(<p>Shorthand works too</p>)
-  // })
-
-  // MySwal.fire(
-  //   'Good job!',
-  //   'You clicked the button!',
-  //   'success'
-  // )
-
   MySwal.fire({
     title: titleAlert,
     icon: iconAlert,
     html: subTitleAlert,
     confirmButtonText: txtBtnAlert,
   }).then((result) => {
-    /* Read more about isConfirmed, isDenied below */
-    if (result.isConfirmed) {
-
-      handleClickConfirmed(resultIsConfirmed)  
-
-    } else if (result.isDenied) {
-      resultIsDenied
+    if (result.isConfirmed || (result.isDismissed && !onDismiss)) {
+      onConfirm()  
+    } else if (result.isDismissed) {
+      onDismiss()
     }
   })
 
@@ -58,20 +43,19 @@ AlertModal.propTypes = {
   titleAlert: PropTypes.string.isRequired,
   subTitleAlert:  PropTypes.string.isRequired,
   txtBtnAlert:  PropTypes.string.isRequired,
-  resultIsConfirmed: PropTypes.any,
-  resultIsDenied: PropTypes.any,
   iconAlert: PropTypes.oneOf(options.icon),
+  onConfirm: PropTypes.func,
+  onDismiss: PropTypes.func,
 }
 
 AlertModal.defaultProps = {
   getStyles: () => {},
+  onConfirm: () => {},
+  // onDismiss: () => {}, // Not default for use onConfirm if is undefined
   titleAlert: 'Felicidades!',
-  subTitleAlert:  'Ejemplo de subtitulo',
-  txtBtnAlert: 'Aceptar',
+  subTitleAlert:  'Todo ha ido correctamente',
+  txtBtnAlert: 'Ok',
   iconAlert: 'success',
-  // resultIsConfirmed: () => { setModalAlert(false)},
-  // resultIsConfirmed: (setModalAlert(false)),
-  // resultIsDenied: '',
 }
 
 export default withStyles(styles)(AlertModal)

package/atoms/Checkbox/Checkbox.js

@@ -1,43 +1,47 @@
-import React from 'react'
+import { useState } from 'react'
 import PropTypes from 'prop-types'
 
 import styles from './Checkbox.module.css'
-import { options } from './constants'
 import withStyles from '../../hocs/withStyles'
 
-
-export const Checkbox = ({ getStyles, onChange, label, id, value, name, linkCheck, nameLinkCheck }) => {
-
-  const [checked, setChecked] = React.useState(false);
-
+export const Checkbox = ({
+  getStyles,
+  onChange,
+  label,
+  id,
+  value,
+  name,
+  linkCheck,
+  nameLinkCheck,
+}) => {
+  const [checked, setChecked] = useState(value)
 
   return (
-
     <div className={getStyles('checkbox')}>
-
-      {/* <input
+      <input
+        className={getStyles('checkbox-custom')}
         type="checkbox"
         id={id}
         name={name}
         label={label}
-        value={value}
-        onChange={onChange}
+        checked={checked}
+        onChange={(e) => {
+          setChecked(!checked)
+          onChange(e)
+        }}
       />
-      &nbsp;{label} */}
-
-      <input className={getStyles('checkbox-custom')} 
-        type="checkbox"
-        id={id}
-        name={name}
-        label={label}
-        checked={value}
-        onChange={onChange}
- />
-      <label htmlFor={name} className={getStyles('checkbox-custom-label')}>{label}<a className={getStyles('checkbox-custom-link')} href={linkCheck} target="_black"> {nameLinkCheck}</a> </label>
-
-
+      <label htmlFor={name} className={getStyles('checkbox-custom-label')}>
+        {label}
+        <a
+          className={getStyles('checkbox-custom-link')}
+          href={linkCheck}
+          target="_black"
+        >
+          {' '}
+          {nameLinkCheck}
+        </a>{' '}
+      </label>
     </div>
-
   )
 }
 
@@ -53,12 +57,12 @@ Checkbox.propTypes = {
 }
 
 Checkbox.defaultProps = {
-  getStyles: () => { },
-  onChange: () => { },
-  id: 'hola',
-  name: 'hola',
+  getStyles: () => {},
+  onChange: () => {},
+  id: 'checkbox',
+  name: 'checkbox',
   value: true,
-  label: 'Hola',
+  label: 'Aceptas los terminos',
   nameLinkCheck: '',
   linkCheck: '',
 }

package/atoms/Icon/constants.js

@@ -909,9 +909,9 @@ export const iconsMap = {
     viewBox: '0 0 24 24',
     svg: (
       <>
-        <path class="st0" d="M18.4,8.8c0.9-0.9,0.9-2.3,0-3.2c-0.9-0.9-2.3-0.9-3.2,0c-0.9,0.9-0.9,2.3,0,3.2C16.1,9.7,17.6,9.7,18.4,8.8z
+        <path className="st0" d="M18.4,8.8c0.9-0.9,0.9-2.3,0-3.2c-0.9-0.9-2.3-0.9-3.2,0c-0.9,0.9-0.9,2.3,0,3.2C16.1,9.7,17.6,9.7,18.4,8.8z
 	 M17.5,6.5c0.4,0.4,0.4,1,0,1.3c-0.4,0.4-1,0.4-1.3,0c-0.4-0.4-0.4-1,0-1.3C16.5,6.1,17.1,6.1,17.5,6.5z"/>
-        <path class="st0" d="M1.5,12c-0.7,0.7-0.7,1.7,0,2.4l8.1,8.1c0.7,0.7,1.7,0.7,2.4,0L22.5,12c0.3-0.3,0.5-0.7,0.5-1.2V2.7
+        <path className="st0" d="M1.5,12c-0.7,0.7-0.7,1.7,0,2.4l8.1,8.1c0.7,0.7,1.7,0.7,2.4,0L22.5,12c0.3-0.3,0.5-0.7,0.5-1.2V2.7
 	C23,1.8,22.2,1,21.3,1h-8.1c-0.4,0-0.9,0.2-1.2,0.5L1.5,12z M11.4,20.7c-0.3,0.3-0.9,0.3-1.2,0l-6.9-6.9c-0.3-0.3-0.3-0.9,0-1.2
 	l9.6-9.6c0.2-0.2,0.4-0.2,0.6-0.2h6.9c0.5,0,0.8,0.4,0.8,0.8v6.9c0,0.2-0.1,0.4-0.2,0.6L11.4,20.7z"/>
       </>
@@ -935,24 +935,12 @@ export const iconsMap = {
     ),
   },
   firstElement: {
-    viewBox: '0 0 24 24',
-    svg: (
-      <>
-        <path class="st0" d="M20.4,0H3.6C3.2,0,2.9,0.3,2.9,0.6v22.7c0,0.4,0.3,0.6,0.6,0.6h12.6c0.2,0,0.4-0.1,0.5-0.2l4.3-4.8
-			c0.1-0.1,0.2-0.3,0.2-0.4V0.6C21.1,0.3,20.8,0,20.4,0z M19,16.8l-3.8,0l0,0c-0.2,0-0.4,0.1-0.5,0.2c-0.1,0.1-0.2,0.3-0.2,0.5
-			l0,4.8H4.9V1.6H19C19,1.6,19,16.8,19,16.8z"/>
-        <path class="st0" d="M15.8,13.2h-4v0l1-0.8c1.6-1.4,2.9-2.8,2.9-4.6c0-1.9-1.3-3.4-3.8-3.4c-1.5,0-2.7,0.5-3.5,1.1L9,7.2
-			c0.6-0.4,1.4-0.9,2.3-0.9c1.2,0,1.8,0.7,1.8,1.6c0,1.3-1.2,2.5-3.5,4.6l-1.4,1.3v1.5h7.6V13.2z"/>
-      </>
-    ),
-  },
-  secondElement: {
     viewBox: '0 0 24 24',
     svg: (
       <>
         <g>
           <g>
-            <path class="st0" d="M20.4,0H3.6C3.2,0,2.9,0.3,2.9,0.6v22.7c0,0.4,0.3,0.6,0.6,0.6h12.6c0.2,0,0.4-0.1,0.5-0.2l4.3-4.8
+            <path className="st0" d="M20.4,0H3.6C3.2,0,2.9,0.3,2.9,0.6v22.7c0,0.4,0.3,0.6,0.6,0.6h12.6c0.2,0,0.4-0.1,0.5-0.2l4.3-4.8
 			c0.1-0.1,0.2-0.3,0.2-0.4V0.6C21.1,0.3,20.8,0,20.4,0z M19,16.8h-3.8l0,0c-0.2,0-0.4,0.1-0.5,0.2s-0.2,0.3-0.2,0.5v4.8H4.9V1.6H19
 			V16.8z"/>
           </g>
@@ -963,6 +951,18 @@ export const iconsMap = {
       </>
     ),
   },
+  secondElement: {
+    viewBox: '0 0 24 24',
+    svg: (
+      <>
+        <path className="st0" d="M20.4,0H3.6C3.2,0,2.9,0.3,2.9,0.6v22.7c0,0.4,0.3,0.6,0.6,0.6h12.6c0.2,0,0.4-0.1,0.5-0.2l4.3-4.8
+			c0.1-0.1,0.2-0.3,0.2-0.4V0.6C21.1,0.3,20.8,0,20.4,0z M19,16.8l-3.8,0l0,0c-0.2,0-0.4,0.1-0.5,0.2c-0.1,0.1-0.2,0.3-0.2,0.5
+			l0,4.8H4.9V1.6H19C19,1.6,19,16.8,19,16.8z"/>
+        <path className="st0" d="M15.8,13.2h-4v0l1-0.8c1.6-1.4,2.9-2.8,2.9-4.6c0-1.9-1.3-3.4-3.8-3.4c-1.5,0-2.7,0.5-3.5,1.1L9,7.2
+			c0.6-0.4,1.4-0.9,2.3-0.9c1.2,0,1.8,0.7,1.8,1.6c0,1.3-1.2,2.5-3.5,4.6l-1.4,1.3v1.5h7.6V13.2z"/>
+      </>
+    ),
+  },
 
 }
 

package/atoms/Label/Label.js

@@ -14,7 +14,7 @@ export const Label = ({ children, getStyles, isHint }) => {
 }
 
 Label.propTypes = {
-  children: PropTypes.string,
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   getStyles: PropTypes.func.isRequired,
   isHint: PropTypes.bool,
   color: PropTypes.oneOf(options.colors),

package/atoms/Toggle/Toggle.js

@@ -2,10 +2,9 @@ import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 
 import styles from './Toggle.module.css'
-import { options } from './constants'
 import withStyles from '../../hocs/withStyles'
 
-export const Toggle = ({ getStyles, onChangeCheckbox, value, id, checked, name }) => {
+export const Toggle = ({ getStyles, onChangeCheckbox, disabled, id, checked, name }) => {
 
   const [isChecked, setIsChecked] = useState(false);
 
@@ -20,15 +19,15 @@ export const Toggle = ({ getStyles, onChangeCheckbox, value, id, checked, name }
       type="checkbox"
       id={id}
       name={name}
-      value={value}
+      disabled={disabled}
       checked={isChecked || checked}
       onChange={(e) => {
         handleOnChange()
-        onChangeCheckbox()
+        onChangeCheckbox(e)
       }}
       className={getStyles('toggle-item')}
     />
-    <label htmlFor={id} className={getStyles('checkbox-custom-label')} for={id}></label>
+    <label htmlFor={id} className={getStyles('checkbox-custom-label')}></label>
 
 
   </div>
@@ -40,7 +39,7 @@ Toggle.propTypes = {
   id: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   checked: PropTypes.bool.isRequired,
-  value: PropTypes.string,
+  disabled: PropTypes.bool,
 }
 
 Toggle.defaultProps = {
@@ -49,7 +48,7 @@ Toggle.defaultProps = {
   id: 'toggle',
   name: 'toggle',
   checked: false,
-  value: 'Hola',
+  disabled: false,
 }
 
 

package/molecules/Accordion/Accordion.js

@@ -9,28 +9,26 @@ import Spacer from '../../layout/Spacer'
 import styles from './Accordion.module.css'
 import withStyles from '../../hocs/withStyles'
 
-const handleToggle = ({ onToggle, isCollapsed, setIsCollapsed }) => () => {
-  setIsCollapsed(!isCollapsed)
-  onToggle(!isCollapsed)
-}
-
 export const Accordion = ({
   title,
   children,
   onToggle,
   getStyles,
-  defaultIsCollapsed,
+  collapsed,
   idAccordion,
   addons,
 }) => {
-  const [isCollapsed, setIsCollapsed] = useState(defaultIsCollapsed)
+  const [isCollapsed, setIsCollapsed] = useState(collapsed)
 
   return (
     <div className={getStyles('accordion')}>
       <div
-      id={idAccordion}
+        id={idAccordion}
         className={getStyles('container')}
-        onClick={handleToggle({ onToggle, isCollapsed, setIsCollapsed })}
+        onClick={() => {
+          setIsCollapsed(!isCollapsed)
+          onToggle(!isCollapsed)
+        }}
       >
         <Icon
           color="inverted"
@@ -53,9 +51,9 @@ export const Accordion = ({
 Accordion.propTypes = {
   title: PropTypes.string.isRequired,
   getStyles: PropTypes.func.isRequired,
+  collapsed: PropTypes.bool.isRequired,
   children: PropTypes.node,
   onToggle: PropTypes.func,
-  defaultIsCollapsed: PropTypes.bool,
   addons: PropTypes.shape({
     prepend: PropTypes.node,
     append: PropTypes.node,
@@ -63,10 +61,10 @@ Accordion.propTypes = {
 }
 
 Accordion.defaultProps = {
+  title: '',
   getStyles: () => {},
+  collapsed: true,
   onToggle: () => {},
-  current: 0,
-  defaultIsCollapsed: true,
 }
 
 export default withStyles(styles)(Accordion)

package/molecules/RowTable/RowTable.js

@@ -329,7 +329,7 @@ export const RowTable = ({
 
 RowTable.propTypes = {
   getStyles: PropTypes.func.isRequired,
-  type: PropTypes.oneOf(options.types),
+  type: PropTypes.oneOf(options.types || []),
   isClickRow: PropTypes.bool,
   onClickRow: PropTypes.func,
   onClickCheckbox: PropTypes.func,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imbric-theme",
-  "version": "0.4.8",
+  "version": "0.5.0",
   "description": "Components library IMBRIC",
   "private": false,
   "main": "index.js",
@@ -59,7 +59,6 @@
     "react-moment": "1.1.2",
     "react-router": "6.3.0",
     "react-router-dom": "6.3.0",
-    "react-search-autocomplete": "7.2.2",
     "react-select": "5.3.2",
     "react-spinners": "0.13.4",
     "react-tooltip": "4.4.0",