From 1f8432924a5ab8d47a811326d34b5ded405b2d7f Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 15 Oct 2021 10:16:33 -0400
Subject: [PATCH 1/2] Create image button, set base font size, set custom
 gutters.

---
 src/Funnel1.vue                             | 20 ++++++++------------
 src/assets/img/icons/back-glass-damage.svg  | 10 ++++++++++
 src/assets/img/icons/side-window-damage.svg | 10 ++++++++++
 src/assets/img/icons/windshield-damage.svg  | 12 ++++++++++++
 src/assets/scss/_CustomVariables.scss       |  3 +++
 src/assets/scss/_GlobalStyles.scss          |  2 ++
 src/assets/scss/components/_buttons.scss    | 16 ++++++++++++++++
 src/components/imageButton.vue              | 15 +++++++++++++++
 8 files changed, 76 insertions(+), 12 deletions(-)
 create mode 100644 src/assets/img/icons/back-glass-damage.svg
 create mode 100644 src/assets/img/icons/side-window-damage.svg
 create mode 100644 src/assets/img/icons/windshield-damage.svg
 create mode 100644 src/components/imageButton.vue

diff --git a/src/Funnel1.vue b/src/Funnel1.vue
index a30f90bd8..e435b8376 100644
--- a/src/Funnel1.vue
+++ b/src/Funnel1.vue
@@ -17,29 +17,25 @@
       </div>
     </div>
     <div class="row mt-5">
-      <div class="col">
-        <buttonPrimary/>
-        <buttonSecondary/>
-        <textInput/>
-      </div>
+      <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>
 </template>
 
 <script>
-  import buttonPrimary from './components/buttons/buttonPrimary';
-  import buttonSecondary from './components/buttons/buttonSecondary';
   import buttonFunnel from './components/buttons/buttonFunnel';
-  import textInput from './components/forms/textInput';
   import vehicleImage from './components/vehicleImage';
+  import imageButton from './components/imageButton';
+
+
   export default {
     name: 'App',
     components: {
-      buttonPrimary,
-      buttonSecondary,
       buttonFunnel,
-      textInput,
-      vehicleImage
+      vehicleImage,
+      imageButton
     }
   }
 </script>
