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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "toggle-components-library",
-    "version": "1.36.4-beta.4",
+    "version": "1.36.4-beta.6",
     "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}">
-        
-        <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/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

@@ -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_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;
 }

package/src/sass/includes/_as_variables.scss

@@ -62,9 +62,9 @@ $booster-test-colour-light:#02add3;
 $booster-test-colour-med:#0098ac;
 $booster-test-colour-dark:#008ba4;
 
-$booster-feedback-colour-light:#FFCB27;
-$booster-feedback-colour-med:#FFCB27;
-$booster-feedback-colour-dark:#FFCB27;
+$booster-feedback-colour-light:#ffffff;
+$booster-feedback-colour-med:#dd3c3c;
+$booster-feedback-colour-dark:#000000;
 
 /* metrics */
 $toggle-metric-label-blue: #477EF6;