Merge pull request #9 from Safelite/brm-base-properties

Add buttons, text input, vehicle image components.

public/index.html

@@ -14,7 +14,7 @@
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
-    <div id="app"></div>
+    <div id="Funnel1"></div>
     <!-- built files will be auto injected -->
   </body>
 </html>

src/Funnel1.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="container-fluid">
+    <div class="row">
+      <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>
+    <div class="row">
+      <div class="col">
+        <buttonFunnel/>
+      </div>
+    </div>
+    <div class="row mt-5">
+      <div class="col">
+        <buttonPrimary/>
+        <buttonSecondary/>
+        <textInput/>
+      </div>
+    </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';
+  export default {
+    name: 'App',
+    components: {
+      buttonPrimary,
+      buttonSecondary,
+      buttonFunnel,
+      textInput,
+      vehicleImage
+    }
+  }
+</script>

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

src/assets/scss/components/_vehicle-image.scss

@@ -0,0 +1,6 @@
+.vehicle-image {
+  padding: 6px;
+  &.blur {
+    filter: blur(6px);
+  }
+}

src/assets/scss/custom.scss

@@ -19,3 +19,4 @@
 //Custom Components CSS
 @import "./components/_navbar";
 @import "./components/_buttons";
+@import "./components/_vehicle-image";

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>

src/components/buttons/buttonPrimary.vue

@@ -0,0 +1,3 @@
+<template>
+  <button type="button" class="btn btn-primary">Primary</button>
+</template>

src/components/buttons/buttonSecondary.vue

@@ -0,0 +1,3 @@
+<template>
+  <button type="button" class="btn btn-secondary">Secondary</button>
+</template>

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>

src/components/vehicleImage.vue

@@ -0,0 +1,3 @@
+<template>
+  <img class="vehicle-image blur img-fluid" src="https://placekitten.com/600/300" />
+</template>

src/main.js

@@ -1,5 +1,5 @@
 import { createApp } from "vue";
-import App from "./App.vue";
+import Funnel1 from "./Funnel1.vue";
 
 //Bootstrap JavaScript
 import "../node_modules/bootstrap/dist/js/bootstrap.js";
@@ -7,4 +7,4 @@ import "../node_modules/bootstrap/dist/js/bootstrap.js";
 //Get Bootstrap and Custom Styles
 import "./assets/scss/custom.scss";
 
-createApp(App).mount("#app")
+createApp(Funnel1).mount("#Funnel1");