From 6be5eca97021ce26f87441baecef1b2e52e9a9fa Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 5 Oct 2021 19:32:23 -0400
Subject: [PATCH] Add buttons, text input, vehicle image components.

Test for usability.
---
 src/App.vue                                   | 31 +++++++++----------
 src/assets/scss/components/_buttons.scss      |  1 +
 .../scss/components/_vehicle-image.scss       |  6 ++++
 src/assets/scss/custom.scss                   |  1 +
 src/components/buttons/buttonFunnel.vue       |  3 ++
 src/components/buttons/buttonPrimary.vue      |  3 ++
 src/components/buttons/buttonSecondary.vue    |  3 ++
 src/components/forms/textInput.vue            |  7 +++++
 src/components/vehicleImage.vue               |  3 ++
 9 files changed, 42 insertions(+), 16 deletions(-)
 create mode 100644 src/assets/scss/components/_vehicle-image.scss
 create mode 100644 src/components/buttons/buttonFunnel.vue
 create mode 100644 src/components/buttons/buttonPrimary.vue
 create mode 100644 src/components/buttons/buttonSecondary.vue
 create mode 100644 src/components/forms/textInput.vue
 create mode 100644 src/components/vehicleImage.vue

diff --git a/src/App.vue b/src/App.vue
index 1982e117d..62a5c5a05 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,26 +1,25 @@
 <template>
-  <HeaderNav/>
-  <div class="container">
-    <div class="row">
-      <div class="col">
-        <HelloWorld msg="VueJS with Bootstrap"/>
-      </div>
-    </div>
-  </div>
-  <Colors/>
+  <buttonPrimary/>
+  <buttonSecondary/>
+  <buttonFunnel/>
+  <textInput/>
+  <vehicleImage/>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue';
-import HeaderNav from './components/HeaderNav';
-import Colors from './components/Colors';
-
+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';
 export default {
   name: 'App',
   components: {
-    HelloWorld,
-    HeaderNav,
-    Colors
+    buttonPrimary,
+    buttonSecondary,
+    buttonFunnel,
+    textInput,
+    vehicleImage
   }
 }
 </script>
diff --git a/src/assets/scss/components/_buttons.scss b/src/assets/scss/components/_buttons.scss
index 97fbecd5c..26341f377 100644
--- a/src/assets/scss/components/_buttons.scss
+++ b/src/assets/scss/components/_buttons.scss
@@ -1,3 +1,4 @@
+//Custom button styles
 .btn {
   &.btn-secondary {
     position: relative;//Required for :after pseduo to position correctly
diff --git a/src/assets/scss/components/_vehicle-image.scss b/src/assets/scss/components/_vehicle-image.scss
new file mode 100644
index 000000000..85bb7319a
--- /dev/null
+++ b/src/assets/scss/components/_vehicle-image.scss
@@ -0,0 +1,6 @@
+.vehicle-image {
+  padding: 6px;
+  &.blur {
+    filter: blur(6px);
+  }
+}
diff --git a/src/assets/scss/custom.scss b/src/assets/scss/custom.scss
index c616ed687..d27b60a05 100644
--- a/src/assets/scss/custom.scss
+++ b/src/assets/scss/custom.scss
@@ -19,3 +19,4 @@
 //Custom Components CSS
 @import "./components/_navbar";
 @import "./components/_buttons";
+@import "./components/_vehicle-image";
diff --git a/src/components/buttons/buttonFunnel.vue b/src/components/buttons/buttonFunnel.vue
new file mode 100644
index 000000000..9e878ab76
--- /dev/null
+++ b/src/components/buttons/buttonFunnel.vue
@@ -0,0 +1,3 @@
+<template>
+  <button type="button" class="btn btn-funnel border rounded w-100 text-start">2021</button>
+</template>
diff --git a/src/components/buttons/buttonPrimary.vue b/src/components/buttons/buttonPrimary.vue
new file mode 100644
index 000000000..97bdcdf2d
--- /dev/null
+++ b/src/components/buttons/buttonPrimary.vue
@@ -0,0 +1,3 @@
+<template>
+  <button type="button" class="btn btn-primary">Primary</button>
+</template>
diff --git a/src/components/buttons/buttonSecondary.vue b/src/components/buttons/buttonSecondary.vue
new file mode 100644
index 000000000..36a701d6c
--- /dev/null
+++ b/src/components/buttons/buttonSecondary.vue
@@ -0,0 +1,3 @@
+<template>
+  <button type="button" class="btn btn-secondary">Secondary</button>
+</template>
diff --git a/src/components/forms/textInput.vue b/src/components/forms/textInput.vue
new file mode 100644
index 000000000..6b898ee68
--- /dev/null
+++ b/src/components/forms/textInput.vue
@@ -0,0 +1,7 @@
+<template>
+  <div><!-- Add helper classes to wrapper div if margin is needed -->
+    <!-- Hide label but still accessible to screen reader with .visually-hidden -->
+    <label for="exampleFormControlInput1" class="form-label visually-hidden">Email address</label>
+    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
+  </div>
+</template>
diff --git a/src/components/vehicleImage.vue b/src/components/vehicleImage.vue
new file mode 100644
index 000000000..b1c441528
--- /dev/null
+++ b/src/components/vehicleImage.vue
@@ -0,0 +1,3 @@
+<template>
+  <img class="vehicle-image blur img-fluid" src="https://placekitten.com/600/300" />
+</template>