Add page vote buttons with Segment and Hotjar survey integration

ui/src/css/doc.css

@@ -1657,3 +1657,9 @@
 }
 
 
+
+/* Page vote buttons - dark mode muted color for text and icons */
+[data-theme="dark"] #docs-vote-yes,
+[data-theme="dark"] #docs-vote-no {
+  color: var(--dark-text-muted);
+}

ui/src/js/16-hotjar-feedback.js

@@ -0,0 +1,33 @@
+;(function () {
+  'use strict'
+
+  var yesBtn = document.getElementById('docs-vote-yes')
+  var noBtn = document.getElementById('docs-vote-no')
+
+  function onVote(vote, selectedBtn, otherBtn) {
+    if (typeof window.hj === 'function') {
+      window.hj('event', 'docs_page_feedback')
+    }
+    if (typeof window.analytics === 'object') {
+      window.analytics.track('docs_page_vote', {
+        vote: vote,
+        page: window.location.pathname,
+      })
+    }
+
+    ;[selectedBtn, otherBtn].forEach(function (btn) {
+      btn.classList.remove('border-link-on-light', 'text-link-on-light', 'opacity-50')
+    })
+
+    selectedBtn.setAttribute('aria-pressed', 'true')
+    selectedBtn.classList.add('border-link-on-light', 'text-link-on-light')
+
+    otherBtn.setAttribute('aria-pressed', 'false')
+    otherBtn.classList.add('opacity-50')
+  }
+
+  if (yesBtn && noBtn) {
+    yesBtn.addEventListener('click', function () { onVote('yes', yesBtn, noBtn) })
+    noBtn.addEventListener('click', function () { onVote('no', noBtn, yesBtn) })
+  }
+})()

ui/src/partials/article-footer.hbs

