Merge pull request #85 from Safelite/feature/CSR-203

Feature/CSR-203

src/common-components/radio-question/radio-question.vue

@@ -6,7 +6,7 @@
       }}</span>
     </div>
     <div class="w-100 d-flex justify-content-center">
-      <div class="car_list overflow-scroll position-absolute container-fluid pt-1" role="radiogroup" aria-labelledby="select-year-radio-group">
+      <div class="car_list overflow-scroll position-absolute container-fluid w-100 pt-1" role="radiogroup" aria-labelledby="select-year-radio-group">
         <h3 class="visually-hidden" id="select-year-radio-group">*</h3>
           <radio v-for="answer in answers" :key="answer"
             :radioID="answer"

src/common-components/site-header/site-header.spec.js

@@ -0,0 +1,21 @@
+import { shallowMount } from '@vue/test-utils';
+import siteHeader from './site-header';
+
+describe('siteHeader', () => {
+
+    test('renders the logo image', () => {
+        // Arrange
+
+        // Act
+        const wrapper = shallowMount(siteHeader, {
+            propsData: {
+                imageSrc: "image_url",
+            },
+        });
+
+        // Assert
+        expect(wrapper.find('img')).toBeTruthy();
+        wrapper.unmount();
+    });
+
+});

src/common-components/site-header/site-header.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="funnel-header d-flex justify-content-center align-items-center" v-if="imageSrc">
+    <img
+      class="logo-image img-fluid"
+      :src="imageSrc"
+      alt="Safelite logo"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "site-header",
+  props: {
+    imageSrc: {
+      type: String,
+      required: true
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+  .funnel-header {
+    height: 56px;
+  }
+  .logo-image {
+    max-width: 78px;
+  }
+</style>

src/constants/widget-names.js

@@ -2,6 +2,7 @@ const widgetNames = {
   PAGE_HEADER_WIDGET: "PageHeaderWidget",
   RADIO_QUESTION_WIDGET: "RadioQuestionWidget",
   VEHICLE_BANNER_WIDGET: "VehicleBannerWidget",
+  SITE_HEADER_WIDGET: "SiteHeaderWidget",
 };
 
 export { widgetNames };

src/layouts/component-test/component-test.vue

@@ -360,6 +360,16 @@
         />
       </div>
     </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Site Header</h4>
+      </div>
+    </div>
+    <div class="row my-3">
+      <div class="col">
+        <siteHeader imageSrc="https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3" />
+      </div>
+    </div>
     <div class="row my-4">
       <div class="col">
           <h4 class="m-0 p-2 bg-light rounded">Vehicle Banner</h4>
@@ -381,6 +391,7 @@
   import radio from "@/ux-components/radio/radio";
   import alert from "@/ux-components/alert/alert";
   import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+  import siteHeader from "@/common-components/site-header/site-header";
   import radioHorizontal from "@/ux-components/radio-horizontal/radio-horizontal";
   export default {
     name: "App",
@@ -392,7 +403,8 @@
       radio,
       alert,
       vehicleBanner,
-      radioHorizontal
+      radioHorizontal,
+      siteHeader,
     },
     data() {
       return {

src/layouts/vehicle-year/vehicle-year.spec.js

@@ -20,6 +20,7 @@ describe("vehicle-year.vue", () => {
         PageHeaderWidget: [{ HeaderText: "Select a year to get started" }],
         RadioQuestionWidget: [{ QuestionText: "What year is your vehicle?" }],
         VehicleBannerWidget: [{ GenericVehicleImage: "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3" }],
+        SiteHeaderWidget: [{ "LogoImage": "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3" }],
         isCmsContentReady: true,
       },
       getVehicleYear: [2023, 2022, 2021],

src/layouts/vehicle-year/vehicle-year.vue

@@ -1,4 +1,5 @@
 <template v-if="isCmsContentReady">
+  <siteHeader :imageSrc="siteHeaderWidget.LogoImage" />
   <div class="select-car">
     <div class="select-car-form rounded text-center">
       <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
@@ -12,6 +13,7 @@
 // Components
 import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
 import pageHeader from "@/ux-components/header/header";
+import siteHeader from "@/common-components/site-header/site-header";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -25,6 +27,7 @@ export default {
       pageHeaderWidgets: {},
       radioQuestionWidgets: {},
       vehicleYears: [],
+      siteHeaderWidget: {},
       vehicleBannerWidget: {},
       selectedYear: null
     };
@@ -53,6 +56,7 @@ export default {
       // Call the "next" function to complete the transition to this page.
       next((vm) => {
         vm.pageHeaderWidgets = resultMap.getPageContent.PageHeaderWidget[0];
+        vm.siteHeaderWidget = resultMap.getPageContent.SiteHeaderWidget[0];
         vm.radioQuestionWidgets = resultMap.getPageContent.RadioQuestionWidget[0];
         vm.vehicleBannerWidget = resultMap.getPageContent.VehicleBannerWidget[0];
         vm.vehicleYears = resultMap.getVehicleYear;
@@ -70,19 +74,22 @@ export default {
   components: {
     yearQuestion,
     pageHeader,
-    vehicleBanner
+    siteHeader,
+    vehicleBanner,
   },
 };
 </script>
 
 <style lang="scss">
     .select-car {
-        height: calc(100vh - 1rem);
+        height: calc(100vh - 56px);
+        padding: 0 1.5rem;
+
         .car_list {
-        // Height will be determined by overall height of content above list
+            // Height will be determined by overall height of content above list
-        height: calc(100% - 255px);
+            height: calc(100% - 300px);
-        width: calc(100% - 1rem);
+            padding: 0 1.5rem;
-        -webkit-overflow-scrolling: touch;
+            -webkit-overflow-scrolling: touch;
         }
     }
 </style>

src/styles/common-styles.scss

@@ -3,11 +3,11 @@
 body {
   font-size: 16px;
   background-color: #fff;
-  padding: .5rem;
+
   .container-fluid {
-    max-width: 576px;//Remove once desktop app is complete
+    max-width: 576px; //Remove once desktop app is complete
     &.container-shadow {
-      box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15);//Use instead of Bootstrap's helper
+      box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15); //Use instead of Bootstrap's helper
     }
   }
   a {