breaking WIP errors concerning css loaders

package.json

@@ -29,6 +29,7 @@
     "govuk-frontend": "^3.4.0",
     "html2canvas": "^1.0.0-rc.5",
     "jspdf": "^1.5.3",
+    "node-sass": "^4.14.1",
     "vue": "^2.6.11",
     "vue-router": "^3.1.3",
     "vuex": "^3.1.2",
@@ -50,7 +51,8 @@
     "firebase-tools": "^7.11.0",
     "jest-extended": "^0.11.2",
     "sass": "^1.24.3",
-    "sass-loader": "^7.3.1",
-    "vue-template-compiler": "^2.6.11"
+    "sass-loader": "^8.0.2",
+    "vue-template-compiler": "^2.6.11",
+    "webpack": "^4.43.0"
   }
 }

src/App.vue

@@ -70,22 +70,11 @@
     </main>
   </div>
 </template>
-
 <script>
 import { auth } from '@/firebase';
-
 export default {
   name: 'App',
-  data: () => ({
-    //
-  }),
   computed: {
-    isSignInPage() {
-      return this.$route.name === 'sign-in';
-    },
-    isVacanciesPage() {
-      return this.$route.name === 'vacancies';
-    },
     isSignedIn() {
       return this.$store.getters['auth/isSignedIn'];
     },
@@ -94,39 +83,34 @@ export default {
     },
   },
   methods: {
-    signIn() {
-      this.$router.push({ name: 'sign-in' });
-    },
     signOut() {
       auth().signOut();
-      if (this.$route.name != 'vacancies') {
-        this.$router.push({ name: 'vacancies' });
-      }
-    },
-    gotoVacancies() {
-      this.$router.push({ name: 'vacancies' });
+      this.$router.go('/sign-in');
     },
   },
 };
 </script>
 
-<style lang="scss">
+<style type="text/css" rel="stylesheet/scss" lang="scss">
+@import "@/styles/main.scss";
+</style>
+
+<style type="text/css" rel="stylesheet/scss" lang="scss" scoped>
+.header {
+  background-color: #fafafa;
+  padding: 1.25em 0.625em 0 0.625em;
+};
+.govuk-main-wrapper {
+  padding-top: 0px;
+}
   .govuk-grid-column-one-half {
     width: 100%;
     float: left;
 }
-  .header {
-    background-color: #fafafa;
-    padding: 1.25em 0.625em 0 0.625em;
-  };
 