@@ -1,27 +1,26 @@
-<footer class="mt-10 mb-12 border-t border-vapor w-full text-base px-12 pt-6">
-  <!--
-  <div class="flex flex-col md:flex-row md:items-center">
-    <h4 class="text-xl font-normal">
-      Was this page helpful ?
-    </h4>
-    <div class="inline-flex mt-6 md:mt-0 md:ml-8 space-x-4">
-      <button class="rounded-md px-2 py-2 inline-flex justify-center items-center border border-vapor space-x-1">
-        <img src="{{uiRootPath}}/img/thumbs-up.svg" alt="Thumbs Up" class="inline-block w-4 h-4">
-        <span class="font-normal">
-          Yes
-        </span>
+<footer class="mt-10 mb-12 border-t border-vapor w-full text-base px-12 pt-[48px]">
+
+  <div class="flex flex-col sm:flex-row sm:items-center gap-4 mb-[48px]">
+    <h4 class="text-lg font-medium">Was this page helpful?</h4>
+    <div class="flex items-center gap-3">
+      <button id="docs-vote-yes" type="button" aria-pressed="false"
+        class="inline-flex items-center gap-2 border border-vapor rounded-lg px-3 py-2 font-medium cursor-pointer transition-colors hover:border-link-on-light focus:border-link-on-light">
+        <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M9.63862 7.36117C10.8363 5.84833 11.4053 3.73015 11.646 2.57074L11.7732 2.58052C12.4084 2.678 12.8302 3.26569 12.7024 3.92042C12.4483 5.10558 11.9857 7.13696 11.3427 8.28651C10.6912 9.39694 11.5638 10.6859 12.7 10.6859H17.7728C17.8058 10.6859 17.8657 10.7022 17.9247 10.7612C17.9838 10.8203 18 10.8802 18 10.9132C18 10.9462 17.9838 11.0061 17.9247 11.0652C17.8657 11.1242 17.8058 11.1405 17.7728 11.1405H16.9546C16.4023 11.1405 15.9546 11.5882 15.9546 12.1405C15.9546 12.6928 16.4023 13.1405 16.9546 13.1405C16.9876 13.1405 17.0475 13.1567 17.1066 13.2158C17.1656 13.2748 17.1819 13.3347 17.1819 13.3677C17.1819 13.4008 17.1656 13.4607 17.1066 13.5197C17.0475 13.5788 16.9876 13.595 16.9546 13.595H16.1364C15.5841 13.595 15.1364 14.0427 15.1364 14.595C15.1364 15.1473 15.5841 15.595 16.1364 15.595C16.1694 15.595 16.2293 15.6113 16.2884 15.6703C16.3474 15.7293 16.3637 15.7893 16.3637 15.8223C16.3637 15.8553 16.3474 15.9152 16.2884 15.9743C16.2293 16.0333 16.1694 16.0496 16.1364 16.0496H15.3182C14.7659 16.0496 14.3182 16.4973 14.3182 17.0496C14.3182 17.6018 14.7659 18.0496 15.3182 18.0496C15.3512 18.0496 15.4112 18.0658 15.4702 18.1249C15.5292 18.1839 15.5455 18.2438 15.5455 18.2768C15.5455 18.3099 15.5292 18.3698 15.4702 18.4288C15.4112 18.4879 15.3512 18.5041 15.3182 18.5041H9.50912C8.2295 18.5041 7.29059 18.1504 6.68113 17.8118C6.42899 17.6717 6.23214 17.5335 6.09094 17.4228V10.7291L6.16104 10.6703C6.42917 10.4451 6.79898 10.13 7.20579 9.77015C8.00432 9.06376 8.99866 8.13856 9.62651 7.37618L9.63862 7.36117ZM19.1819 13.3677C19.1819 13.1382 19.1449 12.9153 19.0768 12.705C19.6321 12.2953 20 11.6379 20 10.9132C20 9.70637 18.9796 8.68593 17.7728 8.68593H13.3766C14.0315 7.23352 14.4529 5.29722 14.6597 4.33184L14.6624 4.31841C15.0203 2.52894 13.8184 0.835283 12.014 0.594698C11.9956 0.592241 11.9771 0.590298 11.9585 0.588872L11.3703 0.543619C10.5717 0.48219 9.89376 1.04928 9.75919 1.7959C9.58536 2.76034 9.0994 4.81461 8.07643 6.1123C7.55796 6.73994 6.67438 7.57 5.88064 8.27216C5.83197 8.31521 5.78384 8.35761 5.73636 8.39928C5.46121 8.07419 5.05016 7.8678 4.59091 7.8678H1.5C0.671572 7.8678 0 8.53937 0 9.3678V19.0042C0 19.8326 0.671571 20.5042 1.5 20.5042H4.59091C5.177 20.5042 5.68459 20.168 5.93139 19.678C6.785 20.113 7.98048 20.5041 9.50912 20.5041H15.3182C16.525 20.5041 17.5455 19.4837 17.5455 18.2768C17.5455 18.0473 17.5086 17.8244 17.4404 17.6141C17.9957 17.2044 18.3637 16.547 18.3637 15.8223C18.3637 15.5927 18.3267 15.3699 18.2586 15.1595C18.8139 14.7499 19.1819 14.0924 19.1819 13.3677ZM2 18.5042V9.8678H4.09091V18.5042H2Z" fill="currentColor"/>
+        </svg>
+        Yes
       </button>
