feat: APPS-2563 Convert Flexible RichText component to vue3 (#465)

* set up flexibleRichText files

* feat: update all FlexibleRichText to Vue3

* add comments

* chore: lint fixes

* feat: updating the styles in Global RichText and adding text direction & language to the richtext mock data

* fix: styling for other components using richText

* chore: linting

* update: tests and styles

* chore: linting

* fix: style in pullquote that were affected by richText

* style: fix font weight on pullQuote

* style: fix margin-bottom  on pullQuote

src/lib-components/Flexible/PullQuote.vue

@@ -23,14 +23,14 @@ const { block } = defineProps({
 
 <style lang="scss" scoped>
 .pull-quote {
-    &.flexible-block {
-        margin: var(--unit-gutter) auto;
-        padding: 0 var(--unit-gutter);
-        max-width: $container-l-main + px;
+  &.flexible-block {
+    margin: var(--unit-gutter) auto;
+    padding: 0 var(--unit-gutter);
+    max-width: $container-l-main + px;
 
-        @media #{$medium} {
-            margin: var(--unit-gutter);
-        }
+    @media #{$medium} {
+      margin: var(--unit-gutter);
     }
+  }
 }
 </style>

src/lib-components/Flexible/RichText.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+
+// COMPONENTS
+import RichText from '@/lib-components/RichText.vue'
+
+// TYPESCRPT
+import type { FlexibleRichText } from '@/types/flexible_types'
+
+const { block } = defineProps({
+  block: {
+    type: Object as PropType<FlexibleRichText>,
+    default: () => { },
+  },
+})
+</script>
+
+<template>
+  <div class="rich-text">
+    <h2
+      v-if="block.sectionTitle"
+      class="section-title"
+      v-html="block.sectionTitle"
+    />
+
+    <RichText :rich-text-content="block.richText" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.rich-text {
+  .section-title {
+    @include step-3;
+    color: var(--color-primary-blue-03);
+    margin-bottom: var(--space-xl);
+  }
+}
+</style>

src/lib-components/MastheadSecondary.vue

@@ -28,7 +28,7 @@ const props = defineProps({
   },
   heroImage: {
     type: Object as PropType<MediaItemType>,
-    default: () => {},
+    default: () => { },
   },
 })
 
@@ -67,8 +67,15 @@ const classes = computed(() => {
     />
     <div class="container">
       <div class="meta">
-        <h1 class="title" v-html="title" />
-        <RichText v-if="text" class="text" :rich-text-content="text" />
+        <h1
+          class="title"
+          v-html="title"
+        />
+        <RichText
+          v-if="text"
+          class="text"
+          :rich-text-content="text"
+        />
       </div>
     </div>
   </div>
@@ -79,112 +86,123 @@ const classes = computed(() => {
   z-index: 0;
   position: relative;
   background: var(--gradient-03), var(--text-overlay);
-  .hero-image {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      filter: brightness(0.75);
 
-      :deep(.media) {
-          object-fit: cover;
-      }
+  .hero-image {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    filter: brightness(0.75);
+
+    :deep(.media) {
+      object-fit: cover;
+    }
   }
+
   .rich-text {
-      :deep(p) {
-          color: var(--color-white);
-      }
+
+    :deep(p),
+    :deep(div) {
+      color: var(--color-white);
+    }
   }
 
   .container {
-      max-width: $container-l-cta + px;
+    max-width: $container-l-cta + px;
 
-      position: relative;
-      z-index: 20;
-      margin: 0 auto;
-      padding-top: var(--space-xl);
-      padding-bottom: var(--space-4xl);
+    position: relative;
+    z-index: 20;
+    margin: 0 auto;
+    padding-top: var(--space-xl);
+    padding-bottom: var(--space-4xl);
   }
-  .meta {
-      color: var(--color-white);
-
-      display: flex;
-      align-items: flex-start;
-      justify-content: center;
-      flex-direction: column;
-      gap: var(--space-s);
 
-      .title {
-          @include step-5;
-          text-shadow: 0px 2px 8px rgba(113, 113, 113, 0.08);
-      }
-      .text {
-          @include step-0;
-          text-shadow: 0px 2px 8px rgba(113, 113, 113, 0.08);
-          margin: 0;
-      }
+  .meta {
+    color: var(--color-white);
+
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    flex-direction: column;
+    gap: var(--space-s);
+
+    .title {
+      @include step-5;
+      text-shadow: 0px 2px 8px rgba(113, 113, 113, 0.08);
+    }
+
+    .text {
+      @include step-0;
+      text-shadow: 0px 2px 8px rgba(113, 113, 113, 0.08);
+      margin: 0;
+    }
   }
+
   :deep(h3),
   :deep(h4),
   :deep(h5),
   :deep(p),
   :deep(li) {
-      color: var(--color-white);
-      margin: 0;
+    color: var(--color-white);
+    margin: 0;
   }
 
   // Variants
   &.has-molecule:before {
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      background-image: url("ucla-library-design-tokens/assets/svgs/molecule-masthead.svg");
-      background-repeat: no-repeat;
-      background-position: center 60%;
-      mix-blend-mode: soft-light;
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-image: url("ucla-library-design-tokens/assets/svgs/molecule-masthead.svg");
+    background-repeat: no-repeat;
+    background-position: center 60%;
+    mix-blend-mode: soft-light;
   }
 
   &.theme-meap {
-      .container {
-          padding: var(--space-2xl) 0;
-      }
-      .meta {
-          gap: var(--space-s);
+    .container {
+      padding: var(--space-2xl) 0;
+    }
 
-          padding: var(--space-l) var(--space-xl) var(--space-xl);
-          background: var(--color-primary-blue-03);
+    .meta {
+      gap: var(--space-s);
+
+      padding: var(--space-l) var(--space-xl) var(--space-xl);
+      background: var(--color-primary-blue-03);
 
-          .title {
-              @include step-4;
-          }
+      .title {
+        @include step-4;
       }
+    }
   }
 
   // Breakpoints
   @media (max-width: 1200px) {
-      &.theme-meap .container {
-          margin-left: var(--unit-gutter);
-          margin-right: var(--unit-gutter);
-      }
-      .container {
-          margin-left: var(--unit-gutter);
-          margin-right: var(--unit-gutter);
-      }
+    &.theme-meap .container {
+      margin-left: var(--unit-gutter);
+      margin-right: var(--unit-gutter);
+    }
+
+    .container {
+      margin-left: var(--unit-gutter);
+      margin-right: var(--unit-gutter);
+    }
   }
+
   @media #{$medium} {
-      &.theme-meap .container {
-          padding-left: var(--unit-gutter);
-          padding-right: var(--unit-gutter);
-          margin: 0;
-      }
-      .container {
-          padding-left: var(--unit-gutter);
-          padding-right: var(--unit-gutter);
-          padding-bottom: var(--space-xl);
-          margin: 0;
-      }
+    &.theme-meap .container {
+      padding-left: var(--unit-gutter);
+      padding-right: var(--unit-gutter);
+      margin: 0;
+    }
+
+    .container {
+      padding-left: var(--unit-gutter);
+      padding-right: var(--unit-gutter);
+      padding-bottom: var(--space-xl);
+      margin: 0;
+    }
   }
 }
 </style>

src/lib-components/PullQuote.vue

@@ -59,16 +59,22 @@ export default {
   --spacing-text-left: 64px;
   --container-width: $container-m-text + px;
 
-  :deep(a:link) {
+  :deep(.rich-text) {
+    max-width: none;
+    margin: 0;
+    padding-right: 0;
+  }
+
+  :deep(div) {
+    color: var(--color-primary-blue-03);
     font-size: 24px;
     font-style: italic;
     font-weight: 600;
+    line-height: 150%;
   }
 
-  :deep(.rich-text) {
-    max-width: none;
-    margin: 0;
-    padding-right: 0;
+  :deep(.parsed-content) {
+    margin-bottom: 0;
   }
 
   // Breakpoints