fix(feedback): Disable all buttons based on click on no matter which feedback element (#524)

Co-authored-by: LRubin <[email protected]>

Author: imklau

js/feedback/index.js

@@ -1,13 +1,16 @@
 const COMPONENT_NAME = 'data-feedback'
 const COMPONENT_SELECTOR = `[${COMPONENT_NAME}]`
-const HELPFUL_BUTTON_SELECTOR = `[data-ref="feedback[helpful]"]`
-const UNHELPFUL_BUTTON_SELECTOR = `[data-ref="feedback[unhelpful]"]`
+const BUTTON_SELECTOR = `[data-ref-button]`
 const CONTENT_SELECTOR = `[data-ref="feedback[content]"]`
 const ACTIVE_CLASS = 'data-active-class'
 const typewriter = require('analytics')
 
 export default function () {
   const components = document.querySelectorAll(COMPONENT_SELECTOR)
+  const buttons = document.querySelectorAll(BUTTON_SELECTOR)
+  const helpfulButtons = [...buttons].filter(button => button.dataset.refButton === 'helpful')
+  const unhelpfulButtons = [...buttons].filter(button => button.dataset.refButton === 'unhelpful')
+  const contents = document.querySelectorAll(CONTENT_SELECTOR)
 
   const trackFeedback = (helpful, section) => {
     typewriter.feedbackProvided({
@@ -18,38 +21,42 @@ export default function () {
     })
   }
 
-  for (let i = 0; i < components.length; i++) {
-    const helpfulButton = components[i].querySelector(HELPFUL_BUTTON_SELECTOR)
-    const unhelpfulButton = components[i].querySelector(UNHELPFUL_BUTTON_SELECTOR)
-    const content = components[i].querySelector(CONTENT_SELECTOR)
-
-    const clickHandler = () => {
-      if (content) {
-        content.hidden = false
+  const clickHandler = () => {
+    if (contents.length) {
+      for (let i = 0; i < contents.length; i++) {
+        contents[i].hidden = false
       }
-
-      helpfulButton.disabled = true
-      unhelpfulButton.disabled = true
     }
 
-    helpfulButton.addEventListener('click', (event) => {
-      event.preventDefault()
-      const section = helpfulButton.hasAttribute('data-section') ? 'right-nav' : 'footer'
-      const activeClass = helpfulButton.getAttribute(ACTIVE_CLASS)
-      helpfulButton.classList.add(activeClass)
+    for (let i = 0; i < buttons.length; i++) {
+      buttons[i].disabled = true
+    }
+  }
 
-      clickHandler()
-      trackFeedback(true, section)
-    })
+  const addActiveClasses = (elements) => {
+    for (let i = 0; i < elements.length; i++) {
+      const activeClass = elements[i].getAttribute(ACTIVE_CLASS)
+      elements[i].classList.add(activeClass)
+    }
+  }
 
-    unhelpfulButton.addEventListener('click', (event) => {
+  for (let i = 0; i < buttons.length; i++) {
+    buttons[i].addEventListener('click', (event) => {
       event.preventDefault()
-      const section = helpfulButton.hasAttribute('data-section') ? 'side-nav' : 'footer'
-      const activeClass = unhelpfulButton.getAttribute(ACTIVE_CLASS)
-      unhelpfulButton.classList.add(activeClass)
+
+      const section = buttons[i].hasAttribute('data-section') ? 'right-nav' : 'footer'
+      const helpful = buttons[i].dataset.refButton === 'helpful'
+      let activeButtons = []
 
       clickHandler()
-      trackFeedback(false, section)
+
+      if (helpful) {
+        addActiveClasses(helpfulButtons)
+        trackFeedback(true, section)
+      } else {
+        addActiveClasses(unhelpfulButtons)
+        trackFeedback(false, section)
+      }
     })
   }
 }

src/_includes/components/feedback.html

@@ -23,7 +23,7 @@ <h4>Was this page helpful?</h4>
 
           <div class="flex gutter gutter--large">
             <div class="flex__column flex__column--shrink">
-              <button class="button button--small button-fill button-fill--white button-fill--borderable" data-ref="feedback[helpful]" data-active-class="button-fill--primary">
+              <button class="button button--small button-fill button-fill--white button-fill--borderable" data-ref-button="helpful" data-active-class="button-fill--primary">
                 <span class="button__icon">
                   {% include icons/symbols/thumb-up.svg %}
                 </span>
@@ -33,7 +33,7 @@ <h4>Was this page helpful?</h4>
             </div>
 
             <div class="flex__column flex__column--shrink">
-              <button class="button button--small button-fill button-fill--white button-fill--borderable" data-ref="feedback[unhelpful]" data-active-class="button-fill--gray">
+              <button class="button button--small button-fill button-fill--white button-fill--borderable" data-ref-button="unhelpful" data-active-class="button-fill--gray">
                 <span class="button__icon">
                   {% include icons/symbols/thumb-down.svg %}
                 </span>

src/_includes/sidebar/feedback.html

@@ -3,7 +3,7 @@
 
   <div class="flex">
     <div class="flex__column flex__column--6">
-      <button class="button button--small button-fill button-fill--white" data-section="sidebar" data-ref="feedback[helpful]" data-active-class="button-fill--primary">
+      <button class="button button--small button-fill button-fill--white" data-section="right-bar" data-ref-button="helpful" data-active-class="button-fill--primary">
         <span class="button__icon">
           {% include icons/symbols/thumb-up.svg %}
         </span>
@@ -13,7 +13,7 @@
     </div>
 
     <div class="flex__column flex__column--6">
-      <button class="button button--small button-fill button-fill--white" data-section="sidebar" data-ref="feedback[unhelpful]" data-active-class="button-fill--gray">
+      <button class="button button--small button-fill button-fill--white" data-section="right-nav" data-ref-button="unhelpful" data-active-class="button-fill--gray">
         <span class="button__icon">
           {% include icons/symbols/thumb-down.svg %}
         </span>