Merge pull request #23 from Safelite/feature/branch-merge

changed to new structure

src/App.vue

@@ -1,18 +1,53 @@
 <template>
-<!-- Comment -->
-
-  <div class="container-lg">
-      <router-view />
-  </div>
+<router-view></router-view>
+<div class="container-fluid">
+    <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">
+            <buttonPrimary />
+        </div>
+    </div>
+    <div class="row mt-5">
+        <radioCard radioLabel="Windshield" radioImage="windshield-damage.svg" altText="Windshield" groupName="damageKey" radioID="windshield" />
+        <radioCard radioLabel="Side Window" radioImage="side-window-damage.svg" altText="Side Window" groupName="damageKey" radioID="sidewindow" />
+        <radioCard radioLabel="Back Glass" radioImage="back-glass-damage.svg" altText="Back Glass" groupName="damageKey" radioID="backglass" />
+    </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 class="row">
+        <div class="col my-3 d-flex align-items-center">
+            <a href="#">Text Link</a>
+        </div>
+    </div>
+</div>
 </template>
 
 <script>
-
-
+import buttonPrimary from '@/uxComponents/buttonPrimary/buttonPrimary';
+import radioCard from '@/uxComponents/radioCard/radioCard';
 export default {
-  name: 'App',
-  components: {
-    
-  }
+    name: 'App',
+    components: {
+        buttonPrimary,
+        radioCard
+    }
 }
 </script>

src/assets/scss/_CustomVariables.scss

@@ -5,7 +5,7 @@ $white:    #FFFFFF;
 $gray-100: #F4F4F4;
 $gray-200: #CACBCC;
 $gray-300: #B3B4B5;
-$gray-400: #525656;//Default Gray (Gray 400)
+$gray-400: #B0B3B3;//Default Gray (Gray 400)
 $black:    #000;
 // scss-docs-end gray-color-variables
 
