feat: APPS-1881 use rich-text in masthead component

src/lib-components/MastheadSecondary.vue

@@ -8,17 +8,22 @@
         <div class="container">
             <div class="meta">
                 <h1 class="title" v-html="title" />
-                <div v-if="text" class="text" v-html="text" />
+                <rich-text v-if="text" class="text" :rich-text-content="text" />
             </div>
         </div>
     </div>
 </template>
 
 <script>
 import ResponsiveImage from "@/lib-components/ResponsiveImage.vue"
+import RichText from "@/lib-components/RichText"
 import _isEmpty from "lodash/isEmpty"
 
 export default {
+    components: {
+        ResponsiveImage,
+        RichText,
+    },
     props: {
         hasMolecules: {
             type: Boolean,
@@ -41,9 +46,6 @@ export default {
             default: () => ({}),
         },
     },
-    components: {
-        ResponsiveImage,
-    },
     computed: {
         classes() {
             return [
@@ -107,8 +109,17 @@ export default {
         .text {
             @include step-0;
             text-shadow: 0px 2px 8px rgba(113, 113, 113, 0.08);
+            margin: 0;
         }
     }
+    ::v-deep h3,
+    ::v-deep h4,
+    ::v-deep h5,
+    ::v-deep p,
+    ::v-deep li {
+        color: var(--color-white);
+        margin: 0;
+    }
 
     // Variants
     &.has-molecule:before {

src/stories/MastheadSecondary.stories.js

@@ -10,25 +10,44 @@ export default {
 }
 
 // TODO: search-home was originally search-generic, but we haven't added it to this repo yet. I haven't added it here because the slot in MastheadSecondary doesn't even get used, so it never renders, but I think at some point we'll have to change back to search-generic and actually get it to render in the component?
+
+const mock = {
+    title: "Find and Reserve a Space",
+    summary:
+        "<p>Browse on-campus spaces for study, meetings, and group projects.</p>",
+}
+
+// Variations of stories below
 export const Default = () => ({
+    data() {
+        return { ...mock }
+    },
     components: { MastheadSecondary, SearchHome },
     template: `
         <masthead-secondary
-            title="Find and Reserve a Space"
-            text="Browse on-campus spaces for study, meetings, and group projects."
+            :title="title"
+            :text="summary"
         >
             <search-home actionURL="/search" />
         </masthead-secondary>
     `,
 })
 
-// TODO: see TODO for Default story
+const mock2 = {
+    title: "Find and Reserve a Space",
+    summary:
+        "<p>Schedule a research consultation, chat with a librarian, email us, and find tutorials & workshops to support your research journey.</p> <h3>Learn how to</h3><ul><li>Find the Cafeteria</li><li>Create a Study Group</li><li>Navigate the Libraries</li></ul>",
+}
+
 export const LongText = () => ({
+    data() {
+        return { ...mock2 }
+    },
     components: { MastheadSecondary, SearchHome },
     template: `
         <masthead-secondary
-            title="Research"
-            text="Schedule a research consultation, chat with a librarian, email us, and find tutorials & workshops to support your research journey."
+            :title="title"
+            :text="summary"
         >
             <search-home actionURL="/search" />
         </masthead-secondary
@@ -39,7 +58,7 @@ export const NoSearch = () => ({
     template: `
         <masthead-secondary
             title="Find and Reserve a Space"
-            text="Browse on-campus spaces for study, meetings, and group projects.
+            text="<p>Browse on-campus spaces for study, meetings, and group projects.</p>
         "/>
     `,
 })
@@ -59,19 +78,22 @@ export const MeapTheme = () => ({
     components: { MastheadSecondary },
     data: () => ({
         heroImage: {
-            src: "https://meap.library.ucla.edu/sites/default/files/featured/meap-homepage-header.jpg",
+            src: "https://static.library.ucla.edu/craftassetsprod/MEAP/MEAP-images/_2560xAUTO_crop_center-center_none/meap-homepage-header.jpeg",
             sizes: "100vw",
             alt: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
             title: "Lorem ipsum",
             caption: "Lorem ipsum",
             height: 338,
             width: 1440,
         },
+        title: "Modern Endangered Archives Program",
+        summary:
+            "<p>Our grants enable digitization and access to at-risk cultural heritage collections from around the world. Explore our projects and learn more about the available grant opportunities.</p>",
     }),
     template: `
         <masthead-secondary
-            title="Modern Endangered Archives Program"
-            text="Our grants enable digitization and access to at-risk cultural heritage collections from around the world. Explore our projects and learn more about the available grant opportunities."
+            :title="title"
+            :text="summary"
             theme="meap"
             :hero-image="heroImage"
         />