toggle-components-library 1.36.1-beta.5 → 1.36.1-beta.6

package/package.json

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

package/src/components/buttons/ToggleMetricsButton.vue

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

package/src/components/carousel/ToggleCarousel.vue

@@ -1,34 +1,28 @@
 <template>
-    <div class="toggle-carousel-wrapper">
-        <swiper
-            ref="swiper"
-            class="swiper toggle-carousel"
-            :class="[
-                carouselStyle == 'voucher' && slidesLength > 1 ? 'toggle-carousel--voucher' : '', 
-                carouselStyle == 'voucher' && isEnd && slidesLength > 1 ? 'toggle-carousel--voucher-end' : ''
-            ]"
-            :options="carouselOptions"
-            @slideChangeTransitionStart="onSlideTransition"
-        >
-            <slot></slot>
-        </swiper>
+    <swiper
+        ref="swiper"
+        class="swiper toggle-carousel"
+        :class="[
+            carouselStyle == 'voucher' && slidesLength > 1 ? 'toggle-carousel--voucher' : '', 
+            carouselStyle == 'voucher' && isEnd && slidesLength > 1 ? 'toggle-carousel--voucher-end' : ''
+        ]"
+        :options="carouselOptions"
+        @slideChangeTransitionStart="onSlideTransition"
+    >
+        <slot></slot>
         <div v-if="carouselPrev && slidesLength > 1" 
             class="toggle-carousel-button toggle-carousel-button--prev"
-            :class="['toggle-carousel-button--' + carouselNavPosition,
-            {'toggle-carousel-button--disabled': prevDisabled},
-            {'toggle-carousel-button--comments-left-arrow': carouselStyle == 'comments'}]"
+            :class="['toggle-carousel-button--' + carouselNavPosition, {'toggle-carousel-button--disabled': prevDisabled}]"
             @click="slidePrev"  
             slot="button-prev"
         ></div>
         <div v-if="carouselNext && slidesLength > 1" 
             class="toggle-carousel-button toggle-carousel-button--next"
-            :class="['toggle-carousel-button--' + carouselNavPosition,
-            {'toggle-carousel-button--disabled': nextDisabled},
-            {'toggle-carousel-button--comments-right-arrow': carouselStyle == 'comments'}]"
+            :class="['toggle-carousel-button--' + carouselNavPosition, {'toggle-carousel-button--disabled': nextDisabled}]"
             @click="$refs.swiper.swiperInstance.slideNext()"  
             slot="button-next"
         ></div>
-    </div>
+    </swiper>
 </template>
 
 <script>

package/src/components/carousel/ToggleCarouselSlide.vue

@@ -1,5 +1,5 @@
 <template>
-    <swiper-slide class="toggle-carousel-slide">
+    <swiper-slide class="toggle-carousel-slide" :style="'width:' + slideWidth + '; height:' + slideHeight">
         <slot></slot>
     </swiper-slide>
 </template>

package/src/components/forms/ToggleDatePicker.vue

@@ -6,8 +6,8 @@
         <label class="toggle-input-label">{{label}}</label>
 
         <div class="toggle-date-input-container">
-            <div class="toggle-date-input-calendar-icon">
-                <input type="text" class="toggle-input"  :name="name" ref="date-input" :id="'toggle-date-input'+_uid" :value="date"  v-on:keypress="$event.preventDefault()">
+            <div :class="['toggle-date-input-calendar-icon', {'calendar-icon-disabled' :disabled}]">
+                <input type="text" class="toggle-input"  :name="name" :disabled="disabled" ref="date-input" :id="'toggle-date-input'+_uid" :value="date"  v-on:keypress="$event.preventDefault()" />
             </div>
             <button type="button" class="toggle-clear" v-on:click="clearDate" v-if="displayValue"></button>
         </div>
@@ -101,7 +101,11 @@ export default {
         maxLength:{
             type: Number,
             required:false
-        }
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
     },
 
     created : function(){

package/src/components/forms/ToggleInputCurrency.vue

@@ -3,7 +3,7 @@
 
 
 
-<div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid }"  v-on:click="focusClosestInput">
+<div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid, 'toggle-input-is-disabled': disabled }"  v-on:click="focusClosestInput">
     <label 
         v-if="label"
         :for="name ? name : 'InputText' " 
@@ -16,6 +16,7 @@
         :placeholder="placeholder ? placeholder : '' "
         :autocomplete="autocomplete ? 'on' : 'off' "
         :required="required"
+        :disabled="disabled"
         v-model="inputVal"
         @blur="isInputActive = false" 
         @focus="isInputActive = true" 
