@eturnity/eturnity_reusable_components 1.0.75 → 1.0.76

package/package.json

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

package/src/App.vue

@@ -13,8 +13,21 @@
         <tbody>
           <tr>
             <td class="text">Body 2</td>
-            <td class="text">Body 3</td>
-            <td class="text">Body 4</td>
+            <td>
+              <toggle
+                @on-toggle-change="onInputChange($event)"
+                :isChecked="isChecked"
+                labelAlign="right"
+              />
+            </td>
+            <td>
+              <toggle
+                @on-toggle-change="onInputChange($event)"
+                :isChecked="isChecked"
+                labelAlign="right"
+                :disabled="true"
+              />
+            </td>
             <div class="icons-container">
               <three-dots :options="listOptions" :isLoading="false" />
             </div>
@@ -28,6 +41,7 @@
         :isChecked="isChecked"
         label="My Label Text"
         labelAlign="right"
+        :disabled="true"
       />
     </page-container>
   </ThemeProvider>
@@ -64,7 +78,7 @@ export default {
         number_max_allowed: 10,
         unit_short_name: "cm",
       },
-      isChecked: true,
+      isChecked: false,
       listOptions: [
         {
           name: "Option 1",

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

@@ -11,6 +11,8 @@
         tabindex="0"
         @keydown.space.prevent="onToggleChange"
         :disabled="disabled"
+        :backgroundColor="backgroundColor"
+        :isChecked="isChecked"
       >
         <toggle-background
           :backgroundColor="backgroundColor"
@@ -69,7 +71,13 @@ const FlexWrapper = styled("div", flexAttrs)`
   cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
 `
 
-const toggleAttrs = { size: String, fontColor: String, disabled: Boolean }
+const toggleAttrs = {
+  size: String,
+  fontColor: String,
+  disabled: Boolean,
+  backgroundColor: String,
+  isChecked: Boolean,
+}
 const LabelText = styled("div", toggleAttrs)`
   color: ${(props) =>
     props.fontColor ? props.fontColor : props.theme.colors.darkGray};
@@ -84,7 +92,13 @@ const LabelText = styled("div", toggleAttrs)`
 const ToggleWrapper = styled("span", toggleAttrs)`
   display: inline-block;
   border: ${(props) =>
-    props.disabled ? "1px solid " + props.theme.colors.disabled : "none"}
+    props.disabled
+      ? "1px solid " + props.theme.colors.disabled
+      : props.isChecked
+      ? props.backgroundColor
+        ? "1px solid " + props.backgroundColor
+        : "1px solid " + props.theme.colors.green
+      : "1px solid " + props.theme.colors.grey3}
   position: relative;
   cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
   width: ${(props) =>
@@ -97,7 +111,7 @@ const ToggleWrapper = styled("span", toggleAttrs)`
     props.size === "medium"
       ? "24px"
       : props.size === "small"
-      ? "16px"
+      ? "14px"
       : "24px"};
   border-radius: 9px;
 
@@ -154,7 +168,7 @@ const ToggleDot = styled("span", toggleProps)`
       : "14px"};
   left: 3px
   bottom: ${(props) =>
-    props.size === "medium" ? "5px" : props.size === "small" ? "3px" : "5px"};
+    props.size === "medium" ? "5px" : props.size === "small" ? "2px" : "5px"};
   background-color: ${(props) =>
     props.disabled
       ? props.theme.colors.disabled