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

package/package.json

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

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/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_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/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";

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;
-    }
-}