@eturnity/eturnity_reusable_components 1.1.40 → 1.1.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.1.40",
+  "version": "1.1.43",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

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

@@ -1,16 +1,16 @@
 <template>
   <container>
     <input-wrapper
-      :alignItems="alignItems"
       :hasLabel="!!label && label.length > 0"
+      :alignItems="alignItems"
     >
       <label-wrapper v-if="label">
-        <input-label>{{ label }}</input-label>
+        <input-label :fontSize="fontSize">{{ label }}</input-label>
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
           borderColor="#ccc"
-          size="16"
+          :size="fontSize ? fontSize : '16'"
           :alignText="infoTextAlign"
         />
       </label-wrapper>
@@ -24,6 +24,7 @@
         :noBorder="noBorder"
         :disabled="disabled"
         :isDisabled="disabled"
+        :fontSize="fontSize"
       />
     </input-wrapper>
     <error-message v-if="isError">{{ errorMessage }}</error-message>
@@ -39,8 +40,10 @@ const Container = styled.div`
   position: relative;
 `
 
-const InputLabel = styled.div`
+const labelAttrs = { fontSize: String }
+const InputLabel = styled("div", labelAttrs)`
   font-weight: bold;
+  font-size: ${(props) => (props.fontSize ? props.fontSize : "16px")};
 `
 
 const LabelWrapper = styled.div`
@@ -48,7 +51,6 @@ const LabelWrapper = styled.div`
   grid-template-columns: auto 1fr;
   grid-gap: 12px;
   align-items: center;
-  margin-bottom: 12px;
 `
 
 const inputProps = {
@@ -57,6 +59,7 @@ const inputProps = {
   minWidth: String,
   noBorder: Boolean,
   isDisabled: Boolean,
+  fontSize: String,
 }
 const InputContainer = styled("input", inputProps)`
   border: ${(props) =>
@@ -70,7 +73,7 @@ const InputContainer = styled("input", inputProps)`
   padding: ${(props) =>
     props.hasUnit ? "11px 40px 11px 10px" : "11px 5px 11px 10px"};
   border-radius: 4px;
-  font-size: 16px;
+  font-size: ${(props) => (props.fontSize ? props.fontSize : "16px")};
   color: ${(props) =>
     props.isError ? props.theme.colors.red : props.theme.colors.black};
   width: ${(props) => (props.inputWidth ? props.inputWidth : "100%")};
@@ -123,6 +126,7 @@ export default {
   //   alignItems="horizontal" // horizontal, vertical
   //   inputWidth="250px"
   //   minWidth="100px"
+  //   fontSize="13px"
   // />
   name: "input-text",
   components: {
@@ -180,6 +184,10 @@ export default {
       required: false,
       default: false,
     },
+    fontSize: {
+      required: false,
+      default: null,
+    },
   },
   methods: {
     onChangeHandler($event) {

package/src/components/pageSubtitle/index.vue

@@ -3,7 +3,12 @@
     <span>
       {{ text }}
     </span>
-    <info-text :text="infoText" v-if="!!infoText" borderColor="#ccc" />
+    <info-text
+      :text="infoText"
+      v-if="!!infoText"
+      size="14"
+      borderColor="#ccc"
+    />
   </subtitle-text>
 </template>
 
@@ -21,6 +26,7 @@ import InfoText from "../infoText"
 const textAttrs = { color: String, hasInfoText: Boolean }
 const SubtitleText = styled("div", textAttrs)`
   display: grid;
+  align-items: center;
   grid-gap: 12px;
   grid-template-columns: ${(props) =>
     props.hasInfoText ? "auto auto 1fr" : "1fr"};