toggle-components-library 1.36.4-beta.0 → 1.36.4-beta.2

package/package.json

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

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

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

@@ -1,10 +1,10 @@
 <template>
-    <div class="toggle-button-container toggle-button-container--login"
-        :class="{'toggle-button-container--fluid': btnFluid}">
+    <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)">
 
-        <button :type="type" :class="buttonClasses" @click="click" :disabled="(loading || disabled)">
-
-            <div :class="loaderClasses" v-if="loading"></div>
+            <div :class="['toggle-login-button-loader', { 'toggle-login-button-loader--airship': platform == 'airship' }]" v-if="loading"></div>
 
             <div class="toggle-login-button-text" v-else>
                 {{ buttonText }}
@@ -42,13 +42,13 @@ export default {
             default: false
         },
         /**
-        * Is the button being used on toggle or airship? use `toggle` or `airship` or for Airships new rebranding `airship-atmosphere`
+        * Is the button being used on toggle or airship? use `toggle` or `airship`
         */
         platform: {
             type: String,
             default: "toggle",
             validator: function (value) {
-                return ['toggle', 'airship', 'airship-atmosphere'].indexOf(value) !== -1;
+                return ['toggle', 'airship'].indexOf(value) !== -1;
             },
         },
         /**
@@ -77,33 +77,6 @@ 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,
-                'toggle-login-button--airship-atmosphere': this.platform == 'airship-atmosphere',
-                'toggle-login-button--airship-atmosphere-loading': this.platform == 'airship-atmosphere' && 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',
-                'toggle-login-button-loader--airship-atmosphere': this.platform == 'airship-atmosphere'
-            }
-        }
     }
 }
 </script>

package/src/components/metrics/ToggleMetricSingleMetric.vue

@@ -1,9 +1,10 @@
 <template>
     <div>
-        <h3 class="toggle-metric metric-label">{{label}}</h3>
+        <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" v-else>{{metricValue}}
+        <h1 :class="['toggle-metric metric-value', { 'metric-value-atmosphere': atmosphere }]" 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>
@@ -73,6 +74,23 @@ 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
+            }
+        },
+        /**
+         * Show live lightening bolt
+         */
+        live: {
+            type: Boolean,
+            default: false
         }
     },
     computed: {
@@ -99,6 +117,9 @@ export default {
         },
         score() {
             return this.type === 'score';
+        },
+        atmosphere() {
+            return this.metricStyle === 'atmosphere';
         }
     }
 }

package/src/sass/includes/_as_badges.scss

@@ -37,6 +37,16 @@
         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;
+    }
 }
 
 .toggle-podium-badge {

package/src/sass/includes/_as_buttons.scss

@@ -304,27 +304,12 @@
             background-color: #ed9598;
         }
     }
-    &--airship-atmosphere {
-        background: transparent linear-gradient(112deg, #BD38DF 0%, #5F1C70 100%) 0% 0% no-repeat padding-box;
-
-        &:hover:not(:disabled) {
-            background-color: #5F1C70;
-            box-shadow: 0 10px 30px -10px rgba(190, 58, 223, 0.5);
-        }
-
-        &: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;
     }
-    &--airship-atmosphere-loading{
-        background: transparent linear-gradient(112deg, #BD38DF 0%, #5F1C70 100%) 0% 0% no-repeat padding-box !important;
-    }
 }
 
 
@@ -343,12 +328,6 @@
     top: 50%;
     margin-top: -0.5rem;
     box-sizing: content-box;
-    &--airship {
-        border-top-color: #FF7175;
-    }
-    &--airship-atmosphere {
-        border-top-color: transparent;
-    }
 }
 
 .toggle-metrics-button {

package/src/sass/includes/_as_metrics.scss

@@ -17,6 +17,16 @@
         color: $toggle-metric-label-black;
     }
 
+    &.metric-label-atmosphere {
+        color: #354B64;
+        font-weight: 400;
+        font-size: 18px;
+    }
+
+    &.metric-value-atmosphere {
+        font-weight: 800;
+        color: #00346F;
+    }
 }
 
 
@@ -139,4 +149,15 @@
 .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;
 }