@eturnity/eturnity_reusable_components 1.1.60 → 1.1.63

package/package.json

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

package/src/App.vue

@@ -32,10 +32,12 @@
       <br />
       <toggle
         @on-toggle-change="onInputChange($event)"
-        :isChecked="isChecked"
+        :isChecked="inputValue"
         label="My Label Text"
+        infoTextMessage="This is my test message"
+        infoTextAlign="right"
         labelAlign="right"
-        :disabled="true"
+        :disabled="false"
       />
       <br />
       <input-number
@@ -47,6 +49,12 @@
       <br />
       <page-subtitle text="My Subtitle" infoText="My info Text" />
       <spinner size="30px" />
+      <checkbox
+        label="Do you accept the Terms?"
+        :isChecked="true"
+        size="small"
+        :isDisabled="false"
+      />
     </page-container>
   </ThemeProvider>
 </template>
@@ -59,6 +67,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 Checkbox from "@/components/inputs/checkbox"
 import PageSubtitle from "@/components/pageSubtitle"
 import Spinner from "@/components/spinner"
 // import TableDropdown from "@/components/tableDropdown"
@@ -78,6 +87,7 @@ export default {
     InputNumber,
     PageSubtitle,
     Spinner,
+    Checkbox,
     // TableDropdown,
   },
   data() {

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

@@ -7,13 +7,16 @@
       :backgroundColor="backgroundColor"
       :isChecked="isChecked"
       :isDisabled="isDisabled"
-      >{{ label }}
+    >
       <input-checkbox
         type="checkbox"
         :checked="isChecked"
         @change="onChangeHandler(!isChecked)"
       />
-      <span class="checkmark"></span>
+      <div>
+        <span class="checkmark"></span>
+      </div>
+      <label-text v-if="!!label.length">{{ label }}</label-text>
     </container>
   </component-wrapper>
 </template>
@@ -34,6 +37,7 @@ import styled from "vue-styled-components"
 
 const ComponentWrapper = styled.div`
   display: inline-block;
+  min-height: 18px;
 `
 
 const containerAttrs = {
@@ -46,20 +50,18 @@ const containerAttrs = {
 }
 const Container = styled("label", containerAttrs)`
   display: grid;
-  height: ${(props) => (props.hasLabel ? "28px" : "auto")};
+  grid-template-columns: ${(props) => (props.hasLabel ? "18px auto" : "18px")};
+  grid-gap: 16px;
   align-content: center;
+  /* align-items: center; */
   color: ${(props) => props.theme.colors.black};
   position: relative;
-  /* padding-left: 42px; */
-  margin-bottom: 12px;
   cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
   font-size: 16px;
   user-select: none;
 
   .checkmark {
     position: absolute;
-    top: 0;
-    left: 0;
     height: ${(props) =>
       props.size === "medium"
         ? "25px"
@@ -131,12 +133,20 @@ const InputCheckbox = styled.input`
   width: 0;
 `
 
+const LabelText = styled.div`
+  font-size: 13px;
+  display: grid;
+  align-items: center;
+  min-height: 18px;
+`
+
 export default {
   name: "checkbox",
   components: {
     ComponentWrapper,
     Container,
     InputCheckbox,
+    LabelText,
   },
   props: {
     label: {

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

@@ -1,9 +1,19 @@
 <template>
   <container>
     <flex-wrapper :size="size" :disabled="disabled" @click="onToggleChange">
-      <label-text v-if="labelAlign === 'left'" :size="size">{{
-        label
-      }}</label-text>
+      <label-container
+        v-if="label && labelAlign === 'left'"
+        :hasInfoMessage="!!infoTextMessage"
+      >
+        <label-text :size="size">{{ label }}</label-text>
+        <info-text
+          v-if="infoTextMessage"
+          :text="infoTextMessage"
+          borderColor="#ccc"
+          size="14"
+          :alignText="infoTextAlign"
+        />
+      </label-container>
       <toggle-wrapper
         role="checkbox"
         :checked="isChecked"
@@ -26,12 +36,19 @@
           :disabled="disabled"
         />
       </toggle-wrapper>
-      <label-text
-        v-if="labelAlign === 'right'"
-        :size="size"
-        :fontColor="fontColor"
-        >{{ label }}</label-text
+      <label-container
+        v-if="label && labelAlign === 'right'"
+        :hasInfoMessage="!!infoTextMessage"
       >
+        <label-text :size="size" :fontColor="fontColor">{{ label }}</label-text>
+        <info-text
+          v-if="infoTextMessage"
+          :text="infoTextMessage"
+          borderColor="#ccc"
+          size="14"
+          :alignText="infoTextAlign"
+        />
+      </label-container>
     </flex-wrapper>
   </container>
 </template>
@@ -49,9 +66,12 @@
 //   labelAlign="right"
 //   fontColor="black"
 //   :disabled="true"
+//   infoTextAlign="right" // left by default
+//   infoTextMessage="My info message"
 // />
 
 import styled from "vue-styled-components"
+import InfoText from "../../infoText"
 
 const Container = styled.div`
   display: inline-block;
@@ -131,7 +151,6 @@ const backgroundAttrs = {
   disabled: Boolean,
 }
 const ToggleBackground = styled("span", backgroundAttrs)`
-  /* display: inline-block; */
   display: block;
   border-radius: 100px;
   height: 100%;
@@ -198,6 +217,15 @@ const ToggleDot = styled("span", toggleProps)`
   }
 `
 
+const labelAttrs = { hasInfoMessage: Boolean }
+const LabelContainer = styled("div", labelAttrs)`
+  display: inline-grid;
+  grid-template-columns: ${(props) =>
+    props.hasInfoMessage ? "auto 1fr" : "auto"};
+  grid-gap: 12px;
+  align-items: center;
+`
+
 export default {
   name: "toggle",
   components: {
@@ -207,6 +235,8 @@ export default {
     ToggleWrapper,
     FlexWrapper,
     LabelText,
+    InfoText,
+    LabelContainer,
   },
   props: {
     label: {
@@ -238,6 +268,12 @@ export default {
       required: false,
       default: false,
     },
+    infoTextMessage: {
+      required: false,
+    },
+    infoTextAlign: {
+      required: false,
+    },
   },
   methods: {
     onToggleChange() {