From 979e0739a44752066e78f2a398bd3925327df363 Mon Sep 17 00:00:00 2001
From: Tom Russell <TR115251@hotmail.co.uk>
Date: Fri, 29 May 2020 17:28:18 +0100
Subject: [PATCH 01/10] banner bug fixed

---
 src/components/Page/Banner.vue            | 3 ++-
 tests/unit/components/Page/Banner.spec.js | 9 ++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Page/Banner.vue b/src/components/Page/Banner.vue
index de37ebf78..67708ac17 100644
--- a/src/components/Page/Banner.vue
+++ b/src/components/Page/Banner.vue
@@ -1,5 +1,6 @@
 <template>
   <div 
+    v-if="message"
     class="moj-banner moj-banner--success"
   >
     <div class="moj-banner__message">
@@ -25,7 +26,7 @@ export default {
   props: {
     message: {
       type: String,
-      required: true,
+      default: null,
     },
   },
 };
diff --git a/tests/unit/components/Page/Banner.spec.js b/tests/unit/components/Page/Banner.spec.js
index 2753ae92b..4229c3a38 100644
--- a/tests/unit/components/Page/Banner.spec.js
+++ b/tests/unit/components/Page/Banner.spec.js
@@ -19,12 +19,11 @@ describe('components/Page/Banner', () => {
       beforeEach(() => {
         prop = Banner.props.message;
       });
-
-      it('is required', () => {
-        expect(prop.required).toBe(true);
-      });   
       it('is a string', () => {
-          expect(prop.type()).toBeString();
+        expect(prop.type()).toBeString();
+      });
+      it('defaults as', () => {
+        expect(prop.default).toBe(null);
       });
     });
   });

From 2da5eb0794e2bb1bff3d9cfac234d02743d8b208 Mon Sep 17 00:00:00 2001
From: Warren Searle <warren@precise-minds.co.uk>
Date: Fri, 29 May 2020 18:06:06 +0100
Subject: [PATCH 02/10] Undo Hide stages from navigation

---
 src/views/Exercises/Show.vue | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/views/Exercises/Show.vue b/src/views/Exercises/Show.vue
index 68c383162..b4f57fff4 100644
--- a/src/views/Exercises/Show.vue
+++ b/src/views/Exercises/Show.vue
@@ -132,17 +132,17 @@ export default {
             { page: 'Independent Assessments', name: 'exercise-show-independent-assessments' },
           ],
         });
