toggle-components-library 1.36.9-beta.0 → 1.37.0

package/package.json

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

package/src/assets/img/bulkorders.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 249.95 53.61"><defs><style>.cls-1{fill:#f9665a;}.cls-2{fill:#4c7210;}.cls-3{fill:#fff;}</style></defs><g id="Layer_1-2"><path class="cls-2" d="M179.97,9.18c1.07-1.03,2.45-1.26,3.71-1.26,4.65,0,7.73,3.04,7.73,9.07v2.29c0,5.52-2.6,9.15-7.73,9.15-1.62,0-2.84-.43-3.71-1.26v.87h-5.52V.82h5.52v8.36ZM185.5,19v-1.74c0-2.92-.63-4.38-2.76-4.38s-2.72,1.3-2.76,3.94v2.17c0,2.6.63,4.46,2.76,4.46,2.45,0,2.76-1.85,2.76-4.46Z"/><path class="cls-2" d="M211.57,28.04h-5.8v-1.54c-.79,1.26-1.7,1.93-4.14,1.93-3.87,0-7.26-1.89-7.26-7.81v-12.31h5.92v11.2c0,2.68.63,3.87,2.6,3.87s2.76-1.1,2.76-3.83v-11.24h5.92v19.72Z"/><path class="cls-2" d="M215.12.82h5.92v19.49c0,2.13.91,2.68,2.49,2.68v5.05c-5.48,0-8.4-1.1-8.4-6.43V.82Z"/><path class="cls-2" d="M243.67,8.31l-6.11,7.97,7.22,11.75h-6.78l-4.26-6.75-1.34,1.74v5.01h-5.92V.82h5.92v13.81l4.34-6.31h6.94Z"/><path class="cls-3" d="M1.02,11.16h2.82v-5.58c0-.56.46-1.02,1.02-1.02h6.96c.56,0,1.02.46,1.02,1.02v5.58h4.38c.56,0,1.02.46,1.02,1.02v5.52c0,.56-.46,1.02-1.02,1.02h-4.38v11.23c0,2.4.66,3.42,2.88,3.42h.26c.56,0,.85.41,1.02,1.02l1.95,5.43c.17.46,0,1.01-.43,1.24-.14.07-.3.11-.47.11h-3.35c-7.33,0-10.87-1.62-10.87-10.09v-12.37H1.02c-.56,0-1.02-.46-1.02-1.02v-5.52c0-.56.46-1.02,1.02-1.02Z"/><path class="cls-3" d="M114.78,1.29c0-.56.4-.94,1.02-1.02l6.96-.27c.56,0,1.02.46,1.02,1.02v28.93c0,2.4.66,3.42,2.88,3.42h.26c.56,0,.85.41,1.02,1.02l1.96,5.46c.17.47-.02,1.01-.47,1.22-.13.06-.28.1-.44.1h-3.35c-7.33,0-10.87-1.62-10.87-10.09V1.29Z"/><path class="cls-3" d="M48.39,27.85c0,8.41-3.96,13.93-13.21,13.93s-13.21-5.52-13.21-13.93v-3.48c0-9.19,4.8-13.81,13.21-13.81s13.21,4.62,13.21,13.81v3.48ZM39.38,27.43v-2.64c0-4.44-.96-6.66-4.2-6.66s-4.2,2.22-4.2,6.66v2.64c0,3.96.48,6.78,4.2,6.78s4.2-2.82,4.2-6.78Z"/><path class="cls-3" d="M70.84,11.57l6.96-.28c.56,0,1.02.46,1.02,1.02v28.93c0,10.81-6.12,12.37-13.45,12.37-5.36,0-8.9-1.14-11.74-4.73-.36-.45-.26-1.12.21-1.46l4.32-3.13c.41-.29.96-.24,1.32.11,1.22,1.18,2.74,1.76,4.69,1.76,4.2,0,5.64-.54,5.64-4.92v-1.2c-1.5,1.14-3.42,1.74-5.64,1.74-7.69,0-11.77-5.52-11.77-13.57v-4.2c0-8.83,4.8-13.45,11.77-13.45,5.24,0,6.57.97,6.66,1.01ZM69.82,28.33v-4.2c0-4.02-1.14-6-4.2-6-3.24,0-4.2,2.22-4.2,6.66v2.64c0,3.96.48,6.78,4.2,6.78,3.42,0,4.2-2.4,4.2-5.88Z"/><path class="cls-3" d="M155.06,36.06c.46.32.58.95.26,1.41-2.16,3.05-5.61,4.32-10.63,4.32-9.49,0-13.57-6.12-13.57-13.57v-4.2c0-9.31,4.8-13.45,12.61-13.45,8.71,0,12.61,4.98,12.61,14.35v2.52c0,.56-.46,1.02-1.02,1.02h-15.19c.12,3.42.96,5.76,4.62,5.76,2.29,0,3.12-.55,3.93-1.5.34-.4.94-.46,1.37-.16l5.01,3.51ZM140.19,22.45h7.15c-.18-3.3-1.44-4.32-3.54-4.32-2.34,0-3.36,1.62-3.6,4.32Z"/><path class="cls-3" d="M108.43,11.29l-6.96.28c-.06-.04-1.42-1.01-6.66-1.01-6.96,0-11.77,4.06-11.77,12.88v.49h9.01c0-3.88,1.03-5.81,4.2-5.81s4.2,1.98,4.2,6v4.2c0,3.48-.78,5.88-4.2,5.88s-4.2-2.08-4.2-5.34h-9.01v.64c0,8.05,4.08,12.26,11.77,12.26,2.22,0,4.14-.6,5.64-1.74v1.2c0,4.38-1.44,4.92-5.64,4.92-1.96,0-3.47-.57-4.69-1.76-.36-.35-.91-.41-1.32-.11l-4.32,3.13c-.47.34-.57,1-.21,1.46,2.84,3.59,6.38,4.73,11.74,4.73,7.33,0,13.45-1.56,13.45-12.37V12.32c0-.56-.46-1.02-1.02-1.02Z"/><rect class="cls-1" x="78.8" y="23.9" width="4.27" height="5.05" transform="translate(161.88 52.85) rotate(180)"/><path class="cls-2" d="M186.58,45.31c0,3.88-1.83,6.43-6.1,6.43s-6.1-2.55-6.1-6.43v-1.61c0-4.24,2.22-6.37,6.1-6.37s6.1,2.13,6.1,6.37v1.61ZM182.43,45.11v-1.22c0-2.05-.44-3.08-1.94-3.08s-1.94,1.03-1.94,3.08v1.22c0,1.83.22,3.13,1.94,3.13s1.94-1.3,1.94-3.13Z"/><path class="cls-2" d="M196.14,41.87c-.25-.42-.64-1-1.44-1-1.19,0-1.88.83-1.88,2.69v7.9h-4.16v-13.86h4.05v1.05c.42-.53,1.33-1.33,2.91-1.33s2.83.78,3.63,2.33l-3.1,2.22Z"/><path class="cls-2" d="M207.56,32.34h4.16v19.12h-4.16v-.61c-.67.55-1.52.89-2.6.89-3.55,0-5.43-2.55-5.43-6.26v-1.94c0-4.07,2.22-6.21,5.43-6.21.97,0,1.86.22,2.6.75v-5.74ZM207.56,45.11v-1.52c0-1.86-.53-2.77-1.94-2.77-1.5,0-1.94,1.03-1.94,3.08v1.22c0,1.83.22,3.13,1.94,3.13s1.94-1.3,1.94-3.13Z"/><path class="cls-2" d="M225.21,49.35c-.97,1.69-2.63,2.38-5.15,2.38-4.38,0-6.26-2.83-6.26-6.26v-1.94c0-4.29,2.22-6.21,5.82-6.21,4.02,0,5.82,2.3,5.82,6.62v1.63h-7.48c.05,1.58.44,2.66,2.13,2.66,1.3,0,1.58-.39,2.08-1.02l3.05,2.13ZM217.98,42.81h3.3c-.08-1.52-.66-2-1.63-2-1.08,0-1.55.75-1.66,2Z"/><path class="cls-2" d="M235.13,41.87c-.25-.42-.64-1-1.44-1-1.19,0-1.88.83-1.88,2.69v7.9h-4.16v-13.86h4.05v1.05c.42-.53,1.33-1.33,2.91-1.33s2.83.78,3.63,2.33l-3.1,2.22Z"/><path class="cls-2" d="M246.68,41.85c-.53-.61-1.08-.97-2.36-.97-.58,0-1.3.11-1.3.72,0,.47.44.69,1.72.94,3.8.72,5.21,2.25,5.21,4.79,0,2.77-1.97,4.41-5.54,4.41-2.83,0-4.66-.61-5.9-2.3l3.21-2.33c.47.64,1.03,1.08,2.6,1.08.92,0,1.47-.25,1.47-.75,0-.53-.47-.72-1.77-1-3.13-.69-5.15-1.97-5.15-4.68s2-4.43,5.54-4.43c2.27,0,4.27.53,5.35,2.3l-3.08,2.22Z"/></g></svg>

