feat: add feedback form to articles

.eslintrc

@@ -1,5 +1,8 @@
 {
   "extends": "standard",
+  "env": {
+    "browser": true
+  },
   "rules": {
     "arrow-parens": ["error", "always"],
     "comma-dangle": ["error", {

src/css/feedback.css

@@ -0,0 +1,63 @@
+.feedback-section {
+  background-color: #1880bd1f;
+  margin-top: 1rem;
+  padding: 0.75rem;
+  border-radius: 0.25rem;
+  font-family: var(--body-font-family);
+  font-weight: var(--body-font-weight);
+}
+
+.feedback-section-title {
+  font-family: var(--header-font-family);
+  font-weight: var(--heading-font-weight);
+}
+
+.feedback-form-button,
+.feedback-form-submit-button {
+  margin: 20px 10px 20px 0;
+  height: 2rem;
+  width: 7.5rem;
+  color: var(--feedback-button-font-color);
+  background: var(--feedback-button-background);
+  border-radius: calc(1.75rem / 2);
+  border-style: solid;
+  border-color: var(--feedback-button-border-color);
+}
+
+.feedback-form-submit-button {
+  width: 10rem;
+}
+
+.feedback-form-button.selected,
+.feedback-form-submit-button.selected {
+  color: var(--feedback-button-font-color-selected);
+  border-color: var(--feedback-button-border-color-selected);
+}
+
+.feedback-form-text {
+  display: flex;
+  flex-direction: column;
+}
+
+.feedback-form-text.hide {
+  display: none !important;
+}
+
+.feedback-form-text textarea {
+  resize: vertical;
+  border-style: none;
+}
+
+.feedback-form-submit {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.feedback-form-thank-you {
+  color: var(--feedback-thank-you-font-color);
+}
+
+.feedback-form-thank-you.hide {
+  display: none !important;
+}

src/css/site.css

@@ -21,3 +21,4 @@
 @import "vendor/fontawesome.css";
 @import "@asciidoctor/tabs";
 @import "tabs.css";
+@import "feedback.css";

src/css/vars.css

@@ -108,6 +108,13 @@
   --toc-heading-font-color: var(--doc-font-color);
   --toc-border-color: var(--panel-border-color);
   --toc-line-height: 1.2;
+  /* feedback */
+  --feedback-button-background: var(--color-white);
+  --feedback-button-font-color: var(--color-brand-primary);
+  --feedback-button-font-color-selected: var(--color-brand-secondary);
+  --feedback-button-border-color: var(--color-white);
+  --feedback-button-border-color-selected: var(--color-brand-secondary);
+  --feedback-thank-you-font-color: var(--color-brand-primary);
   /* footer */
   --footer-line-height: var(--doc-line-height);
   --footer-background: var(--color-white);

src/js/08-feedback.js

@@ -0,0 +1,71 @@
+;(function () {
+  'use strict'
+
+  var feedbackFormOptionButtons = document.querySelector('.feedback-form-options').querySelectorAll('button')
+  if (!feedbackFormOptionButtons) return
+
+  feedbackFormOptionButtons.forEach((button) => {
+    button.addEventListener('click', selectFeedbackFormOptionButton)
+  })
+
+  function selectFeedbackFormOptionButton (e) {
+    e.stopPropagation() // trap event
+    feedbackFormOptionButtons.forEach((button) => {
+      if (button === this) {
+        this.classList.add('selected')
+      } else {
+        button.classList.remove('selected')
+      }
+    })
+
+    var feedbackFormText = document.querySelector('.feedback-form-text')
+    if (!feedbackFormText) return
+
+    feedbackFormText.classList.remove('hide')
+  }
+
+  var feedbackFormSubmitButton = document.querySelector('.feedback-form-submit-button')
+  if (!feedbackFormSubmitButton) return
+
+  var feedbackFormTextArea = document.querySelector('.feedback-form-text textarea')
+  if (!feedbackFormTextArea) return
+
+  feedbackFormSubmitButton.addEventListener('click', submitFeedback)
+
+  function submitFeedback (e) {
+    e.preventDefault()
+    feedbackFormSubmitButton.classList.add('selected')
+
+    var feedbackFormOptionButtonSelected = document.querySelector('.feedback-form-button.selected')
+    if (!feedbackFormOptionButtonSelected) return
+
+    const feedbackForm = document.querySelector('.feedback-section form')
+    if (!feedbackForm) return
+    const feedbackFormData = new FormData(feedbackForm)
+
+    feedbackFormData.append('feedback-option', feedbackFormOptionButtonSelected.value)
+
+    var action = feedbackForm.getAttribute('action') || '/'
+
+    fetch(action, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      body: new URLSearchParams(feedbackFormData).toString(),
+    })
+      .then(() => console.log('Form successfully submitted.'))
+      .catch((error) => console.error('ERROR: ', error))
+
+    feedbackFormSubmitButton.innerText = 'Submitted'
+    feedbackFormSubmitButton.disabled = true
+    feedbackFormTextArea.disabled = true
+
+    feedbackFormOptionButtons.forEach((button) => {
+      button.disabled = true
+    })
+
+    var feedbackFormThankYou = document.querySelector('.feedback-form-thank-you')
+    if (!feedbackFormThankYou) return
+
+    feedbackFormThankYou.classList.remove('hide')
+  }
+})()

src/partials/article.hbs

@@ -24,5 +24,6 @@ data-pagefind-body
 <h1 class="page" data-pagefind-weight="10.0">{{{this}}}</h1>
 {{/with}}
 {{{page.contents}}}
+{{> feedback-form}}
 {{> pagination}}
 </article>

src/partials/feedback-form.hbs

@@ -0,0 +1,21 @@
+<div class="feedback-section">
+    <p class="feedback-section-title">Was this page helpful?</p>
+    <form name="feedback-form" action='{{page.url}}' netlify netlify-honeypot="bot-field">
+        <div hidden>
+            <label>
+            Don't fill this out if you're human: <input name="bot-field" type="text" />
+            </label>
+        </div>
+        <div class="feedback-form-options">
+            <button class="feedback-form-button" type="button" value="page-helpful" aria-label="The page was helpful">Yes</button>
+            <button class="feedback-form-button" type="button" value="page-not-helpful" aria-label="The page was not helpful">No</button>
+        </div>
+        <div class="feedback-form-text hide">
+            <textarea name="feedback-text" placeholder="Tell us what you liked or didn't like (optional)" rows="3"></textarea>
+            <div class="feedback-form-submit">
+                <button class="feedback-form-submit-button">Send feedback</button>
+                <p class="feedback-form-thank-you hide">Thank you for your feedback!</p>
+            </div>
+        </div>
+    </form>
+</div>