@eturnity/eturnity_reusable_components 1.1.39 → 1.1.42

package/package.json

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

package/src/App.vue

@@ -44,6 +44,8 @@
         :value="inputValue"
         @input-change="onInputChange($event)"
       />
+      <br />
+      <page-subtitle text="My Subtitle" infoText="My info Text" />
     </page-container>
   </ThemeProvider>
 </template>
@@ -56,6 +58,7 @@ import MainTable from "@/components/tables/mainTable"
 import ThreeDots from "@/components/threeDots"
 import Toggle from "@/components/inputs/toggle"
 import InputNumber from "@/components/inputs/inputNumber"
+import PageSubtitle from "@/components/pageSubtitle"
 // import TableDropdown from "@/components/tableDropdown"
 
 const PageContainer = styled.div`
@@ -71,6 +74,7 @@ export default {
     ThreeDots,
     Toggle,
     InputNumber,
+    PageSubtitle,
     // TableDropdown,
   },
   data() {

package/src/components/infoText/index.vue

@@ -38,7 +38,7 @@
 <script>
 // import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
 //To use:
-// <info-component
+// <info-text
 //     text="Veritatis et quasi architecto beatae vitae"
 //     borderColor="#ccc"
 //     size="20"

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

@@ -1,16 +1,13 @@
 <template>
   <container>
-    <input-wrapper
-      :alignItems="alignItems"
-      :hasLabel="!!label && label.length > 0"
-    >
-      <label-wrapper v-if="label">
-        <input-label>{{ label }}</input-label>
+    <input-wrapper :hasLabel="!!label && label.length > 0">
+      <label-wrapper :alignItems="alignItems" v-if="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 +21,7 @@
         :noBorder="noBorder"
         :disabled="disabled"
         :isDisabled="disabled"
+        :fontSize="fontSize"
       />
     </input-wrapper>
     <error-message v-if="isError">{{ errorMessage }}</error-message>
@@ -39,8 +37,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 +48,6 @@ const LabelWrapper = styled.div`
   grid-template-columns: auto 1fr;
   grid-gap: 12px;
   align-items: center;
-  margin-bottom: 12px;
 `
 
 const inputProps = {
@@ -57,6 +56,7 @@ const inputProps = {
   minWidth: String,
   noBorder: Boolean,
   isDisabled: Boolean,
+  fontSize: String,
 }
 const InputContainer = styled("input", inputProps)`
   border: ${(props) =>
@@ -70,7 +70,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 +123,7 @@ export default {
   //   alignItems="horizontal" // horizontal, vertical
   //   inputWidth="250px"
   //   minWidth="100px"
+  //   fontSize="13px"
   // />
   name: "input-text",
   components: {
@@ -180,6 +181,10 @@ export default {
       required: false,
       default: false,
     },
+    fontSize: {
+      required: false,
+      default: null,
+    },
   },
   methods: {
     onChangeHandler($event) {

package/src/components/pageSubtitle/index.vue

@@ -1,5 +1,15 @@
 <template>
-  <subtitle-text :color="color">{{ text }}</subtitle-text>
+  <subtitle-text :color="color" :hasInfoText="!!infoText">
+    <span>
+      {{ text }}
+    </span>
+    <info-text
+      :text="infoText"
+      v-if="!!infoText"
+      size="14"
+      borderColor="#ccc"
+    />
+  </subtitle-text>
 </template>
 
 <script>
@@ -8,21 +18,30 @@
 // <page-subtitle
 //   text="My Page Subitle"
 //   color="red"
+//   infoText="My info text"
 // />
 import styled from "vue-styled-components"
+import InfoText from "../infoText"
 
-const textAttrs = { color: String }
+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"};
   color: ${(props) => (props.color ? props.color : props.theme.colors.gray1)};
   font-size: 13px;
   margin-bottom: 30px;
   line-height: 1.5;
+  position: relative;
 `
 
 export default {
   name: "page-subtitle",
   components: {
     SubtitleText,
+    InfoText,
   },
   props: {
     text: {
@@ -31,6 +50,10 @@ export default {
     color: {
       required: false,
     },
+    infoText: {
+      required: false,
+      default: null,
+    },
   },
 }
 </script>