toggle-components-library 1.39.4-beta.2 → 1.39.5-beta.1

package/package.json

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

package/src/assets/icons/airship-rewards-icon-hover.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15.895" height="13.627" viewBox="0 0 15.895 13.627">
+  <path id="Intersection_5" data-name="Intersection 5" d="M-58.683-17.712l5.19,4.684a1.188,1.188,0,0,0,.8.3,1.188,1.188,0,0,0,.8-.3l5.19-4.684a4.09,4.09,0,0,0,1.367-3.04v-.161a4.01,4.01,0,0,0-3.429-3.915,4.2,4.2,0,0,0-3.579,1.108l-.345.333-.345-.333a4.2,4.2,0,0,0-3.579-1.108,4.01,4.01,0,0,0-3.429,3.915v.161A4.09,4.09,0,0,0-58.683-17.712Z" transform="matrix(0.995, -0.105, 0.105, 0.995, 62.322, 20.006)" fill="#477ef6"/>
+</svg>

package/src/assets/icons/airship-rewards-icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15.895" height="13.627" viewBox="0 0 15.895 13.627">
+  <path id="Intersection_5" data-name="Intersection 5" d="M-58.683-17.712l5.19,4.684a1.188,1.188,0,0,0,.8.3,1.188,1.188,0,0,0,.8-.3l5.19-4.684a4.09,4.09,0,0,0,1.367-3.04v-.161a4.01,4.01,0,0,0-3.429-3.915,4.2,4.2,0,0,0-3.579,1.108l-.345.333-.345-.333a4.2,4.2,0,0,0-3.579-1.108,4.01,4.01,0,0,0-3.429,3.915v.161A4.09,4.09,0,0,0-58.683-17.712Z" transform="matrix(0.995, -0.105, 0.105, 0.995, 62.322, 20.006)" fill="#354b64"/>
+</svg>

package/src/components/forms/ToggleInputSelect.vue

@@ -1,14 +1,14 @@
 <template>
 
-<div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid, 'toggle-input-is-disabled':disabled}"  v-on:click="focusClosestInput">
+<div :class="{'toggle-input-container' : size != 'streamline', 'toggle-input-is-invalid':isInvalid, 'toggle-input-is-disabled':disabled}"  v-on:click="focusClosestInput">
     <label 
-        v-if="label"
+        v-if="label && size != 'streamline'"
         :for="name ? name : 'ToggleInputSelect' " 
         class="toggle-input-label"
     > {{ label }} 
     </label>
 
-    <div class="toggle-input-select-container">
+    <div :class="['toggle-input-select-container', size]">
         <select 
             :name="name ? name : 'ToggleInputSelect' " 
             :class="[ 'toggle-input-select', size]"
@@ -18,7 +18,7 @@
             :disabled="disabled"
             :style="`${fontFamily ? 'font-family: ' + fontFamily : ''}`"
             >
-                <option value="">Select an option</option>
+                <option value="">{{size == 'streamline' ? label : 'Select an option' }}</option>
                 <option :value="option.value" v-for="(option, key) in options" v-bind:key="key">{{option.label}}</option>
         </select>
     </div>
@@ -60,7 +60,7 @@ export default {
         size: {
             type: String,
             validator: function (value) {
-                return ['extra-small', 'small', 'medium', 'large', 'full'].indexOf(value) !== -1
+                return ['extra-small', 'small', 'medium', 'large', 'full', 'streamline'].indexOf(value) !== -1
             }
         },
         required: {

package/src/sass/includes/_as_inputs.scss

@@ -9,7 +9,6 @@
 .toggle-input-select,
 .toggle-contact-search-container{
     @include toggle-global-font-config;
-    max-width: 425px
 }
 
 .toggle-input-counter{
@@ -260,6 +259,18 @@
        top: 0.7rem;
        pointer-events: none;
     }
+    &.streamline {
+        &:after{
+            content: '';
+            width: 1.2rem !important;
+            height: 1.2rem !important;
+            background: transparent url("../assets/icons/arrow_down.svg") no-repeat 100% 50%;
+            position: absolute;
+            right: 1rem;
+            top: 0.7rem;
+            pointer-events: none;
+         }
+    }
 }
 
 
@@ -275,6 +286,10 @@
     &:focus {
         outline: none;
     }
+    &.streamline {
+        font-size: 1rem;
+        padding: 0.3rem 2rem 0.3rem 1rem;
+    }
 }
 
 // For multi tier side nav
@@ -971,6 +986,10 @@ $iconWidth:20px;
 // Contact Search Styles
 //
 
+.toggle-contact-search-container {
+    max-width: 425px;
+}
+
 .toggle-contact-search-input-container {
     width: 100%;
     height: 40px;

package/src/sass/includes/_as_navs.scss

@@ -531,6 +531,16 @@
                   animation: tilt-shake 0.4s;
                   background-image: url("../assets/icons/airship-flight-assist-icon.svg");
                 }
+        &.airship-rewards-icon a::before,
+        &.airship-rewards-icon span::before {
+          background-image: url("../assets/icons/airship-rewards-icon.svg");
+        }
+
+                &.airship-rewards-icon a:hover::before,
+                &.airship-rewards-icon span:hover::before {
+                  animation: tilt-shake 0.4s;
+                  background-image: url("../assets/icons/airship-rewards-icon-hover.svg");
+                }
       }
     }