package/src/components/forms/ToggleInputCurrency.vue

@@ -3,7 +3,8 @@
 
 
 
-<div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid }"  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"
         :for="name ? name : 'InputText' " 
@@ -16,6 +17,7 @@
         :placeholder="placeholder ? placeholder : '' "
         :autocomplete="autocomplete ? 'on' : 'off' "
         :required="required"
+        :disabled="disabled"
         v-model="inputVal"
         @blur="isInputActive = false" 
         @focus="isInputActive = true" 
@@ -91,8 +93,13 @@ 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 }"  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"
         :for="name ? name : 'ToggleInputNumber' " 
@@ -20,6 +20,7 @@
         @blur="isInputActive = false" 
         @focus="isInputActive = true" 
         :pattern="pattern"
+        :disabled="disabled"
     />
     <label
         class="toggle-input-label-error" 
@@ -90,7 +91,12 @@ 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 }"  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"
@@ -14,6 +14,7 @@
         :placeholder="placeholder ? placeholder : '' "
         :autocomplete="autocomplete ? 'on' : 'off' "
         :required="required"
+        :disabled="disabled"
         v-model="inputVal"
         @blur="isInputActive = false" 
         @focus="isInputActive = true" 
@@ -77,6 +78,11 @@ 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,8 +103,6 @@ export default {
         }
     },
 
