toggle-components-library 1.34.0-beta.2 → 1.34.0-beta.4

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "toggle-components-library",
-  "version": "1.34.0-beta.2",
+  "version": "1.34.0-beta.4",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -3957,16 +3957,6 @@
             "@types/node": "*"
           }
         },
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
         "array-union": {
           "version": "1.0.2",
           "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
@@ -4005,34 +3995,6 @@
             }
           }
         },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
         "dir-glob": {
           "version": "2.2.2",
           "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-2.2.2.tgz",
@@ -4116,13 +4078,6 @@
             "slash": "^2.0.0"
           }
         },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
         "html-webpack-plugin": {
           "version": "3.2.0",
           "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz",
@@ -4312,16 +4267,6 @@
           "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
           "dev": true
         },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
         "terser-webpack-plugin": {
           "version": "1.4.5",
           "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz",
@@ -4378,39 +4323,6 @@
             "mime": "^2.4.4",
             "schema-utils": "^2.5.0"
           }
-        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.8.3",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
-          "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chalk": "^4.1.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^2.0.0"
-          },
-          "dependencies": {
-            "json5": {
-              "version": "2.2.3",
-              "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
-              "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-              "dev": true,
-              "optional": true
-            },
-            "loader-utils": {
-              "version": "2.0.4",
-              "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
-              "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
-              "dev": true,
-              "optional": true,
-              "requires": {
-                "big.js": "^5.2.2",
-                "emojis-list": "^3.0.0",
-                "json5": "^2.1.2"
-              }
-            }
-          }
         }
       }
     },
