toggle-components-library 1.36.4-beta.3 → 1.36.4-beta.5

package/package.json

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

package/src/components/buttons/ToggleLoginButton.vue

@@ -1,10 +1,10 @@
 <template>
-    <div class="toggle-button-container toggle-button-container--login" :class="{'toggle-button-container--fluid': btnFluid}">
-        
-        <button :type="type" :class="['toggle-login-button', { 'toggle-login-button--airship': platform == 'airship' }, { 'toggle-login-button--loading': platform == 'toggle' && loading }, { 'toggle-login-button--airship-loading': platform == 'airship' && loading }]" @click="click" 
-            :disabled="(loading || disabled)">
+    <div class="toggle-button-container toggle-button-container--login"
+        :class="{'toggle-button-container--fluid': btnFluid}">
 
-            <div :class="['toggle-login-button-loader', { 'toggle-login-button-loader--airship': platform == 'airship' }]" v-if="loading"></div>
+        <button :type="type" :class="buttonClasses" @click="click" :disabled="(loading || disabled)">
+
+            <div :class="loaderClasses" v-if="loading"></div>
 
             <div class="toggle-login-button-text" v-else>
                 {{ buttonText }}
@@ -77,6 +77,30 @@ export default {
              */
             this.$emit('click');
         }
+    },
+    computed: {
+        /**
+         * The class to apply to the button
+         * @return {Object}
+         */
+        buttonClasses() {
+            return {
+                'toggle-login-button': true,
+                'toggle-login-button--airship': this.platform == 'airship',
+                'toggle-login-button--loading': this.platform == 'toggle' && this.loading,
+                'toggle-login-button--airship-loading': this.platform == 'airship' && this.loading
+            }
+        },
+        /**
+         * The class to apply to the loader
+         * @return {Object}
+         */
+        loaderClasses() {
+            return {
+                'toggle-login-button-loader': true,
+                'toggle-login-button-loader--airship': this.platform == 'airship',
+            }
+        }
     }
 }
 </script>

package/src/components/forms/ToggleContactSearch.vue

@@ -19,6 +19,8 @@
                     <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

@@ -1,10 +1,9 @@
 <template>
     <div>
-        <h3 :class="['toggle-metric metric-label', {'metric-label-atmosphere': atmosphere}]">{{label}}</h3>
+        <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', { 'metric-value-atmosphere': atmosphere }, { 'metric-value-small': small}]" v-else>{{metricValue}}
+        <h1 class="toggle-metric metric-value" 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>
     </div>
 </template>
