CSR-735 create text-block component.

jest.config.js

@@ -19,6 +19,7 @@ module.exports = {
     "!src/layouts/reveal/**/*.vue",
     "!src/ux-components/text-link/**/*.vue",
     "!src/common-components/question-chain/**/*.vue",
+    "!src/common-components/text-block/**/*.vue",
     "!src/layouts/quote/**/*.vue", // Temporary
     "!src/layouts/vin-lookup/**/*.vue", //Temporary for Quote page testing
     // END

src/common-components/text-block/text-block.spec.js

@@ -0,0 +1 @@
+test.todo("some test to be written in the future");

src/common-components/text-block/text-block.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="text-block d-flex w-100 mt-4" :class="[justifyText, typeStyle, fontWeight]">{{this.TextBlockCopy}}</div>
+</template>
+
+<script>
+export default {
+  name: 'textBlock',
+  props: {
+    justifyText: String,// left, right, center
+    typeStyle: String, // h1-h6, body, small, label, caption (see Figma or Confluence documentation)
+    fontWeight: String,// bold=500, default is 400
+    cmsWidgetName: String,
+  },
+  computed: {
+      TextBlockCopy(){
+        return this.getCmsContent(this.cmsWidgetName, "Text");
+      },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+  .text-block {
+    &.left {
+      justify-content: flex-start;
+    }
+    &.right {
+      justify-content: flex-end;
+    }
+    &.center {
+      justify-content: center;
+    }
+    &.bold {
+      font-weight: 500;
+    }
+  }
+</style>

src/layouts/quote/quote.vue

@@ -12,6 +12,12 @@
     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
     <div class="fade-on-route-transition sub-container make-tall">
       <radioServicePackage/>
+      <textBlock
+      cmsWidgetName="footerTest"
+      justifyText="caption"
+      typeStyle="small"
+      fontWeight=""
+      />
       <funnel-footer
       cmsWidgetName="FunnelFooterWidget"
       :isForwardActionDisabled="!meta.valid"
@@ -36,6 +42,7 @@ import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-he
 import radioServicePackage from "@/ux-components/radio-service-package/radio-service-package";
 import modal from "@/common-components/modal/modal.vue";
 import cashOrInsuranceQuestion from "./cash-or-insurance-question/cash-or-insurance-question";
+import textBlock from "@/common-components/text-block/text-block";
 
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { Form } from "vee-validate";
@@ -81,6 +88,7 @@ export default {
     Form,
     radioServicePackage,
     modal,
+    textBlock,
   },
 
 };

src/router/index.js

@@ -23,6 +23,7 @@ import { applicationConfig } from "../constants/application-config";
 
 // Components
 import quote from "@/layouts/quote/quote.vue";
+import textBlock from "@/common-components/text-block/text-block";
 
 const routes = [
   {
@@ -30,6 +31,11 @@ const routes = [
     name: "quote",
     component: quote,
   },
+  {
+    path: "/text-block", // This is a temporary route for testing.
+    name: "textBlock",
+    component: textBlock,
+  },
   {
     path: "/",
     name: "root",
@@ -232,7 +238,7 @@ function navigateToUrl(url, optionalQuery = {}) {
   for (const queryKey in optionalQuery) {
     externalUrl.searchParams.append(queryKey, optionalQuery[queryKey]);
   }
-  
+
   window.location.assign(externalUrl);
 }
 

src/styles/common-typography-styles.scss

@@ -1,6 +1,7 @@
 //Typography
-p {
+p,
-  font-size: 16px;
+body {
+  font-size: 1rem;
   line-height: 1.625;
   font-weight: 400;
 }
@@ -33,12 +34,21 @@ h6,.h6 {
   text-transform: uppercase;
 }
 
-label {
+.small {
+  font-size: .875rem;
+  line-height: 1.7;
+  font-weight: 400;
+}
+
+label,
+.label {
+  font-size: 1rem;
   line-height: 1.5;
   font-weight: 400;
 }
 
-caption {
+caption,
+.caption {
   font-size: .75rem;
   line-height: 1.7;
   font-weight: 400;