Merge branch 'develop' into features/funnel-transitions

src/layouts/componentTest/componentTest.vue

@@ -30,10 +30,18 @@
         />
       </div>
     </div>
+    <div class="row">
+      <div class="col my-3 d-flex align-items-center">
+        <buttonSecondary
+          buttonText="Secondary"
+        />
+      </div>
+    </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
         <listButton
           buttonText="List Button"
+          errorText="Test error message"
         />
       </div>
     </div>
@@ -94,6 +102,7 @@
 
 <script>
 import buttonPrimary from "@/uxComponents/buttonPrimary/buttonPrimary";
+import buttonSecondary from "@/uxComponents/buttonSecondary/buttonSecondary";
 import radioCard from "@/uxComponents/radioCard/radioCard";
 import listButton from "@/uxComponents/listButton/listButton";
 import radioQuestion from "@/commonComponents/radioQuestion/radioQuestion";
@@ -101,6 +110,7 @@ export default {
   name: "App",
   components: {
     buttonPrimary,
+    buttonSecondary,
     radioCard,
     listButton,
     radioQuestion

src/styles/commonButtonStyles.scss

@@ -3,7 +3,7 @@
   &.btn-primary {
     position: relative;
     background: $blue-700;
-    background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%);
+    @include blue-gradient;
     border: none;
     border-radius: $border-radius-lg;
     height: 48px;
@@ -43,17 +43,92 @@
       border-radius: $border-radius-lg;
     }
   }
+  &.btn-secondary {
+    position: relative;
+    background: transparent;
+    border: 1px solid $blue;
+    border-radius: $border-radius-lg;
+    height: 48px;
+    color: $blue;
+    transition: all 150ms linear;
+    &:hover {
+      color: $white;
+      @include blue-gradient;
+    }
+    &:focus, // Mouse, touch, stylus focus
+    &:focus-visible { // Keyboard focus for accessibility
+      outline: none;
+      box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue-700;
+    }
+    &.button-loader {
+      padding: 0 40px 0 12px;
+      &:after {
+        content: url(../../assets/img/icons/button-spinner-blue.svg);
+        position: absolute;
+        right: 14px;
+        width: 16px;
+        height: 16px;
+        margin-left: 12px;
+        animation: rotation 1s infinite linear;
+        @keyframes rotation {
+          100% {
+            transform:rotate(360deg);
+          }
+        }
+      }
+      &:focus:hover {
+        &:after {
+          content: url(../../assets/img/icons/button-spinner-white.svg);
+          position: absolute;
+          right: 14px;
+          width: 16px;
+          height: 16px;
+          margin-left: 12px;
+          animation: rotation 1s infinite linear;
+          @keyframes rotation {
+            100% {
+              transform:rotate(360deg);
+            }
+          }
+        }
+      }
+    }
+    &:disabled {
+      background: transparent;
+      color: $gray !important;
+      height: 48px;
+      border: 1px solid $gray-300;
+      border-radius: $border-radius-lg;
+    }
+  }
   &.list-button {
     position: relative;
     background: $white;
     height: 48px;
     transition: all 150ms linear;
     border-radius: $border-radius-lg;
-    border: 1px solid rgba($gray-300,.3);
+    border: 1px solid $gray-500;
     width: 100%;
+    &:hover {
+      box-shadow: 0 0 0 4px $blue-100;
+    }
     &:focus, // Mouse, touch, stylus focus
     &:focus-visible { // Keyboard focus for accessibility
-      box-shadow: none;
+      box-shadow: 0 0 0 2px $blue;
+    }
+    &:active {
+      background: $blue-100;
+      border: 1px solid $blue;
+    }
+    + label {
+      display: none;
+    }
+    &.error {
+      border: 1px solid $danger;
+      ~ label {
+        display: flex;
+        color: $danger;
+      }
     }
     &.button-loader {
       padding: 0 40px 0 12px;

src/styles/commonStyles.scss

@@ -22,3 +22,10 @@ body {
       cursor: pointer;
     }
   }
+
+//Custom Mixins
+
+//Blue gradient background mixin
+@mixin blue-gradient {
+  background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%);
+}

src/styles/uxVariables.scss

@@ -2,7 +2,7 @@
 
 // White/black
 $white:    #FFFFFF;
