From ce840d817776de385c3c9bc0a98c66aa5283d1c3 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 29 Aug 2022 09:41:13 -0400
Subject: [PATCH] CSR-735 create text-block component.

---
 jest.config.js                                |  1 +
 .../text-block/text-block.spec.js             |  1 +
 .../text-block/text-block.vue                 | 37 +++++++++++++++++++
 src/layouts/quote/quote.vue                   |  8 ++++
 src/router/index.js                           |  8 +++-
 src/styles/common-typography-styles.scss      | 18 +++++++--
 6 files changed, 68 insertions(+), 5 deletions(-)
 create mode 100644 src/common-components/text-block/text-block.spec.js
 create mode 100644 src/common-components/text-block/text-block.vue

diff --git a/jest.config.js b/jest.config.js
index 590e0f0a9..6877c873d 100644
--- a/jest.config.js
+++ b/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
diff --git a/src/common-components/text-block/text-block.spec.js b/src/common-components/text-block/text-block.spec.js
new file mode 100644
index 000000000..3d0843e10
--- /dev/null
+++ b/src/common-components/text-block/text-block.spec.js
@@ -0,0 +1 @@
+test.todo("some test to be written in the future");
diff --git a/src/common-components/text-block/text-block.vue b/src/common-components/text-block/text-block.vue
new file mode 100644
index 000000000..2f81e2ecf
--- /dev/null
+++ b/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>
diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
index 3348026a8..51c2f2219 100644
--- a/src/layouts/quote/quote.vue
+++ b/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,
   },
 
 };
diff --git a/src/router/index.js b/src/router/index.js
index 68c07137e..d07bf23e4 100644
--- a/src/router/index.js
+++ b/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);
 }
 
diff --git a/src/styles/common-typography-styles.scss b/src/styles/common-typography-styles.scss
index 7f6163193..8d011e61e 100644
--- a/src/styles/common-typography-styles.scss
+++ b/src/styles/common-typography-styles.scss
@@ -1,6 +1,7 @@
 //Typography
-p {
-  font-size: 16px;
+p,
+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;