Merge branch 'develop' into feature/dynamic-routing

package-lock.json

@@ -2724,7 +2724,6 @@
         "thread-loader": "^2.1.3",
         "url-loader": "^2.2.0",
         "vue-loader": "^15.9.2",
-        "vue-loader-v16": "npm:vue-loader@^16.1.0",
         "vue-style-loader": "^4.1.2",
         "webpack": "^4.0.0",
         "webpack-bundle-analyzer": "^3.8.0",
@@ -3026,7 +3025,6 @@
         "merge-source-map": "^1.1.0",
         "postcss": "^7.0.36",
         "postcss-selector-parser": "^6.0.2",
-        "prettier": "^1.18.2",
         "source-map": "~0.6.1",
         "vue-template-es2015-compiler": "^1.9.0"
       },
@@ -4985,7 +4983,6 @@
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
-        "fsevents": "~2.3.2",
         "glob-parent": "~5.1.2",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
@@ -7279,8 +7276,7 @@
         "esprima": "^4.0.1",
         "estraverse": "^4.2.0",
         "esutils": "^2.0.2",
-        "optionator": "^0.8.1",
+        "optionator": "^0.8.1"
-        "source-map": "~0.6.1"
       },
       "bin": {
         "escodegen": "bin/escodegen.js",
@@ -10827,7 +10823,6 @@
         "@jest/types": "^24.9.0",
         "anymatch": "^2.0.0",
         "fb-watchman": "^2.0.0",
-        "fsevents": "^1.2.7",
         "graceful-fs": "^4.1.15",
         "invariant": "^2.2.4",
         "jest-serializer": "^24.9.0",
@@ -17893,8 +17888,7 @@
       "dependencies": {
         "chokidar": "^3.4.1",
         "graceful-fs": "^4.1.2",
-        "neo-async": "^2.5.0",
+        "neo-async": "^2.5.0"
-        "watchpack-chokidar2": "^2.0.1"
       },
       "optionalDependencies": {
         "chokidar": "^3.4.1",
@@ -18269,7 +18263,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",

src/App.vue

@@ -28,23 +28,13 @@
       <div class="col my-3 d-flex align-items-center">
         <buttonPrimary
           buttonText="Primary"
-          class="btn-primary"
         />
       </div>
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-        <buttonPrimary
+        <listButton
-          buttonText="Primary Focus"
+          buttonText="List Button"
-          class="btn-primary-focus"
-        />
-      </div>
-    </div>
-    <div class="row">
-      <div class="col my-3 d-flex align-items-center">
-        <buttonPrimary
-          buttonText="Disabled"
-          class="disabled"
         />
       </div>
     </div>
@@ -59,11 +49,13 @@
 <script>
 import buttonPrimary from "@/uxComponents/buttonPrimary/buttonPrimary";
 import radioCard from "@/uxComponents/radioCard/radioCard";
+import listButton from "@/uxComponents/listButton/listButton";
 export default {
   name: "App",
   components: {
     buttonPrimary,
     radioCard,
+    listButton
   },
 };
 </script>

src/assets/img/icons/button-spinner-green.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" 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" fill="#73e5b9"/>
+</svg>

src/assets/scss/components/_buttons.scss

@@ -1,7 +1,6 @@
 //Custom button styles
 .btn {
-  &.btn-primary,
+  &.btn-primary {
-  &.btn-primary-focus {
     position: relative;
     background: $blue-700;
     background: linear-gradient(270deg, rgba(21,116,161,1) 0%, rgba(18,91,126,1) 100%);
@@ -13,10 +12,15 @@
     &:hover {
       background: linear-gradient(270deg, rgba(6,87,124,1) 0%, rgba(6,87,124,1) 100%);
     }
+    &:focus, // Mouse, touch, stylus focus
+    &:focus-visible { // Keyboard focus for accessibility
+      outline: none;
+      box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
+    }
     &.button-loader {
       padding: 0 40px 0 12px;
       &:after {
-        content: url(../../assets/img/icons/button-spinner.svg);
+        content: url(../../assets/img/icons/button-spinner-white.svg);
         position: absolute;
         right: 14px;
         width: 16px;
@@ -31,62 +35,38 @@
       }
     }
   }
-  &.disabled {
+  &:disabled {
-    background: $gray-100;
+    background: $gray-100 !important;
-    background: linear-gradient(270deg, $gray-100 0%, $gray-100 100%);
+    background: linear-gradient(270deg, $gray-100 0%, $gray-100 100%) !important;
-    color: $gray-400;
+    color: $gray-400 !important;
+    height: 48px;
+    border: none;
+    border-radius: $border-radius-lg;
   }
-  &.btn-primary-focus {
+  &.list-button {
-    position: relative;//Required for :after pseduo to position correctly
+    position: relative;
-    margin: 5px;//Because :after is position absolute and isn't accounted for in DOM
+    background: $white;
-    &:before {
+    height: 48px;
-      content: "";
+    transition: all 150ms linear;
-      position: absolute;
+    border-radius: $border-radius-lg;
-      width: calc(100% + 12px);
+    border: 1px solid rgba($gray-300,.3);
-      height: calc(100% + 12px);
+    width: 100%;
-      border: 3px solid $blue-700;
+    &.button-loader {
-      background-color: $white;
+      padding: 0 40px 0 12px;
-      border-radius: 12px;
+      &:after {
-      left: -6px;
+        content: url(../../assets/img/icons/button-spinner-green.svg);
-      top: -6px;
+        position: absolute;
-      z-index: -1;
+        right: 14px;
+        width: 16px;
+        height: 16px;
+        margin-left: 12px;
+        animation: rotation 1s infinite linear;
+        @keyframes rotation {
+          100% {
+            transform:rotate(360deg);
+          }
+        }
+      }
     }
   }
-  &.btn-funnel {
-    display: flex;
-    justify-content: space-between;
-  }
 }
-// Non-Bootstrap button
-// Intended to be used without .btn class
-.btn-damage {
-  width: 100%;
-  background-color: $white;
-  border: 1px solid #b3b4b5;
-  &:focus {
-    background-color: #e7f1f6;
-    border: 1px solid $blue;
-  }
-  &:focus-visible { // For keyboard/screenreader
-    background-color: #e7f1f6;
-    outline: none;
-    box-shadow: 0 0 0 2px $blue;
-  }
-}
-
-// Non-Bootstrap button
-// Intended to be used without .btn class
-.btn-damage {
-  width: 100%;
-  background-color: $white;
-  border: 1px solid #b3b4b5;
-  &:focus {
-    background-color: #e7f1f6;
-    border: 1px solid $blue;
-  }
-  &:focus-visible { // For keyboard/screenreader
-    background-color: #e7f1f6;
-    outline: none;
-    box-shadow: 0 0 0 2px $blue;
-  }
-}

src/uxComponents/buttonPrimary/buttonPrimary.vue

@@ -1,6 +1,8 @@
 <template>
   <button
-    class="btn d-flex align-items-center"
+    :disabled="isDisabled"
+    :aria-disabled="isDisabled"
+    class="btn btn-primary d-flex align-items-center"
     v-on:click="showLoader()"
     v-bind:class="[this.isLoading ? 'button-loader' : 'not-loading']"
     >
@@ -17,6 +19,7 @@ export default {
   data() {
     return {
       isLoading: false,
+      isDisabled: false,
     };
   },
   methods: {

src/uxComponents/listButton/listButton.spec.js

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

src/uxComponents/listButton/listButton.vue

@@ -0,0 +1,28 @@
+<template>
+  <button
+    class="btn list-button d-flex align-items-center"
+    v-on:click="showLoader()"
+    v-bind:class="[this.isLoading ? 'button-loader' : 'not-loading']"
+    >
+    {{ this.buttonText }}
+  </button>
+</template>
+
+<script>
+export default {
+  name: "listButton",
+  props: {
+    buttonText: String
+  },
+  data() {
+    return {
+      isLoading: false,
+    };
+  },
+  methods: {
+    showLoader() {
+      this.isLoading = true;
+    },
+  },
+};
+</script>

src/uxComponents/radioCard/radioCard.vue

@@ -3,12 +3,12 @@
     <input
       type="radio"
       class="position-absolute opacity-0"
-      v-bind:class="className"
+      :class="className"
-      v-bind:id="radioID"
+      :id="radioID"
-      v-bind:name="groupName"
+      :name="groupName"
       :value="radioLabel"
       v-model="picked"
-      v-bind:tabindex="tabIndex"
+      :tabindex="tabIndex"
     />
     <label
       v-bind:for="radioID"