@eturnity/eturnity_reusable_components 1.0.72 → 1.0.76

package/package.json

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

package/src/App.vue

@@ -7,15 +7,27 @@
             <th>Column 1</th>
             <th>Column 2</th>
             <th>Column 3</th>
-            <th>Column 4</th>
             <div />
           </tr>
         </thead>
         <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>
@@ -24,19 +36,13 @@
       </main-table>
       <br />
       <br />
-      <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>
+      <toggle
+        @on-toggle-change="onInputChange($event)"
+        :isChecked="isChecked"
+        label="My Label Text"
+        labelAlign="right"
+        :disabled="true"
+      />
     </page-container>
   </ThemeProvider>
 </template>
@@ -47,17 +53,12 @@ import theme from "./assets/theme"
 import styled from "vue-styled-components"
 import MainTable from "@/components/tables/mainTable"
 import ThreeDots from "@/components/threeDots"
-import InputNumber from "@/components/inputs/inputNumber"
+import Toggle from "@/components/inputs/toggle"
 
 const PageContainer = styled.div`
   padding: 40px;
 `
 
-const InputWrapper = styled.div`
-  height: 36px;
-  width: 180px;
-`
-
 export default {
   name: "App",
   components: {
@@ -65,8 +66,7 @@ export default {
     PageContainer,
     MainTable,
     ThreeDots,
-    InputNumber,
-    InputWrapper,
+    Toggle,
   },
   data() {
     return {
@@ -132,7 +132,7 @@ export default {
       return theme
     },
     onInputChange(event) {
-      this.inputValue = event
+      this.isChecked = event
     },
   },
 }

package/src/assets/icons/delete_icon.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="5 5 30 30">
   <defs>
     <style>
       .cls-1 {

package/src/assets/icons/delete_icon_gray.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="5 5 30 30">
   <defs>
     <style>
       .cls-1 {

package/src/assets/theme.js

@@ -12,12 +12,14 @@ const theme = {
     white: "#fff",
     blue: "#48a2d0",
     red: "#ff7e7e",
-    disabled: "#c4c4c4",
     blue1: "#e4efff",
+    grey1: "#666",
+    grey2: "#c4c4c4",
     grey3: "#b2b9c5",
     grey4: "#ebeef4",
     grey5: "#fafafa",
     green: "#99db0c",
+    disabled: "#dfe1e1",
   },
   screen: {
     mobileSmall: "345px",

package/src/components/deleteIcon/index.vue

@@ -1,55 +1,44 @@
 <template>
-  <wrapper>
-    <icon :color="color" />
+  <wrapper @mouseover="isHovered = true" @mouseleave="isHovered = false">
+    <icon-image
+      v-if="isHovered"
+      :src="require('../../assets/icons/delete_icon.svg')"
+    />
+    <icon-image
+      v-else
+      :src="require('../../assets/icons/delete_icon_gray.svg')"
+    />
   </wrapper>
 </template>
 
 <script>
 // To use:
-// <delete-icon
-//   color="gray" // red is default
-// />
+// <delete-icon />
 import styled from "vue-styled-components"
 
 const Wrapper = styled.div`
-  width: 100%;
-  height: 100%;
-  min-height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`
-
-const iconAttrs = { color: String }
-const Icon = styled("span", iconAttrs)`
   width: 30px;
   height: 30px;
-  background-position: center;
   cursor: pointer;
-  background-image: ${(props) =>
-    props.color === "red"
-      ? `url(${require("../../assets/icons/delete_icon.svg")})`
-      : props.color === "gray"
-      ? `url(${require("../../assets/icons/delete_icon_gray.svg")})`
-      : `url(${require("../../assets/icons/delete_icon.svg")})`};
+`
 
+const IconImage = styled.img`
   &:hover {
-    background-image: ${() =>
-      `url(${require("../../assets/icons/delete_icon.svg")})`};
+    background-color: ${(props) => props.theme.colors.grey5};
+    border-radius: 4px;
   }
 `
 
 export default {
   name: "delete-icon",
   components: {
-    Icon,
     Wrapper,
+    IconImage,
   },
-  props: {
-    color: {
-      required: false,
-      default: "red", // red, gray
-    },
+  data() {
+    return {
+      isHovered: false,
+    }
   },
 }
 </script>

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

@@ -1,24 +1,23 @@
 <template>
   <container>
-    <flex-wrapper :size="size">
-      <label-text
-        v-if="labelAlign === 'left'"
-        :size="size"
-        @click="onToggleChange"
-        >{{ label }}</label-text
-      >
+    <flex-wrapper :size="size" :disabled="disabled" @click="onToggleChange">
+      <label-text v-if="labelAlign === 'left'" :size="size">{{
+        label
+      }}</label-text>
       <toggle-wrapper
         role="checkbox"
         :checked="isChecked"
         :size="size"
         tabindex="0"
-        @click="onToggleChange"
         @keydown.space.prevent="onToggleChange"
         :disabled="disabled"
+        :backgroundColor="backgroundColor"
+        :isChecked="isChecked"
       >
         <toggle-background
           :backgroundColor="backgroundColor"
           :isChecked="isChecked"
+          :disabled="disabled"
         />
         <toggle-dot
           :isChecked="isChecked"
@@ -58,7 +57,7 @@ const Container = styled.div`
   display: inline-block;
 `
 
-const flexAttrs = { size: String }
+const flexAttrs = { size: String, disabled: Boolean }
 const FlexWrapper = styled("div", flexAttrs)`
   display: grid;
   grid-template-columns: auto 1fr;
@@ -69,9 +68,16 @@ const FlexWrapper = styled("div", flexAttrs)`
       ? "10px"
       : "20px"};
   align-items: center;
+  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};
@@ -85,6 +91,14 @@ const LabelText = styled("div", toggleAttrs)`
 
 const ToggleWrapper = styled("span", toggleAttrs)`
   display: inline-block;
+  border: ${(props) =>
+    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;
 
@@ -111,14 +125,20 @@ const ToggleWrapper = styled("span", toggleAttrs)`
   }
 `
 
-const backgroundAttrs = { backgroundColor: String, isChecked: Boolean }
+const backgroundAttrs = {
+  backgroundColor: String,
+  isChecked: Boolean,
+  disabled: Boolean,
+}
 const ToggleBackground = styled("span", backgroundAttrs)`
   display: inline-block;
   border-radius: 100px;
   height: 100%;
   width: 100%;
   background-color: ${(props) =>
-    props.isChecked
+    props.disabled
+      ? props.theme.colors.grey5
+      : props.isChecked
       ? props.backgroundColor
         ? props.backgroundColor
         : props.theme.colors.green
@@ -146,9 +166,9 @@ const ToggleDot = styled("span", toggleProps)`
       : props.size === "small"
       ? "10px"
       : "14px"};
-  left: 4px
+  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
@@ -164,7 +184,7 @@ const ToggleDot = styled("span", toggleProps)`
       ? props.size === "medium"
         ? "translateX(25px)"
         : props.size === "small"
-        ? "translateX(10px)"
+        ? "translateX(13px)"
         : "translateX(25px)"
       : "translateX(0)"};
 

package/src/components/threeDots/index.vue

@@ -116,6 +116,14 @@ import Spinner from "../spinner"
 const PageContainer = styled.div`
   display: grid;
   align-items: center;
+  justify-items: center;
+  width: 30px;
+  height: 30px;
+
+  &:hover {
+    background-color: ${(props) => props.theme.colors.grey5};
+    border-radius: 4px;
+  }
 `
 
 const ButtonContainer = styled.div`
@@ -128,13 +136,6 @@ const ButtonContainer = styled.div`
     // This is the dot color
     background-color: #263238;
   }
-
-  &:hover {
-    div {
-      // Dot color on hover
-      background-color: ${(props) => props.theme.colors.grey3};
-    }
-  }
 `
 
 const DotItem = styled.div`