-        // pages.push({ 
-        //   page: 'Stages',
-        //   name: 'exercise-stages',
-        //   children: [
-        //     { page: 'Review', name: 'exercise-stages-review-list' },
-        //     { page: 'Shortlisted', name: 'exercise-stages-shortlist-list' },
-        //     { page: 'Selected', name: 'exercise-stages-selected-list' },
-        //     { page: 'Recommended', name: 'exercise-stages-recommended-list' },
-        //     { page: 'Handover', name: 'exercise-stages-handover-list' },
-        //   ],
-        // });
+        pages.push({ 
+          page: 'Stages',
+          name: 'exercise-stages',
+          children: [
+            { page: 'Review', name: 'exercise-stages-review-list' },
+            { page: 'Shortlisted', name: 'exercise-stages-shortlist-list' },
+            { page: 'Selected', name: 'exercise-stages-selected-list' },
+            { page: 'Recommended', name: 'exercise-stages-recommended-list' },
+            { page: 'Handover', name: 'exercise-stages-handover-list' },
+          ],
+        });
         pages.push({
           page: 'Reports',
           name: 'exercise-show-reports',

From 39c869f769eda9a7577c3db34ef92652a9f441c7 Mon Sep 17 00:00:00 2001
From: Tom Russell <TR115251@hotmail.co.uk>
Date: Fri, 29 May 2020 18:34:53 +0100
Subject: [PATCH 03/10] #501 complete

---
 src/components/Page/Banner.vue               |  4 +++-
 src/store/stage/review.js                    | 18 +++++++++++++++++-
 src/views/Exercises/Stages/ReviewList.vue    | 15 ++++++++++++++-
 src/views/Exercises/Stages/ShortlistList.vue |  2 +-
 4 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/src/components/Page/Banner.vue b/src/components/Page/Banner.vue
index de37ebf78..1284917ff 100644
--- a/src/components/Page/Banner.vue
+++ b/src/components/Page/Banner.vue
@@ -1,5 +1,6 @@
 <template>
   <div 
+    v-if="message"
     class="moj-banner moj-banner--success"
   >
     <div class="moj-banner__message">
@@ -25,7 +26,8 @@ export default {
   props: {
     message: {
       type: String,
-      required: true,
+      default: null,
+      // @TODO add validator?
     },
   },
 };
diff --git a/src/store/stage/review.js b/src/store/stage/review.js
index be7c0d160..e9f0ee974 100644
--- a/src/store/stage/review.js
+++ b/src/store/stage/review.js
@@ -4,6 +4,7 @@ import { firestore } from '@/firebase';
 import { firestoreAction } from 'vuexfire';
 import vuexfireSerialize from '@/helpers/vuexfireSerialize';
 import { EXERCISE_STAGE, APPLICATION_STATUS, SHORTLISTING } from '../../helpers/constants';
+import { lookup } from '@/filters';
 
 const collectionRef = firestore.collection('applicationRecords');
 
@@ -92,11 +93,26 @@ export default {
         stage: stageValue,
       };
       const ref = collectionRef.doc(applicationId);
-      await ref.update(data);
+      await ref.update(data)
+      .then(() => {
+        const valueMessage = lookup(status); 
+        context.commit('message', `Application id #${applicationId} changed to '${valueMessage}'`);
+      });
       // @TODO store message(s) for what's been updated so it/they can be retrieved later (on list page)
     },
+    getMessages: (context) => {
+      const localMsg = context.state.message;
+      context.commit('message', null);
+      return localMsg;
+    },
   },
   state: {
     records: [],
+    message: null,
+  },
+  mutations: {
+    message(state, msg) {
+      state.message = msg;
+    },
   },
 };
diff --git a/src/views/Exercises/Stages/ReviewList.vue b/src/views/Exercises/Stages/ReviewList.vue
index de7ecaa51..094e9ad11 100644
--- a/src/views/Exercises/Stages/ReviewList.vue
+++ b/src/views/Exercises/Stages/ReviewList.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <Banner :message="message" />
     <h1>Review</h1>
     <ul>
       <li 
@@ -17,7 +18,17 @@
 </template>
 
 <script>
