toggle-components-library 1.36.4-beta.7 → 1.36.4-beta.9

package/package.json

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

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

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 121.96 118.65"><defs><style>.cls-1{fill:url(#linear-gradient);}.cls-1,.cls-2,.cls-3{stroke-width:0px;}.cls-2{fill:url(#linear-gradient-2);}.cls-3{fill:url(#linear-gradient-3);}</style><linearGradient id="linear-gradient" x1="47.1" y1="77.62" x2="121.2" y2="3.53" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#c700d4"/><stop offset=".75" stop-color="#5f1c70"/></linearGradient><linearGradient id="linear-gradient-2" x1="17.89" y1="65.91" x2="17.89" y2="30.13" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#9700bf"/><stop offset=".22" stop-color="#9401ba"/><stop offset=".45" stop-color="#8b05ae"/><stop offset=".68" stop-color="#7c0d9a"/><stop offset=".91" stop-color="#68177d"/><stop offset="1" stop-color="#5f1c70"/></linearGradient><linearGradient id="linear-gradient-3" x1="72.24" y1="113.5" x2="88.43" y2="97.32" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#9200b9"/><stop offset=".24" stop-color="#9b00c0"/><stop offset="1" stop-color="#b500d4"/></linearGradient></defs><g id="Layer_5"><path class="cls-1" d="M121.53,9.8c.64-1.77.57-3.71-.19-5.43-1.63-3.7-5.95-5.38-9.65-3.75l-33.33,24.14c-1.72.76-3.66.83-5.43.19l-18.83-6.76c-1.77-.64-3.71-.57-5.43.19-3.7,1.63-5.38,5.95-3.75,9.65l14.71,14.28c1.66,1.79.83,3.67.19,5.43l-13.43,22.89c-.79,1.91-.71,4.08.21,5.93,1.76,3.56,6.08,5.01,9.63,3.25l22.78-15.72c1.72-.76,3.61-1.96,5.43-.19l14.4,14.43c1.77.63,3.71.56,5.43-.19,3.7-1.63,5.38-5.95,3.75-9.65l-8.08-18.35c-.76-1.72-.83-3.66-.19-5.43l21.78-34.91Z"/><path class="cls-2" d="M32.03,42.74l-1.95-1.09c-1.64-.92-2.87-2.43-3.42-4.23l-.66-2.13c-.56-1.79-1.78-3.31-3.42-4.23-3.53-1.98-7.99-.72-9.97,2.81l-1.09,1.94c-.92,1.64-2.43,2.87-4.23,3.42l-2.13.66c-1.79.55-3.31,1.78-4.23,3.42-1.97,3.53-.71,7.99,2.81,9.97l1.95,1.09c1.64.92,2.87,2.43,3.42,4.23l.66,2.13c.56,1.79,1.78,3.31,3.42,4.23,3.53,1.98,7.99.72,9.97-2.81l1.09-1.95c.92-1.64,2.43-2.86,4.23-3.42l2.13-.66c1.8-.55,3.31-1.78,4.23-3.42,1.98-3.53.71-7.99-2.81-9.97Z"/><path class="cls-3" d="M89.89,101.45c-2.08-.57-3.56-2.4-3.68-4.55-.12-2.15-1.6-3.98-3.68-4.54-2.67-.73-5.43.84-6.16,3.51-.57,2.08-2.4,3.56-4.55,3.68s-3.98,1.6-4.55,3.68c-.73,2.67.84,5.43,3.51,6.16,2.08.57,3.56,2.4,3.68,4.55.13,2.14,1.61,3.98,3.68,4.54,2.67.73,5.42-.84,6.16-3.51.57-2.08,2.4-3.56,4.55-3.68,2.15-.12,3.98-1.6,4.55-3.68.73-2.67-.84-5.42-3.51-6.16Z"/></g></svg>

package/src/components/metrics/ToggleMetricBarChart.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h3 class="toggle-metric metric-label">{{label}}</h3>
+    <h3 :class="['toggle-metric metric-label', {'metric-label-atmosphere': atmosphere}]">{{label}}</h3>
     {{checkWindowSize}}
     <apexchart type="bar" :height="height" :options="chartOptions" :series="values"></apexchart>
   </div>
@@ -48,6 +48,16 @@ export default {
     categories: {
       type: [Array],
       required: true
+    },
+    /*
+    *  Component's style
+    */
+    componentStyle: {
+      type: String,
+      default: "default",
+      validator: function(value) {
+        return ['default', 'atmosphere'].indexOf(value) !== -1
+      }
     }
   },
   
@@ -129,6 +139,9 @@ export default {
           
         }
       }
+    },
+    atmosphere() {
+      return this.componentStyle === 'atmosphere'
     }
   }
   

package/src/components/metrics/ToggleMetricPieChart.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h3 class="toggle-metric metric-label">{{label}}</h3>
+    <h3 :class="['toggle-metric metric-label', {'metric-label-atmosphere': atmosphere}]">{{label}}</h3>
     <apexchart type="pie"  :height="height" :options="chartOptions" :series="values"></apexchart>
   </div>
 
@@ -47,6 +47,16 @@ export default {
     labels: {
       type: Array,
       required: true
+    },
+    /*
+    *  Component's style
+    */
+    componentStyle: {
+      type: String,
+      default: "default",
+      validator: function(value) {
+        return ['default', 'atmosphere'].indexOf(value) !== -1
+      }
     }
   },
   computed: {
@@ -92,6 +102,9 @@ export default {
           enabled: false
         }
       }
+    },
+    atmosphere() {
+      return this.componentStyle === 'atmosphere'
     }
   }
   

package/src/sass/includes/_as_badges.scss

@@ -42,7 +42,7 @@
     &.atmosphere {
         background-color: #E4EDF2;
         color: #354B64;
-        font-size: 14px;
+        font-size: 12px;
         font-weight: 400;
         padding: 5px 11px;
         border-radius: 5px;

package/src/sass/includes/_as_inputs.scss

@@ -997,12 +997,12 @@ $iconWidth:20px;
     border: 0;
     border-radius: 0px;
     height: 30px;
-    margin: 4px 5px 0px 0px;
+    margin: 6px 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;
 }
 

package/src/sass/includes/_as_metrics.scss

@@ -20,7 +20,7 @@
     &.metric-label-atmosphere {
         color: #354B64;
         font-weight: 400;
-        font-size: 18px;
+        font-size: 14px;
     }
 
     &.metric-value-atmosphere {
@@ -29,7 +29,7 @@
     }
 
     &.metric-value-small {
-        font-size: 215%;
+        font-size: 30px;
     }
 }
 

package/src/sass/includes/_as_navs.scss

@@ -141,7 +141,7 @@
 
   .toggle-multi-tier-sidenav-logo {
     max-width: 7rem;
-    margin: 1rem 0 2rem 0.6rem;
+    margin: 2rem 0 2rem 0.6rem;
   }
 
   .toggle-multi-tier-sidenav-user-icon {
@@ -521,7 +521,16 @@
                   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-icon.svg");
+        }
 
+                &.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-icon.svg");
+                }
       }
     }
 

package/src/sass/includes/_as_tooltips.scss

@@ -9,6 +9,7 @@
     cursor: pointer;
     text-align: center;
     font-family: Palatino;
+    line-height: 1rem;
 }
 
 .toggle-tooltip-i {