WIP loader component.

package-lock.json

@@ -14,7 +14,6 @@
         "canvas-confetti": "^1.4.0",
         "core-js": "^3.6.5",
         "http-status-codes": "^2.1.4",
-        "jest-junit": "^13.0.0",
         "vue": "^3.0.0",
         "vue-router": "^4.0.11",
         "vuex": "^4.0.2",
@@ -32,6 +31,7 @@
         "eslint": "^6.7.2",
         "eslint-plugin-prettier": "^3.3.1",
         "eslint-plugin-vue": "^7.0.0",
+        "jest-junit": "^13.0.0",
         "prettier": "^2.2.1",
         "sass": "^1.26.5",
         "sass-loader": "^8.0.2",
@@ -10962,6 +10962,7 @@
       "version": "13.0.0",
       "resolved": "https://registry.npmjs.org/jest-junit/-/jest-junit-13.0.0.tgz",
       "integrity": "sha512-JSHR+Dhb32FGJaiKkqsB7AR3OqWKtldLd6ZH2+FJ8D4tsweb8Id8zEVReU4+OlrRO1ZluqJLQEETm+Q6/KilBg==",
+      "dev": true,
       "dependencies": {
         "mkdirp": "^1.0.4",
         "strip-ansi": "^6.0.1",
@@ -10976,6 +10977,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -10984,6 +10986,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
       "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+      "dev": true,
       "bin": {
         "mkdirp": "bin/cmd.js"
       },
@@ -10995,6 +10998,7 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -11006,6 +11010,7 @@
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
       "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true,
       "bin": {
         "uuid": "dist/bin/uuid"
       }
@@ -11743,9 +11748,6 @@
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
       "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
       "dev": true,
-      "dependencies": {
-        "graceful-fs": "^4.1.6"
-      },
       "optionalDependencies": {
         "graceful-fs": "^4.1.6"
       }
@@ -18003,7 +18005,6 @@
       "integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==",
       "dev": true,
       "dependencies": {
-        "chokidar": "^3.4.1",
         "graceful-fs": "^4.1.2",
         "neo-async": "^2.5.0"
       },
@@ -18067,7 +18068,6 @@
         "anymatch": "^2.0.0",
         "async-each": "^1.0.1",
         "braces": "^2.3.2",
-        "fsevents": "^1.2.7",
         "glob-parent": "^3.1.0",
         "inherits": "^2.0.3",
         "is-binary-path": "^1.0.0",
@@ -18982,7 +18982,8 @@
     "node_modules/xml": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/xml/-/xml-1.0.1.tgz",
-      "integrity": "sha1-eLpyAgApxbyHuKgaPPzXS0ovweU="
+      "integrity": "sha1-eLpyAgApxbyHuKgaPPzXS0ovweU=",
+      "dev": true
     },
     "node_modules/xml-name-validator": {
       "version": "3.0.0",
@@ -27872,6 +27873,7 @@
       "version": "13.0.0",
       "resolved": "https://registry.npmjs.org/jest-junit/-/jest-junit-13.0.0.tgz",
       "integrity": "sha512-JSHR+Dhb32FGJaiKkqsB7AR3OqWKtldLd6ZH2+FJ8D4tsweb8Id8zEVReU4+OlrRO1ZluqJLQEETm+Q6/KilBg==",
+      "dev": true,
       "requires": {
         "mkdirp": "^1.0.4",
         "strip-ansi": "^6.0.1",
@@ -27882,17 +27884,20 @@
         "ansi-regex": {
           "version": "5.0.1",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
+          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+          "dev": true
         },
         "mkdirp": {
           "version": "1.0.4",
           "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
-          "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw=="
+          "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+          "dev": true
         },
         "strip-ansi": {
           "version": "6.0.1",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
           "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+          "dev": true,
           "requires": {
             "ansi-regex": "^5.0.1"
           }
@@ -27900,7 +27905,8 @@
         "uuid": {
           "version": "8.3.2",
           "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-          "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
+          "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+          "dev": true
         }
       }
     },
@@ -34454,7 +34460,8 @@
     "xml": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/xml/-/xml-1.0.1.tgz",
-      "integrity": "sha1-eLpyAgApxbyHuKgaPPzXS0ovweU="
+      "integrity": "sha1-eLpyAgApxbyHuKgaPPzXS0ovweU=",
+      "dev": true
     },
     "xml-name-validator": {
       "version": "3.0.0",

src/assets/img/icons/spinner.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" xml:space="preserve">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" xml:space="preserve">
-  <path d="M2.1 16C2.1 8.3 8.3 2.1 16 2.1c3.8 0 7.2 1.5 9.7 4l1.4-1.4C24.3 1.9 20.3.1 16 .1 7.2.1.1 7.3.1 16.1l2-.1c0 .1 0 0 0 0z"/>
+  <path d="M24.01 48c-2.93 0-5.92-.52-8.85-1.58-6.25-2.25-11.33-7.33-13.58-13.57C-1.25 25-.25 16.76 4.34 10.22A24.05 24.05 0 0 1 24 0v2.26c-7.08 0-13.74 3.46-17.81 9.27-4.16 5.91-5.07 13.4-2.49 20.55 2.03 5.62 6.6 10.19 12.22 12.22 7.14 2.58 14.64 1.67 20.56-2.49A21.78 21.78 0 0 0 45.74 24H48c0 7.81-3.82 15.16-10.22 19.66A23.846 23.846 0 0 1 24.01 48z"/>
 </svg>

src/layouts/component-test/component-test.vue

@@ -28,6 +28,19 @@
       radioID="backglass"
       />
     </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Loader</h4>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col my-3 d-flex align-items-center">
+        <loader
+          sizeInRem="2"
+          loaderColor="blue"
+        />
+      </div>
+    </div>
     <div class="row my-4">
       <div class="col">
           <h4 class="m-0 p-2 bg-light rounded">Buttons</h4>
@@ -74,22 +87,22 @@
         groupName="demo"
         ariaLabelBy="vehicle-year"
         radioID="2021"
-        spinnerColor="blue"
+        loaderColor="blue"
-        spinnerPosition="right"
+        loaderPosition="right"
         />
         <radioList
         groupName="demo"
         ariaLabelBy="vehicle-year"
         radioID="2020"
-        spinnerColor="blue"
+        loaderColor="blue"
-        spinnerPosition="right"
+        loaderPosition="right"
         />
         <radioList
         groupName="demo"
         ariaLabelBy="vehicle-year"
         radioID="2019"
-        spinnerColor="blue"
+        loaderColor="blue"
-        spinnerPosition="right"
+        loaderPosition="right"
         />
       </div>
     </div>
@@ -219,12 +232,13 @@
 </template>
 
 <script>
-  import buttonPrimary from "@/uxComponents/buttonPrimary/buttonPrimary";
+  import buttonPrimary from "@/ux-components/button-primary/button-primary";
-  import buttonSecondary from "@/uxComponents/buttonSecondary/buttonSecondary";
+  import buttonSecondary from "@/ux-components/button-secondary/button-secondary";
-  import radioCard from "@/uxComponents/radioCard/radioCard";
+  import radioCard from "@/ux-components/radio-card/radio-card";
-  import listButton from "@/uxComponents/listButton/listButton";
+  import listButton from "@/ux-components/list-button/list-button";
-  import radioList from "@/uxComponents/radioList/radioList";
+  import radioList from "@/ux-components/radio-list/radio-list";
-  import alert from "@/uxComponents/alert/alert";
+  import alert from "@/ux-components/alert/alert";
+  import loader from "@/ux-components/loader/loader";
   export default {
     name: "App",
     components: {
@@ -233,7 +247,8 @@
       radioCard,
       listButton,
       radioList,
-      alert
+      alert,
+      loader
     },
     data() {
       return {

src/styles/common-radio-styles.scss

@@ -38,7 +38,7 @@
         }
       }
       //Add spinner. Specify width and height
-      @include spinner(1rem,1rem);
+      @include loader();
     }
   }
 }