-  .govuk-main-wrapper {
-    padding-top: 0px;
-  }
-
-  .float-right {
-      float: right;
-  }
+.float-right {
+    float: right;
+}
 
 .govuk-main-wrapper {
 	padding-top: 0 !important;
@@ -154,5 +138,4 @@ export default {
 .header-background span {
 	color: #753880 !important;
 }
-
 </style>

src/components/Page/Navigation.vue

@@ -1,13 +1,19 @@
 <template>
-  <nav :aria-label="label">
-    <ul class="dwp-vertical-navigation">
+  <nav
+    class="moj-side-navigation govuk-!-padding-top-0"
+    :aria-label="label"
+  >
+    <ul class="moj-side-navigation__list">
+      <h4 class="moj-side-navigation__title">
+        {{ label }}
+      </h4>
       <li 
         v-for="(page, index) in pageItems"
         :key="index"
+        class="moj-side-navigation__item"
         :class="{open: page.open, on: page.on}"
       >
         <router-link 
-          class="nav-link"
           :to="{name: page.name, params: page.params}"
           :aria-current="page.on ? 'page' : false"
         >
@@ -17,10 +23,10 @@
           <li
             v-for="(child, childIndex) in page.children"
             :key="childIndex"
-            :class="{on: child.on}"
+            class="moj-side-navigation__item"
+            :class="{'moj-side-navigation__item--active': child.on}"
           >
             <router-link 
-              class="nav-link"
               :to="{name: child.name, params: child.params}"
               :aria-current="child.on ? 'page' : false"
             >
@@ -55,7 +61,7 @@ export default {
           name: this.items[i].name,
           params: this.items[i].params,
         };
-        page.open = page.on = page.name === this.$route.name;
+        page.open = page.on = (page.name === this.$route.name);
         if (this.items[i].children) {
           page.children = [];
           for (let j = 0, lenJ = this.items[i].children.length; j < lenJ; ++j) {

src/components/Page/navbar.html

@@ -0,0 +1,32 @@
+<nav class="moj-side-navigation govuk-!-padding-top-0" aria-label="Side navigation">
+    <h4 class="moj-side-navigation__title">Exercise</h4>
+    <ul class="moj-side-navigation__list">
+        <li class="moj-side-navigation__item">
+            <a href="#">Overview</a>
+        </li>  
+    </ul>
+
+    <h4 class="moj-side-navigation__title">Applications</h4> 
+    <ul class="moj-side-navigation__list">
+        <li class="moj-side-navigation__item moj-side-navigation__item--active">
+            <a href="#" aria-current="location">active</a>
+        </li>
+    </ul>
+
+    <h4 class="moj-side-navigation__title">Stages</h4> 
+    <ul class="moj-side-navigation__list">
+        <li class="moj-side-navigation__item">
+            <a href="#">Sift (50)</a>
+        </li>
+    </ul>
+
+    <h4 class="moj-side-navigation__title">Reports</h4>
+    <ul class="moj-side-navigation__list">
+        <li class="moj-side-navigation__item moj-side-navigation__item--active">
+            <a href="index" aria-current="location">Diversity</a>
+        </li>
+        <li class="moj-side-navigation__item">
+            <a href="#" aria-current="location">Issues</a>
+        </li>
+    </ul>
+</nav>

src/gApp.vue

@@ -0,0 +1,112 @@
+<template>
+  <Navigation
+    :items="items"
+    label="Exercise"
+  />
+</template>
+
+<script>
+import { auth } from '@/firebase';
+import Navigation from '@/components/Page/Navigation';
+
+export default {
+  name: 'App',
+  components: {
+    Navigation,
+  },
+  data: () => ({
+    items: [
+      { 
+        page: 'Overview', 
+        name: 'exercise-show-overview',
+        children: [
+          { page: 'Website listing', name: 'exercise-show-summary' },
+          { page: 'Vacancy information', name: 'exercise-show-vacancy' },
+          { page: 'Contacts', name: 'exercise-show-contacts' },
+          { page: 'Timeline', name: 'exercise-show-timeline' },
+          { page: 'Shortlisting', name: 'exercise-show-shortlisting' },
+          { page: 'Eligibility information', name: 'exercise-show-eligibility' },
+          { page: 'Working preferences', name: 'exercise-show-working-preferences' },
+          { page: 'Assessment options', name: 'exercise-show-assessment-options' },
+          { page: 'Exercise downloads', name: 'exercise-show-downloads' },
+        ],
+      }],
+  }),
+  computed: {
+    isSignInPage() {
+      return this.$route.name === 'sign-in';
+    },
+    isVacanciesPage() {
+      return this.$route.name === 'vacancies';
+    },
+    isSignedIn() {
+      return this.$store.getters['auth/isSignedIn'];
+    },
+    userName() {
+      return this.$store.state.auth.currentUser.displayName ? this.$store.state.auth.currentUser.displayName : this.$store.state.auth.currentUser.email;
+    },
+  },
+  methods: {
+    signIn() {
+      this.$router.push({ name: 'sign-in' });
+    },
+    signOut() {
+      auth().signOut();
+      if (this.$route.name != 'vacancies') {
+        this.$router.push({ name: 'vacancies' });
+      }
+    },
+    gotoVacancies() {
+      this.$router.push({ name: 'vacancies' });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+
+  .govuk-grid-column-one-half {
+    width: 100%;
+    float: left;
+}
+  .header {
+    background-color: #fafafa;
+    padding: 1.25em 0.625em 0 0.625em;
+  };
+
+  .govuk-main-wrapper {
+    padding-top: 0px;
+  }
+
+  .float-right {
+      float: right;
+  }
+
+.govuk-main-wrapper {
+	padding-top: 0 !important;
+}
+
+.header-background {
+    background-color: #f7f7f7;
+	padding: 20px 20px 10px 20px;
+	margin-top: 0 !important;
+}
+
+.header-background h1 a,
+.header-background .header-title a,
+#navigation li a  {
+	color: #753880 !important;
+	text-decoration: none;
+}
+
+.header-background h1 a:hover,
+.header-background .header-title a:hover,
+#navigation li a:hover {
+	text-decoration: underline;
+}
+
+.header-background span {
+	color: #753880 !important;
+}
+
+</style>

src/views/Exercises/Show.vue

@@ -128,7 +128,7 @@ export default {
             { page: 'Applied', name: 'exercise-show-applications-in-status', params: { status: 'applied' } },
           ],
         });
-        // pages.push({ page: 'Independent assessments', name: 'exercise-show-independent-assessments' });
+        pages.push({ page: 'Independent Assessments', name: 'exercise-show-independent-assessments' });
         pages.push({
           page: 'Exercise reports',
           name: 'exercise-show-reports',

tests/unit/components/Page/Navigation.spec.js

@@ -1,26 +1,26 @@
 import { shallowMount } from '@vue/test-utils';
 import Navigation from '@/components/Page/Navigation';
 
-const navPages = [
-  { page: 'Test', name: 'nav-test-name1' },
-  { page: 'Test2', name: 'nav-test-name2' },
-];
+describe('components/Page/Navigation', () => {
+// const navPages = [
+//   { page: 'Test', name: 'nav-test-name1' },
+//   { page: 'Test2', name: 'nav-test-name2' },
+// ];
 
-const createTestSubject = (propsData) => {
-  return shallowMount(Navigation, {
-    propsData: {
-      ...propsData,
-    },
-    stubs: ['RouterLink'],
-    mocks: {
-      $route: {
-        name: 'nav-test-name1',
-      },
-    },
-  });
-};
+// const createTestSubject = (propsData) => {
+//   return shallowMount(Navigation, {
+//     propsData: {
+//       ...propsData,
+//     },
+//     stubs: ['RouterLink'],
+//     mocks: {
+//       $route: {
+//         name: 'nav-test-name1',
+//       },
+//     },
+//   });
+// };
 
-xdescribe('components/Page/Navigation', () => {
   it('renders the component', () => {
     let wrapper = createTestSubject({ items: navPages });
     expect(wrapper.exists()).toBe(true);

vue.config.js

@@ -3,7 +3,7 @@ module.exports = {
     loaderOptions: {
       sass: {
         // always import main.scss first
-        data: '@import "@/styles/main.scss";',
+        //data: '@import "@/styles/main.scss";',
       },
     },
   },