toggle-components-library 1.36.8-beta.2 → 1.36.9-beta.0

package/package.json

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

package/src/components/badges/ToggleLogoBadge.vue

@@ -0,0 +1,34 @@
+<template>
+    <div id="badge-container" class="toggle-logo-badge">
+        <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
+        },
+      },
+    };
+    </script>
+    
+    <style scoped>
+      #badge-container {
+        background-color: v-bind('colour');
+      }
+    
+    </style>

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

@@ -43,6 +43,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';
@@ -82,8 +83,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";
 
@@ -103,6 +102,7 @@ const Components = {
     ToggleBadge,
     ToggleCalculateBadge,
     TogglePodiumBadge,
+    ToggleLogoBadge,
     ToggleTableColumn,
     ToggleInputText,
     ToggleInputEditableText,
@@ -161,7 +161,6 @@ const Components = {
     ToggleBoosterBasicButton,
     ToggleBoosterModal,
     ToggleContactSearch,
-    ToggleStatusBar,
     ToggleCarousel,
     ToggleCarouselSlide,
     ToggleEmailCard,

package/src/sass/includes/_as_badges.scss

@@ -228,4 +228,24 @@
         width: 22px;
         margin-right: 15px;
     }
+}
+
+.toggle-logo-badge {
+    border: 0;
+    font-family: $toggle-font-family;
+    width: fit-content;
+    font-weight: bold;
+    display: grid;
+    padding: 0.3rem;
+    border-radius: 0.6rem;
+    align-items: center;
+    justify-content: center;
+    background-color: $booster-fulfilment-colour-med;
+}
+
+.toggle-logo-badge-logo{
+    width: auto;
+    height: 1.1rem;
+    margin-left: 0.6rem;
+    margin-right: 0.9rem;
 }

package/src/sass/includes/_as_boosters.scss

@@ -29,10 +29,6 @@
         background-color: $booster-feedback-colour-med;
     }
 
-    &.bulkOrders{
-        background-color: $booster-bulk-order-colour-med;
-    }
-
     &.test{
         background-color: $booster-test-colour-light;
     }
@@ -87,10 +83,6 @@
         }
     }
 
-    &.bulkOrders{
-        background-color: rgba($booster-bulk-order-colour-light, 0.8);
-    }
-
     &.test{
         background-color: rgba($booster-test-colour-med, 0.8);
         &:hover{
@@ -140,10 +132,6 @@
         color: $booster-tickets-colour-med;
     }
 
-    &.bulkOrders{
-        color: $booster-bulk-order-colour-med;
-    }
-
     &.test{
         color: $booster-test-colour-light;
     }
@@ -194,10 +182,6 @@ margin:1rem
         background-color: $booster-feedback-colour-med;
     }
 
-    &.bulkOrders{
-        background-color: $booster-bulk-order-colour-med;
-    }
-
     &.test{
         background-color: $booster-test-colour-light;
     } 

package/src/sass/includes/_as_inputs.scss

@@ -237,11 +237,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/includes/_as_variables.scss

@@ -66,10 +66,6 @@ $booster-feedback-colour-light:#FFCB27;
 $booster-feedback-colour-med:#FFCB27;
 $booster-feedback-colour-dark:black;
 
-$booster-bulk-order-colour-light:#ffffff;
-$booster-bulk-order-colour-med:#83c42d;
-$booster-bulk-order-colour-dark:black;
-
 /* metrics */
 $toggle-metric-label-blue: #477EF6;
 $toggle-metric-label-black: #354B64;

package/src/sass/main.scss

@@ -21,7 +21,6 @@
 @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";
 @import "./includes/_as_tooltips.scss";