@eturnity/eturnity_reusable_components 7.45.5-EPDM-11313.0 → 7.45.5-EPDM-11313-EPDM-11314.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.45.5-EPDM-11313.0",
+  "version": "7.45.5-EPDM-11313-EPDM-11314.0",
   "files": [
     "dist",
     "src"

package/src/components/infoCard/index.vue

@@ -1,10 +1,18 @@
 <template>
   <InfoContainer
-    background-color="backgrounColor"
+    :min-width="minWidth"
+    :color="color"
+    :align-items="alignItems"
+    :padding="padding"
     :border-color="borderColor"
-    :has-dashed-border="hasDashedBorder"
+    :border-style="borderStyle"
+    :preset-styles="presetStyles"
   >
-    <RCIcon :color="color" name="info" size="24px" />
+    <RCIcon
+      name="info"
+      size="24px"
+      :color="color ? color : presetStyles.iconColor"
+    />
     <TextContainer>
       <slot></slot>
     </TextContainer>
@@ -13,26 +21,37 @@
 
 <script>
   import styled from 'vue3-styled-components'
+  import theme from '../../assets/theme.js'
   import RCIcon from '../icon'
-  const propsContainer = {
-    backgroundColor: String,
-    hasDashedBorder: Boolean,
+
+  const infoContainerAttrs = {
+    minWidth: String,
+    color: String,
+    alignItems: String,
+    padding: String,
     borderColor: String,
+    borderStyle: String,
+    presetStyles: Object,
   }
-  const InfoContainer = styled('div', propsContainer)`
+  const InfoContainer = styled('div', infoContainerAttrs)`
     display: flex;
+    align-items: ${(props) =>
+      props.alignItems ? props.alignItems : props.presetStyles.alignItems};
     gap: 15px;
-    padding: 15px;
-    border: 1px ${(props) => (props.hasDashedBorder ? 'dashed' : 'solid')}
-      ${(props) =>
-        props.theme.colors[props.borderColor]
-          ? props.theme.colors[props.borderColor]
-          : props.borderColor};
-    background-color: ${(props) =>
-      props.theme.colors[props.backgroundColor]
-        ? props.theme.colors[props.backgroundColor]
-        : props.backgroundColor};
+    min-width: ${(props) => props.minWidth};
+    padding: ${(props) =>
+      props.padding ? props.padding : props.presetStyles.padding};
+    color: ${(props) => (props.color ? props.color : props.presetStyles.color)};
     border-radius: 4px;
+    background-color: ${(props) =>
+      props.backgroundColor
+        ? props.backgroundColor
+        : props.presetStyles.backgroundColor};
+    border-width: ${(props) => props.presetStyles.borderWidth};
+    border-style: ${(props) =>
+      props.borderStyle ? props.borderStyle : props.presetStyles.borderStyle};
+    border-color: ${(props) =>
+      props.borderColor ? props.borderColor : props.presetStyles.borderColor};
   `
 
   const TextContainer = styled.div`
@@ -48,19 +67,59 @@
       TextContainer,
     },
     props: {
+      type: {
+        required: false,
+        type: String,
+        default: 'info',
+      },
+      minWidth: {
+        required: false,
+        type: String,
+      },
       color: {
         required: false,
       },
-      backgrounColor: {
+      alignItems: {
         required: false,
+        type: String,
       },
-      hasDashedBorder: {
+      padding: {
         required: false,
-        default: true,
+        type: String,
       },
       borderColor: {
         required: false,
-        default: 'grey4',
+        type: String,
+      },
+      borderStyle: {
+        required: false,
+        type: String,
+      },
+    },
+    computed: {
+      isInfo() {
+        return this.type === 'info'
+      },
+      isWarning() {
+        return this.type === 'warning'
+      },
+      presetStyles() {
+        let stylesCollection = {}
+
+        if (this.isWarning) {
+          stylesCollection.alignItems = 'center'
+          stylesCollection.padding = '6px 10px'
+          stylesCollection.color = theme.colors.white
+          stylesCollection.backgroundColor = theme.colors.yellow
+          stylesCollection.iconColor = theme.colors.white
+        } else {
+          stylesCollection.padding = '20px'
+          stylesCollection.borderWidth = '1px'
+          stylesCollection.borderStyle = 'dashed'
+          stylesCollection.borderColor = theme.colors.grey4
+        }
+
+        return stylesCollection
       },
     },
   }

package/src/components/inputs/select/index.vue

@@ -86,6 +86,7 @@
           />
           <Selector
             v-else
+            :disabled="disabled"
             :padding-left="paddingLeft"
             :select-width="selectWidth"
             :show-border="showBorder"
@@ -96,7 +97,9 @@
             <Icon
               v-if="isDropdownOpen"
               :color="
-                caretColor || colorMode == 'dark'
+                caretColor || disabled
+                  ? 'grey2'
+                  : colorMode == 'dark'
                   ? 'white'
                   : 'transparentBlack1'
               "
@@ -106,7 +109,9 @@
             <Icon
               v-else
               :color="
-                caretColor || colorMode == 'dark'
+                caretColor || disabled
+                  ? 'grey2'
+                  : colorMode == 'dark'
                   ? 'white'
                   : 'transparentBlack1'
               "
@@ -199,11 +204,13 @@
   `
 
   const selectorProps = {
+    disabled: String,
     selectWidth: String,
     paddingLeft: String,
     showBorder: Boolean,
   }
   const Selector = styled('div', selectorProps)`
+    color: ${(props) => (props.disabled ? props.theme.colors.grey2 : '')};
     ${(props) =>
       props.selectWidth === '100%'
         ? 'width: 100%;'

package/src/components/modals/modal/index.vue

@@ -5,7 +5,7 @@
     :is-open="isOpen"
     :position="position"
   >
-    <ModalContainer @click="onClickModalContainer">
+    <ModalContainer :overflow="overflowRule" @click="onClickModalContainer">
       <Spinner v-if="isLoading" :limited-to-modal="true" size="50px" />
       <ContentContainer :visible="!isLoading">
         <slot></slot>
@@ -67,7 +67,8 @@
   }
 `
 
-  const ModalContainer = styled.div`
+  const modalContainerAttrs = { overflow: String }
+  const ModalContainer = styled('div', modalContainerAttrs)`
     align-self: center;
     justify-self: center;
     position: relative;
@@ -75,7 +76,7 @@
     border-radius: 4px;
     background: white;
     margin: 0 auto;
-    overflow: auto;
+    overflow: ${(props) => props.overflow};
     max-width: 95%;
     max-height: 95%;
     min-width: 100px;
@@ -152,6 +153,11 @@
         type: Boolean,
         default: true,
       },
+      overflowRule: {
+        required: false,
+        type: String,
+        default: 'auto',
+      },
     },
     watch: {
       isOpen: {