src/styles/mixins/customMixins.scss

@@ -7,8 +7,9 @@
 
 //Spinner
 //Choose color and position
-@mixin spinner($width, $height) {
+@mixin loader() {
-  &.spinner {
+  .loader {
+    display: flex;
     //Open an overlay to prevent page interaction
     &:before {
       content: '';
@@ -26,9 +27,9 @@
       content: '';
       mask: url(../../assets/img/icons/spinner.svg);
       mask-size: cover;
-      position: absolute;
+      position: relative;
-      width: $width;
+      width: 100%;
-      height: $height;
+      height: 100%;
       animation: rotation 1s infinite linear;
       @keyframes rotation {
         100% {

src/ux-components/loader/loader.spec.js

@@ -0,0 +1 @@
+test.todo("some test to be written in the future");

src/ux-components/loader/loader.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="loader"
+    v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
+    v-bind:class="[this.loaderColor, this.loaderPosition]"
+  ></div>
+</template>
+
+<script>
+export default {
+  name: "loader",
+  /* Specify size in rem where 16px = 1rem */
+  props: {
+    sizeInRem: {
+      type: Number,
+      default: 1
+    },
+    /* Color options: red, green, blue, white, black */
+    loaderColor: {
+      type: String
+    },
+    /* Position options: center, right, left (OPTIONAL) */
+    loaderPosition: {
+      type: String
+    }
+  },
+}
+</script>
+
+<style lang="scss">
+  @include loader();
+</style>

src/ux-components/radio-list/radio-list.vue

@@ -2,14 +2,14 @@
   <div class="radiogroup radio-list-button d-flex flex-column w-100">
     <input type="radio" v-bind:id="radioID" v-bind:name="groupName" v-bind:value="radioID">
     <label role="radio" tabindex="0" aria-checked="false" v-bind:for="radioID" class="mb-2 d-flex align-items-center p-2"
-    v-on:click="showLoader()"
+    
-    v-bind:class="[this.isLoading ? 'spinner' : 'not-loading',this.isError ? 'error' : '', this.spinnerColor, this.spinnerPosition]"
     >{{radioID}}</label>
     <p class="small">{{errorMessage}}</p>
   </div>
 </template>
 
 <script>
+import loader from "@/ux-components/loader/loader";
 export default {
   name: "radioList",
   props: [
@@ -17,8 +17,8 @@ export default {
     "ariaLabelBy",
     "radioID",
     "errorMessage",
-    "spinnerColor",
+    "loaderColor",
-    "spinnerPosition"
+    "loaderPosition"
 
   ],
   data() {