+import Banner from '@/components/Page/Banner';
+
 export default {
+  components: {
+    Banner,
+  },
+  data() {
+    return {
+      message: null,
+    };
+  },
   computed: {
     applicationRecords() {
       return this.$store.state.stageReview.records;
@@ -26,8 +37,10 @@ export default {
       return this.$store.state.exerciseDocument.record;
     },
   },
-  created() {
+  async created() {
     this.$store.dispatch('stageReview/bind', { exerciseId: this.exercise.id });
+    this.message = 'LOL';
+    this.message = await this.$store.dispatch('stageReview/getMessages');
   },
 };
 </script>
diff --git a/src/views/Exercises/Stages/ShortlistList.vue b/src/views/Exercises/Stages/ShortlistList.vue
index b72bb277f..bdbc896e7 100644
--- a/src/views/Exercises/Stages/ShortlistList.vue
+++ b/src/views/Exercises/Stages/ShortlistList.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import Banner from '../../../components/Page/Banner';
+import Banner from '@/components/Page/Banner';
 
 export default {
   components: {

From 5321b987a4b764796febdac226571193934c7de7 Mon Sep 17 00:00:00 2001
From: Tom Russell <TR115251@hotmail.co.uk>
Date: Fri, 29 May 2020 18:35:30 +0100
Subject: [PATCH 04/10] #501 complete

---
 src/views/Exercises/Stages/ReviewList.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/views/Exercises/Stages/ReviewList.vue b/src/views/Exercises/Stages/ReviewList.vue
index 094e9ad11..601f8622d 100644
--- a/src/views/Exercises/Stages/ReviewList.vue
+++ b/src/views/Exercises/Stages/ReviewList.vue
@@ -39,7 +39,6 @@ export default {
   },
   async created() {
     this.$store.dispatch('stageReview/bind', { exerciseId: this.exercise.id });
-    this.message = 'LOL';
     this.message = await this.$store.dispatch('stageReview/getMessages');
   },
 };

From 82c50a9c4fef015af9e3fe50008df867934b9caa Mon Sep 17 00:00:00 2001
From: Tom Russell <TR115251@hotmail.co.uk>
Date: Fri, 29 May 2020 18:44:32 +0100
Subject: [PATCH 05/10] removed unnessessary changes

---
 src/views/Exercises/Stages/ShortlistList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Exercises/Stages/ShortlistList.vue b/src/views/Exercises/Stages/ShortlistList.vue
index bdbc896e7..b72bb277f 100644
--- a/src/views/Exercises/Stages/ShortlistList.vue
+++ b/src/views/Exercises/Stages/ShortlistList.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import Banner from '@/components/Page/Banner';
+import Banner from '../../../components/Page/Banner';
 
 export default {
   components: {

From 6c7f5a3c3eecf0248efc14932017d49746560e16 Mon Sep 17 00:00:00 2001
From: Tom Russell <TR115251@hotmail.co.uk>
Date: Fri, 29 May 2020 18:47:00 +0100
Subject: [PATCH 06/10] removed unnessessary changes

---
 src/components/Page/Banner.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/Page/Banner.vue b/src/components/Page/Banner.vue
index 1284917ff..f348ea89c 100644
--- a/src/components/Page/Banner.vue
+++ b/src/components/Page/Banner.vue
@@ -1,6 +1,5 @@
 <template>
   <div 
-    v-if="message"
     class="moj-banner moj-banner--success"
   >
     <div class="moj-banner__message">
@@ -26,7 +25,7 @@ export default {
   props: {
     message: {
       type: String,
-      default: null,
+      required: true,
       // @TODO add validator?
     },
   },

From d1002501dae9fdc996d1a41c1d5bb165f5d3ab4d Mon Sep 17 00:00:00 2001
From: Tom Russell <TR115251@hotmail.co.uk>
Date: Fri, 29 May 2020 19:01:17 +0100
Subject: [PATCH 07/10] #502 complete

---
 src/store/stage/selected.js                 | 19 ++++++++++++++++++-
 src/views/Exercises/Stages/SelectedList.vue |  9 ++++++++-
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/store/stage/selected.js b/src/store/stage/selected.js
index 915608334..0646d80c8 100644
--- a/src/store/stage/selected.js
+++ b/src/store/stage/selected.js
@@ -4,6 +4,7 @@ import { firestore } from '@/firebase';
 import { firestoreAction } from 'vuexfire';
 import vuexfireSerialize from '@/helpers/vuexfireSerialize';
 import { EXERCISE_STAGE, APPLICATION_STATUS } from '../../helpers/constants';
+import { lookup } from '@/filters';
 
 const collectionRef = firestore.collection('applicationRecords');
 
@@ -42,11 +43,27 @@ export default {
         stage: stageValue,
       };
       const ref = collectionRef.doc(applicationId);
-      await ref.update(data);
+      await ref.update(data)
+      .then(() => {
+        const valueMessage = lookup(status); 
+        context.commit('message', `Application id #${applicationId} changed to '${valueMessage}'`);
+      });
       // @TODO store message(s) for what's been updated so it/they can be retrieved later (on list page)
     },
+    getMessages: (context) => {
+      const localMsg = context.state.message;
+      context.commit('message', null);
+      return localMsg;
+    },
   },
   state: {
     records: [],
+    message: null,
+  },
+  mutations: {
+    message(state, msg) {
+      state.message = msg;
+    },
   },
 };
+
diff --git a/src/views/Exercises/Stages/SelectedList.vue b/src/views/Exercises/Stages/SelectedList.vue
index 9aa00738c..29c0842a1 100644
--- a/src/views/Exercises/Stages/SelectedList.vue
+++ b/src/views/Exercises/Stages/SelectedList.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <Banner :message="message" />
     <h1>Selected</h1>
     <ul>
       <li 
@@ -17,7 +18,12 @@
 </template>
 
 <script>
+import Banner from '@/components/Page/Banner';
+
 export default {
+  components: {
+    Banner,
+  },
   computed: {
     applicationRecords() {
       return this.$store.state.stageSelected.records;
@@ -26,8 +32,9 @@ export default {
       return this.$store.state.exerciseDocument.record;
     },
   },
-  created() {
+  async created() {
     this.$store.dispatch('stageSelected/bind', { exerciseId: this.exercise.id });
+    this.message = await this.$store.dispatch('stageSelected/getMessages');
   },
 };
 </script>

From a7108cede46e864cc71a505a88a307ce5ec8e4fc Mon Sep 17 00:00:00 2001
From: "Lisias (Lee) Loback" <lisias@loback.com>
Date: Mon, 1 Jun 2020 12:02:15 +0100
Subject: [PATCH 08/10] 442 Adding the set status button

---
 src/views/Exercises/Stages/ReviewList.vue | 49 ++++++++++++++++++-----
 1 file changed, 38 insertions(+), 11 deletions(-)

diff --git a/src/views/Exercises/Stages/ReviewList.vue b/src/views/Exercises/Stages/ReviewList.vue
index 601f8622d..96aa81e39 100644
--- a/src/views/Exercises/Stages/ReviewList.vue
+++ b/src/views/Exercises/Stages/ReviewList.vue
@@ -2,31 +2,58 @@
   <div>
     <Banner :message="message" />
     <h1>Review</h1>
-    <ul>
-      <li 
-        v-for="item in applicationRecords" 
-        :key="item.application.id"
-      >
-        <RouterLink
-          :to="{ name: 'exercise-stages-review-edit', params: { applicationId: item.application.id } }"
+    <form @submit.prevent="validateAndSave">
+      <button class="govuk-button govuk-!-margin-right-2">
+        Set status
+      </button>
+      <table>
+        <tr 
+          v-for="item in applicationRecords" 
+          :key="item.application.id"
         >
-          {{ item.candidate.fullName }}, {{ item.status }}
-        </RouterLink>
-      </li>
-    </ul>
+          <td>
+            <CheckboxGroup
+              id="selectedItems"
+              v-model="selectedItems"
+              label=""
+              hint=""
+              value=""
+            >
+              <CheckboxItem
+                :value="selectedItemStatus"
+                label=""
+              />
+            </CheckboxGroup>
+          </td>
+          <td>
+            <RouterLink
+              :to="{ name: 'exercise-stages-review-edit', params: { applicationId: item.application.id } }"
+            >
+              {{ item.candidate.fullName }}, {{ item.status }}
+            </RouterLink>
+          </td>
+        </tr>
+      </table>
+    </form>
   </div>
 </template>
 
 <script>
 import Banner from '@/components/Page/Banner';
+import CheckboxGroup from '@/components/Form/CheckboxGroup';
+import CheckboxItem from '@/components/Form/CheckboxItem';
 
 export default {
   components: {
     Banner,
+    CheckboxGroup,
+    CheckboxItem,
   },
   data() {
     return {
       message: null,
+      selectedItems: null, 
+      selectedItemStatus: null,
     };
   },
   computed: {

From 38732f4b7da0fc10baf8f366f7af5137bd655ee3 Mon Sep 17 00:00:00 2001
From: "Lisias (Lee) Loback" <lisias@loback.com>
Date: Mon, 1 Jun 2020 16:33:02 +0100
Subject: [PATCH 09/10] #442 Set status button

---
 src/router.js                             |  2 +-
 src/store/stage/review.js                 | 26 ++++++++++++++-----
 src/views/Exercises/Stages/ReviewEdit.vue | 15 ++++++++---
 src/views/Exercises/Stages/ReviewList.vue | 31 +++++++++++++++--------
 4 files changed, 51 insertions(+), 23 deletions(-)

diff --git a/src/router.js b/src/router.js
index 83b1b160a..546ba5ff9 100644
--- a/src/router.js
+++ b/src/router.js
@@ -251,7 +251,7 @@ const router = new Router({
               },
             },
             {
-              path: 'review/:applicationId',
+              path: 'review/edit',
               component: ExerciseStagesReviewEdit,
               name: 'exercise-stages-review-edit',
               meta: {
diff --git a/src/store/stage/review.js b/src/store/stage/review.js
index e9f0ee974..43eba748a 100644
--- a/src/store/stage/review.js
+++ b/src/store/stage/review.js
@@ -80,7 +80,7 @@ export default {
     unbind: firestoreAction(({ unbindFirestoreRef }) => {
       return unbindFirestoreRef('records');
     }),
-    updateStatus: async ( context, { applicationId, status, nextStage } ) => {
+    updateStatus: async ( context, { status, nextStage } ) => {
       let stageValue = EXERCISE_STAGE.REVIEW; // initial value: 'review'
 
       // CHECKBOX SELECTED TO MOVE TO NEXT STAGE: SHORTLISTED
@@ -92,13 +92,21 @@ export default {
         status: status,
         stage: stageValue,
       };
-      const ref = collectionRef.doc(applicationId);
-      await ref.update(data)
-      .then(() => {
-        const valueMessage = lookup(status); 
-        context.commit('message', `Application id #${applicationId} changed to '${valueMessage}'`);
+
+      const selectedItems = context.state.selectedItems;
+      const batch = firestore.batch();
+      selectedItems.map( item => {
+        const ref = collectionRef.doc(item);
+        batch.update(ref, data);
       });
-      // @TODO store message(s) for what's been updated so it/they can be retrieved later (on list page)
+      await batch.commit();
+      
+      const valueMessage = lookup(status); 
+      context.commit('message', `Updated ${selectedItems.length} candidates to '${valueMessage}'`);
+
+    },
+    storeItems: ( context, { items }) => {
+      context.commit('changeSelectedItems', items);
     },
     getMessages: (context) => {
       const localMsg = context.state.message;
@@ -109,10 +117,14 @@ export default {
   state: {
     records: [],
     message: null,
+    selectedItems: [],
   },
   mutations: {
     message(state, msg) {
       state.message = msg;
     },
+    changeSelectedItems(state, items) {
+      state.selectedItems = items;
+    },
   },
 };
diff --git a/src/views/Exercises/Stages/ReviewEdit.vue b/src/views/Exercises/Stages/ReviewEdit.vue
index b26709386..400fe9d93 100644
--- a/src/views/Exercises/Stages/ReviewEdit.vue
+++ b/src/views/Exercises/Stages/ReviewEdit.vue
@@ -61,9 +61,6 @@ export default {
     };
   },
   computed: {
-    applicationId() {
-      return this.$route.params.applicationId;
-    },
     availableStatuses() {
       const shortlistingMethods = this.exercise.shortlistingMethods;
       const otherShortlistingMethod = this.exercise.otherShortlistingMethod || [];
@@ -72,10 +69,20 @@ export default {
     exercise() {
       return this.$store.state.exerciseDocument.record;
     },
+    itemsToChange() {
+      const selectedItems = this.$store.state.stageReview.selectedItems;
+      return selectedItems;
+    },
+  },
+  created() {
+    // on refresh if there's no IDs to change => redirect to the list
+    if (this.itemsToChange.length === 0) {
+      this.$router.push({ name: 'exercise-stages-review-list' });
+    }
   },
   methods: {
     async save() {
-      await this.$store.dispatch('stageReview/updateStatus', { applicationId: this.applicationId, status: this.newSelectedStatus, nextStage: this.nextStageStatus });
+      await this.$store.dispatch('stageReview/updateStatus', { status: this.newSelectedStatus, nextStage: this.nextStageStatus });
       this.$router.push({ name: 'exercise-stages-review-list' });
     },
   },
diff --git a/src/views/Exercises/Stages/ReviewList.vue b/src/views/Exercises/Stages/ReviewList.vue
index 96aa81e39..510378eb1 100644
--- a/src/views/Exercises/Stages/ReviewList.vue
+++ b/src/views/Exercises/Stages/ReviewList.vue
@@ -2,8 +2,11 @@
   <div>
     <Banner :message="message" />
     <h1>Review</h1>
-    <form @submit.prevent="validateAndSave">
-      <button class="govuk-button govuk-!-margin-right-2">
+    <form @submit.prevent="checkForm">
+      <button 
+        class="govuk-button govuk-!-margin-right-2" 
+        :disabled="isButtonDisabled"
+      >
         Set status
       </button>
       <table>
@@ -13,24 +16,20 @@
         >
           <td>
             <CheckboxGroup
-              id="selectedItems"
+              :id="`item-${item.application.id}`"
               v-model="selectedItems"
               label=""
               hint=""
               value=""
             >
               <CheckboxItem
-                :value="selectedItemStatus"
+                :value="item.application.id"
                 label=""
               />
             </CheckboxGroup>
           </td>
           <td>
-            <RouterLink
-              :to="{ name: 'exercise-stages-review-edit', params: { applicationId: item.application.id } }"
-            >
-              {{ item.candidate.fullName }}, {{ item.status }}
-            </RouterLink>
+            {{ item.candidate.fullName }}, {{ item.status }}
           </td>
         </tr>
       </table>
@@ -52,8 +51,7 @@ export default {
   data() {
     return {
       message: null,
-      selectedItems: null, 
-      selectedItemStatus: null,
+      selectedItems: null,
     };
   },
   computed: {
@@ -63,10 +61,21 @@ export default {
     exercise() {
       return this.$store.state.exerciseDocument.record;
     },
+    isButtonDisabled() {
+      const isDisabled = this.selectedItems && this.selectedItems.length;
+      return !isDisabled;
+    },
   },
   async created() {
     this.$store.dispatch('stageReview/bind', { exerciseId: this.exercise.id });
     this.message = await this.$store.dispatch('stageReview/getMessages');
+    this.$store.dispatch('stageReview/storeItems', { items: [] });
+  },
+  methods: {
+    checkForm() {
+      this.$store.dispatch('stageReview/storeItems', { items: this.selectedItems });
+      this.$router.push({ name: 'exercise-stages-review-edit' });
+    },
   },
 };
 </script>

From e412850d783f0316c1aa123944399a6cf0664e0b Mon Sep 17 00:00:00 2001
From: gabriel <gabriel.matos@judicialappointments.digital>
Date: Mon, 1 Jun 2020 17:12:47 +0100
Subject: [PATCH 10/10] banner component can display info

---
 src/components/Page/Banner.vue            | 11 +++-
 src/views/Sandbox.vue                     | 30 ++-------
 tests/unit/components/Page/Banner.spec.js | 77 ++++++++++++++++++++++-
 3 files changed, 88 insertions(+), 30 deletions(-)

diff --git a/src/components/Page/Banner.vue b/src/components/Page/Banner.vue
index 1284917ff..044151485 100644
--- a/src/components/Page/Banner.vue
+++ b/src/components/Page/Banner.vue
@@ -1,7 +1,7 @@
 <template>
   <div 
     v-if="message"
-    class="moj-banner moj-banner--success"
+    :class="status ? 'moj-banner moj-banner--'+status : 'moj-banner'"
   >
     <div class="moj-banner__message">
       <svg 
@@ -14,9 +14,9 @@
         height="25"
         width="25"
       >
-        <path d="M25,6.2L8.7,23.2L0,14.1l4-4.2l4.7,4.9L21,2L25,6.2z" />
+        <path :d="status === 'success' ? 'M25,6.2L8.7,23.2L0,14.1l4-4.2l4.7,4.9L21,2L25,6.2z' : 'M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v.8C13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z'" />
       </svg>
-      <span class="moj-banner__assistive">success</span>{{ message }}
+      <span class="moj-banner__assistive">{{ status }}</span>{{ message }}
     </div>
   </div>
 </template>
@@ -29,6 +29,11 @@ export default {
       default: null,
       // @TODO add validator?
     },
+    status: {
+      type: String,
+      default: null,
+      // @TODO add validator?
+    },
   },
 };
 </script>
diff --git a/src/views/Sandbox.vue b/src/views/Sandbox.vue
index f847a05f6..7a385ca3f 100644
--- a/src/views/Sandbox.vue
+++ b/src/views/Sandbox.vue
@@ -1,32 +1,14 @@
 <template>
-  <div>
-    <TabsList
-      :tabs="tabs"
-      :active-tab.sync="activeTab"
-    />
-    {{ activeTab }}
-  </div>
+  <Banner
+    :message="'gabe'"
+    :status="'success'"
+  />
 </template>
 <script>
-import TabsList from '@/components/Page/TabsList'; 
+import Banner from '@/components/Page/Banner'; 
 export default {
   components: {
-    TabsList,
-  },
-  data() {
-    return {
-      tabs: [
-        {
-          ref: 'one',
-          title: 'this is tab 1',
-        },
-        {
-          ref: 'two',
-          title: 'here is tab 2',
-        },
-      ],
-      activeTab: null,
-    };
+    Banner,
   },
 };
 </script>
diff --git a/tests/unit/components/Page/Banner.spec.js b/tests/unit/components/Page/Banner.spec.js
index 4229c3a38..6dabba341 100644
--- a/tests/unit/components/Page/Banner.spec.js
+++ b/tests/unit/components/Page/Banner.spec.js
@@ -26,11 +26,22 @@ describe('components/Page/Banner', () => {
         expect(prop.default).toBe(null);
       });
     });
+    describe('status', () => {
+      beforeEach(() => {
+        prop = Banner.props.status;
+      });
+      it('is a string', () => {
+        expect(prop.type()).toBeString();
+      });
+      it('defaults as', () => {
+        expect(prop.default).toBe(null);
+      });
+    });
   });
   
   describe('component instance', () => {
-    // describe('success', () => {
-    let wrapper = createTestSubject({ message: 'mockMessage' });
+    describe('when status = success', () => {
+    let wrapper = createTestSubject({ message: 'mockMessage', status: 'success' });
 
     it('renders the component', () => {
       expect(wrapper.exists()).toBe(true);
@@ -87,7 +98,67 @@ describe('components/Page/Banner', () => {
         });
       });
       
-    // });
     });
+    });
+    describe('when status is empty', () => {
+      let wrapper = createTestSubject({ message: 'mockMessage', status: '' });
+  
+      it('renders the component', () => {
+        expect(wrapper.exists()).toBe(true);
+      });
+  
+      describe('template', () => {
+        describe('divs', () => {
+          describe('container div', () => {
+            it('class', () => {
+              expect(wrapper.findAll('div').at(0).attributes('class')).toBe('moj-banner');
+            });
+          });
+          describe('message div', () => {
+            expect(wrapper.findAll('div').at(1).attributes('class')).toBe('moj-banner__message');
+          });
+        });
+        describe('svg attributes', () => {
+          it('class', () => {
+            expect(wrapper.find('svg').attributes('class')).toBe('moj-banner_icon');
+          });
+          it('fill',() => {
+            expect(wrapper.find('svg').attributes('fill')).toBe('CurrentColour');
+          });
+          it('role', () => {
+            expect(wrapper.find('svg').attributes('role')).toBe('presentation');
+          });
+          it('focusable ',() => {
+            expect(wrapper.find('svg').attributes('focusable')).toBe('false');
+          });
+          it('xmlns', () => {
+            expect(wrapper.find('svg').attributes('xmlns')).toBe('http://www.w3.org/2000/svg');
+          });
+          it('fill',() => {
+            expect(wrapper.find('svg').attributes('viewBox')).toBe('0 0 25 25');
+          });
+          it('class', () => {
+            expect(wrapper.find('svg').attributes('height')).toBe('25');
+          });
+          it('fill',() => {
+            expect(wrapper.find('svg').attributes('width')).toBe('25');
+          });
+        });
+        describe('path', () => {
+          it('d attribute', () => {
+            expect(wrapper.find('svg > path').attributes('d')).toBe('M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v.8C13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z');
+          });
+        });
+        describe('span', () => {
+          it('class', () => {
+            expect(wrapper.find('div > span').attributes('class')).toBe('moj-banner__assistive');
+          });
+          it('contents', () => {
+            expect(wrapper.find('div > span').text()).toBe('');
+          });
+        });
+        
+      });
+      });
   });
 });