imbric-theme 1.0.5 → 1.0.7

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

@@ -61,7 +61,9 @@ export const DynamicSelect = ({
   onSortEnd,
   formatGroupLabel,
   hideSelectedOptions,
-  menuPlacement
+  menuPlacement,
+  getOptionValue,
+  getOptionLabel
 }) => {
 
 
@@ -197,6 +199,8 @@ export const DynamicSelect = ({
           menuPosition='fixed'
           formatGroupLabel={formatGroupLabel}
           hideSelectedOptions={hideSelectedOptions}
+          getOptionValue={getOptionValue}
+          getOptionLabel={getOptionLabel}
         />
         :
         <Select
@@ -225,6 +229,8 @@ export const DynamicSelect = ({
           menuPosition='fixed'
           formatGroupLabel={formatGroupLabel}
           hideSelectedOptions={hideSelectedOptions}
+          getOptionValue={getOptionValue}
+          getOptionLabel={getOptionLabel}
         />}
 
 
@@ -254,6 +260,8 @@ DynamicSelect.propTypes = {
   sortableMultiSelect: PropTypes.bool,
   hideSelectedOptions: PropTypes.bool,
   menuPlacement: PropTypes.string,
+  getOptionValue: PropTypes.func,
+  getOptionLabel: PropTypes.func,
 }
 
 DynamicSelect.defaultProps = {
@@ -274,7 +282,9 @@ DynamicSelect.defaultProps = {
   instanceId: '',
   sortableMultiSelect: false,
   hideSelectedOptions: true,
-  menuPlacement: 'auto'
+  menuPlacement: 'auto',
+  // 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.5",
+  "version": "1.0.7",
   "description": "Components library IMBRIC",
   "private": false,
   "main": "index.js",

package/styles/globals.css

@@ -1521,4 +1521,123 @@ body {
   padding: 0;
   width: 1px;
   white-space: nowrap;
+}
+
+/* INPUT ADD MODAL */
+
+.css-mlo5or-control {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: hsl(0, 0%, 100%);
+  border-color: hsl(0, 0%, 80%);
+  border-radius: 0;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: none;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  min-height: 38px;
+  outline: 0 !important;
+  position: relative;
+  -webkit-transition: all 100ms;
+  transition: all 100ms;
+  box-sizing: border-box;
+  width: 100%;
+  border: var(--border-width-thin) solid var(--color-brand-white-lilac);
+}
+
+.css-1huup54-ValueContainer {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: grid;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  padding: 2px 8px;
+  -webkit-overflow-scrolling: touch;
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.css-1hb7zxy-IndicatorsContainer {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+
+.css-qc6sy-singleValue {
+  color: hsl(0, 0%, 20%);
+  grid-area: 1 / 1 / 2 / 3;
+  margin-left: 2px;
+  margin-right: 2px;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  box-sizing: border-box;
+}
+
+.css-1okebmr-indicatorSeparator {
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  background-color: hsl(0, 0%, 80%);
+  margin-bottom: 8px;
+  margin-top: 8px;
+  width: 1px;
+  box-sizing: border-box;
+}
+
+.css-tlfecz-indicatorContainer {
+  color: hsl(0, 0%, 80%);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 8px;
+  -webkit-transition: color 150ms;
+  transition: color 150ms;
+  box-sizing: border-box;
+}
+
+
+.css-tj5bde-Svg {
+  display: inline-block;
+  fill: currentColor;
+  line-height: 1;
+  stroke: currentColor;
+  stroke-width: 0;
 }

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;