toggle-components-library 1.39.4-beta.3 → 1.39.6-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "toggle-components-library",
-    "version": "1.39.4-beta.3",
+    "version": "1.39.6-beta.0",
     "private": false,
     "scripts": {
         "serve": "vue-cli-service serve",
@@ -29,11 +29,11 @@
         "countries-list": "^2.6.1",
         "date-fns": "^1.30.1",
         "storybook-vue-router": "^1.0.7",
-        "swiper": "^11.2.7",
+        "swiper": "^10.3.0",
         "vue": "^2.7.10",
         "vue-airbnb-style-datepicker": "^2.7.1",
         "vue-apexcharts": "^1.6.2",
-        "vue-awesome-swiper": "github:airshipteam/vue-awesome-swiper",
+        "vue-awesome-swiper": "^4.1.1",
         "vue-color": "^2.7.1",
         "vue-moment": "^4.1.0",
         "vue-multiselect": "^2.0.8",

package/src/components/badges/ToggleLogoBadge.vue

@@ -0,0 +1,53 @@
+<template>
+    <div id="badge-container" :class="'toggle-logo-badge-' + size">
+        <img
+          :src="logo.src"
+          :alt="logo.alt"
+          class="toggle-logo-badge-logo"
+        >
+    </div>
+
+</template>
+    
+    <script>
+
+    export default {
+      name: 'ToggleLogoBadge',
+      props: {
+        logo: {
+          type: Object,
+          required: true,
+        },
+        colour: {
+          type: String,
+          required: true
+        },
+        size: {
+          type: String,
+          required: true,
+          validator: function(value) {
+            return ["small", "medium", "large"].indexOf(value) !== -1;
+          }
+        }
+      },
+    };
+    </script>
+    
+    <style scoped>
+      #badge-container {
+        background-color: v-bind('colour');
+      }
+
+      #small {
+
+      }
+
+      #medium {
+        
+      }
+
+      #large {
+        
+      }
+    
+    </style>

package/src/components/forms/ToggleInputMultiSelect.vue

@@ -7,7 +7,6 @@
 
     <div class="input-holder">
       <multiselect v-model="inputVal" :options="options" :multiple="multiple" :close-on-select="true" :clear-on-select="false" :preserve-search="true" :placeholder="placeholder" label="label" track-by="value" :preselect-first="false">
-        <template v-slot:afterList><slot name="afterList"></slot></template>
       </multiselect>
     </div>
 

package/src/components/forms/ToggleInputSelect.vue

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

package/src/index.js

@@ -44,6 +44,7 @@ import ToggleTableColumn from './components/tables/ToggleTableColumn.vue';
 import ToggleBadge from './components/badges/ToggleBadge.vue';
 import ToggleCalculateBadge from './components/badges/ToggleCalculateBadge.vue';
 import TogglePodiumBadge from './components/badges/TogglePodiumBadge.vue';
+import ToggleLogoBadge from './components/badges/ToggleLogoBadge.vue';
 
 import ToggleBreadCrumb from './components/breadcrumb/ToggleBreadCrumb.vue';
 import ToggleSideNavItem from './components/navs/sidenav/ToggleSideNavItem.vue';
@@ -104,6 +105,7 @@ const Components = {
     ToggleBadge,
     ToggleCalculateBadge,
     TogglePodiumBadge,
+    ToggleLogoBadge,
     ToggleTableColumn,
     ToggleInputText,
     ToggleInputEditableText,

package/src/sass/includes/_as_badges.scss

@@ -228,4 +228,71 @@
         width: 22px;
         margin-right: 15px;
     }
+}
+
+.toggle-logo-badge-small {
+    border: 0;
+    font-family: $toggle-font-family;
+    width: 6rem;
+    font-weight: bold;
+    display: grid;
+    padding: 0.3rem;
+    border-radius: 0.6rem;
+    align-items: center;
+    justify-content: center;
+}
+
+.toggle-logo-badge-medium {
+    border: 0;
+    font-family: $toggle-font-family;
+    width: 8rem;
+    font-weight: bold;
+    display: grid;
+    padding: 0.3rem;
+    border-radius: 0.6rem;
+    align-items: center;
+    justify-content: center;
+}
+
+.toggle-logo-badge-large {
+    border: 0;
+    font-family: $toggle-font-family;
+    width: 10rem;
+    height: 2rem;
+    font-weight: bold;
+    display: grid;
+    padding: 0.3rem;
+    border-radius: 0.6rem;
+    align-items: center;
+    justify-content: center;
+}
+
+.toggle-logo-badge-small > img {
+    object-fit: contain;
+    width: stretch;
+    max-width: 100%;
+    box-sizing: border-box;
+    height: 1.1rem;
+    padding: 2px 4px;
+    display: block;
+}
+
+.toggle-logo-badge-medium > img {
+    object-fit: contain;
+    width: stretch;
+    max-width: 100%;
+    box-sizing: border-box;
+    height: 1.1rem;
+    padding: 2px 4px;
+    display: block;
+}
+
+.toggle-logo-badge-large > img {
+    object-fit: contain;
+    width: stretch;
+    max-width: 100%;
+    box-sizing: border-box;
+    height: 1.1rem;
+    padding: 2px 4px;
+    display: block;
 }

package/src/sass/includes/_as_inputs.scss

@@ -9,6 +9,7 @@
 .toggle-input-select,
 .toggle-contact-search-container{
     @include toggle-global-font-config;
+    max-width: 425px
 }
 
 .toggle-input-counter{
@@ -259,18 +260,6 @@
        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;
-         }
-    }
 }
 
 
@@ -286,10 +275,6 @@
     &:focus {
         outline: none;
     }
-    &.streamline {
-        font-size: 1rem;
-        padding: 0.3rem 2rem 0.3rem 1rem;
-    }
 }
 
 // For multi tier side nav
@@ -986,10 +971,6 @@ $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,16 +531,6 @@
                   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");
-                }
       }
     }
 

package/dist/img/airship-rewards-icon-hover.6d083805.svg

@@ -1,3 +0,0 @@
-<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/dist/img/airship-rewards-icon.bdbad20b.svg

@@ -1,3 +0,0 @@
-<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/assets/icons/airship-rewards-icon-hover.svg

@@ -1,3 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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>