diff --git a/src/assets/img/icons/back-glass-damage.svg b/src/assets/img/icons/back-glass-damage.svg
new file mode 100644
index 000000000..59379e6de
--- /dev/null
+++ b/src/assets/img/icons/back-glass-damage.svg
@@ -0,0 +1,10 @@
+<svg version="1.1" id="back-glass-damage" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 72.8 33.1" xml:space="preserve">
+  <style>
+    .st0,.st2{fill:#fff;stroke:#000;stroke-width:.75;stroke-linecap:round;stroke-linejoin:round}.st2{fill:none}
+  </style>
+  <path class="st0" d="M5.3.4h17.5l3.8 1.1h27.5L62.2.4c7.6 0 10.1 6.2 10.1 13.8v4.7c0 7.7-2.5 13.8-10.1 13.8l-8.1-1.1H26.6l-3.8 1.1H5.3c-.8 0-1.5-.2-2.1-.7-.6-.5-1.1-1.1-1.3-1.9C1.2 27.7.4 23.5.4 17.4s.8-12 1.5-14.5c.2-.7.7-1.4 1.3-1.9C3.7.6 4.5.4 5.3.4z"/>
+  <path class="st0" d="m55.9 3.4-5.7 2.5c-.8.3-1.3 1.6-1.1 2.8.6 5.3.6 10.6 0 15.8-.1 1.2.4 2.4 1.1 2.8l5.7 2.5c1 .4 1.9-.1 2.3-1.3 2.2-7.2 2.2-16.7 0-23.8-.3-1.2-1.3-1.8-2.3-1.3z"/>
+  <path d="m6.8 5.4 4.4 2c.2.1.3.2.4.3.1.2.1.3.1.5-.4 2.8-.6 5.6-.6 8.4 0 2.8.2 5.6.6 8.4 0 .2 0 .3-.1.5-.1.1-.2.3-.3.3l-4.4 2.3c-.1.1-.2.1-.3.1-.1 0-.2 0-.3-.1-.1 0-.2-.1-.3-.2-.1-.1-.1-.2-.2-.3-.5-1.3-1.3-4.5-1.3-11.1S5.3 7 5.8 5.8c0-.1.1-.2.2-.3 0-.1.1-.1.2-.2.1 0 .2-.1.3-.1.1.1.2.1.3.2z" fill="#d92d27" stroke="#000" stroke-width=".75" stroke-linecap="round" stroke-linejoin="round"/>
+  <path class="st0" d="M10.8 3.2h7.5c.1 0 .1.1.1.1v.2c0 .1 0 .1-.1.2l-1.4 2c-.1.1-.2.2-.3.2 0 .1-.1.1-.2.1h-1.3c-.4 0-.8-.1-1.1-.2l-3.5-2.4c0-.1.1-.1.1-.2h.2zM50 3.9c.1 0 .1-.1.1-.2v-.2c0-.1-.1-.1-.1-.2-.1 0-.1-.1-.2-.1H36c-.1 0-.2 0-.3.1-.1.1-.2.1-.3.2-.4.5-1.1 1.5-1.5 2.1v.2c0 .1.1.2.1.2h11.5c.2 0 .3 0 .4-.1l4.1-2zM31.7 6c.1 0 .2 0 .3-.1.1-.1.2-.1.3-.2.4-.5 1.1-1.5 1.5-2.1v-.2l-.1-.1h-13c-.1 0-.2 0-.3.1-.1.1-.2.1-.3.2-.3.4-1.1 1.5-1.5 2.1v.2l.1.1h13zM10.8 29.9H19.1c.1 0 .1-.1.1-.1v-.2c0-.1 0-.1-.1-.2l-1.4-2c-.1-.1-.2-.2-.3-.2-.1-.1-.2-.1-.3-.1h-2c-.4 0-.8.1-1.1.2l-3.5 2.4c0 .1.1.1.1.2h.2zM50 29.2c.1 0 .1.1.1.2v.2c0 .1-.1.1-.1.2-.1.1-.1.1-.2.1H36c-.1 0-.2 0-.3-.1-.1-.1-.2-.1-.3-.2-.4-.5-1.1-1.5-1.5-2.1v-.2l.1-.1h11.5c.2 0 .3 0 .4.1l4.1 1.9zM31.7 27.1c.1 0 .2 0 .3.1.1.1.2.1.3.2.4.5 1.1 1.5 1.5 2.1v.2l-.1.1H21.5c-.1 0-.2 0-.3-.1-.1-.1-.2-.1-.3-.2-.4-.5-1.1-1.5-1.5-2.1v-.2l.1-.1h12.2z"/>
+  <path class="st2" d="M3.1 28.6h1c.1 0 .2.1.3.1.1.1.2.2.2.3l1.1 3.4M69.6 7.9c-1.9-1.1-3.5-2.7-4.6-4.7-.2-.4.6-2.2.6-2.2V.9M3.1 4.3h1c.1 0 .2-.1.3-.1.2-.2.3-.3.3-.4L5.8.4M69.6 25.1c-1.9 1.1-3.5 2.7-4.6 4.7-.2.4.6 2.2.6 2.2v.1"/>
+</svg>
diff --git a/src/assets/img/icons/side-window-damage.svg b/src/assets/img/icons/side-window-damage.svg
new file mode 100644
index 000000000..356145856
--- /dev/null
+++ b/src/assets/img/icons/side-window-damage.svg
@@ -0,0 +1,10 @@
+<svg version="1.1" id="side-window-damage" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 72.8 24.8" xml:space="preserve">
+  <style>
+    .st1,.st2,.st3{fill:none;stroke:#000;stroke-width:.75;stroke-linecap:round;stroke-linejoin:round}.st2,.st3{fill:#fff}.st3{fill:#d92d27}
+  </style>
+  <path d="m66.2 19.8 5.4-.7s-1-1.6.5-2.3c0 0 3.9-8.5-17.1-8.8C55 8 41.2.9 38.5.7c0 0-9.5-.9-18.5-.1-.4 0-.8.1-1.2.3-1 .5-3.3 1.6-5.1 2.7-3.1 2-6.7 3-10.3 3l-.1 1.2s-3 .3-2.9 7c0 .4.1.9.3 1.3.2.4.5.7.8 1 1.1.9 3.1 2 6.4 2.8" fill="#fff"/>
+  <path class="st1" d="m66.2 19.8 5.4-.7s-1-1.6.5-2.3c0 0 3.9-8.5-17.1-8.8C55 8 41.2.9 38.5.7c0 0-9.5-.9-18.5-.1-.4 0-.8.1-1.2.3-1 .5-3.3 1.6-5.1 2.7-3.1 2-6.7 3-10.3 3l-.1 1.2s-3 .3-2.9 7c0 .4.1.9.3 1.3.2.4.5.7.8 1 1.1.9 3.1 2 6.4 2.8"/>
+  <path class="st2" d="M13.7 24.5c3.2 0 5.8-2.6 5.8-5.8 0-3.2-2.6-5.8-5.8-5.8s-5.8 2.6-5.8 5.8c0 3.2 2.6 5.8 5.8 5.8zM54.7 18.6c0 1.2.3 2.3 1 3.2.6 1 1.5 1.7 2.6 2.1 1.1.4 2.2.6 3.4.3 1.1-.2 2.2-.8 3-1.6.8-.8 1.4-1.9 1.6-3 .2-1.1.1-2.3-.3-3.4s-1.2-2-2.1-2.6c-1-.6-2.1-1-3.2-1-.8 0-1.5.2-2.2.4-.7.3-1.3.7-1.9 1.3-.5.5-1 1.2-1.3 1.9-.5.9-.6 1.7-.6 2.4z"/>
+  <path class="st1" d="M64.2 11.5s.3-.2 1.2-.3h.3c1.2.4 2.4 1 3.4 2-1.1-.1-2.2-.4-3.3-.8M31.7 10.3c-.4-.2-.4-.4-.4-.5 0-.5.6-.6 1.3-.6h.6c.4 0 .7.1 1.1.2.2 0 .7.2.7.6 0 .5-.6.5-1.3.5M18.1 9.2c-.6-.2-.5-.5-.5-.6 0-.5.6-.6 1.3-.6h.6c1.8.1 1.8.6 1.8.8 0 .5-.6.6-1.3.6M15.5 22c-.7.4-1.6.6-2.4.4-.8-.1-1.6-.5-2.2-1.1-.6-.6-1-1.4-1.1-2.2-.1-.8.1-1.7.5-2.4s1.1-1.3 1.9-1.6c.8-.3 1.7-.4 2.5-.1.8.2 1.5.7 2.1 1.4.5.7.8 1.5.8 2.3M58.6 15.2c.7-.4 1.6-.6 2.4-.4.8.1 1.6.5 2.2 1.1.6.6 1 1.4 1.1 2.2.1.8-.1 1.7-.5 2.4s-1.1 1.3-1.9 1.6c-.8.3-1.7.4-2.5.1-.8-.2-1.5-.7-2.1-1.4-.5-.7-.8-1.5-.8-2.3M54.7 19.8H19.5M3.3 7.8s11-.5 0 3.1"/>
+  <path class="st3" d="m42.8 8-11.1-.7.1-5.2c4.3.1 8 1.2 10.9 2.3l.1 3.6zM50.6 8.4 44.3 8V5c2.2.9 3.9 1.6 5 2.3.5.5.9.9 1.3 1.1zM30.2 2.1l-.1 5.1-7.7-.4.1-4c2.6-.5 5.1-.7 7.7-.7zM16.6 6.5C17.3 5 19 3.9 21 3.3l-.1 3.5-4.3-.3z"/>
+</svg>
diff --git a/src/assets/img/icons/windshield-damage.svg b/src/assets/img/icons/windshield-damage.svg
new file mode 100644
index 000000000..dfdea1bb1
--- /dev/null
+++ b/src/assets/img/icons/windshield-damage.svg
@@ -0,0 +1,12 @@
+<svg version="1.1" id="windshield-damage" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 72.1 47.1" xml:space="preserve">
+  <style>
+    .st0{fill:#fff}.st1{fill:none;stroke:#000;stroke-width:.75;stroke-linecap:round;stroke-linejoin:round}
+  </style>
+  <path class="st0" d="M5.9 41.3c0 1.4.6 2.8 1.6 3.7 1 1 2.4 1.5 3.8 1.5s2.8-.6 3.8-1.5c1-1 1.6-2.3 1.6-3.7"/>
+  <path class="st1" d="M5.9 41.3c0 1.4.6 2.8 1.6 3.7 1 1 2.4 1.5 3.8 1.5s2.8-.6 3.8-1.5c1-1 1.6-2.3 1.6-3.7"/>
+  <path class="st0" d="M55.1 41.3c0 1.4.6 2.8 1.6 3.8s2.4 1.6 3.8 1.6 2.8-.6 3.8-1.6 1.6-2.4 1.6-3.8"/>
+  <path class="st1" d="M55.1 41.3c0 1.4.6 2.8 1.6 3.8s2.4 1.6 3.8 1.6 2.8-.6 3.8-1.6 1.6-2.4 1.6-3.8"/>
+  <path d="M36.1.4c12.4 0 18.2 1.4 18.2 1.4 5.5.9 8.7 11.1 8.7 11.1h1.1c0-3.7 2-3.7 3.6-3.1 1.1.5 2.1 1.2 2.9 2.1 2 2.4.7 2.6.7 2.6h-7.8l5.9 4.6v18.5c0 3.7-3.1 3.6-3.1 3.6H5.8s-3.1.2-3.1-3.6V19.2l5.9-4.6H.8s-1.3-.2.7-2.6c.8-.9 1.7-1.6 2.9-2.1C5.9 9.3 8 9.2 8 13h1.1s3.2-10.2 8.7-11.1c0-.1 5.9-1.5 18.3-1.5z" fill="#fff" stroke="#000" stroke-width=".75" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M36.1 12.8c12.2 0 22.5.8 22.5.8 0-4-3.7-9.3-3.7-9.3S48.9 3 36.1 3 17.2 4.3 17.2 4.3s-3.7 5.3-3.7 9.3c0 0 10.4-.8 22.6-.8z" fill="#d92d27" stroke="#000" stroke-width=".75" stroke-linecap="round" stroke-linejoin="round"/>
+  <path class="st1" d="M25.7 24.6c6.8-.7 13.6-.7 20.4 0M51.1 24s3.7-3.5 13.2-3.5c0 0 1.8 4.1-3.9 5.2M20.6 24s-3.7-3.5-13.2-3.5c0 0-1.8 4 3.9 5.2M5.9 34.7s33 5.6 60 0"/>
+</svg>
diff --git a/src/assets/scss/_CustomVariables.scss b/src/assets/scss/_CustomVariables.scss
index 2afbb0859..005dbddff 100644
--- a/src/assets/scss/_CustomVariables.scss
+++ b/src/assets/scss/_CustomVariables.scss
@@ -92,3 +92,6 @@ $font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberati
 // stylelint-enable value-keyword-case
 $font-family-base:            $font-family-sans-serif;
 $font-family-code:            $font-family-monospace;
+
+//Gutters
+$grid-gutter-width:           .75rem;
diff --git a/src/assets/scss/_GlobalStyles.scss b/src/assets/scss/_GlobalStyles.scss
index de25b29f8..715d8fa00 100644
--- a/src/assets/scss/_GlobalStyles.scss
+++ b/src/assets/scss/_GlobalStyles.scss
@@ -1,3 +1,5 @@
 body {
+  font-size: 16px;
   background-color: #fff;
+  padding: 0 .75rem;
 }
diff --git a/src/assets/scss/components/_buttons.scss b/src/assets/scss/components/_buttons.scss
index 26341f377..a6238f36b 100644
--- a/src/assets/scss/components/_buttons.scss
+++ b/src/assets/scss/components/_buttons.scss
@@ -18,3 +18,19 @@
     }
   }
 }
