support rich text direct answers

yext · Jun 17, 2021 · fd5418e · fd5418e
1 parent 18377da
commit fd5418e
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 14 deletions.
diff --git a/directanswercards/documentsearch-standard/component.js b/directanswercards/documentsearch-standard/component.js
@@ -13,14 +13,21 @@ class documentsearch_standardComponent extends BaseDirectAnswerCard['documentsea
    */
   dataForRender(type, answer, relatedItem, snippet) {
     const relatedItemData = relatedItem.data || {};
+    let snippetValue = "";
+    if (answer.fieldType == "rich_text" && snippet) {
+      snippetValue = ANSWERS.formatRichText(snippet.value, 'snippet');
+    } else if (snippet) {
+      snippetValue = Formatter.highlightField(snippet.value, snippet.matchedSubstrings);
+    }
 
     return {
       value: answer.value,
-      snippet: snippet && Formatter.highlightField(snippet.value, snippet.matchedSubstrings), // Text snippet to include alongside the answer
+      snippet: snippetValue, // Text snippet to include alongside the answer
       viewDetailsText: relatedItemData.fieldValues && relatedItemData.fieldValues.name, // Text below the direct answer and snippet
       viewDetailsLink: relatedItemData.website || (relatedItemData.fieldValues && relatedItemData.fieldValues.landingPageUrl), // Link for the "view details" text
       viewDetailsEventOptions: this.addDefaultEventOptions({
-        ctaLabel: 'VIEW_DETAILS'
+        ctaLabel: 'VIEW_DETAILS',
+        fieldName: 'snippet'
       }), // The event options for viewDetails click analytics
       linkTarget: '_top', // Target for all links in the direct answer
       // CTA: {
@@ -29,7 +36,7 @@ class documentsearch_standardComponent extends BaseDirectAnswerCard['documentsea
       //   url: '', // The URL a user will be directed to when clicking
       //   target: '_top', // Where the new URL will be opened
       //   eventType: 'CTA_CLICK', // Type of Analytics event fired when clicking the CTA
-      //   eventOptions: this.addDefaultEventOptions() // The event options for CTA click analytics
+      //   eventOptions: this.addDefaultEventOptions({ fieldName: 'snippet' }) // The event options for CTA click analytics
       // },
       footerTextOnSubmission: 'Thank you for your feedback!', // Text to display in the footer when a thumbs up/down is clicked
       footerText: 'Was this the answer you were looking for?', // Text to display in the footer

diff --git a/static/scss/answers/common/mixins.scss b/static/scss/answers/common/mixins.scss
@@ -11,12 +11,12 @@
 
 @mixin list_styling
 {
-  display: flex;
+  display: block;
   flex-direction: column;
   list-style-position: outside;
   margin-left: var(--yxt-base-spacing);
-  margin-top: var(--yxt-base-spacing);
-  margin-bottom: var(--yxt-base-spacing);
+  margin-top: calc(var(--yxt-base-spacing) / 2);
+  margin-bottom: calc(var(--yxt-base-spacing) / 2);
 }
 
 @mixin strong_styling
@@ -36,7 +36,7 @@
   margin-block-end: .33em;
   margin-inline-start: 0px;
   margin-inline-end: 0px;
-  font-weight: bold;
+  font-weight: var(--yxt-font-weight-semibold);
 }
 
 @mixin rich_text_formatting
@@ -55,7 +55,7 @@
 
   li
   {
-    margin-bottom: 0;
+    margin-bottom: calc(var(--yxt-base-spacing) / 2);
     margin-left: var(--yxt-base-spacing);
   }
 
@@ -92,7 +92,7 @@
 
   p
   {
-    margin-bottom: var(--yxt-base-spacing);
+    margin-bottom: 0;
   }
 
   s
@@ -135,7 +135,7 @@
     margin-inline-end: var(--yxt-base-spacing);
   }
 
-  h1 
+  h1, .js-yxt-rtfValue > *:first-child // The first item should also get h1 styling
   {
     @include header_styling;
     font-size: var(--yxt-font-size-xlg);
@@ -170,6 +170,10 @@
     @include header_styling;
     font-size: var(--yxt-font-size-xs);
   }
+
+  img {
+    margin-top: calc(var(--yxt-base-spacing) / 2);
+  }
 }
 
 @mixin Text(

diff --git a/static/scss/answers/directanswercards/documentsearch-standard.scss b/static/scss/answers/directanswercards/documentsearch-standard.scss
@@ -47,16 +47,21 @@
     justify-content: space-between;
 
     padding-top: calc(var(--yxt-base-spacing) * 0.7);
-    padding-bottom: var(--yxt-base-spacing);
+    padding-bottom: calc(var(--yxt-base-spacing) * 0.7);
     padding-left: var(--yxt-base-spacing);
     padding-right: var(--yxt-base-spacing);
 
     @include Text(
-      $size: var(--yxt-direct-answer-footer-font-size),
+      $size: var(--yxt-font-size-md-lg),
       $line-height: var(--yxt-direct-answer-footer-line-height),
-      $weight: var(--yxt-direct-answer-footer-font-weight),
-      $color: var(--yxt-direct-answer-footer-color)
+      $weight: var(--yxt-font-weight-light),
+      $color: var(--yxt-color-text-primary)
     );
+  } 
+
+  &-snippet
+  {
+    @include rich_text_formatting;
   }
 
   &-cta
@@ -153,6 +158,8 @@
 
   &-viewMoreWrapper
   {
+    font-size: var(--yxt-direct-answer-view-details-font-size);
+
     &:not(:first-child)
     {
       margin-top: calc(var(--yxt-base-spacing) / 2);