toggle-components-library 1.36.3-beta.3 → 1.36.4-beta.0

package/package.json

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

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 }}
@@ -42,13 +42,13 @@ export default {
             default: false
         },
         /**
-        * Is the button being used on toggle or airship? use `toggle` or `airship`
+        * Is the button being used on toggle or airship? use `toggle` or `airship` or for Airships new rebranding `airship-atmosphere`
         */
         platform: {
             type: String,
             default: "toggle",
             validator: function (value) {
-                return ['toggle', 'airship'].indexOf(value) !== -1;
+                return ['toggle', 'airship', 'airship-atmosphere'].indexOf(value) !== -1;
             },
         },
         /**
@@ -77,6 +77,33 @@ 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/forms/ToggleDatePicker.vue

@@ -167,7 +167,7 @@ export default {
 
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .toggle-date-container {
   display: none;
   &.visible {

package/src/components/forms/ToggleInputCurrency.vue

@@ -3,8 +3,7 @@
 
 
 
-<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" :class="{'toggle-input-is-invalid':isInvalid }"  v-on:click="focusClosestInput">
     <label 
         v-if="label"
         :for="name ? name : 'InputText' " 
@@ -17,7 +16,6 @@
         :placeholder="placeholder ? placeholder : '' "
         :autocomplete="autocomplete ? 'on' : 'off' "
         :required="required"
-        :disabled="disabled"
         v-model="inputVal"
         @blur="isInputActive = false" 
         @focus="isInputActive = true" 
@@ -93,13 +91,8 @@ export default {
         currencyDenomination: {
             type: Number,
             default: 100
-        },
-        disabled: {
-            type: Boolean,
-            required: false,
-            default: false
-
-        },
+        }
+       
     },
 
     created : function(){

package/src/components/forms/ToggleInputNumber.vue

@@ -3,7 +3,7 @@
 
 
 
-<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" :class="{'toggle-input-is-invalid':isInvalid }"  v-on:click="focusClosestInput">
     <label 
         v-if="label"
         :for="name ? name : 'ToggleInputNumber' " 
@@ -20,7 +20,6 @@
         @blur="isInputActive = false" 
         @focus="isInputActive = true" 
         :pattern="pattern"
-        :disabled="disabled"
     />
     <label
         class="toggle-input-label-error" 
@@ -91,12 +90,7 @@ export default {
         pattern: {
             type:String,
             default:"\\d*"
-        },
-        disabled: {
-          type: Boolean,
-          required: false,
-          default: false
-        },
+        }
     },
 
     created : function(){

package/src/components/forms/ToggleInputPercentage.vue

@@ -1,6 +1,6 @@
 <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" :class="{'toggle-input-is-invalid':isInvalid }"  v-on:click="focusClosestInput">
 
     <label 
         v-if="label"
@@ -14,7 +14,6 @@
         :placeholder="placeholder ? placeholder : '' "
         :autocomplete="autocomplete ? 'on' : 'off' "
         :required="required"
-        :disabled="disabled"
         v-model="inputVal"
         @blur="isInputActive = false" 
         @focus="isInputActive = true" 
@@ -78,11 +77,6 @@ export default {
         allowFloat: {
             type: Boolean,
             default: false
-        },
-        disabled: {
-            type: Boolean,
-            required: false,
-            default: false
         }
     },
 

package/src/components/forms/ToggleInputText.vue

@@ -1,16 +1,16 @@
 <template>
 
 <div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid, 'toggle-input-is-disabled':disabled}"  v-on:click="focusClosestInput">
-    <label
+    <label 
         v-if="label"
-        :for="name ? name : 'InputText' "
+        :for="name ? name : 'InputText' " 
         class="toggle-input-label"
-    > {{ label }}
+    > {{ label }} 
     </label>
     <span class="toggle-input-counter" v-if="maxLength">{{messageLength(inputVal, maxLength)}}</span>
     <input
         :type="type"
-        :name="name ? name : 'ToggleInputText' "
+        :name="name ? name : 'ToggleInputText' " 
         :class="[ 'toggle-input', size]"
         :placeholder="placeholder ? placeholder : '' "
         :autocomplete="autocomplete ? 'on' : 'off' "
@@ -21,7 +21,7 @@
         :readonly="readonly"
     />
     <label
-        class="toggle-input-label-error"
+        class="toggle-input-label-error" 
         v-if="isInvalid"
         :for="name ? name : 'ToggleInputText' "
     >
@@ -103,6 +103,8 @@ export default {
         }
     },
 
+    created : function(){
+    },
     computed: {
         inputVal: {
             get: function (){

package/src/index.js

@@ -82,8 +82,6 @@ import ToggleMetricFunnelChart from "./components/metrics/ToggleMetricFunnelChar
 import ToggleThreeDots from "./components/threedots/ToggleThreeDots.vue";
 import ToggleThreeDotsButton from "./components/threedots/ToggleThreeDotsButton.vue";
 
-import ToggleStatusBar from "./components/statusbar/ToggleStatusBar.vue";
-
 import ToggleCarousel from "./components/carousel/ToggleCarousel.vue";
 import ToggleCarouselSlide from "./components/carousel/ToggleCarouselSlide.vue";
 
@@ -159,7 +157,6 @@ const Components = {
     ToggleBoosterBasicButton,
     ToggleBoosterModal,
     ToggleContactSearch,
-    ToggleStatusBar,
     ToggleCarousel,
     ToggleCarouselSlide,
     ToggleEmailCard,

package/src/sass/includes/_as_buttons.scss

@@ -304,12 +304,27 @@
             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;
+    }
 }
 
 
@@ -328,6 +343,12 @@
     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_inputs.scss

@@ -236,11 +236,6 @@
     opacity: 0.7 !important;
 }
 
-.calendar-icon-disabled {
-  cursor: default;
-  opacity: 0.5;
-}
-
 .toggle-input-select-container{
     position:relative;
     background-color: $toggle-dark-grey;

package/src/sass/includes/_as_table.scss

@@ -65,6 +65,7 @@ table.toggle-table {
 
     select {
       border: none;
+      background-color: #FFF;
       font-size: 11.5px;
       font-weight: bold;
       color: #575757;
@@ -73,6 +74,9 @@ table.toggle-table {
       -moz-appearance: none;
       text-indent: 1px;
       text-overflow: '';
+
+      background: url(/img/icons/arrow-down-blue-tiny.svg) center right no-repeat;
+      background-size: 15px;
       padding           : 0.5rem 0rem 0.5rem 1rem;
     }
   }

package/src/sass/main.scss

@@ -21,6 +21,5 @@
 @import "./includes/_as_metrics.scss";
 @import "./includes/_as_threedots.scss";
 @import "./includes/_as_boosters.scss";
-@import "./includes/_as_statusbar.scss";
 @import "./includes/_as_cards.scss";
 @import "./includes/_as_carousels.scss";