imbric-theme 1.0.6 → 1.0.8

package/atoms/Modal/Modal.js

@@ -38,6 +38,8 @@ export const Modal = ({
   titleModal,
   isFullWidth,
   isFullWidthSoft,
+  onClickTitle,
+  isClickTitle,
 }) => {
   const isDesktop = useMedia(['(min-width: 992px)'], [true])
   const [onFadeOut, setOnFadeOut] = useState(false)
@@ -77,9 +79,25 @@ export const Modal = ({
               })}
             />
           )}
-          <Heading color='black' size='lg' weight='light'>
-            {titleModal}
-          </Heading>
+
+          {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'>
+              {titleModal}
+            </Heading>
+
+          }
+
+
+
         </div>
 
         {isFullWidth ?
@@ -108,6 +126,7 @@ Modal.propTypes = {
   isFullWidth: PropTypes.bool,
   isFullWidthSoft: PropTypes.bool,
   titleModal: PropTypes.string,
+  isClickTitle: PropTypes.bool,
 }
 
 Modal.defaultProps = {
@@ -115,7 +134,8 @@ Modal.defaultProps = {
   type: 'primary',
   titleModal: 'Ejemplo titulo',
   isFullWidth: false,
-  isFullWidthSoft: false
+  isFullWidthSoft: false,
+  isClickTitle: false
 }
 
 export default withStyles(styles)(Modal)

package/index.js

@@ -56,7 +56,7 @@ export { default as ColumnTable } from './molecules/ColumnTable'
 export { default as RowTable } from './molecules/RowTable'
 export { default as FooterTable } from './molecules/FooterTable'
 export { default as DynamicSelect } from './molecules/DynamicSelect'
-export { default as DatePicker } from './molecules/DynamicSelect'
+export { default as DatePicker } from './molecules/DatePicker'
 export { default as CardDefault } from './molecules/CardDefault'
 export { default as Tabs } from './molecules/Tabs'
 export { default as DatePickerTime } from './molecules/DatePickerTime'

package/molecules/ColumnTable/ColumnTable.js

@@ -100,14 +100,30 @@ export const ColumnTable = ({ getStyles, handleSorting, columnUppercase, onChang
                 {props.viewIsFilter ? (
 
                   props.typeFilter === 'select' ?
-                    <DynamicSelect
-                      isInline
-                      // onChange={item => useStateDate([item.selection])}
-                      onChange={item => { onChangeSelect(item, props.idInput) }}
-                      optionsSelect={opSelect || props.optionsSelect}
-                      placeholder={props.placeholder}
-                      maxMenuHeight={110}
-                    />
+
+
+                    props.opSelectSecundary ?
+
+                      <DynamicSelect
+                        isInline
+                        // onChange={item => useStateDate([item.selection])}
+                        onChange={item => { onChangeSelect(item, props.idInput) }}
+                        optionsSelect={props.optionsSelect}
+                        placeholder={props.placeholder}
+                        maxMenuHeight={110}
+                      />
+
+                      :
+
+                      <DynamicSelect
+                        isInline
+                        // onChange={item => useStateDate([item.selection])}
+                        onChange={item => { onChangeSelect(item, props.idInput) }}
+                        optionsSelect={opSelect || props.optionsSelect}
+                        placeholder={props.placeholder}
+                        maxMenuHeight={110}
+                      />
+
                     :
                     <Input
                       isInputFilter

package/molecules/DynamicSelect/DynamicSelect.js

@@ -61,7 +61,11 @@ export const DynamicSelect = ({
   onSortEnd,
   formatGroupLabel,
   hideSelectedOptions,
-  menuPlacement
+  menuPlacement,
+  getOptionValue,
+  getOptionLabel,
+  isMaxContent,
+  id,
 }) => {
 
 
@@ -85,7 +89,8 @@ export const DynamicSelect = ({
     control: (base, state) => ({
       ...base,
       cursor: 'pointer',
-      width: '100%',
+      width: isMaxContent ? 'max-content' : '100%',
+      flexWrap: 'nowrap',
       borderRadius: 0,
       border: 'var(--border-width-thin) solid var(--color-brand-white-lilac)',
       // border: state.isFocused ? "var(--border-width-thin) solid var(--color-brand-white-lilac)" : "var(--border-width-thin) solid var(--color-brand-white-lilac)",
@@ -168,6 +173,7 @@ export const DynamicSelect = ({
 
       {sortableMultiSelect ?
         <SortableSelect
+          id={id}
           useDragHandle
           // react-sortable-hoc props:
           axis="xy"
@@ -197,9 +203,12 @@ export const DynamicSelect = ({
           menuPosition='fixed'
           formatGroupLabel={formatGroupLabel}
           hideSelectedOptions={hideSelectedOptions}
+          getOptionValue={getOptionValue}
+          getOptionLabel={getOptionLabel}
         />
         :
         <Select
+          id={id}
           name="basic"
           // className="basic-single"
           // classNamePrefix="select"
@@ -225,6 +234,8 @@ export const DynamicSelect = ({
           menuPosition='fixed'
           formatGroupLabel={formatGroupLabel}
           hideSelectedOptions={hideSelectedOptions}
+          getOptionValue={getOptionValue}
+          getOptionLabel={getOptionLabel}
         />}
 
 
@@ -254,6 +265,8 @@ DynamicSelect.propTypes = {
   sortableMultiSelect: PropTypes.bool,
   hideSelectedOptions: PropTypes.bool,
   menuPlacement: PropTypes.string,
+  getOptionValue: PropTypes.func,
+  getOptionLabel: PropTypes.func,
 }
 
 DynamicSelect.defaultProps = {
@@ -274,7 +287,10 @@ DynamicSelect.defaultProps = {
   instanceId: '',
   sortableMultiSelect: false,
   hideSelectedOptions: true,
-  menuPlacement: 'auto'
+  menuPlacement: 'auto',
+  isMaxContent: false,
+  // getOptionValue: () => { option => option.value },
+  // getOptionLabel: () => { option => option.label },
 }
 
 export default withStyles(styles)(DynamicSelect)

package/package.json

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

package/styles/tagos.css

@@ -267,7 +267,7 @@
     --spacing-md: 20;
     --spacing-lg: 40;
 
-    --font-family-sans: 'Lato', Arial, sans-serif;
+    --font-family-sans: 'Exo', 'Open Sans', sans-serif;
     --font-family-mono: 'Roboto Mono', 'Courier New', monospace;
 
     --font-size-mini: 12px;