toggle-components-library 1.34.0-beta.9 → 1.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "toggle-components-library",
-    "version": "1.34.0-beta.9",
+    "version": "1.35.0",
     "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/buttons/ToggleMetricsButton.vue

@@ -1,6 +1,6 @@
 <template>
-    <button :class="['toggle-metrics-button', buttonStyle, 'toggle-metrics-button-' + size]" :style="styles" @click="click">
-        <div :class="icon" :style="'background-color:' + styles.color"></div>
+    <button :class="['toggle-metrics-button', buttonStyle]" @click="click">
+        <div :class="icon"></div>
         <slot>{{buttonText}}</slot>
     </button>
 </template>
@@ -19,23 +19,7 @@
         },
         icon: {
           type: String,
-          required: false,
-          validator: function(value) {
-            return ["heatmap-icon", "email-icon", "contacts-icon"].indexOf(value) !== -1;
-          }
-        },
-        size: {
-          type: String,
-          default: "medium",
-          required: false,
-          validator: function(value) {
-            return ["small", "medium", "large"].indexOf(value) !== -1;
-          }
-        },
-        styles: {
-          type: Object,
-          default: () => ({}),
-          required: false,
+          required: true,
         },
       },
       methods: {

package/src/components/metrics/ToggleMetricSingleMetric.vue

@@ -2,7 +2,7 @@
     <div>
         <h3 class="toggle-metric metric-label">{{label}}</h3>
         <div class="single-metric-icon" v-if="metricPending && label.length == 0"></div>
-        <h1 class="toggle-metric metric-value" :class="{ 'toggle-metric-score': score}" v-else>{{metricValue}} {{ symbol }}</h1>
+        <h1 class="toggle-metric metric-value" v-else>{{metricValue}}</h1>
     </div>
 </template>
 
@@ -27,7 +27,7 @@ export default {
         type : {
             type: String,
             validator: function (value) {
-                return ['text', 'number', 'percentage', 'currency', 'score'].indexOf(value) !== -1
+                return ['text', 'number', 'percentage', 'currency'].indexOf(value) !== -1
             }
         },
         /**
@@ -92,10 +92,9 @@ export default {
                     return this.value.toLocaleString();
 
             }
-        },
-        score() {
-            return this.type === 'score';
-        },     
+        }
+
+       
     }
 }
 

package/src/components/metrics/ToggleMetricSparkLine.vue

@@ -54,7 +54,7 @@ export default {
         type : {
             type: String,
             validator: function (value) {
-                return ['text', 'number', 'percentage', 'currency', 'score'].indexOf(value) !== -1
+                return ['text', 'number', 'percentage', 'currency'].indexOf(value) !== -1
             }
         },
         /**

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/index.js

@@ -88,7 +88,6 @@ import ToggleCarouselSlide from "./components/carousel/ToggleCarouselSlide.vue";
 
 import ToggleEmailCard from "./components/cards/ToggleEmailCard.vue";
 import ToggleRewardsCard from "./components/cards/ToggleRewardsCard.vue";
-import ToggleCommentCard from "./components/cards/ToggleCommentCard.vue";
 
 
 import './sass/main.scss';
@@ -162,8 +161,7 @@ const Components = {
     ToggleCarousel,
     ToggleCarouselSlide,
     ToggleEmailCard,
-    ToggleRewardsCard,
-    ToggleCommentCard
+    ToggleRewardsCard
 }
 
 Object.keys(Components).forEach(name => {

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

@@ -395,7 +395,7 @@
         }
         
         &:hover .contacts-icon {
-            background-color: white;
+            background-image: url("../assets/icons/contacts-white.svg");
         }
     }
     //icons
@@ -418,11 +418,9 @@
     }
     
     .contacts-icon {
-        --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='.9em' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cstyle%3Esvg%7Bfill:%23fff%7D%3C/style%3E%3Cpath d='M304 128a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM49.3 464H398.7c-8.9-63.3-63.3-112-129-112H178.3c-65.7 0-120.1 48.7-129 112zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3z'/%3E%3C/svg%3E");
-        background-color: #6d90b4;
-        -webkit-mask: var(--svg);
-        mask: var(--svg);
-        mask-repeat: no-repeat;
+        background-image: url("../assets/icons/contacts-greyblue.svg");
+        background-repeat:no-repeat;
+        background-size:contain;
         margin-right: 6px;
         width: 14px;
         height: 14px;
@@ -430,34 +428,82 @@
     }
 }
 
-.toggle-metrics-button-small {
-    padding: 0px 13px;
-    font-size: 12px;
-    &.mini-contacts {
-        font-size: 0.65rem;
-        padding: 5px 12px;
-    }
-    .heatmap-icon {
-        width: 21px;
-        height: 21px;
+.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%;
     }
-    .email-icon {
-        width: 25px;
-        height: 25px;
+    &.toggle-button-loading {
+      opacity: 0
     }
-    .contacts-icon {
-        --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='.8em' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cstyle%3Esvg%7Bfill:%23fff%7D%3C/style%3E%3Cpath d='M304 128a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM49.3 464H398.7c-8.9-63.3-63.3-112-129-112H178.3c-65.7 0-120.1 48.7-129 112zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3z'/%3E%3C/svg%3E");
-        -webkit-mask: var(--svg);
-        mask: var(--svg);
-        mask-repeat: no-repeat;
+    &.toggle-button-disabled {
+      opacity: 0.3;
     }
 }
 
-.toggle-metrics-button-large {
-    padding: 23px 27px;
-    font-size: 17px;
-    &.mini-contacts {
-        font-size: .92rem;
-        padding: 10px 25px;
+/* 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_cards.scss

@@ -164,32 +164,3 @@
 
 }
 
-.toggle-comment-card {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    height: 250px;
-    border-radius: 18px;
-    padding-right: 20px;
-    font-size: $toggle-font-size-regular;
-    font-family: $toggle-font-family;
-}
-
-.toggle-comment-card-info {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    padding: 30px 70px 20px 30px;
-    color: white;
-    border-radius: 30px;
-    width: 100%;
-
-    .toggle-comment-card-text {
-        text-align: justify;
-        line-height: 1.5rem;
-
-        p {
-            margin: 0
-        }
-    }
-}

package/src/sass/includes/_as_metrics.scss

@@ -134,10 +134,4 @@
 
 .increase-padding-bottom {
     padding-bottom: 3rem !important;
-}
-
-.toggle-metric-score::after {
-    content: '/5';
-    font-size: 27px;
-    margin-left: -8px;
 }

package/src/sass/includes/_as_navs.scss

@@ -342,11 +342,6 @@
             &.airship-hat-icon span::before {
               background-image: url("../assets/icons/airship-hat-hover.svg");
             }
-
-            &.airship-feedback-icon a::before,
-            &.airship-feedback-icon span::before {
-              background-image: url("../assets/icons/airship-feedback-hover.svg");
-            }
         }
     }
 
@@ -511,17 +506,6 @@
                   animation: tilt-shake 0.4s;
                   background-image: url("../assets/icons/airship-audiences-hover.svg");
                 }
-        // add feedbacl
-        &.airship-feedback-icon a::before,
-        &.airship-feedback-icon span::before {
-          background-image: url("../assets/icons/airship-feedback.svg");
-        }
-
-                &.airship-feedback-icon a:hover::before,
-                &.airship-feedback-icon span:hover::before {
-                  animation: tilt-shake 0.4s;
-                  background-image: url("../assets/icons/airship-feedback-hover.svg");
-                }
 
       }
     }

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

package/src/assets/icons/airship-feedback-hover.svg

@@ -1,10 +0,0 @@
-<svg id="Group_10" data-name="Group 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="624.048" height="499" viewBox="0 0 624.048 499">
-  <defs>
-    <clipPath id="clip-path">
-      <rect id="Rectangle_25" data-name="Rectangle 25" width="624.048" height="499" fill="none"/>
-    </clipPath>
-  </defs>
-  <g id="Group_9" data-name="Group 9" clip-path="url(#clip-path)">
-    <path id="Path_3" data-name="Path 3" d="M617.3,465.069l-.384-.318c-.385-.317-.9-.738-1.674-1.49-1.419-1.279-3.616-3.309-6.36-6.112a225.664,225.664,0,0,1-20.162-23.534c-.136-.182-.271-.367-.406-.55-22.957-31.214-26.261-72.555-9.486-107.484,16.327-34,23.783-71.208,20.13-109.472C586.148,81.9,441.91-14.07,276.747,1.694S-11.9,138.983.914,273.192,157.963,503.371,323.126,487.608a364.7,364.7,0,0,0,89.545-20,77.522,77.522,0,0,1,58.556,2.224,367.136,367.136,0,0,0,38.334,14.95c29.035,9.42,63.567,16.569,96.922,13.5A19.281,19.281,0,0,0,622.561,486.8a18.785,18.785,0,0,0-5.261-21.731m-446.79-153.1A50.455,50.455,0,1,1,216.243,257.2a50.456,50.456,0,0,1-45.733,54.772m138.931-12.493a50.454,50.454,0,1,1,45.734-54.77,50.454,50.454,0,0,1-45.734,54.77m134.991-12.137a50.455,50.455,0,1,1,45.733-54.769,50.455,50.455,0,0,1-45.733,54.769" transform="translate(0 0)" fill="#477ef6"/>
-  </g>
-</svg>

package/src/assets/icons/airship-feedback.svg

@@ -1,10 +0,0 @@
-<svg id="Group_10" data-name="Group 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="624.048" height="499" viewBox="0 0 624.048 499">
-  <defs>
-    <clipPath id="clip-path">
-      <rect id="Rectangle_25" data-name="Rectangle 25" width="624.048" height="499" fill="none"/>
-    </clipPath>
-  </defs>
-  <g id="Group_9" data-name="Group 9" clip-path="url(#clip-path)">
-    <path id="Path_3" data-name="Path 3" d="M617.3,465.069l-.384-.318c-.385-.317-.9-.738-1.674-1.49-1.419-1.279-3.616-3.309-6.36-6.112a225.664,225.664,0,0,1-20.162-23.534c-.136-.182-.271-.367-.406-.55-22.957-31.214-26.261-72.555-9.486-107.484,16.327-34,23.783-71.208,20.13-109.472C586.148,81.9,441.91-14.07,276.747,1.694S-11.9,138.983.914,273.192,157.963,503.371,323.126,487.608a364.7,364.7,0,0,0,89.545-20,77.522,77.522,0,0,1,58.556,2.224,367.136,367.136,0,0,0,38.334,14.95c29.035,9.42,63.567,16.569,96.922,13.5A19.281,19.281,0,0,0,622.561,486.8a18.785,18.785,0,0,0-5.261-21.731m-446.79-153.1A50.455,50.455,0,1,1,216.243,257.2a50.456,50.456,0,0,1-45.733,54.772m138.931-12.493a50.454,50.454,0,1,1,45.734-54.77,50.454,50.454,0,0,1-45.734,54.77m134.991-12.137a50.455,50.455,0,1,1,45.733-54.769,50.455,50.455,0,0,1-45.733,54.769" transform="translate(0 0)" fill="#354b64"/>
-  </g>
-</svg>

package/src/components/cards/ToggleCommentCard.vue

@@ -1,63 +0,0 @@
-<template>
-  <div class="toggle-comment-card">
-    <div class="toggle-comment-card-info" :style="{ backgroundColor: cardColor }">
-      <div class="toggle-comment-card-text">
-        <p>"{{ commentLength }}"</p>
-      </div>
-      <div class="toggle-comment-card-name">
-        <slot name="button_contacts"></slot>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  data() {
-    return {};
-  },
-  props: {
-    cardIndex: {
-      type: Number,
-      required: true,
-    },
-    totalCards: {
-      type: Number,
-      required: true,
-    },
-    comment: {
-      type: String,
-      required: true,
-    },
-    name: {
-      type: String,
-      required: true,
-    },
-  },
-  computed: {
-    cardColor() {
-      // adjust colour palette below to change the Reward Cards colors
-      const colorPalette = [
-        "#2c7da0",
-        "#f3c570",
-        "#8bbcbe",
-        "#a0a789",
-        "#cbae78",
-        "#a284b6",
-        "#d39999",
-        "#9b7361",
-        "#64aaa8",
-        "#799194",
-      ];
-
-      // pick random number to return random index of colourPalette
-      const paletteIndex = Math.floor(
-        (this.cardIndex / this.totalCards) * colorPalette.length
-      );
-      return colorPalette[paletteIndex];
-    },
-    commentLength() {
-        return this.comment.length > 420 ? this.comment.substring(0, 420) + "..." : this.comment;
-    },
-  }
-};
-</script>