-    created : function(){
-    },
     computed: {
         inputVal: {
             get: function (){

package/src/components/statusbar/ToggleStatusBar.vue

@@ -0,0 +1,74 @@
+<template>
+    <div :class="['toggle-status-bar-container', statusColours, statusSize]">
+        <span class="toggle-status-bar-dot blinking toggle-status-bar-label" v-if="showDot">&#9679;</span>
+        <label class="toggle-status-bar-label">
+            {{ statusName }}
+        </label>
+        
+        <div class="toggle-status-bar-tooltip-container" v-if="showToolTip && toolTipText.length">
+            <div class="toggle-status-bar-tooltip">
+                ?
+                <span class="toggle-status-bar-tooltip-text">{{ toolTipText }}</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'StatusBar',
+    props: {
+        status: {
+            type: String,
+            required: true,
+            validator: function (value) {
+                return ['draft', 'processing', 'complete', 'inactive', 'active', 'submitted', 'failed'].indexOf(value) !== -1;
+            }
+        },
+        size: {
+            type: String,
+            required: false,
+            default: 'regular',
+            validator: function (value) {
+                return ['small', 'regular'].indexOf(value) !== -1;
+            }
+        },
+        toolTipOptions: {
+            type: Object,
+            required: false
+        }
+    },
+    computed: {
+        // Capitalise the first letter of the status
+        statusName() {
+            return this.status.charAt(0).toUpperCase() + this.status.slice(1);
+        },
+        // Add the status to the class name
+        statusColours() {
+            return 'toggle-status-bar-' + this.status;
+        },
+        // Add the size to the class name
+        statusSize() {
+            return 'toggle-status-bar-' + this.size;
+        },
+        // Show the dot if the status is active or processing
+        showDot() {
+            return this.status === 'active' || this.status === 'processing' || this.status === 'submitted';
+        },
+        showToolTip() {
+            return this.size == 'regular';
+        },
+        toolTipText() {
+            if (!this.toolTipOptions) {
+                return '';
+            }
+
+            if (this.toolTipOptions[this.status]) {
+                return this.toolTipOptions[this.status];
+            } else {
+                return '';
+            }
+        }
+    }
+}
+</script>

package/src/index.js

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

package/src/sass/includes/_as_badges.scss

@@ -228,24 +228,4 @@
         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,6 +29,10 @@
         background-color: $booster-feedback-colour-med;
     }
 
+    &.bulkOrders{
+        background-color: $booster-bulk-order-colour-med;
+    }
+
     &.test{
         background-color: $booster-test-colour-light;
     }
@@ -83,6 +87,10 @@
         }
     }
 
