Merge pull request #725 from Safelite/cherrypick145359e226

Cherry-picked changes from commit 145359e226

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]" 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>

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;
-}
+}