@@ -91,8 +92,12 @@ export default {
         currencyDenomination: {
             type: Number,
             default: 100
-        }
-       
+        },
+        disabled: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
     },
 
     created : function(){

package/src/components/metrics/ToggleMetricSingleMetric.vue

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

package/src/components/statusbar/ToggleStatusBar.vue

@@ -0,0 +1,73 @@
+<template>
+    <div :class="['toggle-status-bar-container', statusColours, statusSize]">
+        <label class="toggle-status-bar-label">
+            <span class="toggle-status-bar-dot blinking" v-if="showDot">&#9679;</span>
+            {{ statusName }}
+        </label>
+        
+        <div class="toggle-status-bar-tooltip-container" v-if="showToolTip && toolTipText.length">
+            <div class="toggle-status-bar-tooltip">
+                ?
+                <span class="toggle-status-bar-tooltip-text">{{ toolTipText }}</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'StatusBar',
+    props: {
+        status: {
+            type: String,
+            required: true,
+            validator: function (value) {
+                return ['draft', 'processing', 'complete', 'inactive', 'active', 'submitted', 'failed'].indexOf(value) !== -1;
+            }
+        },
+        size: {
+            type: String,
+            required: false,
+            validator: function (value) {
+                return ['small'].indexOf(value) !== -1;
+            }
+        },
+        toolTipOptions: {
+            type: Object,
+            required: false
+        }
+    },
+    computed: {
+        // Capitalise the first letter of the status
+        statusName() {
+            return this.status.charAt(0).toUpperCase() + this.status.slice(1);
+        },
+        // Add the status to the class name
+        statusColours() {
+            return 'toggle-status-bar-' + this.status;
+        },
+        // Add the size to the class name
+        statusSize() {
+            return 'toggle-status-bar-' + this.size;
+        },
+        // Show the dot if the status is active or processing
+        showDot() {
+            return this.status === 'active' || this.status === 'processing' || this.status === 'submitted';
+        },
+        showToolTip() {
+            return this.size !== 'small';
+        },
+        toolTipText() {
+            if (!this.toolTipOptions) {
+                return '';
+            }
+
+            if (this.toolTipOptions[this.status]) {
+                return this.toolTipOptions[this.status];
+            } else {
+                return '';
+            }
+        }
+    }
+}
+</script>

package/src/index.js

@@ -83,12 +83,13 @@ import ToggleMetricFunnelChart from "./components/metrics/ToggleMetricFunnelChar
 import ToggleThreeDots from "./components/threedots/ToggleThreeDots.vue";
 import ToggleThreeDotsButton from "./components/threedots/ToggleThreeDotsButton.vue";
 
+import ToggleStatusBar from "./components/statusbar/ToggleStatusBar.vue";
+
 import ToggleCarousel from "./components/carousel/ToggleCarousel.vue";
 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';
@@ -159,11 +160,11 @@ const Components = {
     ToggleBoosterBasicButton,
     ToggleBoosterModal,
     ToggleContactSearch,
+    ToggleStatusBar,
     ToggleCarousel,
     ToggleCarouselSlide,
     ToggleEmailCard,
-    ToggleRewardsCard,
-    ToggleCommentCard
+    ToggleRewardsCard
 }
 
 Object.keys(Components).forEach(name => {

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,47 +428,6 @@
     }
 }
 
-.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-metrics-button-disabled {
-    opacity: 0.3;
-    cursor: default;
-
-    .heatmap-icon, .email-icon, .contacts-icon {
-        transform: none !important;
-    }
-}
-
 .toggle-button-booster-badge {
     display: flex;
     align-items: center;

package/src/sass/includes/_as_cards.scss

@@ -164,36 +164,3 @@
 
 }
 
-.toggle-comment-card {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    height: 250px;
-    border-radius: 18px;
-    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 30px 20px 30px;
-    color: white;
-    border-radius: 30px;
-    width: 100%;
-
-    .toggle-comment-card-text {
-        text-align: justify;
-        line-height: 1.5rem;
-        text-overflow: ellipsis;
-        -webkit-line-clamp: 6;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-        display: -webkit-box;
-
-        p {
-            margin: 0
-        }
-    }
-}

package/src/sass/includes/_as_carousels.scss

@@ -28,10 +28,6 @@
             max-width: 100%;
         }
     }
-}
-.toggle-carousel-wrapper {
-    position: relative;
-
     .toggle-carousel-button{
         width: 50px;
         height: 50px;
@@ -106,14 +102,6 @@
                 }
             }
         }
-        &--comments-left-arrow{
-            left: -24px;
-            opacity: 0.8;
-        }
-        &--comments-right-arrow{
-            right: -24px !important;
-            opacity: 0.8;
-        }
         &--next{
             right: 20px;
             @media only screen and (max-width:768px){

package/src/sass/includes/_as_inputs.scss

@@ -227,6 +227,11 @@
   }
 }
 
+.calendar-icon-disabled {
+    cursor: default;
+    opacity: 0.5;
+}
+
 .calendar-icon-disabled {
   cursor: default;
   opacity: 0.5;

package/src/sass/includes/_as_metrics.scss

@@ -134,9 +134,4 @@
 
 .increase-padding-bottom {
     padding-bottom: 3rem !important;
-}
-
-.toggle-metric-score-rating {
-    font-size: 27px;
-    margin-left: -8px;
 }

package/src/sass/includes/_as_navs.scss

@@ -4,7 +4,7 @@
 
 .toggle-sidenav-container {
   font-size: $toggle-font-size-regular;
-  width: 20%;
+  width: 25%;
   float: left;
   max-width: 280px;
   min-height: 100vh;
@@ -134,7 +134,7 @@
   
   line-height: 1rem;
   font-size: $toggle-font-size-regular;
-  width: 20%;
+  width: 25%;
   float: left;
   max-width: 280px;
   min-height: 100vh;
@@ -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");
-                }
 
       }
     }