@@ -21,6 +21,7 @@ $grays: (
 // fusv-enable
 
 // scss-docs-start color-variables
+$blue-100:   #E4F1F7;
 $blue-200:   #E7F1F6;
 $blue-300:   #B9D7E6;
 $blue-400:   #125B7E;

src/assets/scss/components/_radio-card.scss

@@ -0,0 +1,28 @@
+.radio-card {
+  input[type=radio] {
+    &:focus + label {
+      background-color: $white;
+      box-shadow: 0px 0px 0px 4px $blue-600;
+    }
+    &:focus-visible + label {
+      background-color: $white;
+      box-shadow: 0px 0px 0px 4px $blue-600;
+    }
+    &:checked + label {
+      background-color: $blue-100;
+      border: 1px solid $blue-600;
+    }
+    &.invalid + label {
+      background-color: $white;
+      border: 1px solid $red-500;
+    }
+  }
+  label {
+    background: $white;
+    border: 1px solid $gray-400;
+    &:hover {
+      cursor: pointer;
+      box-shadow: 0px 0px 0px 6px $blue-100;
+    }
+  }
+}

src/assets/scss/custom.scss

@@ -21,3 +21,4 @@
 @import "./components/_SelectCar"; 
 @import "./components/_buttons";
 @import "./components/_vehicle-image";
+@import "./components/_radio-card";

src/commonComponents/carAttributes/carAttributes.vue

@@ -2,7 +2,7 @@
     <form class="list-view d-flex">
         <div class="car_list">
             <div v-for="attritbute in attritbutes" :key="attritbute" class="mb-2">
-                <Button
+                <buttonPrimary
                     :buttonText="attritbute"
                     v-on:click="selectAttribute(attritbute)"
                     buttonType="btn-funnel"
@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import Button from '@/sharedcomponents/Buttons/Button';
+import buttonPrimary from '@/uxComponents/buttonPrimary/buttonPrimary';
 
 export default {
   name: 'CarAttributes',
@@ -22,7 +22,7 @@ export default {
       selectAttribute: Function 
   },
   components: {
-      Button
+      buttonPrimary
   }
 }
 </script>

src/layouts/CarFunnel/Damage/SelectDamage.vue

@@ -1,104 +0,0 @@
-<template>
-    <div>
-        <baseTemplate
-            :currentCarInfo="year + ' ' + make + ' ' + model"
-            neededCarInfo="What is your damage?"
-        >
-           <div class="damage-section text-center">
-                <div class="choose-damage row">
-                    <div class="col">
-                        <imageButton
-                                btnImg="windshield-damage.svg"
-                                altText="Windshield"
-                                damageTitle="Windshield"
-                                ariaLabel="Windshield"
-                                v-on:click="chooseDamage('windshield')"
-                        />
-                    </div>
-                    <div class="col">
-                        <imageButton
-                                btnImg="side-window-damage.svg"
-                                altText="Side Window"
-                                damageTitle="Side door"
-                                ariaLabel="Side door"
-                                v-on:click="chooseDamage('side-window')"
-                        />
-                    </div>
-                    <div class="col">
-                        <imageButton
-                                btnImg="back-glass-damage.svg"
-                                altText="Back Glass"
-                                damageTitle="Back glass"
-                                ariaLabel="Back glass"
-                                v-on:click="chooseDamage('side-glass')"
-                        />
-                    </div>
-                </div> 
-                <transition name="fade">
-                    <div v-if="damage" class="how-bad mt-3">
-                        <span class="text-center fs-6 fw-bold">How bad is it?</span>
-                        <div class="choose-how-bad row mt-2">
-                                <div class="col">
-                                    <imageButton
-                                            btnImg="windshield-damage.svg"
-                                            altText="Windshield"
-                                            damageTitle="Windshield"
-                                            ariaLabel="Windshield"
-                                    />
-                                </div>
-                                <div class="col">
-                                    <imageButton
-                                            btnImg="side-window-damage.svg"
-                                            altText="Side Window"
-                                            damageTitle="Side door"
-                                            ariaLabel="Side door"
-                                    />
-                                </div>
-                            </div>
-                    </div>
-                </transition>
-                <div class="next-action row">
-                    <div class="col">
-                        <div v-on:click="goBack" class="change">
-                            <span>Change Vehicle</span>
-                        </div>
-                    </div>
-                </div>
-           </div>
-           
-        </baseTemplate>
-    </div>
-</template>
-
-<script>
-import baseTemplate from '../BaseTemplate';
-import imageButton from '@/sharedcomponents/Buttons/ImageButton'
-import { mapState } from 'vuex'
-
-export default {
-  name: 'SelectCar',
-  computed: {
-      ...mapState(['year', 'make', 'model'])
-  },
-  data(){
-      return {
-          damage: ''
-      }
-  },
-  methods: {
-      chooseDamage(damage){
-          this.damage = damage
-          console.log(this.damage)
-      },
-      goBack(){
-          this.$store.state.slideTransition = 'slide_reverse';
-          this.$store.commit('removeStyle')
-          this.$router.push(`/select-style?year=${this.$store.state.year}&make=${this.$store.state.make}`);
-      }
-  }, 
-  components: {
-      baseTemplate,
-      imageButton
-  }
-}
-</script>

src/layouts/ContentSite/Home.vue

@@ -1,6 +0,0 @@
-<template>
-    <div class="home">
-        <h1>Home</h1>
-        <router-link to="/select-year">SelectCar</router-link>
-    </div>
-</template>

src/layouts/selectDamage/selectDamage.vue

@@ -0,0 +1,75 @@
+<template>
+<div>
+    <baseTemplate :currentCarInfo="year + ' ' + make + ' ' + model" neededCarInfo="What is your damage?">
+        <div class="damage-section text-center">
+            <div class="choose-damage row">
+                <div class="col">
+                    <radioCard />
+                </div>
+                <div class="col">
+                    <radioCard />
+                </div>
+                <div class="col">
+                    <radioCard />
+                </div>
+            </div>
+            <transition name="fade">
+                <div v-if="damage" class="how-bad mt-3">
+                    <span class="text-center fs-6 fw-bold">How bad is it?</span>
+                    <div class="choose-how-bad row mt-2">
+                        <div class="col">
+                            <radioCard />
+                        </div>
+                        <div class="col">
+                            <radioCard />
+                        </div>
+                    </div>
+                </div>
+            </transition>
+            <div class="next-action row">
+                <div class="col">
+                    <div v-on:click="goBack" class="change">
+                        <span>Change Vehicle</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </baseTemplate>
+</div>
+</template>
+
+<script>
+import baseTemplate from '@/commonComponents/baseTemplate/baseTemplate';
+import radioCard from '@/uxComponents/radioCard/radioCard';
+import {
+    mapState
+} from 'vuex'
+
+export default {
+    name: 'SelectCar',
+    computed: {
+        ...mapState(['year', 'make', 'model'])
+    },
+    data() {
+        return {
+            damage: ''
+        }
+    },
+    methods: {
+        chooseDamage(damage) {
+            this.damage = damage
+            console.log(this.damage)
+        },
+        goBack() {
+            this.$store.state.slideTransition = 'slide_reverse';
+            this.$store.commit('removeStyle')
+            this.$router.push(`/select-style?year=${this.$store.state.year}&make=${this.$store.state.make}`);
+        }
+    },
+    components: {
+        baseTemplate,
+        radioCard
+    }
+}
+</script>

src/layouts/selectMake/selectMake.vue

@@ -5,7 +5,7 @@
             neededCarInfo="What make is your vehicle?"
             :backFunction="goBack"
         >
-            <CarAttributes
+            <carAttributes
                 :attritbutes="makes"
                 :selectAttribute="selectMake"
             />
@@ -14,8 +14,8 @@
 </template>
 
 <script>
-import baseTemplate from '../BaseTemplate';
-import CarAttributes from './CarAttributes'
+import baseTemplate from '@/commonComponents/baseTemplate/baseTemplate';
+import carAttributes from '@/commonComponents/carAttributes/carAttributes';
 import { mapState } from 'vuex';
 
 export default {
@@ -34,7 +34,7 @@ export default {
   }, 
   components: {
       baseTemplate,
-      CarAttributes
+      carAttributes
   }
 }
 </script>

src/layouts/selectModel/selectModel.vue

@@ -5,7 +5,7 @@
             :neededCarInfo="'What is the model of your ' + make + '?'"
             :backFunction="goBack"
         >
-            <CarAttributes
+            <carAttributes
                 :attritbutes="models"
                 :selectAttribute="selectModel"
             />
@@ -14,8 +14,8 @@
 </template>
 
 <script>
-import baseTemplate from '../BaseTemplate';
-import CarAttributes from './CarAttributes'
+import baseTemplate from '@/commonComponents/baseTemplate/baseTemplate';
+import carAttributes from '@/commonComponents/carAttributes/carAttributes';
 import { mapState } from 'vuex'
 
 export default {
@@ -34,7 +34,7 @@ export default {
   }, 
   components: {
       baseTemplate,
-      CarAttributes
+      carAttributes
   }
 }
 </script>

src/layouts/selectStyle/selectStyle.vue

@@ -5,7 +5,7 @@
             :neededCarInfo="'What style is your ' + model + '?'"
             :backFunction="goBack"
         >
-            <CarAttributes
+            <carAttributes
                 :attritbutes="styles"
                 :selectAttribute="selectStyle"
             />
@@ -14,8 +14,8 @@
 </template>
 
 <script>
-import baseTemplate from '../BaseTemplate';
-import CarAttributes from './CarAttributes'
+import baseTemplate from '@/commonComponents/baseTemplate/baseTemplate';
+import carAttributes from '@/commonComponents/carAttributes/carAttributes';
 import { mapState } from 'vuex'
 
 export default {
@@ -34,7 +34,7 @@ export default {
   }, 
   components: {
       baseTemplate,
-      CarAttributes
+      carAttributes
   }
 }
 </script>

src/layouts/selectYear/selectYear.vue

@@ -4,7 +4,7 @@
             currentCarInfo="Select a year to get started"
             neededCarInfo="What year is your vehicle?"
         >
-            <CarAttributes
+            <carAttributes
                 :attritbutes="years"
                 :selectAttribute="selectYear"
             />
@@ -13,8 +13,8 @@
 </template>
 
 <script>
-import baseTemplate from '../BaseTemplate';
-import CarAttributes from './CarAttributes'
+import baseTemplate from '@/commonComponents/baseTemplate/baseTemplate';
+import carAttributes from '@/commonComponents/carAttributes/carAttributes';
 import axios from 'axios';
 
 export default {
@@ -36,7 +36,7 @@ export default {
   }, 
   components: {
       baseTemplate,
-      CarAttributes
+      carAttributes
   }
 }
 </script>

src/router/index.js

@@ -1,7 +1,7 @@
 import { createWebHistory, createRouter } from "vue-router";
 import { getRouteData } from "@/router/dynamic-routing/route-compile.js";
-import NotFound from "@/layouts/NotFound.vue";
-import Home from "@/layouts/Home.vue";
+import NotFound from "@/layouts/notFound/notFound.vue";
+import Home from "@/layouts/home/home.vue";
 
 const routes = [
   {

src/sharedcomponents/Buttons/Button.vue

@@ -1,37 +0,0 @@
-<template>
-  <button 
-    type="button" 
-    class="btn"
-    v-bind:class="[(this.buttonType === 'btn-funnel' ? ['btn-funnel', 'border', 'rounded', 'w-100', 'text-start'] : this.buttonType)]"
-    v-on:click="this.buttonType === 'btn-funnel' ? showLoader() : null"
-    >
-    {{ this.buttonText }}
-
-
-    <!-- Spinner for funnel Button -->
-    <div v-if="this.buttonType === 'btn-funnel' && this.isLoading" class="spinner-border spinner-border-sm text-success" role="status">
-      <span class="visually-hidden">Loading...</span>
-    </div>
-    
-  </button>
-</template>
-
-<script>
-export default {
-  name: 'button',
-  props: {
-    buttonText: String,
-    buttonType: String
-  }, 
-  data(){
-    return {
-      isLoading: false
-    }
-  },
-  methods: {
-    showLoader(){
-      this.isLoading = true;
-    }
-  }
-}
-</script>

src/sharedcomponents/Buttons/ImageButton.vue

@@ -1,13 +0,0 @@
-<template>
-    <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/${btnImg}`)" v-bind:alt="altText"/>
-      <p class="mt-auto">{{damageTitle}}</p>
-    </button>
-</template>
-
-<script>
-export default {
-  name: 'imageButton',
-  props: ['btnImg', 'altText', 'damageTitle', 'ariaLabel']
-}
-</script>

src/sharedcomponents/HeaderNav/HeaderNav.spec.js

@@ -1,7 +0,0 @@
-describe("HeaderNav.vue", () => {
-
-    test("Some Example Test == True", () => {
-        expect(true).toBe(true);
-    });
-
-})

src/sharedcomponents/HeaderNav/HeaderNav.vue

@@ -1,47 +0,0 @@
-<template>
-  <div class="container my-4">
-    <div class="row">
-      <div class="col">
-        <nav class="navbar navbar-expand-lg navbar-light p-0">
-          <div class="container-fluid d-flex align-items-end px-0">
-            <a href="#">
-              <img class="logo" src="@/assets/img/logo.svg" alt="Safelite" aria-current="page">
-            </a>
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
-              <span class="navbar-toggler-icon"></span>
-            </button>
-            <div class="collapse navbar-collapse" id="navbarNavDropdown">
-              <ul class="navbar-nav d-flex align-items-lg-end ms-3">
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle px-0 px-lg-4 py-2 py-lg-0 link-secondary lh-1" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                    Services
-                  </a>
-                  <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
-                    <li><a class="dropdown-item" href="#">Service 1</a></li>
-                    <li><a class="dropdown-item" href="#">Service 2</a></li>
-                    <li><a class="dropdown-item" href="#">Service 3</a></li>
-                  </ul>
-                </li>
-                <li class="nav-item lh-1">
-                  <a class="nav-link px-0 px-lg-4 py-2 py-lg-0 link-secondary"  href="#">Locations</a>
-                </li>
-                <li class="nav-item lh-1">
-                  <a class="nav-link px-0 px-lg-4 py-2 py-lg-0 link-secondary" href="#">We're Hiring</a>
-                </li>
-                <li class="nav-item lh-1">
-                  <a class="nav-link px-0 px-lg-4 py-2 py-lg-0 link-secondary" href="#">My Appointment</a>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </nav>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HeaderNav'
-}
-</script>

src/sharedcomponents/forms/textInput.vue

@@ -1,7 +0,0 @@
-<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/sharedcomponents/imageButton.vue

@@ -1,15 +0,0 @@
-<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>

src/uxComponents/buttonPrimary/buttonPrimary.vue

@@ -0,0 +1,31 @@
+<template>
+<button type="button" class="btn" v-bind:class="[(this.buttonType === 'btn-funnel' ? ['btn-funnel', 'border', 'rounded', 'w-100', 'text-start'] : this.buttonType)]" v-on:click="this.buttonType === 'btn-funnel' ? showLoader() : null">
+    {{ this.buttonText }}
+
+    <!-- Spinner for funnel Button -->
+    <div v-if="this.buttonType === 'btn-funnel' && this.isLoading" class="spinner-border spinner-border-sm text-success" role="status">
+        <span class="visually-hidden">Loading...</span>
+    </div>
+
+</button>
+</template>
+
+<script>
+export default {
+    name: 'button',
+    props: {
+        buttonText: String,
+        buttonType: String
+    },
+    data() {
+        return {
+            isLoading: false
+        }
+    },
+    methods: {
+        showLoader() {
+            this.isLoading = true;
+        }
+    }
+}
+</script>

src/uxComponents/radioCard/radioCard.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="col-4 mb-3 d-flex radio-card">
+    <input type="radio" class="position-absolute opacity-0" v-bind:class="className" v-bind:id="radioID" v-bind:name="groupName" :value="radioLabel" v-model="picked" v-bind:tabindex="tabIndex"/>
+      <label v-bind:for="radioID" class="rounded-3 d-flex flex-column align-items-center w-100">
+        <img class="px-3 pt-3 pb-2 mt-auto" v-bind:src="require(`@/assets/img/icons/${radioImage}`)" v-bind:alt="altText"/>
+        <span class="mt-auto mb-2">{{radioLabel}}</span>
+    </label>
+  </div>
+</template>
+
+<!-- tabIndex="x" is available on this component if needed -->
+
+<script>
+export default {
+  name: 'radioCard',
+  props: ['groupName','radioLabel','radioImage','altText','radioID','tabIndex','className'],
+  data() {
+    return {
+      picked: "picked"
+    };
+  }
+}
+</script>