-$black:    #000;
+$black:    #000000;
 
 // Blues
 $blue-100:   #E4F1F7;// Used in theme
@@ -10,42 +10,42 @@ $blue-200:   #C1DFEE;
 $blue-300:   #9FCEE6;
 $blue-400:   #69ADCF;// Used in theme
 $blue-500:   #3B8FB8;
-$blue:       #167CAC;// Default Blue
+$blue:       #1574A1;// Default Blue
 $blue-700:   #06577C;
 $blue-800:   #003D58;
 $blue-900:   #002433;// Used in theme
 
 // Reds
 $red-100:    #FFE6E4;
-$red-200:    #FDC0BB;
-$red-300:    #FB9A93;
-$red-400:    #EB5E54;
-$red:        #DA291C;// Default Red
-$red-600:    #B0160B;
-$red-700:    #870900;
-$red-800:    #5D0600;
+$red-200:    #FCBFBB;
+$red-300:    #F89892;
+$red-400:    #E65C53;
+$red:        #D4281C;// Default Red
+$red-600:    #AC160B;
+$red-700:    #840900;
+$red-800:    #5B0600;
 $red-900:    #330300;
 
 // Greens
 $green-100:  #E3F2EA;
 $green-200:  #BCEDD4;
 $green-300:  #94D7B6;
-$green-400:  #EB594F;// Used in theme
+$green-400:  #5ABC8C;// Used in theme
 $green-500:  #2CA168;
-$green:      #C40E01;// Default Green
+$green:      #0C7E47;// Default Green
 $green-700:  #006A36;
 $green-800:  #004F28;
 $green-900:  #00331A;
 
 // Yellows
 $yellow-100: #FFF5EB;
-$yellow-200: #FFE7C7;
-$yellow-300: #FFD8A1;
-$yellow-400: #FFB25C;
-$yellow:     #F88F1C;// Default Yellow
-$yellow-600: #C76902;
-$yellow-700: #964E00;
-$yellow-800: #643400;
+$yellow-200: #FFE1C6;
+$yellow-300: #FFCAA0;
+$yellow-400: #F5975D;
+$yellow:     #E86421;// Default Yellow
+$yellow-600: #BB4B06;
+$yellow-700: #8E3C00;
+$yellow-800: #602D00;
 $yellow-900: #331A00;
 
 // Grays
@@ -157,3 +157,9 @@ $grid-breakpoints: (
   lg: 1074px,
   xl: 1416px
 );
+
+//Shadow
+$box-shadow:                  0 .5rem 1rem rgba($black, .15);
+$box-shadow-sm:               0 .125rem .25rem rgba($black, .075);
+$box-shadow-lg:               0 1rem 3rem rgba($black, .25);//Safelite default
+$box-shadow-inset:            inset 0 1px 2px rgba($black, .075);

src/uxComponents/buttonSecondary/buttonSecondary.spec.js

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

src/uxComponents/buttonSecondary/buttonSecondary.vue

@@ -0,0 +1,31 @@
+<template>
+  <button
+    :disabled="isDisabled"
+    :aria-disabled="isDisabled"
+    class="btn btn-secondary 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: "buttonSecondary",
+  props: {
+    buttonText: String
+  },
+  data() {
+    return {
+      isLoading: false,
+      isDisabled: false,
+    };
+  },
+  methods: {
+    showLoader() {
+      this.isLoading = true;
+    },
+  },
+};
+</script>

src/uxComponents/listButton/listButton.vue

@@ -1,22 +1,27 @@
 <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>
+  <div class="d-flex flex-column w-100">
+    <button
+      class="btn list-button d-flex align-items-center"
+      v-on:click="showLoader()"
+      v-bind:class="[this.isLoading ? 'button-loader' : 'not-loading',this.isError ? 'error' : '']"
+      >
+      {{ this.buttonText }}
+    </button>
+    <label class="small mt-1">{{ this.errorText }}</label>
+  </div>
 </template>
 
 <script>
 export default {
   name: "listButton",
   props: {
-    buttonText: String
+    buttonText: String,
+    errorText: String
   },
   data() {
     return {
       isLoading: false,
+      isError: false
     };
   },
   methods: {