toggle-components-library 1.31.0 → 1.32.0-beta.10

package/package.json

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

package/src/components/forms/ToggleInputCrudField.vue

@@ -13,7 +13,7 @@
     > {{ label }} 
     </button>
      <label 
-        class="toggle-input-crud-container-description"
+        :class="['toggle-input-crud-container-description', {'hide-overflow':hideDescriptionOverflow}]"
     > {{ description ? description : '&nbsp;' }} 
     </label>
 
@@ -65,7 +65,12 @@ export default {
         empty:{
             type: Boolean,
             default: false
+        },
+        hideDescriptionOverflow:{
+            type: Boolean,
+            default: false
         }
+
     },
 
     created : function(){

package/src/components/statusbar/ToggleStatusBar.vue

@@ -0,0 +1,39 @@
+<template>
+    <div>
+        <div :class="['toggle-status-bar-container', statusColours]">
+            <label class="toggle-status-bar-label">
+                <span class="toggle-status-bar-dot" v-if="showDot">&#9679;</span>
+                {{ statusName }}
+            </label>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'StatusBar',
+    props: {
+        status: {
+            type: String,
+            required: true,
+            validator: function (value) {
+                return ['draft', 'processing', 'complete', 'inactive', 'active'].indexOf(value) !== -1;
+            },
+        }
+    },
+    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;
+        },
+        // Show the dot if the status is active or processing
+        showDot() {
+            return this.status === 'active' || this.status === 'processing';
+        }
+    }
+}
+</script>

package/src/sass/includes/_as_inputs.scss

@@ -722,6 +722,7 @@ $iconWidth:20px;
     }
 }
 
+
 .toggle-input-crud-container-buttons{
     .toggle-button-container{
         display: block;
@@ -753,6 +754,12 @@ $iconWidth:20px;
     clear: both;
     font-size: $toggle-font-size-small;
     color: $toggle-header-colour;
+    &.hide-overflow{
+        overflow-x: clip;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        width: inherit;
+    }
 }
 .toggle-input-protocol {
     width: 100px;

package/src/sass/includes/_as_statusbar.scss

@@ -0,0 +1,60 @@
+.toggle-status-bar-container {
+    font-family: $toggle-font-family;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 50px;
+    width: 100%;
+    border-radius: 7px;
+}
+
+// Draft colours
+.toggle-status-bar-draft {
+    background-color: #FFB88D;
+
+    .toggle-status-bar-label {
+        color: #A34308;
+    }
+}
+
+// Processing colours
+.toggle-status-bar-processing {
+    background-color: #D7E9F2;
+
+    .toggle-status-bar-label {
+        color: #269BE3;
+    }
+}
+
+// Complete colours
+.toggle-status-bar-complete {
+    background-color: #B3E49F;
+
+    .toggle-status-bar-label {
+        color: #3BB40B;
+    }
+}
+
+// Inactive colours
+.toggle-status-bar-inactive {
+    background-color: #D7E9F2;
+
+    .toggle-status-bar-label {
+        color: #269BE3;
+    }
+}
+
+// Active colours
+.toggle-status-bar-active {
+    background-color: #D7E9F2;
+    border: 1px solid #FF4848;
+
+    .toggle-status-bar-label {
+        color: #FF4848;
+    }
+}
+
+.toggle-status-bar-dot {
+    font-size: 20px;
+    margin: 0 3px 0 0;
+}

package/src/sass/main.scss

@@ -21,3 +21,4 @@
 @import "./includes/_as_metrics.scss";
 @import "./includes/_as_threedots.scss";
 @import "./includes/_as_boosters.scss";
+@import "./includes/_as_statusbar.scss";