toggle-components-library 1.36.8-beta.0 → 1.36.8-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "toggle-components-library",
-    "version": "1.36.8-beta.0",
+    "version": "1.36.8-beta.1",
     "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,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";
 
@@ -161,7 +159,6 @@ const Components = {
     ToggleBoosterBasicButton,
     ToggleBoosterModal,
     ToggleContactSearch,
-    ToggleStatusBar,
     ToggleCarousel,
     ToggleCarouselSlide,
     ToggleEmailCard,

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,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,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,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";

package/src/components/statusbar/ToggleStatusBar.vue

@@ -1,74 +0,0 @@
-<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/sass/includes/_as_statusbar.scss

@@ -1,183 +0,0 @@
-.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;
-    }
-}