@@ -18670,6 +18582,75 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.8.3",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
+      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-moment": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/vue-moment/-/vue-moment-4.1.0.tgz",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "toggle-components-library",
-    "version": "1.34.0-beta.2",
+    "version": "1.34.0-beta.4",
     "private": false,
     "scripts": {
         "serve": "vue-cli-service serve",

package/src/components/boosters/ToggleBoosterButton.vue

@@ -1,19 +1,25 @@
 <template>
-  <button :class="['toggle-booster-button-container', boosterType]" @click="click">
-
-    <img
-      :src="logo.src"
-      :alt="logo.alt"
-      class="toggle-booster-button-logo"
-    >
-
-    <div :class="['toggle-booster-button', boosterType]" >
-      <p class="plus">+</p>
-      <div v-if="buttonText" class="toggle-booster-button-button-text">
-        <slot>{{buttonText}}</slot>
+  <div :class="[{'toggle-booster-button-tooltip-container': !!tooltipText }]">
+    <button :class="['toggle-booster-button-container', boosterType, {'toggle-booster-button-disabled': disabled}]" :disabled="disabled" @click="click">
+  
+      <img
+        :src="logo.src"
+        :alt="logo.alt"
+        class="toggle-booster-button-logo"
+      >
+  
+      <div :class="['toggle-booster-button', boosterType]" >
+        <p class="plus">+</p>
+        <div v-if="buttonText" class="toggle-booster-button-button-text">
+          <slot>{{buttonText}}</slot>
+        </div>
       </div>
+    </button>
+
+    <div class="toggle-booster-button-tooltip-text" v-if="tooltipText">
+      <div >{{ tooltipText }}</div>
     </div>
-  </button>
+  </div>
 </template>
   
   <script>
@@ -36,6 +42,14 @@
         type: Object,
         required: true,
       },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      tooltipText: {
+        type: String,
+        required: false
+      }
     },
     methods: {
       click() {

package/src/components/buttons/ToggleButton.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="[ 'toggle-button-container', {'toggle-button-container-mini':isMini}]">
+    <div :class="[ 'toggle-button-container', {'toggle-button-container-mini':isMini, 'toggle-button-tooltip-container': !!tooltipText }]">
         <button
             v-if="!$slots.default"
             :type="type"
@@ -10,17 +10,20 @@
             <div class="toggle-button-loader" v-if="loading" ></div>
             <span v-html="buttonText" v-if="!isMini"/>
 
-            <div v-if="boosterImageProperties" :class="['toggle-button-booster-image-badge', {'shimmer': boosterShimmer}]" :style="'background-color: ' + boosterImageProperties.bgColor">
+            <div v-if="boosterImageProperties" :class="['toggle-button-booster-image-badge', {'shimmer': boosterShimmer && !disabled, 'disabled': disabled, 'loading': loading}]" :style="'background-color: ' + boosterImageProperties.bgColor">
               <img class="toggle-button-booster-image" :src="boosterImageProperties.src" :alt="boosterImageProperties.alt">
             </div>
-          </button>
-          <div v-else :class="[ 'toggle-button-a', buttonStyle, {'toggle-button-a-loading':loading, 'disabled':disabled, 'toggle-button-subscribed': !subscribed}]">
-            <div class="toggle-button-loader" v-if="loading" ></div>
-            <div class="toggle-button-a-border" />
-            <!-- 
-                @slot String of button text
-            -->
-            <slot>{{buttonText}}</slot>
+        </button>
+        <div v-else :class="[ 'toggle-button-a', buttonStyle, {'toggle-button-a-loading':loading, 'disabled':disabled, 'toggle-button-subscribed': !subscribed}]">
+          <div class="toggle-button-loader" v-if="loading" ></div>
+          <div class="toggle-button-a-border" />
+          <!--
+              @slot String of button text
+          -->
+          <slot>{{buttonText}}</slot>
+        </div>
+        <div class="toggle-button-tooltip-text" v-if="tooltipText">
+          <div >{{ tooltipText }}</div>
         </div>
     </div>
 </template>
@@ -91,6 +94,13 @@ export default {
         boosterShimmer: {
           type: Boolean,
           default: true
+        },
+        /*
+        * Text displayed in tooltip
+        */
+        tooltipText: {
+          type: String,
+          required: false
         }
     },
     computed: {

package/src/components/tables/ToggleTableRow.vue

@@ -1,5 +1,23 @@
 <template>
-    <tr class="toggle-tablee-tr" @click="$emit('click')" >
+    <tr :class="['toggle-tablee-tr',{'tr-disabled':disabled }]" @click="handleClick" >
         <slot></slot>
     </tr>
-</template>
+</template>
+
+<script>
+export default {
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    handleClick() {
+      if(!this.disabled) {
+        this.$emit('click')
+      }
+    }
+  }
+}
+</script>

package/src/sass/includes/_as_boosters.scss

@@ -219,3 +219,37 @@ margin:1rem
   
   }
 
+.toggle-booster-button-disabled {
+    opacity: 0.3;
+}
+
+/* Tooltip container */
+.toggle-booster-button-tooltip-container {
+    position: relative;
+    display: flex;
+    justify-content: center;
+}
+
+/* Tooltip text */
+.toggle-booster-button-tooltip-container .toggle-booster-button-tooltip-text {
+    visibility: hidden;
+    width: 120px;
+    height: fit-content;
+    background-color: black;
+    color: #fff;
+    text-align: center;
+    padding: 5px;
+    border-radius: 6px;
+    position: absolute;
+    z-index: 999;
+    top: 100%;
+}
+
+.toggle-booster-button-tooltip-text {
+    font-family: $toggle-font-family;
+    padding: 10px;
+}
+
+.toggle-booster-button-tooltip-container:hover .toggle-booster-button-tooltip-text {
+    visibility: visible;
+}

package/src/sass/includes/_as_buttons.scss

@@ -458,6 +458,42 @@
         width: 100%;
         height: 100%;
     }
+    &.loading {
+      opacity: 0
+    }
+    &.disabled {
+      opacity: 0.3;
+    }
+}
+
+/* Tooltip container */
+.toggle-button-tooltip-container {
+  position: relative;
+  justify-content: center;
+  display: flex;
+}
+
+/* Tooltip text */
+.toggle-button-tooltip-container .toggle-button-tooltip-text {
+  visibility: hidden;
+  width: 120px;
+  height: fit-content;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  padding: 5px;
+  border-radius: 6px;
+  position: absolute;
+  z-index: 999;
+  top: 100%;
+}
+
+.toggle-button-tooltip-text {
+  font-family: $toggle-font-family;
+}
+
+.toggle-button-tooltip-container:hover .toggle-button-tooltip-text {
+    visibility: visible;
 }
 
 // Shimmer animation for booster badge

package/src/sass/includes/_as_table.scss

@@ -117,9 +117,7 @@ table.toggle-table {
         }
     }
 
-
     tr.toggle-tablee-tr {
-
         &:hover {
             background-color: #FFF;
             .arrow-order {
@@ -146,6 +144,10 @@ table.toggle-table {
 
 
     }
+    tr.toggle-tablee-tr.tr-disabled * {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
    
   }