@@ -74,30 +73,6 @@ export default {
         metricPending: {
             type: Boolean,
             default: false
-        },
-        /**
-         * Metric style (default or atmosphere release themed)
-         */
-        metricStyle: {
-            type: String,
-            default: "default",
-            validator: function (value) {
-                return ['default', 'atmosphere'].indexOf(value) !== -1
-            }
-        },
-        metricSize: {
-            type: String,
-            default: "default",
-            validator: function (value) {
-                return ['default', 'small'].indexOf(value) !== -1
-            }
-        },
-        /**
-         * Show live lightening bolt
-         */
-        live: {
-            type: Boolean,
-            default: false
         }
     },
     computed: {
@@ -124,12 +99,6 @@ export default {
         },
         score() {
             return this.type === 'score';
-        },
-        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" :metricStyle="metricStyle" :metricSize="metricStyle == 'atmosphere' ? 'small' : 'default'"/>
+        <ToggleMetricSingleMetric :value="singleMetricVal" :label="label" :type="type" :currencyCode="currencyCode" :currencyLocale="currencyLocale" :currencyDenomination="currencyDenomination"/>
         
         <apexchart type="line" :height="height" :width="width" :options="chartOptions" :series="sparkLineVal" ref="sparkLineRef">
         </apexchart>
@@ -116,13 +116,6 @@ export default {
         showTrendForAllZeros: {
           type: Boolean,
           default: false
-        },
-        metricStyle: {
-            type: String,
-            default: "default",
-            validator: function (value) {
-                return ['default', 'atmosphere'].indexOf(value) !== -1
-            }
         }
     },
 
@@ -178,17 +171,10 @@ export default {
         * @return String
         */
         trendImpactClass() {
-            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'
+           return this.getTrendImpact() === 1  ? 'confirm'
                 : this.getTrendImpact() === -1 ? 'abort'
                 : this.getTrendImpact() === 0  ? 'warning' 
                 : 'empty';
-            }
         },
         /**
         * Defines the badge title from the trending impact

package/src/index.js

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

package/src/sass/includes/_as_badges.scss

@@ -37,40 +37,6 @@
         border-radius: 50px;
         padding: 5px 11px;
     }
-
-    // Atmosphere release styling
-    &.atmosphere {
-        background-color: #E4EDF2;
-        color: #354B64;
-        font-size: 14px;
-        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;
-        }
-    }
 }
 
 .toggle-podium-badge {

package/src/sass/includes/_as_buttons.scss

@@ -294,21 +294,23 @@
         transform: translate(0, -3px);
         color: #fff;
     }
-    &--airship{
-        background-color: #FF7175;
+    &--airship {
+        background: transparent linear-gradient(112deg, #BD38DF 0%, #5F1C70 100%) 0% 0% no-repeat padding-box;
+
         &:hover:not(:disabled) {
-            background-color: #ff463f;
-            box-shadow: 0 10px 30px -10px rgba(254, 108, 102, 0.5);
+            background-color: #5F1C70;
+            box-shadow: 0 10px 30px -10px rgba(190, 58, 223, 0.5);
         }
-        &:disabled, &[disabled]{
-            background-color: #ed9598;
+
+        &:disabled, &[disabled] {
+            background: transparent linear-gradient(112deg, rgba(190, 58, 223, 0.6) 0%, rgba(94, 28, 110, 0.6) 100%) 0% 0% no-repeat padding-box;
         }
     }
     &--loading{
         background-color: #3180FF !important;
     }
     &--airship-loading{
-        background-color: #FF7175 !important;
+        background: transparent linear-gradient(112deg, #BD38DF 0%, #5F1C70 100%) 0% 0% no-repeat padding-box !important;
     }
 }
 
@@ -328,6 +330,9 @@
     top: 50%;
     margin-top: -0.5rem;
     box-sizing: content-box;
+    &--airship {
+        border-top-color: transparent;
+    }
 }
 
 .toggle-metrics-button {

package/src/sass/includes/_as_inputs.scss

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

@@ -17,20 +17,6 @@
         color: $toggle-metric-label-black;
     }
 
-    &.metric-label-atmosphere {
-        color: #354B64;
-        font-weight: 400;
-        font-size: 18px;
-    }
-
-    &.metric-value-atmosphere {
-        font-weight: 800;
-        color: #00346F;
-    }
-
-    &.metric-value-small {
-        font-size: 215%;
-    }
 }
 
 
@@ -153,15 +139,4 @@
 .toggle-metric-score-rating {
     font-size: 27px;
     margin-left: -8px;
-}
-
-.toggle-metric-live-icon {
-    display: inline-block;
-    vertical-align: top;
-    background-image: url('../assets/icons/bolt-solid.svg');
-    background-repeat: no-repeat;
-    background-size: contain;
-    height: 19px;
-    width: 19px;
-    margin: 17px 0 0 5px;
 }

package/src/sass/main.scss

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

package/dist/img/bolt-solid.445f9a14.svg

@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="6.922" height="12.381" viewBox="0 0 6.922 12.381">
-  <defs>
-    <linearGradient id="linear-gradient" x1="0.343" y1="-0.06" x2="0.923" y2="2.008" gradientUnits="objectBoundingBox">
-      <stop offset="0" stop-color="#c139e5"/>
-      <stop offset="1" stop-color="#611d73"/>
-    </linearGradient>
-  </defs>
-  <path id="bolt-solid" d="M37.679,1.07a.944.944,0,0,0-.191-.931.469.469,0,0,0-.719.044L32.156,5.6a.961.961,0,0,0-.16.854.616.616,0,0,0,.541.5h2.009L33.16,11.294a.944.944,0,0,0,.191.931.469.469,0,0,0,.719-.044l4.613-5.417a.961.961,0,0,0,.16-.854.612.612,0,0,0-.541-.5H36.293Z" transform="translate(-31.959 0.009)" fill="url(#linear-gradient)"/>
-</svg>

package/src/assets/icons/bolt-solid.svg

@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="6.922" height="12.381" viewBox="0 0 6.922 12.381">
-  <defs>
-    <linearGradient id="linear-gradient" x1="0.343" y1="-0.06" x2="0.923" y2="2.008" gradientUnits="objectBoundingBox">
-      <stop offset="0" stop-color="#c139e5"/>
-      <stop offset="1" stop-color="#611d73"/>
-    </linearGradient>
-  </defs>
-  <path id="bolt-solid" d="M37.679,1.07a.944.944,0,0,0-.191-.931.469.469,0,0,0-.719.044L32.156,5.6a.961.961,0,0,0-.16.854.616.616,0,0,0,.541.5h2.009L33.16,11.294a.944.944,0,0,0,.191.931.469.469,0,0,0,.719-.044l4.613-5.417a.961.961,0,0,0,.16-.854.612.612,0,0,0-.541-.5H36.293Z" transform="translate(-31.959 0.009)" fill="url(#linear-gradient)"/>
-</svg>

package/src/components/tooltips/ToggleTooltip.vue

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

package/src/sass/includes/_as_tooltips.scss

@@ -1,42 +0,0 @@
-.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%;
-}