From 681afdc4bdd079eb157fbbb08efe2cf0db31e34d Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Mon, 12 Sep 2022 13:55:28 -0400
Subject: [PATCH] Cherry-picked changes from commit 145359e226

---
 .../text-block/text-block.spec.js             |  1 +
 .../text-block/text-block.vue                 | 37 +++++++++++++++++++
 src/styles/common-typography-styles.scss      | 20 +++++++---
 3 files changed, 53 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/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..66012402c
--- /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");
\ No newline at end of file
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..26f57d665
--- /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]" v-html="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>
\ No newline at end of file
diff --git a/src/styles/common-typography-styles.scss b/src/styles/common-typography-styles.scss
index 7f6163193..9ee9aa286 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;
@@ -54,4 +64,4 @@ caption {
   font-size: 1rem !important;
   line-height: 1.4;
   font-weight: 500;
-}
+}
\ No newline at end of file