Add feedback buttons to cards (#938)

Add thumbs up/down feedback buttons to all cards without doing card-specific styling yet. Created a shared partial for the buttons, as well as a new config option in 'dataForRender', called 'feedback' that controls whether or not the buttons appear. Used the shared partial in all cards, including direct answers cards. J=SLAP-1544 TEST=manual Smoke testing to see if thumbs up/down buttons appear on each card
yext · Sep 1, 2021 · 43595aa · 43595aa
1 parent df97c5d
commit 43595aa
Show file tree

Hide file tree

Showing 71 changed files with 596 additions and 422 deletions.
diff --git a/cards/common-partials/thumbsfeedback.hbs b/cards/common-partials/thumbsfeedback.hbs
@@ -0,0 +1,46 @@
+<div class="{{cardType}}-feedbackWrapper">
+  <div class="{{cardType}}-feedback">
+    {{#if feedbackSubmitted}}
+      <div class="{{cardType}}-feedbackText">
+        {{feedbackTextOnSubmission}}
+      </div>
+    {{else}}
+      {{#if feedbackText}}
+        <div class="{{cardType}}-feedbackText">
+          {{feedbackText}}
+        </div>
+      {{/if}}
+      <div class="{{cardType}}-thumbsWrapper">
+        <form class="HitchhikerCard-thumbs js-HitchhikerCard-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-HitchhikerCard-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-HitchhikerCard-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>
diff --git a/cards/document-standard/component.js b/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
     };
   }
 

diff --git a/cards/document-standard/template.hbs b/cards/document-standard/template.hbs
@@ -7,7 +7,12 @@
       <div class="HitchhikerDocumentStandard-info">
         {{> details }}
       </div>
-      {{> ctas }}
+      <div class="HitchhikerDocumentStandard-actions">
+        {{> ctas }}
+        {{#if card.feedback}}
+          {{> thumbsfeedback card cardType="HitchhikerDocumentStandard"}}
+        {{/if}}
+      </div>
     </div>
   </div>
 </div>
@@ -90,4 +95,4 @@
   </a>
 </div>
 {{/if}}
-{{/inline}}
+{{/inline}}
diff --git a/cards/event-standard/component.js b/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
     };
   }
 

diff --git a/cards/event-standard/template.hbs b/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="HitchhikerEventStandard-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 cardType="HitchhikerEventStandard"}}
         {{/if}}
       </div>
-      {{/if}}
     </div>
   </div>
 </div>
@@ -109,4 +114,4 @@
       {{label}}
     </div>
   </a>
-{{/inline}}
+{{/inline}}
diff --git a/cards/faq-accordion/component.js b/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
     };
   }
 

diff --git a/cards/faq-accordion/template.hbs b/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="HitchhikerFaqAccordion-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 cardType="HitchhikerFaqAccordion"}}
+      {{/if}}
+    </div>
   </div>
 </div>
 
@@ -95,4 +100,4 @@
     {{label}}
   </div>
 </a>
-{{/inline}}
+{{/inline}}
diff --git a/cards/financial-professional-location/component.js b/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
     };
   }
 

diff --git a/cards/financial-professional-location/template.hbs b/cards/financial-professional-location/template.hbs
@@ -19,7 +19,12 @@
         {{> list }}
         {{> phone }}
       </div>
-      {{> ctas }}
+      <div class="HitchhikerFinancialProfessionalLocation-actions">
+        {{> ctas }}
+        {{#if card.feedback}}
+          {{> thumbsfeedback card cardType="HitchhikerFinancialProfessionalLocation"}}
+        {{/if}}
+      </div>
     </div>
   </div>
 </div>
@@ -197,4 +202,4 @@
   </span>
   <span class="sr-only">Close Card</span>
 </button>
-{{/inline}}
+{{/inline}}
diff --git a/cards/job-standard/component.js b/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
     };
   }
 

