Initial block-out of vehicle-review section.

src/layouts/review/review-block/review-block.spec.js

@@ -0,0 +1,3 @@
+describe("Review Page Content Block", () => {
+    test.todo("Add more tests as specific functionality is added.");
+});

src/layouts/review/review-block/review-block.vue

@@ -0,0 +1,38 @@
+<template>
+    <div class="py-3">
+        <div class="d-flex">
+            <textBlock :customText="headerText" typeStyle="body small bold" margin="mt-0" />
+            <textLink linkType="textSmall" text="Edit" class="ml-auto" @click-event="linkClicked" />
+        </div>
+        <div class="small" v-for="item in content" :key="item">
+            {{ item }}
+        </div>
+    </div>
+</template>
+
+<script>
+import textBlock from "@/digital-components/text-block/text-block";
+import textLink from "@/ux-components/text-link/text-link";
+
+export default {
+    name: "vehicle-review",
+    props: {
+        headerText: String,
+        // Specifically an array of strings.
+        content: Array,
+    },
+    data() {
+        return {};
+    },
+    methods: {
+        linkClicked() {
+            this.$emit("edit-clicked");
+        },
+    },
+    computed: {},
+    components: {
+        textBlock,
+        textLink,
+    },
+};
+</script>

src/layouts/review/review-sections/vehicle-review/vehicle-review.spec.js

@@ -0,0 +1,3 @@
+describe("Vehicle Review Block", () => {
+    test.todo("Add more tests as specific functionality is added.");
+});

src/layouts/review/review-sections/vehicle-review/vehicle-review.vue

@@ -0,0 +1,28 @@
+<template>
+    <reviewBlock headerText="Vehicle" :content="displayContent" @edit-clicked="editClicked" />
+</template>
+
+<script>
+import reviewBlock from "@/layouts/review/review-block/review-block";
+
+export default {
+    name: "vehicle-review",
+    props: {},
+    data() {
+        return {};
+    },
+    methods: {
+        editClicked() {
+            this.$emit("edit-clicked");
+        },
+    },
+    computed: {
+        displayContent() {
+            return ["2018 Ford Fiesta"];
+        },
+    },
+    components: {
+        reviewBlock,
+    },
+};
+</script>

src/layouts/review/review.vue

@@ -24,8 +24,25 @@
                 isPrimary
                 :buttonText="forwardButtonText"
                 loaderColor="white"
+                class="mb-2"
                 @click-event="forwardButtonAction" />
 
+            <hr />
+
+            <textBlock
+                customText="Appointment Details"
+                typeStyle="label bold"
+                justifyText="justify-text-left"
+                margin="mt-0"
+                class="dark-header" />
+
+            <div class="px-4">
+                <vehicleReview />
+                <hr class="my-0" />
+            </div>
+
+            <hr />
+
             <funnelFooter
                 cmsWidgetName="FunnelFooterWidget"
                 @back-clicked="backButtonAction"
@@ -40,6 +57,7 @@ import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
 import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
 import buttonMain from "@/ux-components/button-main/button-main";
 import textBlock from "@/digital-components/text-block/text-block";
+import vehicleReview from "@/layouts/review/review-sections/vehicle-review/vehicle-review";
 
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
@@ -91,6 +109,7 @@ export default {
         vehicleBanner,
         buttonMain,
         textBlock,
+        vehicleReview,
     },
 };
 </script>