toggle-components-library 1.33.0-beta.1 → 1.33.0-beta.10

package/package.json

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

package/src/components/statusbar/ToggleStatusBar.vue

@@ -1,9 +1,16 @@
 <template>
     <div :class="['toggle-status-bar-container', statusColours, statusSize]">
         <label class="toggle-status-bar-label">
-            <span class="toggle-status-bar-dot" v-if="showDot">&#9679;</span>
+            <span class="toggle-status-bar-dot blinking" v-if="showDot">&#9679;</span>
             {{ 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>
 
@@ -15,7 +22,7 @@ export default {
             type: String,
             required: true,
             validator: function (value) {
-                return ['draft', 'processing', 'complete', 'inactive', 'active'].indexOf(value) !== -1;
+                return ['draft', 'processing', 'complete', 'inactive', 'active', 'submitted', 'failed'].indexOf(value) !== -1;
             }
         },
         size: {
@@ -24,6 +31,10 @@ export default {
             validator: function (value) {
                 return ['small'].indexOf(value) !== -1;
             }
+        },
+        toolTipOptions: {
+            type: Object,
+            required: false
         }
     },
     computed: {
@@ -41,7 +52,21 @@ export default {
         },
         // Show the dot if the status is active or processing
         showDot() {
-            return this.status === 'active' || this.status === 'processing';
+            return this.status === 'active' || this.status === 'processing' || this.status === 'submitted';
+        },
+        showToolTip() {
+            return this.size !== 'small';
+        },
+        toolTipText() {
+            if (!this.toolTipOptions) {
+                return '';
+            }
+
+            if (this.toolTipOptions[this.status]) {
+                return this.toolTipOptions[this.status];
+            } else {
+                return '';
+            }
         }
     }
 }

package/src/sass/includes/_as_statusbar.scss

@@ -13,6 +13,45 @@
     height: 35px;
 }
 
+// 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;
@@ -20,6 +59,11 @@
     .toggle-status-bar-label {
         color: #A34308;
     }
+
+    .toggle-status-bar-tooltip {
+        color: #A34308;
+        border: 1px solid #A34308;
+    }
 }
 
 // Processing colours
@@ -29,6 +73,11 @@
     .toggle-status-bar-label {
         color: #269BE3;
     }
+
+    .toggle-status-bar-tooltip {
+        color: #269BE3;
+        border: 1px solid #269BE3;
+    }
 }
 
 // Complete colours
@@ -38,6 +87,11 @@
     .toggle-status-bar-label {
         color: #3BB40B;
     }
+
+    .toggle-status-bar-tooltip {
+        color: #3BB40B;
+        border: 1px solid #3BB40B;
+    }
 }
 
 // Inactive colours
@@ -47,6 +101,11 @@
     .toggle-status-bar-label {
         color: #269BE3;
     }
+
+    .toggle-status-bar-tooltip {
+        color: #269BE3;
+        border: 1px solid #269BE3;
+    }
 }
 
 // Active colours
@@ -57,6 +116,41 @@
     .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 {
@@ -64,4 +158,22 @@
     margin: 0 3px 0 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;
+    }
 }