toggle-components-library 1.36.4-beta.6 → 1.36.4-beta.8

package/package.json

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

package/src/assets/icons/airship-flight-assist.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#bd38df"/>
+      <stop offset="1" stop-color="#5f1c70"/>
+    </linearGradient>
+  </defs>
+  <g id="Group_22" data-name="Group 22" transform="translate(9.062 -181.365) rotate(11)">
+    <path id="Path_14" data-name="Path 14" d="M6.264,2.145a.982.982,0,0,1,1.838,0l.79,3.538c.1.236.192.5.525.525l2.8.056a1,1,0,0,1,0,1.838L9.706,9.181a1,1,0,0,0-.525.525L8.1,15.222a1,1,0,0,1-1.838,0L5.186,9.706a1,1,0,0,0-.525-.525L2.145,8.1a1,1,0,0,1,0-1.838l2.782.1c.347.007.424-.289.525-.525Z" transform="matrix(-0.848, -0.53, 0.53, -0.848, 42.092, 197.282)" fill="url(#linear-gradient)"/>
+    <path id="Polygon_2" data-name="Polygon 2" d="M3.07,2.145a1,1,0,0,1,1.838,0l.12.28a1,1,0,0,0,.525.525l.28.12a1,1,0,0,1,0,1.838l-.28.12a1,1,0,0,0-.525.525l-.12.28a1,1,0,0,1-1.838,0l-.12-.28a1,1,0,0,0-.525-.525l-.28-.12a1,1,0,0,1,0-1.838l.28-.12a1,1,0,0,0,.525-.525Z" transform="matrix(0.996, -0.087, 0.087, 0.996, 27.627, 185.251)" fill="url(#linear-gradient)"/>
+    <path id="Polygon_3" data-name="Polygon 3" d="M4.712,4.147a.684.684,0,0,1,1.35,0h0a.684.684,0,0,0,.565.565h0a.684.684,0,0,1,0,1.35h0a.684.684,0,0,0-.565.565h0a.684.684,0,0,1-1.35,0h0a.684.684,0,0,0-.565-.565h0a.684.684,0,0,1,0-1.35h0a.684.684,0,0,0,.565-.565Z" transform="matrix(0.996, -0.087, 0.087, 0.996, 35.981, 190.046)" fill="url(#linear-gradient)"/>
+  </g>
+</svg>

package/src/components/forms/ToggleContactSearch.vue

@@ -19,8 +19,6 @@
                     <div class="toggle-contact-search-arrow" :class="{'toggle-contact-search-arrow-active': showDropdown}"></div>
                 </div>
     
-                <div class="toggle-contact-search-divider"></div>
-    
                 <input :class="{'toggle-contact-search-input': true, 'toggle-contact-search-disabled': disabled}" v-model="inputVal" :disabled="disabled || loading" type="text" :placeholder="placeholder" @keyup.enter="onEnter">
     
                 <div v-if="loading" class="toggle-contact-search-loading-container">

package/src/components/metrics/ToggleMetricSingleMetric.vue

@@ -2,7 +2,7 @@
     <div>
         <h3 :class="['toggle-metric metric-label', {'metric-label-atmosphere': atmosphere}]">{{label}}</h3>
         <div class="single-metric-icon" v-if="metricPending && label.length == 0"></div>
-        <h1 :class="['toggle-metric metric-value', { 'metric-value-atmosphere': atmosphere }]" v-else>{{metricValue}}
+        <h1 :class="['toggle-metric metric-value', { 'metric-value-atmosphere': atmosphere }, { 'metric-value-small': small}]" v-else>{{metricValue}}
             <span v-if="score && value.maxScore" class="toggle-metric-score-rating">/{{value.maxScore}}</span>
             <span v-if="atmosphere && live == true" class="toggle-metric-live-icon"></span>
         </h1>
@@ -85,6 +85,13 @@ export default {
                 return ['default', 'atmosphere'].indexOf(value) !== -1
             }
         },
+        metricSize: {
+            type: String,
+            default: "default",
+            validator: function (value) {
+                return ['default', 'small'].indexOf(value) !== -1
+            }
+        },
         /**
          * Show live lightening bolt
          */
@@ -120,6 +127,9 @@ export default {
         },
         atmosphere() {
             return this.metricStyle === 'atmosphere';
+        },
+        small() {
+            return this.metricSize === 'small';
         }
     }
 }

package/src/components/metrics/ToggleMetricSparkLine.vue

@@ -6,7 +6,7 @@
             {{trendImpactLabel}}
         </ToggleBadge>
 		