-      <button class="rounded-md px-2 py-2 inline-flex justify-center items-center border border-vapor space-x-1">
-        <img src="{{uiRootPath}}/img/thumbs-down.svg" alt="Thumbs Up" class="inline-block w-4 h-4">
-        <span class="font-normal">
-          No
-        </span>
+      <button id="docs-vote-no" type="button" aria-pressed="false"
+        class="inline-flex items-center gap-2 border border-vapor rounded-lg px-3 py-2 font-medium cursor-pointer transition-colors hover:border-link-on-light focus:border-link-on-light">
+        <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M9.63862 13.6471C10.8363 15.16 11.4053 17.2782 11.646 18.4376L11.7732 18.4278C12.4084 18.3303 12.8302 17.7426 12.7024 17.0879C12.4483 15.9027 11.9857 13.8713 11.3427 12.7218C10.6912 11.6114 11.5638 10.3224 12.7 10.3224H17.7728C17.8058 10.3224 17.8657 10.3061 17.9247 10.2471C17.9838 10.188 18 10.1281 18 10.0951C18 10.0621 17.9838 10.0022 17.9247 9.94312C17.8657 9.88408 17.8058 9.86783 17.7728 9.86783H16.9546C16.4023 9.86783 15.9546 9.42011 15.9546 8.86783C15.9546 8.31554 16.4023 7.86783 16.9546 7.86783C16.9876 7.86783 17.0475 7.85158 17.1066 7.79254C17.1656 7.7335 17.1819 7.67358 17.1819 7.64056C17.1819 7.60753 17.1656 7.54761 17.1066 7.48857C17.0475 7.42953 16.9876 7.41328 16.9546 7.41328H16.1364C15.5841 7.41328 15.1364 6.96557 15.1364 6.41328C15.1364 5.861 15.5841 5.41328 16.1364 5.41328C16.1694 5.41328 16.2293 5.39704 16.2884 5.33799C16.3474 5.27895 16.3637 5.21904 16.3637 5.18601C16.3637 5.15299 16.3474 5.09307 16.2884 5.03403C16.2293 4.97499 16.1694 4.95874 16.1364 4.95874H15.3182C14.7659 4.95874 14.3182 4.51102 14.3182 3.95874C14.3182 3.40645 14.7659 2.95874 15.3182 2.95874C15.3512 2.95874 15.4112 2.94249 15.4702 2.88345C15.5292 2.82441 15.5455 2.76449 15.5455 2.73146C15.5455 2.69844 15.5292 2.63852 15.4702 2.57948C15.4112 2.52044 15.3512 2.50419 15.3182 2.50419H9.50912C8.2295 2.50419 7.29059 2.85794 6.68113 3.19653C6.42899 3.33661 6.23214 3.4748 6.09094 3.58549V10.2792L6.16104 10.338C6.42917 10.5632 6.79898 10.8783 7.20579 11.2381C8.00432 11.9445 8.99866 12.8697 9.62651 13.6321L9.63862 13.6471ZM19.1819 7.64056C19.1819 7.87013 19.1449 8.09296 19.0768 8.3033C19.6321 8.71298 20 9.37044 20 10.0951C20 11.3019 18.9796 12.3224 17.7728 12.3224H13.3766C14.0315 13.7748 14.4529 15.7111 14.6597 16.6765L14.6624 16.6899C15.0203 18.4794 13.8184 20.173 12.014 20.4136C11.9956 20.4161 11.9771 20.418 11.9585 20.4194L11.3703 20.4647C10.5717 20.5261 9.89376 19.959 9.75919 19.2124C9.58536 18.248 9.0994 16.1937 8.07643 14.896C7.55796 14.2684 6.67438 13.4383 5.88064 12.7361C5.83197 12.6931 5.78384 12.6507 5.73636 12.609C5.46121 12.9341 5.05016 13.1405 4.59091 13.1405H1.5C0.671572 13.1405 0 12.4689 0 11.6405V2.00414C0 1.17571 0.671571 0.504139 1.5 0.504139H4.59091C5.177 0.504139 5.68459 0.840279 5.93139 1.33029C6.785 0.895279 7.98048 0.504192 9.50912 0.504192H15.3182C16.525 0.504192 17.5455 1.52463 17.5455 2.73146C17.5455 2.96104 17.5086 3.18387 17.4404 3.39421C17.9957 3.80389 18.3637 4.46135 18.3637 5.18601C18.3637 5.41559 18.3267 5.63841 18.2586 5.84876C18.8139 6.25843 19.1819 6.91589 19.1819 7.64056ZM2 2.50414V11.1405H4.09091V2.50414H2Z" fill="currentColor"/>
+        </svg>
+        No
       </button>
     </div>
-
   </div>
-  -->
-  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 my-8">
+
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
 
     <div class="rounded-lg border border-vapor p-[24px] space-y-4">
       <h4 class="text-lg font-medium">