@eturnity/eturnity_reusable_components 1.0.62 → 1.0.63

package/package.json

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

package/src/App.vue

@@ -24,12 +24,19 @@
       </main-table>
       <br />
       <br />
-      <toggle
-        @on-toggle-change="onInputChange($event)"
-        :isChecked="inputValue"
-        label="My Label Text"
-        labelAlign="right"
-      />
+      <input-wrapper>
+        <input-number
+          placeholder="Enter Value"
+          unitName="kWh"
+          :value="inputValue"
+          @input-change="onInputChange($event)"
+          textAlign="left"
+          fontSize="13px"
+          labelText="Number of Modules"
+          labelInfoText="Here is some information for you..."
+          :disabled="true"
+        />
+      </input-wrapper>
     </page-container>
   </ThemeProvider>
 </template>
@@ -40,12 +47,17 @@ import theme from "./assets/theme"
 import styled from "vue-styled-components"
 import MainTable from "@/components/tables/mainTable"
 import ThreeDots from "@/components/threeDots"
-import Toggle from "@/components/inputs/toggle"
+import InputNumber from "@/components/inputs/inputNumber"
 
 const PageContainer = styled.div`
   padding: 40px;
 `
 
+const InputWrapper = styled.div`
+  height: 36px;
+  width: 180px;
+`
+
 export default {
   name: "App",
   components: {
@@ -53,11 +65,12 @@ export default {
     PageContainer,
     MainTable,
     ThreeDots,
-    Toggle,
+    InputNumber,
+    InputWrapper,
   },
   data() {
     return {
-      inputValue: true,
+      inputValue: 10,
       checkedOption: "button_1",
       question: {
         number_format_precision: 4,

package/src/components/infoText/index.vue

@@ -6,6 +6,8 @@
         :size="size"
         :borderColor="borderColor"
         @click.prevent="toggleShowInfo()"
+        @mouseenter="toggleShowInfo()"
+        @mouseleave="toggleShowInfo()"
       >
         <svg
           class="img-icon"
@@ -52,35 +54,28 @@ const IconWrapper = styled.div`
 const textAttrs = { borderColor: String, alignText: String }
 const TextOverlay = styled("div", textAttrs)`
   position: absolute;
-  top: 34px;
+  top: 26px;
   right: ${(props) => (props.alignText === "left" ? "-10px" : "inherit")};
   left: ${(props) => (props.alignText === "left" ? "inherit" : "-10px")};
-  background: #fff;
-  border: 1px solid
-    ${(props) =>
-      props.borderColor ? props.borderColor : props.theme.colors.secondary};
-  padding: 16px;
+  background: ${(props) => props.theme.colors.black};
+  padding: 10px;
   width: max-content;
   max-width: 400px;
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 400;
   border-radius: 4px;
   z-index: 99;
-  color: ${(props) => props.theme.colors.black};
+  color: ${(props) => props.theme.colors.white};
 
   :before {
     content: "";
-    background-color: #fff;
+    background-color: ${(props) => props.theme.colors.black};
     position: absolute;
     top: 2px;
     right: ${(props) => (props.alignText === "left" ? "-12px" : "inherit")};
     left: ${(props) => (props.alignText === "left" ? "inherit" : "40px")};
     height: 8px;
     width: 8px;
-    border: 1px solid
-      ${(props) =>
-        props.borderColor ? props.borderColor : props.theme.colors.secondary};
-    border-width: 1px 0 0 1px;
     transform-origin: center center;
     transform: translate(-2em, -0.5em) rotate(45deg);
   }

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

@@ -1,5 +1,17 @@
 <template>
   <container>
+    <label-wrapper v-if="labelText">
+      <label-text>
+        {{ labelText }}
+      </label-text>
+      <info-text
+        v-if="labelInfoText"
+        :text="labelInfoText"
+        borderColor="#ccc"
+        size="13"
+        :alignText="labelInfoAlign"
+      />
+    </label-wrapper>
     <input-wrapper>
       <input-container
         :hasUnit="unitName && !!unitName.length"
@@ -15,6 +27,7 @@
         :isDisabled="disabled"
         :noBorder="noBorder"
         :textAlign="textAlign"
+        :fontSize="fontSize"
       />
       <unit-container
         v-if="unitName && showLinearUnitName"
@@ -28,7 +41,7 @@
 </template>
 
 <script>
-// import InputNumberQuestion from "@eturnity/eturnity_reusable_components/src/components/inputs/inputNumberQuestion"
+// import InputNumber from "@eturnity/eturnity_reusable_components/src/components/inputs/inputNumber"
 //This component should be used for questions with input fields only
 //How to use:
 // <input-number
@@ -37,7 +50,6 @@
 //     inputWidth="150px" //by default, this is 100%
 //     :numberPrecision="3"
 //     unitName="pc"
-//     :numberPrecision="4"
 //     :value="inputValue" //required -- String
 //     @input-change="onInputChange($event)" //required
 //     @on-enter-click="onInputSubmit()"
@@ -46,12 +58,16 @@
 //     :noBorder="true"
 //     textAlign="left" // "left, right, center"
 //     :showLinearUnitName="true"
+//     fontSize="13px"
+//     labelText="Number of Modules"
+//     labelInfoText="Here is some information for you..."
 // />
 import styled from "vue-styled-components"
 import {
   stringToNumber,
   numberToString,
 } from "../../../helpers/numberConverter"
+import InfoText from "../../infoText"
 
 const Container = styled.div`
   width: 100%;
@@ -66,6 +82,7 @@ const inputProps = {
   isDisabled: Boolean,
   noBorder: Boolean,
   textAlign: String,
+  fontSize: String,
 }
 const InputContainer = styled("input", inputProps)`
   border: ${(props) =>
@@ -81,7 +98,7 @@ const InputContainer = styled("input", inputProps)`
   border-radius: 4px;
   text-align: ${(props) => props.textAlign};
   cursor: ${(props) => (props.isDisabled ? "not-allowed" : "auto")};
-  font-size: 16px;
+  font-size: ${(props) => (props.fontSize ? props.fontSize : "13px")};
   color: ${(props) =>
     props.isError ? props.theme.colors.red : props.theme.colors.black};
   width: ${(props) => (props.inputWidth ? props.inputWidth : "100%")};
@@ -89,7 +106,7 @@ const InputContainer = styled("input", inputProps)`
     props.isDisabled
       ? props.theme.colors.grey5 + " !important"
       : "#fff !important"};
-    box-sizing: border-box;
+  box-sizing: border-box;
 
   &::placeholder {
     color: ${(props) =>
@@ -131,6 +148,17 @@ const ErrorMessage = styled.div`
   padding-top: 16px;
 `
 
+const LabelWrapper = styled.div`
+  display: flex;
+  gap: 10px;
+  margin-bottom: 8px;
+`
+
+const LabelText = styled.div`
+  font-weight: bold;
+  font-size: 13px;
+`
+
 export default {
   name: "input-number",
   components: {
@@ -139,6 +167,9 @@ export default {
     InputWrapper,
     UnitContainer,
     ErrorMessage,
+    LabelWrapper,
+    LabelText,
+    InfoText,
   },
   data() {
     return {
@@ -195,6 +226,22 @@ export default {
       required: false,
       default: "left",
     },
+    fontSize: {
+      required: false,
+      default: "13px",
+    },
+    labelText: {
+      required: false,
+      default: null,
+    },
+    labelInfoText: {
+      required: false,
+      default: null,
+    },
+    labelInfoAlign: {
+      required: false,
+      default: "right",
+    },
   },
   methods: {
     onChangeHandler(event) {