-        <ToggleMetricSingleMetric :value="singleMetricVal" :label="label" :type="type" :currencyCode="currencyCode" :currencyLocale="currencyLocale" :currencyDenomination="currencyDenomination"/>
+        <ToggleMetricSingleMetric :value="singleMetricVal" :label="label" :type="type" :currencyCode="currencyCode" :currencyLocale="currencyLocale" :currencyDenomination="currencyDenomination" :metricStyle="metricStyle" :metricSize="metricStyle == 'atmosphere' ? 'small' : 'default'"/>
         
         <apexchart type="line" :height="height" :width="width" :options="chartOptions" :series="sparkLineVal" ref="sparkLineRef">
         </apexchart>
@@ -116,6 +116,13 @@ export default {
         showTrendForAllZeros: {
           type: Boolean,
           default: false
+        },
+        metricStyle: {
+            type: String,
+            default: "default",
+            validator: function (value) {
+                return ['default', 'atmosphere'].indexOf(value) !== -1
+            }
         }
     },
 
@@ -171,10 +178,17 @@ export default {
         * @return String
         */
         trendImpactClass() {
-           return this.getTrendImpact() === 1  ? 'confirm'
+            if (this.metricStyle === 'atmosphere'){
+                return this.getTrendImpact() === 1  ? 'atmosphere confirm'
+                : this.getTrendImpact() === -1 ? 'atmosphere abort'
+                : this.getTrendImpact() === 0  ? 'atmosphere warning' 
+                : 'atmosphere empty';
+            } else {
+                return this.getTrendImpact() === 1  ? 'confirm'
                 : this.getTrendImpact() === -1 ? 'abort'
                 : this.getTrendImpact() === 0  ? 'warning' 
                 : 'empty';
+            }
         },
         /**
         * Defines the badge title from the trending impact

package/src/components/tooltips/ToggleTooltip.vue

@@ -0,0 +1,6 @@
+<template>
+    <div class="toggle-tooltip">
+        <div class="toggle-tooltip-i">i</div>
+        <span class="toggle-tooltip-text"><slot></slot></span>
+    </div>
+</template>

package/src/index.js

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

package/src/sass/includes/_as_badges.scss

@@ -42,10 +42,34 @@
     &.atmosphere {
         background-color: #E4EDF2;
         color: #354B64;
-        font-size: 14px;
+        font-size: 12px;
         font-weight: 400;
         padding: 5px 11px;
         border-radius: 5px;
+
+        &.confirm {
+            background-color: #DFEED4;
+            color: #71BE37;
+        }
+        &.abort {
+            background-color: #FDE9E9;
+            color: #D8000C;
+        }
+        &.warning {
+            background-color: #F7EBD4;
+            color: #E6A831;
+        }
+        &.inactive {
+            color: rgba(53, 75, 100, .5)
+        }
+        &.empty {
+            background-color: #E4EDF2;
+            color: #354B64;
+        }
+        &.neutral {
+            background-color: #E4EDF2;
+            color: #38ABFF;
+        }
     }
 }
 

package/src/sass/includes/_as_inputs.scss

@@ -970,7 +970,7 @@ $iconWidth:20px;
     height: 40px;
     background-color: $toggle-white;
     border-radius: 8px;
-    min-width: 500px;
+    max-width: 425px;
 }
 
 .toggle-contact-search-input-container-active {
@@ -984,7 +984,7 @@ $iconWidth:20px;
 }
 
 .toggle-contact-search-dropdown-container {
-    min-width: 550px;
+    width: 425px;
     background-color: $toggle-white;
     border-radius: 0 0 8px 8px;
     overflow: hidden;
@@ -997,14 +997,19 @@ $iconWidth:20px;
     border: 0;
     border-radius: 0px;
     height: 30px;
-    margin: 4px 5px 0px 14px;
+    margin: 4px 5px 0px 0px;
+    padding-left: 0;
     color: #3A4A62;
     font-family: $toggle-font-family;
     font-weight: 700;
-    font-size: 16px;
+    font-size: 14px;
     background-color: #FFFFFF;
 }
 
+.toggle-contact-search-input:focus{
+    outline: none;
+}
+
 .toggle-contact-search-input::placeholder {
     color: #C5CED8;
     opacity: 1;
@@ -1033,10 +1038,10 @@ $iconWidth:20px;
 .toggle-contact-search-icon {
     max-width: 20px;
     max-height: 20px;
-    margin: 10px 16px 0 0;
+    margin: 12px 8px 0 0;
     transition: transform .2s ease-in-out;
-    width: 25px;
-    height: 25px;
+    width: 18px;
+    height: 18px;
     background-repeat: no-repeat;
     background-size: contain;
 }
@@ -1057,7 +1062,7 @@ $iconWidth:20px;
 
 .toggle-contact-search-icon-arrow-container {
     display: flex;
-    width: 100px;
+    width: 70px;
     min-width: 60px;
     flex-direction: row;
     justify-content: center;
@@ -1071,9 +1076,9 @@ $iconWidth:20px;
 
 .toggle-contact-search-magnifying-glass-icon {
     cursor: pointer;
-    margin: 10px 15px 0 3px;
-    width: 25px;
-    height: 25px;
+    margin: 13px 15px 0 3px;
+    width: 21px;
+    height: 21px;
     background-image: url('../assets/icons/magnifying-glass-icon.svg');
     background-repeat: no-repeat;
     background-size: contain;
@@ -1103,14 +1108,8 @@ $iconWidth:20px;
     transform: rotate(-3.1416rad) translateY(5px);
 }
 
-.toggle-contact-search-divider {
-    height: 28px;
-    margin: 7px 0 0 0;
-    border-right: 2px solid #D9D9D9;
-}
-
 .toggle-contact-search-dropdown-item {
-    margin: 5px 5px 5px 10px;
+    margin: 5px 5px 5px 7px;
     border-radius: 8px;
     cursor: pointer;
     font-size: 16px;
@@ -1145,12 +1144,10 @@ $iconWidth:20px;
 }
 
 .toggle-contact-search-icon-dropdown {
-    width: 25px;
-    height: 25px;
+    width: 18px;
+    height: 18px;
     background-repeat: no-repeat;
     background-size: contain;
-    max-width: 20px;
-    max-height: 20px;
     margin: 2px 14px 0 0;
     transition: transform .2s ease-in-out;
 }

package/src/sass/includes/_as_metrics.scss

@@ -20,13 +20,17 @@
     &.metric-label-atmosphere {
         color: #354B64;
         font-weight: 400;
-        font-size: 18px;
+        font-size: 14px;
     }
 
     &.metric-value-atmosphere {
         font-weight: 800;
         color: #00346F;
     }
+
+    &.metric-value-small {
+        font-size: 30px;
+    }
 }
 
 

package/src/sass/includes/_as_navs.scss

@@ -273,12 +273,11 @@
     .toggle-multi-tier-sidenav-item {
       list-style: none;
       font-family: $toggle-font-family;
-      font-size: 1rem;
-      font-weight: bold !important;
+      font-size: .9rem;
       padding-bottom: 0.25rem;
 
       a, span{
-        font-weight: bold !important;
+        font-weight: 400 !important;
       }
 
       &.active {
@@ -522,7 +521,19 @@
                   animation: tilt-shake 0.4s;
                   background-image: url("../assets/icons/airship-feedback-hover.svg");
                 }
+        &.airship-flight-assist-icon a::before,
+        &.airship-flight-assist-icon span::before {
+          background-image: url("../assets/icons/airship-flight-assist.svg");
+          width: 1.2rem;
+          height: 1.2rem;
+          padding-left: 0.3rem;
+        }
 
+                &.airship-flight-assist-icon a:hover::before,
+                &.airship-flight-assist-icon span:hover::before {
+                  animation: tilt-shake 0.4s;
+                  background-image: url("../assets/icons/airship-flight-assist.svg");
+                }
       }
     }
 
@@ -550,8 +561,7 @@
     li {
       a, span {
         padding-left: .8rem;
-        font-size: $toggle-font-size-regular;
-        font-weight: bold;
+        font-size: 0.9rem;
       }
     }
     
@@ -562,7 +572,7 @@
       
       li {
         a, span {
-          font-size: 0.8rem;
+          font-size: 0.75rem;
           font-weight: normal;
         }
       }

package/src/sass/includes/_as_tooltips.scss

@@ -0,0 +1,42 @@
+.toggle-tooltip {
+    position: relative;
+    display: inline-block;
+    height: 17px;
+    width: 17px;
+    background-color: #768CA2;
+    border-radius: 50%;
+    color: #FFFFFF;
+    cursor: pointer;
+    text-align: center;
+    font-family: Palatino;
+}
+
+.toggle-tooltip-i {
+    margin: 2px 0 0 0;
+    font-size: 13px;
+}
+
+.toggle-tooltip-text {
+    @include toggle-global-font-config;
+}
+  
+.toggle-tooltip .toggle-tooltip-text {
+    visibility: hidden;
+    width: 160px;
+    background-color: #000;
+    color: #fff;
+    text-align: center;
+    padding: 8px 12px;
+    border-radius: 6px;
+    position: absolute;
+    z-index: 1;
+}
+
+.toggle-tooltip:hover .toggle-tooltip-text {
+    visibility: visible;
+}
+
+.toggle-tooltip .toggle-tooltip-text {
+    top: -5px;
+    left: 105%;
+}

package/src/sass/main.scss

@@ -23,3 +23,4 @@
 @import "./includes/_as_boosters.scss";
 @import "./includes/_as_cards.scss";
 @import "./includes/_as_carousels.scss";
+@import "./includes/_as_tooltips.scss";