Merge pull request #13 from Safelite/brm-buttons

Add styled buttons and add props for button copy. Add button animation.

src/Funnel1.vue

@@ -1,43 +1,85 @@
 <template>
-<router-view></router-view>
-<div class="container-fluid">
+  <div class="container-fluid">
     <div class="row">
-        <div class="col my-3 d-flex justify-content-center">
-            <vehicleImage />
-        </div>
+      <div class="col my-3 d-flex justify-content-center">
+        <vehicleImage/>
+      </div>
     </div>
     <div class="row">
-        <div class="col">
-            <p class="text-center text-secondary fs-5 mb-4">Select a year to get started</p>
-            <p class="text-center fs-6 fw-bold">What year is your vehichle?</p>
-        </div>
+      <div class="col">
+        <p class="text-center text-secondary fs-5 mb-4">Select a year to get started</p>
+        <p class="text-center fs-6 fw-bold">What year is your vehichle?</p>
+      </div>
     </div>
     <div class="row">
-        <div class="col">
-            <buttonFunnel />
-            <confetti />
-        </div>
+      <div class="col">
+        <buttonFunnel/>
+        <confetti/>
+      </div>
     </div>
     <div class="row mt-5">
-        <imageButton btnText="windshield-damage.svg" altText="Windshield" damageTitle="Windshield" ariaLabel="Windshield" />
-        <imageButton btnText="side-window-damage.svg" altText="Side Window" damageTitle="Side door" ariaLabel="Side door" />
-        <imageButton btnText="back-glass-damage.svg" altText="Back Glass" damageTitle="Back glass" ariaLabel="Back glass" />
+      <imageButton
+        btnText="windshield-damage.svg"
+        altText="Windshield"
+        damageTitle="Windshield"
+        ariaLabel="Windshield"
+      />
+      <imageButton
+        btnText="side-window-damage.svg"
+        altText="Side Window"
+        damageTitle="Side door"
+        ariaLabel="Side door"
+      />
+      <imageButton
+        btnText="back-glass-damage.svg"
+        altText="Back Glass"
+        damageTitle="Back glass"
+        ariaLabel="Back glass"
+      />
     </div>
-</div>
+    <div class="row">
+      <div class="col my-3 d-flex align-items-center">
+        <buttonPrimary
+          buttonText="Primary"
+          buttonType="btn-primary"
+        />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col my-3 d-flex align-items-center">
+        <buttonPrimary
+          buttonText="Primary Focus"
+          buttonType="btn-primary-focus"
+        />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col my-3 d-flex align-items-center">
+        <buttonPrimary
+          buttonText="Disabled"
+          buttonType="disabled"
+        />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import buttonFunnel from './components/buttons/buttonFunnel';
-import vehicleImage from './components/vehicleImage';
-import imageButton from './components/imageButton';
-import confetti from './components/confetti';
-export default {
+  import buttonFunnel from './components/buttons/buttonFunnel';
+  import vehicleImage from './components/vehicleImage';
+  import imageButton from './components/imageButton';
+  import confetti from './components/confetti';
+  import buttonPrimary from './components/buttons/buttonPrimary';
+
+
+  export default {
     name: 'App',
     components: {
-        buttonFunnel,
-        vehicleImage,
-        imageButton,
-        confetti
+      buttonFunnel,
+      vehicleImage,
+      imageButton,
+      confetti,
+      buttonPrimary
     }
-}
+  }
 </script>

src/assets/img/icons/button-spinner.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="#fff"/>
+</svg>

src/assets/scss/_CustomVariables.scss

@@ -24,6 +24,7 @@ $grays: (
 $blue-200:   #E7F1F6;
 $blue-300:   #B9D7E6;
 $blue-400:   #125B7E;
+$blue-700:   #06577C;
 $blue:       #167CAC;//Default Blue (Blue 500)
 $indigo:     #6610f2;
 $purple:     #6f42c1;
@@ -95,3 +96,9 @@ $font-family-code:            $font-family-monospace;
 
 //Gutters
 $grid-gutter-width:           .75rem;
+
+//Border Radius
+$border-radius:               .25rem;
+$border-radius-sm:            .2rem;
+$border-radius-lg:            .5rem;//Used for buttons. Can be used for other things, of course.
+$border-radius-pill:          50rem;

src/assets/scss/components/_buttons.scss

@@ -1,15 +1,50 @@
 //Custom button styles
 .btn {
-  &.btn-secondary {
+  &.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%);
+    border: none;
+    border-radius: $border-radius-lg;
+    height: 48px;
+    color: $white;
+    transition: all 150ms linear;
+    &:hover {
+      background: linear-gradient(270deg, rgba(6,87,124,1) 0%, rgba(6,87,124,1) 100%);
+    }
+    &.button-loader {
+      padding: 0 40px 0 12px;
+      &:after {
+        content: url(../../assets/img/icons/button-spinner.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: $gray-100;
+    background: linear-gradient(270deg, $gray-100 0%, $gray-100 100%);
+    color: $gray-400;
+  }
+  &.btn-primary-focus {
     position: relative;//Required for :after pseduo to position correctly
     margin: 5px;//Because :after is position absolute and isn't accounted for in DOM
-    border-radius: 8px;//To match Figma border radius
-    &:after {
+    &:before {
       content: "";
       position: absolute;
       width: calc(100% + 12px);
       height: calc(100% + 12px);
-      border: 3px solid $secondary;
+      border: 3px solid $blue-700;
       background-color: $white;
       border-radius: 12px;
       left: -6px;

src/components/buttons/buttonDisabled.vue

@@ -0,0 +1,10 @@
+<template>
+  <button type="button" class="btn btn-primary" disabled>{{btnText}}</button>
+</template>
+
+<script>
+export default {
+  name: 'buttonDisabled',
+  props: ['btnText']
+}
+</script>

src/components/buttons/buttonPrimary.vue

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

src/components/buttons/buttonPrimaryFocus.vue

@@ -0,0 +1,10 @@
+<template>
+  <button type="button" class="btn btn-primary-focus d-flex align-items-center">{{btnText}}</button>
+</template>
+
+<script>
+export default {
+  name: 'buttonPrimaryFocus',
+  props: ['btnText']
+}
+</script>