@eturnity/eturnity_reusable_components 1.1.61 → 1.1.62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.1.61",
+  "version": "1.1.62",
   "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

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,16 @@ 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;
+  margin-bottom: 12px;
+`
+
 export default {
   name: "toggle",
   components: {
@@ -207,6 +236,8 @@ export default {
     ToggleWrapper,
     FlexWrapper,
     LabelText,
+    InfoText,
+    LabelContainer,
   },
   props: {
     label: {
@@ -238,6 +269,12 @@ export default {
       required: false,
       default: false,
     },
+    infoTextMessage: {
+      required: false,
+    },
+    infoTextAlign: {
+      required: false,
+    },
   },
   methods: {
     onToggleChange() {