diff --git a/cards/job-standard/template.hbs b/cards/job-standard/template.hbs
@@ -7,7 +7,12 @@
       <div class="HitchhikerJobStandard-info">
         {{> details }}
       </div>
-      {{> ctas }}
+      <div class="HitchhikerJobStandard-actions">
+        {{> ctas }}
+        {{#if card.feedback}}
+          {{> thumbsfeedback card cardType="HitchhikerJobStandard"}}
+        {{/if}}
+      </div>
     </div>
   </div>
 </div>
@@ -112,4 +117,4 @@
   </a>
 </div>
 {{/if}}
-{{/inline}}
+{{/inline}}
diff --git a/cards/link-standard/component.js b/cards/link-standard/component.js
@@ -28,6 +28,10 @@ class link_standardCardComponent extends BaseCard['link-standard'] {
       //   showLessText: 'Show less' // Label when toggle will hide truncated text
       // },
       details: profile.htmlSnippet, // The text in the body of the card
+      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
     };
   }
 

diff --git a/cards/link-standard/template.hbs b/cards/link-standard/template.hbs
@@ -4,6 +4,11 @@
     {{> subtitle }}
     <div class="HitchhikerLinkStandard-contentWrapper">
       {{> details }}
+      <div class="HitchhikerLinkStandard-actions">
+        {{#if card.feedback}}
+          {{> thumbsfeedback card cardType="HitchhikerLinkStandard"}}
+        {{/if}}
+      </div>
     </div>
   </div>
 </div>
@@ -67,4 +72,4 @@
   {{/if}}
 </div>
 {{/if}}
-{{/inline}}
+{{/inline}}
diff --git a/cards/location-standard/component.js b/cards/location-standard/component.js
@@ -53,7 +53,11 @@ class location_standardCardComponent extends BaseCard['location-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
     };
   }
 

diff --git a/cards/location-standard/template.hbs b/cards/location-standard/template.hbs
@@ -24,7 +24,12 @@
         {{> contactInfo }}
         {{> details }}
       </div>
-      {{> ctas }}
+      <div class="HitchhikerLocationStandard-actions">
+        {{> ctas }}
+        {{#if card.feedback}}
+          {{> thumbsfeedback card cardType="HitchhikerLocationStandard"}}
+        {{/if}}
+      </div>
     </div>
   </div>
 </div>
@@ -208,4 +213,4 @@
   </span>
   <span class="sr-only">Close Card</span>
 </button>
-{{/inline}}
+{{/inline}}
diff --git a/cards/menuitem-standard/component.js b/cards/menuitem-standard/component.js
@@ -54,7 +54,11 @@ class menuitem_standardCardComponent extends BaseCard['menuitem-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
     };
   }
 

diff --git a/cards/menuitem-standard/template.hbs b/cards/menuitem-standard/template.hbs
@@ -8,16 +8,21 @@
         {{> list }}
         {{> details }}
       </div>
-      {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}}
-      <div class="HitchhikerMenuItemStandard-ctasWrapper">
-        {{#with card.CTA1}}
-        {{> CTA ctaName="primaryCTA" }}
-        {{/with}}
-        {{#with card.CTA2}}
-        {{> CTA ctaName="secondaryCTA" }}
-        {{/with}}
+      <div class="HitchhikerMenuItemStandard-actions">
+        {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}}
+        <div class="HitchhikerMenuItemStandard-ctasWrapper">
+          {{#with card.CTA1}}
+          {{> CTA ctaName="primaryCTA" }}
+          {{/with}}
+          {{#with card.CTA2}}
+          {{> CTA ctaName="secondaryCTA" }}
+          {{/with}}
+        </div>
+        {{/if}}
+        {{#if card.feedback}}
+          {{> thumbsfeedback card cardType="HitchhikerMenuItemStandard"}}
+        {{/if}}
       </div>
-      {{/if}}
     </div>
   </div>
 </div>
@@ -132,4 +137,4 @@
   </a>
 </div>
 {{/if}}
-{{/inline}}
+{{/inline}}