Add generic thumbs up/down

cards/card_component.js

@@ -30,6 +30,38 @@ BaseCard["{{componentName}}"] = class extends ANSWERS.Component {
         })
       );
     }
+
+    this.addFeedbackListeners();
+  }
+
+  addFeedbackListeners() {
+    const feedbackFormSelector = '.js-HitchhikerCard-feedbackForm';
+    let feedbackFormEl = this._container.querySelector(feedbackFormSelector);
+    if (feedbackFormEl) {
+      // For WCAG compliance, the feedback should be a submittable form
+      feedbackFormEl.addEventListener('submit', (e) => {
+        const formTargetEl = e.target;
+        const isGood = formTargetEl.querySelector('input:checked').value === 'true';
+
+        this.reportQuality(isGood);
+        this.updateState({
+          feedbackSubmitted: true
+        });
+      });
+
+      let thumbSelectorEls = this._container.querySelectorAll('.js-HitchhikerCard-thumbInput');
+      if (thumbSelectorEls) {
+        thumbSelectorEls.forEach(el => {
+          el.addEventListener('click', (e) => {
+            let input = el.querySelector('input');
+            if (input) {
+              input.checked = true;
+            }
+            HitchhikerJS.DOM.triggerCustomEvent(this._container, feedbackFormSelector, 'submit');
+          });
+        });
+      }
+    }
   }
 
   setState(data) {
@@ -46,7 +78,7 @@ BaseCard["{{componentName}}"] = class extends ANSWERS.Component {
       cardData.titleEventOptions = updatedEventOptions;
     }
 
-    let { details, showMoreDetails } = cardData;
+    const { details, showMoreDetails } = cardData;
 
     const cardDetails = details || '';
     const cardShowMoreConfig = showMoreDetails || {};
@@ -56,7 +88,7 @@ BaseCard["{{componentName}}"] = class extends ANSWERS.Component {
     // The card's details must extend past this limit as well for the toggling to be enabled.
     const showExcessDetailsToggle = showMoreLimit && cardDetails.length > showMoreLimit;
 
-    let truncatedDetails = showExcessDetailsToggle
+    const truncatedDetails = showExcessDetailsToggle
       ? `${cardDetails.substring(0, showMoreLimit)}...`
       : '';
 
@@ -78,6 +110,42 @@ BaseCard["{{componentName}}"] = class extends ANSWERS.Component {
     }
   }
 
+  /**
+   * reportQuality will send the quality feedback to analytics
+   * @param {boolean} isGood true if the answer is what you were looking for
+   */
+  reportQuality(isGood) {
+    /**
+     * EventTypes are explicit strings defined
+     * for what the server expects for analytics.
+     *
+     * @enum
+     */
+    const EventTypes = {
+      THUMBS_UP: 'THUMBS_UP',
+      THUMBS_DOWN: 'THUMBS_DOWN'
+    };
+    const eventType = isGood === true ? EventTypes.THUMBS_UP : EventTypes.THUMBS_DOWN;
+    const event = new ANSWERS.AnalyticsEvent(eventType)
+      .addOptions({
+        directAnswer: false,
+        verticalKey: this.verticalKey,
+        searcher: this._config.isUniversal ? 'UNIVERSAL' : 'VERTICAL',
+        entityId: this.result.id
+      });
+
+    this.analyticsReporter.report(event);
+  }
+
+  /**
+   * updateState enables for partial updates (the delta between the old and new)
+   * @type {object} The new state to apply to the old
+   */
+  updateState (state = {}) {
+    const newState = Object.assign({}, this.getState(), state);
+    this.setState(newState);
+  }
+
   addDefaultEventOptions(eventOptions = {}) {
     return Object.assign({}, {
         verticalKey: this.verticalKey,

cards/common-partials/thumbsfeedback.hbs

@@ -0,0 +1,54 @@
+{{#if directAnswerClass}}
+  {{> feedback className=directAnswerClass cardType='HitchhikerDirectAnswerCard'}}
+{{else}}
+  {{> feedback className='HitchhikerCard' cardType='HitchhikerCard'}}
+{{/if}}
+
+{{#*inline 'feedback'}}
+  <div class="{{className}}-feedbackWrapper">
+    <div class="{{className}}-feedbackContent">
+      {{#if feedbackSubmitted}}
+        <div class="{{className}}-feedbackText">
+          {{feedbackTextOnSubmission}}
+        </div>
+      {{else}}
+        {{#if feedbackText}}
+          <div class="{{className}}-feedbackText">
+            {{feedbackText}}
+          </div>
+        {{/if}}
+        <div class="{{className}}-thumbsWrapper">
+          <form class="HitchhikerCard-thumbs js-{{cardType}}-feedbackForm">
+            <fieldset class="HitchhikerCard-fieldset">
+              <label class="HitchhikerCard-thumb">
+                <span class="HitchhikerCard-thumbUpIcon">
+                  {{> icons/builtInIcon iconName='thumb' }}
+                </span>
+                <input type="radio"
+                  name="feedback"
+                  value="true"
+                  class="HitchhikerCard-feedback HitchhikerCard-thumbUpButton js-{{cardType}}-thumbInput">
+                <span class="sr-only">
+                  {{positiveFeedbackSrText}}
+                </span>
+              </label>
+              <label class="HitchhikerCard-thumb">
+                <span class="HitchhikerCard-thumbDownIcon">
+                  {{> icons/builtInIcon iconName='thumb' }}
+                </span>
+                <input type="radio"
+                  name="feedback"
+                  value="false"
+                  class="HitchhikerCard-feedback HitchhikerCard-thumbDownButton js-{{cardType}}-thumbInput">
+                <span class="sr-only">
+                  {{negativeFeedbackSrText}}
+                </span>
+              </label>
+            </fieldset>
+            <button type="submit" class="sr-only sr-only-focusable">Send feedback</button>
+          </form>
+        </div>
+      {{/if}}
+    </div>
+  </div>
+{{/inline}}

cards/document-standard/component.js

@@ -48,7 +48,11 @@ class document_standardCardComponent extends BaseCard['document-standard'] {
         eventType: 'CTA_CLICK',
         eventOptions: this.addDefaultEventOptions(),
         // ariaLabel: '',
-      }
+      },
+      feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card
+      feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display after a thumbs up/down is clicked
+      positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up
+      negativeFeedbackSrText: 'This did not answer my question' // Screen reader only text for thumbs-down
     };
   }
 

cards/document-standard/template.hbs

@@ -7,7 +7,12 @@
       <div class="HitchhikerDocumentStandard-info">
         {{> details }}
       </div>
-      {{> ctas }}
+      <div class="HitchhikerCard-actions">
+        {{> ctas }}
+        {{#if card.feedback}}
+          {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
+        {{/if}}
+      </div>
     </div>
   </div>
 </div>
@@ -90,4 +95,4 @@
   </a>
 </div>
 {{/if}}
-{{/inline}}
+{{/inline}}

cards/event-standard/component.js

@@ -48,7 +48,11 @@ class event_standardCardComponent extends BaseCard['event-standard'] {
         eventType: 'DRIVING_DIRECTIONS',
         eventOptions: this.addDefaultEventOptions(),
         // ariaLabel: '',
-      }
+      },
+      feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card
+      feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display after a thumbs up/down is clicked
+      positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up
+      negativeFeedbackSrText: 'This did not answer my question' // Screen reader only text for thumbs-down
     };
   }
 

cards/event-standard/template.hbs

@@ -32,24 +32,29 @@
         {{/if}}
         {{> 'details'}}
       </div>
-      {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}}
-      <div class="HitchhikerEventStandard-ctasWrapper">
-        {{#if (all card.CTA1.url card.CTA1.label)}}
-        <div class="HitchhikerEventStandard-primaryCTA">
-          {{#with card.CTA1}}
-            {{> CTA }}
-          {{/with}}
+      <div class="HitchhikerCard-actions">
+        {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}}
+        <div class="HitchhikerEventStandard-ctasWrapper">
+          {{#if (all card.CTA1.url card.CTA1.label)}}
+          <div class="HitchhikerEventStandard-primaryCTA">
+            {{#with card.CTA1}}
+              {{> CTA }}
+            {{/with}}
+          </div>
+          {{/if}}
+          {{#if (all card.CTA2.url card.CTA2.label)}}
+          <div class="HitchhikerEventStandard-secondaryCTA">
+            {{#with card.CTA2}}
+              {{> CTA }}
+            {{/with}}
+          </div>
+          {{/if}}
         </div>
         {{/if}}
-        {{#if (all card.CTA2.url card.CTA2.label)}}
-        <div class="HitchhikerEventStandard-secondaryCTA">
-          {{#with card.CTA2}}
-            {{> CTA }}
-          {{/with}}
-        </div>
+        {{#if card.feedback}}
+          {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
         {{/if}}
       </div>
-      {{/if}}
     </div>
   </div>
 </div>
@@ -109,4 +114,4 @@
       {{label}}
     </div>
   </a>
-{{/inline}}
+{{/inline}}

cards/faq-accordion/component.js

@@ -47,6 +47,10 @@ class faq_accordionCardComponent extends BaseCard['faq-accordion'] {
         eventOptions: this.addDefaultEventOptions({ /* Add additional options here */ }),
         // ariaLabel: '',
       },
+      feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card
+      feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display after a thumbs up/down is clicked
+      positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up
+      negativeFeedbackSrText: 'This did not answer my question' // Screen reader only text for thumbs-down
     };
   }
 
@@ -64,11 +68,29 @@ class faq_accordionCardComponent extends BaseCard['faq-accordion'] {
 
     const contentEl = this._container.querySelector(accordionContentSelector);
     let isExpanded = this._container.querySelector(`.${accordionExpandedClass}`);
-    contentEl.style.height = `${isExpanded ? contentEl.scrollHeight : 0}px`;
+
+    const cardEl = this._container.querySelector(accordionCardSelector);
     const linkEls = contentEl.querySelectorAll('a');
+
+    if (this.stayExpanded && this.getState('feedbackSubmitted')) {
+      isExpanded = true;
+      cardEl.classList.add(accordionExpandedClass);
+      accordionToggleEl.setAttribute('aria-expanded', 'true');
+      contentEl.setAttribute('aria-hidden', 'false');
+    }
+    contentEl.style.height = `${isExpanded ? contentEl.scrollHeight : 0}px`;
     this._setLinksInteractivity(linkEls, isExpanded);
 
-    const cardEl = this._container.querySelector(accordionCardSelector);
+    this.stayExpanded = false;
+
+    const thumbSelectorEls = this._container.querySelectorAll('.js-HitchhikerCard-thumbInput');
+    if (thumbSelectorEls) {
+      thumbSelectorEls.forEach(el => {
+        el.addEventListener('click', (e) => {
+          this.stayExpanded = true;
+        });
+      });
+    }
 
     accordionToggleEl.addEventListener('click', function() {
       isExpanded = !isExpanded;

cards/faq-accordion/template.hbs

@@ -19,24 +19,29 @@
       </div>
     {{/if}}
     {{> 'details'}}
-    {{#if (any (all card.CTA1 card.CTA1.url card.CTA1.label) (all card.CTA2 card.CTA2.url card.CTA2.label))}}
-      <div class="HitchhikerFaqAccordion-ctasWrapper">
-        {{#if card.CTA1.url}}
-        <div class="HitchhikerFaqAccordion-primaryCTA">
-          {{#with card.CTA1}}
-            {{> CTA }}
-          {{/with}}
+    <div class="HitchhikerCard-actions">
+      {{#if (any (all card.CTA1 card.CTA1.url card.CTA1.label) (all card.CTA2 card.CTA2.url card.CTA2.label))}}
+        <div class="HitchhikerFaqAccordion-ctasWrapper">
+          {{#if card.CTA1.url}}
+          <div class="HitchhikerFaqAccordion-primaryCTA">
+            {{#with card.CTA1}}
+              {{> CTA }}
+            {{/with}}
+          </div>
+          {{/if}}
+          {{#if card.CTA2.url}}
+          <div class="HitchhikerFaqAccordion-secondaryCTA">
+            {{#with card.CTA2}}
+              {{> CTA }}
+            {{/with}}
+          </div>
+          {{/if}}
         </div>
-        {{/if}}
-        {{#if card.CTA2.url}}
-        <div class="HitchhikerFaqAccordion-secondaryCTA">
-          {{#with card.CTA2}}
-            {{> CTA }}
-          {{/with}}
-        </div>
-        {{/if}}
-      </div>
-    {{/if}}
+      {{/if}}
+      {{#if card.feedback}}
+        {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
+      {{/if}}
+    </div>
   </div>
 </div>
 
@@ -95,4 +100,4 @@
     {{label}}
   </div>
 </a>
-{{/inline}}
+{{/inline}}

cards/financial-professional-location/component.js

@@ -64,7 +64,11 @@ class financial_professional_locationCardComponent extends BaseCard['financial-p
         eventType: 'CTA_CLICK',
         eventOptions: this.addDefaultEventOptions(),
         // ariaLabel: ''
-      }
+      },
+      feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card
+      feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display after a thumbs up/down is clicked
+      positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up
+      negativeFeedbackSrText: 'This did not answer my question' // Screen reader only text for thumbs-down
     };
   }
 

cards/financial-professional-location/template.hbs

@@ -19,7 +19,12 @@
         {{> list }}
         {{> phone }}
       </div>
-      {{> ctas }}
+      <div class="HitchhikerCard-actions">
+        {{> ctas }}
+        {{#if card.feedback}}
+          {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
+        {{/if}}
+      </div>
     </div>
   </div>
 </div>
@@ -197,4 +202,4 @@
   </span>
   <span class="sr-only">Close Card</span>
 </button>
-{{/inline}}
+{{/inline}}

cards/job-standard/component.js

@@ -39,7 +39,11 @@ class job_standardCardComponent extends BaseCard['job-standard'] {
         eventType: 'CTA_CLICK', // Type of Analytics event fired when clicking the CTA
         eventOptions: this.addDefaultEventOptions(),
         // ariaLabel: '', // Accessible text providing a descriptive label for the CTA
-      }
+      },
+      feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card
+      feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display after a thumbs up/down is clicked
+      positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up
+      negativeFeedbackSrText: 'This did not answer my question' // Screen reader only text for thumbs-down
     };
   }