toggle-components-library 1.36.0 → 1.36.1-beta.1

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "toggle-components-library",
-  "version": "1.36.0",
+  "version": "1.36.1-beta.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package/package.json

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

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

@@ -0,0 +1,10 @@
+<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

@@ -0,0 +1,10 @@
+<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/buttons/ToggleMetricsButton.vue

@@ -1,6 +1,6 @@
 <template>
-    <button :class="['toggle-metrics-button', buttonStyle]" @click="click">
-        <div :class="icon"></div>
+    <button :class="['toggle-metrics-button', buttonStyle, 'toggle-metrics-button-' + size]" :style="styles" @click="click">
+        <div :class="icon" :style="styles ? 'background-color:' + styles.color : ''"></div>
         <slot>{{buttonText}}</slot>
     </button>
 </template>
@@ -19,7 +19,22 @@
         },
         icon: {
           type: String,
-          required: true,
+          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,
+          required: false,
         },
       },
       methods: {

package/src/components/cards/ToggleCommentCard.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="toggle-comment-card">
+    <div class="toggle-comment-card-info" :style="{ backgroundColor: cardColor }">
+      <div class="toggle-comment-card-text">
+        <p>"{{ displayComment }}"</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,
+    }
+  },
+  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];
+    },
+    displayComment() {
+        return this.comment.length > 420 ? this.comment.substring(0, 420) + "..." : this.comment;
+    },
+  }
+};
+</script>

package/src/components/metrics/ToggleMetricSingleMetric.vue

@@ -2,7 +2,9 @@
     <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" v-else>{{metricValue}}</h1>
+        <h1 class="toggle-metric metric-value" v-else>{{metricValue}}
+            <span v-if="score" class="toggle-metric-score-rating">/{{value.maxScore}}</span>
+        </h1>
     </div>
 </template>
 
@@ -21,20 +23,20 @@ export default {
             type: String,
             default: "ToggleMetricSingleMetric"
         },
-                /**
+        /**
         * Type of the value, this will affect on the format shown
         */
         type : {
             type: String,
             validator: function (value) {
-                return ['text', 'number', 'percentage', 'currency'].indexOf(value) !== -1
+                return ['text', 'number', 'percentage', 'currency', 'score'].indexOf(value) !== -1
             }
         },
         /**
         * Component's value
         */
         value: {
-            type: [String, Number],
+            type: [String, Number, Object],
             required: true
         },
         /**
@@ -87,14 +89,17 @@ export default {
                 case 'currency':
                     return (this.value/this.currencyDenomination).toLocaleString(this.currencyLocale, {style: 'currency', currency: this.currencyCode});
                 case'percentage':
-                    return `${this.value} %`
+                    return `${this.value} %`;
+                case 'score':
+                    return this.value.score;
                 default:
                     return this.value.toLocaleString();
 
             }
+        },
+        score() {
+            return this.type === 'score';
         }
-
-       
     }
 }
 

package/src/components/metrics/ToggleMetricSparkLine.vue

@@ -54,14 +54,14 @@ export default {
         type : {
             type: String,
             validator: function (value) {
-                return ['text', 'number', 'percentage', 'currency'].indexOf(value) !== -1
+                return ['text', 'number', 'percentage', 'currency', 'score'].indexOf(value) !== -1
             }
         },
         /**
         * single metric component value
         */
         singleMetricVal: {
-            type: [String, Number],
+            type: [String, Number, Object],
             required: true
         },
         /**

package/src/index.js

@@ -88,6 +88,7 @@ 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';
@@ -161,7 +162,8 @@ const Components = {
     ToggleCarousel,
     ToggleCarouselSlide,
     ToggleEmailCard,
-    ToggleRewardsCard
+    ToggleRewardsCard,
+    ToggleCommentCard
 }
 
 Object.keys(Components).forEach(name => {

package/src/sass/includes/_as_buttons.scss

@@ -395,7 +395,7 @@
         }
         
         &:hover .contacts-icon {
-            background-image: url("../assets/icons/contacts-white.svg");
+            background-color: white;
         }
     }
     //icons
@@ -418,9 +418,11 @@
     }
     
     .contacts-icon {
-        background-image: url("../assets/icons/contacts-greyblue.svg");
-        background-repeat:no-repeat;
-        background-size:contain;
+        --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;
         margin-right: 6px;
         width: 14px;
         height: 14px;
@@ -428,6 +430,38 @@
     }
 }
 
+.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;
+    }
+    .email-icon {
+        width: 25px;
+        height: 25px;
+    }
+    .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-metrics-button-large {
+    padding: 23px 27px;
+    font-size: 17px;
+    &.mini-contacts {
+        font-size: .92rem;
+        padding: 10px 25px;
+    }
+}
+
 .toggle-button-booster-badge {
     display: flex;
     align-items: center;

package/src/sass/includes/_as_cards.scss

@@ -164,3 +164,32 @@
 
 }
 
+.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,4 +134,9 @@
 
 .increase-padding-bottom {
     padding-bottom: 3rem !important;
+}
+
+.toggle-metric-score-rating {
+    font-size: 27px;
+    margin-left: -8px;
 }

package/src/sass/includes/_as_navs.scss

@@ -342,6 +342,11 @@
             &.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");
+            }
         }
     }
 
@@ -506,6 +511,17 @@
                   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");
+                }
 
       }
     }