Add card-specific feedback button styling (#940)

Add card-specific styling for thumbs up/down feedback buttons on all results cards. J=SLAP-1544 TEST=manual Smoke testing to see if buttons match mock for each card
yext · Sep 9, 2021 · 692f9f5 · 692f9f5
1 parent 77948f2
commit 692f9f5
Show file tree

Hide file tree

Showing 45 changed files with 327 additions and 124 deletions.
diff --git a/cards/common-partials/thumbsfeedback.hbs b/cards/common-partials/thumbsfeedback.hbs
@@ -1,62 +1,54 @@
-<div class="{{cardType}}-feedbackWrapper">
-  <div class="{{cardType}}-feedbackContent">
-    {{#if feedbackSubmitted}}
-      <div class="{{cardType}}-feedbackText">
-        {{feedbackTextOnSubmission}}
-      </div>
-    {{else}}
-      {{#if feedbackText}}
-        <div class="{{cardType}}-feedbackText">
-          {{feedbackText}}
+{{#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 class="{{cardType}}-thumbsWrapper">
-        <form
-          {{#if directAnswer}}
-            class="HitchhikerCard-thumbs js-HitchhikerDirectAnswerCard-feedbackForm"
-          {{else}}
-            class="HitchhikerCard-thumbs js-HitchhikerCard-feedbackForm"
-          {{/if}}
-        >
-          <fieldset class="HitchhikerCard-fieldset">
-            <label class="HitchhikerCard-thumb">
-              <span class="HitchhikerCard-thumbUpIcon">
-                {{> icons/builtInIcon iconName='thumb' }}
-              </span>
-              <input type="radio"
-                name="feedback"
-                value="true"
-                {{#if directAnswer}}
-                  class="HitchhikerCard-feedback HitchhikerCard-thumbUpButton js-HitchhikerDirectAnswerCard-thumbInput"
-                {{else}}
-                  class="HitchhikerCard-feedback HitchhikerCard-thumbUpButton js-HitchhikerCard-thumbInput"
-                {{/if}}
-              >
-              <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"
-                {{#if directAnswer}}
-                  class="HitchhikerCard-feedback HitchhikerCard-thumbDownButton js-HitchhikerDirectAnswerCard-thumbInput"
-                {{else}}
-                  class="HitchhikerCard-feedback HitchhikerCard-thumbDownButton js-HitchhikerCard-thumbInput"
-                {{/if}}
-              >
-              <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>
-</div>
+{{/inline}}
diff --git a/cards/document-standard/template.hbs b/cards/document-standard/template.hbs
@@ -7,10 +7,10 @@
       <div class="HitchhikerDocumentStandard-info">
         {{> details }}
       </div>
-      <div class="HitchhikerDocumentStandard-actions">
+      <div class="HitchhikerCard-actions">
         {{> ctas }}
         {{#if card.feedback}}
-          {{> thumbsfeedback card cardType="HitchhikerDocumentStandard" feedbackSubmitted=feedbackSubmitted}}
+          {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
         {{/if}}
       </div>
     </div>

diff --git a/cards/event-standard/template.hbs b/cards/event-standard/template.hbs
@@ -32,7 +32,7 @@
         {{/if}}
         {{> 'details'}}
       </div>
-      <div class="HitchhikerEventStandard-actions">
+      <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)}}
@@ -52,7 +52,7 @@
         </div>
         {{/if}}
         {{#if card.feedback}}
-          {{> thumbsfeedback card cardType="HitchhikerEventStandard" feedbackSubmitted=feedbackSubmitted}}
+          {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
         {{/if}}
       </div>
     </div>

diff --git a/cards/faq-accordion/component.js b/cards/faq-accordion/component.js
@@ -68,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;

diff --git a/cards/faq-accordion/template.hbs b/cards/faq-accordion/template.hbs
@@ -19,7 +19,7 @@
       </div>
     {{/if}}
     {{> 'details'}}
-    <div class="HitchhikerFaqAccordion-actions">
+    <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}}
@@ -39,7 +39,7 @@
         </div>
       {{/if}}
       {{#if card.feedback}}
-        {{> thumbsfeedback card cardType="HitchhikerFaqAccordion" feedbackSubmitted=feedbackSubmitted}}
+        {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
       {{/if}}
     </div>
   </div>

diff --git a/cards/financial-professional-location/template.hbs b/cards/financial-professional-location/template.hbs
@@ -19,10 +19,10 @@
         {{> list }}
         {{> phone }}
       </div>
-      <div class="HitchhikerFinancialProfessionalLocation-actions">
+      <div class="HitchhikerCard-actions">
         {{> ctas }}
         {{#if card.feedback}}
-          {{> thumbsfeedback card cardType="HitchhikerFinancialProfessionalLocation" feedbackSubmitted=feedbackSubmitted}}
+          {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
         {{/if}}
       </div>
     </div>

diff --git a/cards/job-standard/template.hbs b/cards/job-standard/template.hbs
@@ -7,10 +7,10 @@
       <div class="HitchhikerJobStandard-info">
         {{> details }}
       </div>
-      <div class="HitchhikerJobStandard-actions">
+      <div class="HitchhikerCard-actions">
         {{> ctas }}
         {{#if card.feedback}}
-          {{> thumbsfeedback card cardType="HitchhikerJobStandard" feedbackSubmitted=feedbackSubmitted}}
+          {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
         {{/if}}
       </div>
     </div>

diff --git a/cards/link-standard/template.hbs b/cards/link-standard/template.hbs
@@ -4,9 +4,9 @@
     {{> subtitle }}
     <div class="HitchhikerLinkStandard-contentWrapper">
       {{> details }}
-      <div class="HitchhikerLinkStandard-actions">
+      <div class="HitchhikerCard-actions">
         {{#if card.feedback}}
-          {{> thumbsfeedback card cardType="HitchhikerLinkStandard" feedbackSubmitted=feedbackSubmitted}}
+          {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
         {{/if}}
       </div>
     </div>

diff --git a/cards/location-standard/template.hbs b/cards/location-standard/template.hbs
@@ -24,10 +24,10 @@
         {{> contactInfo }}
         {{> details }}
       </div>
-      <div class="HitchhikerLocationStandard-actions">
+      <div class="HitchhikerCard-actions">
         {{> ctas }}
         {{#if card.feedback}}
-          {{> thumbsfeedback card cardType="HitchhikerLocationStandard" feedbackSubmitted=feedbackSubmitted}}
+          {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
         {{/if}}
       </div>
     </div>

diff --git a/cards/menuitem-standard/template.hbs b/cards/menuitem-standard/template.hbs
@@ -8,7 +8,7 @@
         {{> list }}
         {{> details }}
       </div>
-      <div class="HitchhikerMenuItemStandard-actions">
+      <div class="HitchhikerCard-actions">
         {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}}
         <div class="HitchhikerMenuItemStandard-ctasWrapper">
           {{#with card.CTA1}}
@@ -20,7 +20,7 @@
         </div>
         {{/if}}
         {{#if card.feedback}}
-          {{> thumbsfeedback card cardType="HitchhikerMenuItemStandard" feedbackSubmitted=feedbackSubmitted}}
+          {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
         {{/if}}
       </div>
     </div>

diff --git a/cards/multilang-event-standard/template.hbs b/cards/multilang-event-standard/template.hbs
@@ -32,7 +32,7 @@
         {{/if}}
         {{> 'details'}}
       </div>
-      <div class="HitchhikerEventStandard-actions">
+      <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)}}
@@ -52,7 +52,7 @@
           </div>
         {{/if}}
         {{#if card.feedback}}
-          {{> thumbsfeedback card cardType="HitchhikerEventStandard" feedbackSubmitted=feedbackSubmitted}}
+          {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
         {{/if}}
       </div>
     </div>

diff --git a/cards/multilang-faq-accordion/component.js b/cards/multilang-faq-accordion/component.js
@@ -68,11 +68,29 @@ class multilang_faq_accordionCardComponent extends BaseCard['multilang-faq-accor
 
     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;

diff --git a/cards/multilang-faq-accordion/template.hbs b/cards/multilang-faq-accordion/template.hbs
@@ -19,7 +19,7 @@
       </div>
     {{/if}}
     {{> 'details'}}
-    <div class="HitchhikerFaqAccordion-actions">
+    <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}}
@@ -39,7 +39,7 @@
         </div>
       {{/if}}
       {{#if card.feedback}}
-        {{> thumbsfeedback card cardType="HitchhikerFaqAccordion" feedbackSubmitted=feedbackSubmitted}}
+        {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
       {{/if}}
     </div>
   </div>

diff --git a/cards/multilang-financial-professional-location/template.hbs b/cards/multilang-financial-professional-location/template.hbs
@@ -19,10 +19,10 @@
         {{> list }}
         {{> phone }}
       </div>
-      <div class="HitchhikerFinancialProfessionalLocation-actions">
+      <div class="HitchhikerCard-actions">
         {{> ctas }}
         {{#if card.feedback}}
-          {{> thumbsfeedback card cardType="HitchhikerFinancialProfessionalLocation" feedbackSubmitted=feedbackSubmitted}}
+          {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
         {{/if}}
       </div>
     </div>

diff --git a/cards/multilang-job-standard/template.hbs b/cards/multilang-job-standard/template.hbs
@@ -7,10 +7,10 @@
       <div class="HitchhikerJobStandard-info">
         {{> details }}
       </div>
-      <div class="HitchhikerJobStandard-actions">
+      <div class="HitchhikerCard-actions">
         {{> ctas }}
         {{#if card.feedback}}
-          {{> thumbsfeedback card cardType="HitchhikerJobStandard" feedbackSubmitted=feedbackSubmitted}}
+          {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
         {{/if}}
       </div>
     </div>

diff --git a/cards/multilang-link-standard/template.hbs b/cards/multilang-link-standard/template.hbs
@@ -4,9 +4,9 @@
     {{> subtitle }}
     <div class="HitchhikerLinkStandard-contentWrapper">
       {{> details }}
-      <div class="HitchhikerLinkStandard-actions">
+      <div class="HitchhikerCard-actions">
         {{#if card.feedback}}
-          {{> thumbsfeedback card cardType="HitchhikerLinkStandard" feedbackSubmitted=feedbackSubmitted}}
+          {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
         {{/if}}
       </div>
     </div>

diff --git a/cards/multilang-location-standard/template.hbs b/cards/multilang-location-standard/template.hbs
@@ -24,10 +24,10 @@
         {{> contactInfo }}
         {{> details }}
       </div>
-      <div class="HitchhikerLocationStandard-actions">
+      <div class="HitchhikerCard-actions">
         {{> ctas }}
         {{#if card.feedback}}
-          {{> thumbsfeedback card cardType="HitchhikerLocationStandard" feedbackSubmitted=feedbackSubmitted}}
+          {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
         {{/if}}
       </div>
     </div>