toggle-components-library 1.34.0 → 1.35.1

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "toggle-components-library",
-  "version": "1.34.0",
+  "version": "1.35.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "toggle-components-library",
-    "version": "1.34.0",
+    "version": "1.35.1",
     "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,22 +1,29 @@
 <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"
-            :class="[ 'toggle-button', buttonStyle, {'toggle-button-loading':loading, 'toggle-button-subscribed': !subscribed}]"
+            :class="[ 'toggle-button', buttonStyle, {'toggle-button-loading':loading, 'toggle-button-subscribed': !subscribed, 'toggle-button-booster-badge': boosterImageProperties}]"
             :disabled="(loading || disabled)"
             @click="click"
             >
             <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 && !disabled, 'toggle-button-loading': loading, 'toggle-button-disabled': disabled}]" :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>
+          <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>
@@ -67,10 +74,33 @@ export default {
             type:String,
             default:'confirm'
         },
-        /* Grey out button if booster not enabled*/
+        /* 
+        * Grey out button if booster not enabled
+        */
         subscribed: {
           type: Boolean,
           default: true
+        },
+        /*
+        * Booster badge image properties, image, alt text, background colour
+        */
+        boosterImageProperties: {
+          type: Object,
+          required: false,
+        },
+        /*
+        * Turns the shimmer animation on and off for the booster badge
+        */
+        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

@@ -427,3 +427,83 @@
         transition: all 0.2s ease-in-out;
     }
 }
+
+.toggle-button-booster-badge {
+    display: flex;
+    align-items: center;
+    padding: 0.2rem 0.2rem 0.2rem 1rem !important;
+}
+
+.shimmer {
+    color: grey;
+    display: inline-block;
+    mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right/400% 100%;
+    background-repeat: no-repeat;
+    animation: shimmer 4s infinite;
+}
+
+.toggle-button-booster-image-badge {
+    width: 6rem;
+    height: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    margin: 0 0 0 20px;
+    padding: 0px 8px 0px 8px;
+    width: 6rem;
+    height: 1.8rem;
+    .toggle-button-booster-image {
+        width: 100%;
+        height: 100%;
+    }
+    &.toggle-button-loading {
+      opacity: 0
+    }
+    &.toggle-button-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
+@keyframes shimmer {
+    0% {
+        mask-position: right;
+    }
+    30% {
+        mask-position: left;
+    }
+    100% {
+        mask-position: left;
+    }
+}

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;
+    }
    
   }