+    &.bulkOrders{
+        background-color: rgba($booster-bulk-order-colour-light, 0.8);
+    }
+
     &.test{
         background-color: rgba($booster-test-colour-med, 0.8);
         &:hover{
@@ -132,6 +140,10 @@
         color: $booster-tickets-colour-med;
     }
 
+    &.bulkOrders{
+        color: $booster-bulk-order-colour-med;
+    }
+
     &.test{
         color: $booster-test-colour-light;
     }
@@ -182,6 +194,10 @@ 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,6 +237,11 @@
     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_statusbar.scss

@@ -0,0 +1,183 @@
+.toggle-status-bar-container {
+    font-family: $toggle-font-family;
+    font-size: 16px !important;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 50px;
+    width: 100%;
+    min-width: 94px;
+    border-radius: 7px;
+}
+
+.toggle-status-bar-small {
+    font-size: 0.7rem !important;
+    height: 28px;
+    .toggle-status-bar-dot {
+        font-size: 14px;
+    }
+}
+
+// Tooltip
+.toggle-status-bar-tooltip-container{
+    position: absolute;
+    display: flex;
+    justify-content: right;
+    width: 100%;
+    right: 32px;
+    cursor: default;
+
+    .toggle-status-bar-tooltip {
+        position: relative;
+        display: inline-block;
+        width: 20px;
+        text-align: center;
+        border: 1px solid hotpink;
+        border-radius: 50px;
+    }
+    
+    // Tooltip text
+    .toggle-status-bar-tooltip .toggle-status-bar-tooltip-text {
+        visibility: hidden;
+        width: 200px;
+        background-color: rgba(0, 0, 0, .8);
+        color: #fff;
+        text-align: center;
+        padding: 10px;
+        border-radius: 6px;
+        position: absolute;
+        z-index: 1;
+        top: -5px;
+        right: 105%;
+    }
+    
+    .toggle-status-bar-tooltip:hover .toggle-status-bar-tooltip-text {
+        visibility: visible;
+    }
+}
+
+
+// Draft colours
+.toggle-status-bar-draft {
+    background-color: #FFB88D;
+
+    .toggle-status-bar-label {
+        color: #A34308;
+    }
+
+    .toggle-status-bar-tooltip {
+        color: #A34308;
+        border: 1px solid #A34308;
+    }
+}
+
+// Processing colours
+.toggle-status-bar-processing {
+    background-color: #D7E9F2;
+
+    .toggle-status-bar-label {
+        color: #269BE3;
+    }
+
+    .toggle-status-bar-tooltip {
+        color: #269BE3;
+        border: 1px solid #269BE3;
+    }
+}
+
+// Complete colours
+.toggle-status-bar-complete {
+    background-color: #B3E49F;
+
+    .toggle-status-bar-label {
+        color: #3BB40B;
+    }
+
+    .toggle-status-bar-tooltip {
+        color: #3BB40B;
+        border: 1px solid #3BB40B;
+    }
+}
+
+// Inactive colours
+.toggle-status-bar-inactive {
+    background-color: #D7E9F2;
+
+    .toggle-status-bar-label {
+        color: #269BE3;
+    }
+
+    .toggle-status-bar-tooltip {
+        color: #269BE3;
+        border: 1px solid #269BE3;
+    }
+}
+
+// Active colours
+.toggle-status-bar-active {
+    background-color: #D7E9F2;
+    border: 1px solid #FF4848;
+
+    .toggle-status-bar-label {
+        color: #FF4848;
+    }
+
+    .toggle-status-bar-tooltip {
+        color: #FF4848;
+        border: 1px solid #FF4848;
+    }
+}
+
+// Submitted colours
+.toggle-status-bar-submitted {
+    background-color: #D7E9F2;
+    
+    .toggle-status-bar-label {
+        color: #269BE3;
+    }
+
+    .toggle-status-bar-tooltip {
+        color: #269BE3;
+        border: 1px solid #269BE3;
+    }
+
+}
+
+// Failed colours
+.toggle-status-bar-failed {
+    background-color: #F2E3E3;
+    border: 1px solid #ED7B7C;
+    
+    .toggle-status-bar-label {
+        color: #ED7B7C;
+    }
+
+    .toggle-status-bar-tooltip {
+        color: #ED7B7C;
+        border: 1px solid #ED7B7C;
+    }
+}
+
+.toggle-status-bar-dot {
+    font-size: 20px;
+    margin: 0 3px 2px 0;
+    float: none !important;
+    padding: 0 !important;
+}
+
+// Dot blinking animation
+.blinking {
+    animation: 2s blink ease infinite;
+}
+
+@keyframes blink {
+
+    from,
+    to {
+        opacity: 0;
+    }
+
+    50% {
+        opacity: 1;
+    }
+}

package/src/sass/includes/_as_table.scss

@@ -65,7 +65,6 @@ table.toggle-table {
 
     select {
       border: none;
-      background-color: #FFF;
       font-size: 11.5px;
       font-weight: bold;
       color: #575757;
@@ -74,9 +73,6 @@ 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,6 +66,10 @@ $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,6 +21,7 @@
 @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";

package/src/components/badges/ToggleLogoBadge.vue

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