+// 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;
+  }
+}
diff --git a/src/components/imageButton.vue b/src/components/imageButton.vue
new file mode 100644
index 000000000..4ce837ebe
--- /dev/null
+++ b/src/components/imageButton.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="col-4 mb-3">
+    <button class="btn-damage d-flex flex-column align-items-center rounded-3 h-100" v-bind:aria-label="ariaLabel">
+      <img class="px-1 pt-3 pb-1 mt-auto" v-bind:src="require(`../assets/img/icons/${btnText}`)" v-bind:alt="altText"/>
+      <p class="mt-auto">{{damageTitle}}</p>
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'imageButton',
+  props: ['btnText', 'altText', 'damageTitle', 'ariaLabel']
+}
+</script>

From fcb312638263eb5abd5df29240d32d1e9dd4be47 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 15 Oct 2021 10:54:35 -0400
Subject: [PATCH 2/2] Replace../ with @/, format code.

---
 src/Funnel1.vue                | 21 ++++++++++++++++++---
 src/components/imageButton.vue |  2 +-
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/Funnel1.vue b/src/Funnel1.vue
index e435b8376..61366627e 100644
--- a/src/Funnel1.vue
+++ b/src/Funnel1.vue
@@ -17,9 +17,24 @@
       </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>
 </template>
diff --git a/src/components/imageButton.vue b/src/components/imageButton.vue
index 4ce837ebe..03a48b967 100644
--- a/src/components/imageButton.vue
+++ b/src/components/imageButton.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="col-4 mb-3">
     <button class="btn-damage d-flex flex-column align-items-center rounded-3 h-100" v-bind:aria-label="ariaLabel">
-      <img class="px-1 pt-3 pb-1 mt-auto" v-bind:src="require(`../assets/img/icons/${btnText}`)" v-bind:alt="altText"/>
+      <img class="px-1 pt-3 pb-1 mt-auto" v-bind:src="require(`@/assets/img/icons/${btnText}`)" v-bind:alt="altText"/>
       <p class="mt-auto">{{damageTitle}}</p>
     </button>
   </div>