@eturnity/eturnity_reusable_components 1.2.34-3d-master.1 → 1.2.34-3d-master.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.34-3d-master.1",
+  "version": "1.2.34-3d-master.2",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

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

@@ -5,7 +5,7 @@
       :alignItems="alignItems"
     >
       <label-wrapper v-if="label">
-        <input-label :fontSize="fontSize">{{ label }}</input-label>
+        <input-label :labelFontColor="labelFontColor" :fontSize="fontSize">{{ label }}</input-label>
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
@@ -30,6 +30,8 @@
             :fontSize="fontSize"
             :inputType="inputType"
             :type="inputTypeData"
+            :fontColor="fontColor"
+            :backgroundColor="backgroundColor"
           />
           <icon-wrapper
             v-if="inputType === 'password' && !isError"
@@ -61,9 +63,15 @@ const Container = styled.div`
   position: relative;
 `
 
-const labelAttrs = { fontSize: String }
+const labelAttrs = { fontSize: String,labelFontColor:String, }
 const InputLabel = styled('div', labelAttrs)`
-  color: ${(props) => props.theme.colors.eturnityGrey};
+  color: ${(props) => props.theme.colors[props.labelFontColor]?
+    props.theme.colors[props.labelFontColor]:
+    props.labelFontColor?
+    props.labelFontColor:
+    props.theme.colors.eturnityGrey
+  };
+  
   font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
   font-weight: 700;
 `
@@ -90,14 +98,21 @@ const inputProps = {
   noBorder: Boolean,
   isDisabled: Boolean,
   fontSize: String,
-  inputType: String
+  inputType: String,
+  fontColor: String,
+  backgroundColor:String,
+  borderColor:String,
 }
 const InputContainer = styled('input', inputProps)`
   border: ${(props) =>
-    props.isError
+      props.isError
       ? '1px solid ' + props.theme.colors.red
       : props.noBorder
       ? 'none'
+      : props.borderColor ?
+      props.theme.colors[props.borderColor]
+      ? '1px solid ' + props.theme.colors[props.borderColor]
+      : '1px solid ' + props.borderColor
       : '1px solid ' + props.theme.colors.grey4};
   padding: ${(props) =>
     props.isError
@@ -113,15 +128,19 @@ const InputContainer = styled('input', inputProps)`
       ? props.theme.colors.grey6
       : props.isDisabled
       ? props.theme.colors.grey2
+      : props.fontColor
+      ? props.fontColor + ' !important'
       : props.theme.colors.black};
+      
   width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
   min-width: ${(props) => (props.minWidth ? props.minWidth : 'unset')};
   box-sizing: border-box; // to allow width of 100% with padding
   font-weight: 500;
   cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
   background-color: ${(props) =>
-    props.isDisabled ? props.theme.colors.grey5 : '#fff'};
-
+    props.isDisabled ? props.theme.colors.grey5 : 
+    props.backgroundColor ? props.backgroundColor+' !important' :
+    props.theme.colors.white};
   &::placeholder {
     color: ${(props) => props.theme.colors.grey2};
   }
@@ -245,7 +264,22 @@ export default {
     inputType: {
       required: false,
       default: 'text'
-    }
+    },
+    labelFontColor:{
+      required:false,
+      default:'black'
+    },
+    backgroundColor:{
+      required:false,
+      default:'white'
+    },
+    fontColor:{
+      required:false,
+      default:'black'
+    },
+    borderColor:{
+      required:false,
+    },
   },
   methods: {
     onChangeHandler($event) {