Add comment field to feedback panel (#2941)

* Add text area for comments to feedback panel

Signed-off-by: Fanit Kolchina <kolchfa@amazon.com>

* Added radio buttons, sending comments to GA, and refactored scss

Signed-off-by: Fanit Kolchina <kolchfa@amazon.com>

* Adds remaining character counter

Signed-off-by: Fanit Kolchina <kolchfa@amazon.com>

* Send one event

Signed-off-by: Fanit Kolchina <kolchfa@amazon.com>

* Addressed code review and added new banner

Signed-off-by: Fanit Kolchina <kolchfa@amazon.com>

* More code review feedback

Signed-off-by: Fanit Kolchina <kolchfa@amazon.com>

---------

Signed-off-by: Fanit Kolchina <kolchfa@amazon.com>

_includes/banner.html

@@ -1,5 +1,5 @@
 <section class="os-banner">
-    <header class="banner-head" style="background-image: url('{{site.url}}{{site.baseurl}}/images/graphic-bg.jpg')">
+    <header class="banner-head" style="background-image: url('{{site.url}}{{site.baseurl}}/images/graphic-bg.png'); background-size: cover;">
         <div class="banner-text-div">
             <span class="banner-text-header">OpenSearch Documentation</span>
             <p class="banner-text-description">Learn to use OpenSearch, the highly scalable and extensible open-source software suite for search, analytics, observability, and other data-intensive applications.</p>

_includes/feedback.html

@@ -1,9 +1,15 @@
 <div class="div-feedback">
     <div class="feedback-header">WAS THIS PAGE HELPFUL?</div>
-    <div>
-        <button id="yes" type="button" value="yes" class="feedback-button">&#10004; Yes</button>
-        <button id="no" type="button" value="no" class="feedback-button">&#10006; No</button>
-        <p class="text-small text-grey-dk-100 hidden">Thank you for your feedback!</p>
+    <div class="feedback-radio-div">
+        <input id="yes" type="radio" name="radio-button" value="yes" class="feedback-button">
+        <label class="feedback-radio" for="yes">&#10004; Yes</label> 
+        <input id="no" type="radio" name="radio-button" value="no" class="feedback-button">
+        <label class="feedback-radio" for="no">&#10006; No</label>
     </div>
+    <div class="feedback-text-header">Tell us why</div>
+    <textarea id="comment" class="feedback-text" placeholder="Enter comment" maxlength="350"></textarea>
+    <div class="text-small num-chars" id="num-chars">350 characters left</div>
+    <button id="send" class="send-button" disabled>Send</button>
+    <p class="text-small text-grey-dk-100 hidden" id="thank-you">Thank you for your feedback!</p>
     <p class="text-small text-grey-dk-100">Want to contribute? <a class="feedback-edit" target="_blank" href="https://github.com/opensearch-project/documentation-website/edit/main/{{ page.path }}">Edit this page</a> or <a class="feedback-issue" target="_blank" href="https://github.com/opensearch-project/documentation-website/issues/new?assignees=&labels=untriaged&template=issue_template.md&title=%5BDOC%5D">create an issue</a>.</p>
 </div>

_sass/custom/custom.scss

@@ -201,22 +201,35 @@ img {
   @include btn-color($white, $green-300);
 }
 
-.btn-general {
+@mixin btn-default {
   color: $blue-100;
   background-color: white;
   font-size: 0.9rem;
   font-weight: 510;
   border-width: 1px; 
   border-style: solid;
-  border-color: $blue-100;
   border-radius: 5px;
   box-shadow: 1px 1px $grey-lt-300;
+  cursor: pointer;
+}
+
+@mixin elt-disabled {
+  color: mix(black, $base-button-color, 40%);
+  border-color: $base-button-color;
+  cursor: default;
+  background-color: mix(white, $base-button-color, 50%);
+  box-shadow: none;
+}
+
+.btn-general {
+  @include btn-default;
+  border-color: $blue-100;
   padding: 0.5rem 1rem;
   margin-left: 0.4rem;
   margin-right: 0.4rem;
   &:hover {
     &:not([disabled]) {
-      background-color: $blue-lt-000;
+      background-color: $blue-lt-100;
       box-shadow: 1px 2px 4px $grey-lt-300;
       transform: translateY(-1px);
       text-decoration: underline;
@@ -227,11 +240,7 @@ img {
     }
   }
   &:disabled {
-    color: mix(black, $base-button-color, 25%);
-    border: none;
-    cursor: default;
-    background-color: mix(white, $base-button-color, 75%);
-    box-shadow: none;
+    @include elt-disabled;
   }
 }
 
@@ -282,22 +291,82 @@ img {
   @extend .copy-button;
 }
 
-// Feedback buttons
-.feedback-button {
+.send-button {
   @extend .btn-general;
-  margin-left: 0.2rem;
-  margin-right: 0.2rem;
 }
 
 // Feedback question
 .feedback-header {
   @extend %toc-font;
   letter-spacing: 0.08em;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
+  margin: 1rem 0;
 }
 
-// Feedback confirmation
+.feedback-text-header {
+  text-align: left;
+  font-size: 0.8rem;
+  font-weight: 500; 
+  margin-top: 1rem;
+}
+
+.feedback-radio-div {
+  display: flex;
+  justify-content: space-between;  
+}
+
+// hide the browser-rendered radio button 
+.feedback-radio-div input[type="radio"] {
+  display: none;
+} 
+
+.feedback-radio {
+  @include btn-default;
+  border-color: $grey-lt-100;
+  margin: 0;
+  padding: 0.5rem 1.2rem;
+  border-color: $grey-lt-100;
+  &:hover {
+    &:not([disabled]) {    
+      background-color: mix(white, $blue-lt-000, 50%);
+      box-shadow: 1px 2px 4px $grey-lt-300;
+    }
+  }
+}
+
+.feedback-radio-div input[type="radio"]:checked+label {
+  border-color: $blue-100;
+  background-color: $blue-lt-100;
+  box-shadow: inset 1px 1px 3px $blue-dk-100;
+}
+
+.feedback-radio-div input[type="radio"]:disabled+label {
+  @include elt-disabled;
+}
+
+// Feedback text area
+textarea {
+  @extend .panel, .img-border;
+  width: 100%;
+  height: 5rem;
+  color: $grey-dk-300;
+  background-color: mix(white, $grey-lt-000, 50%);
+  font-size: 0.9rem;
+  resize: vertical;
+  &:focus {
+    outline: none;
+    border: 1px solid $blue-100;
+    background-color: white;
+  }
+  &:disabled {
+    @include elt-disabled;
+  }
+}
+
+.num-chars {
+  margin-bottom: 0.5rem;
+  text-align: left;
+  color: mix(white, $grey-dk-300, 40%);
+}
 
 .hidden {
   visibility: hidden;

assets/js/listener.js

@@ -1,3 +1,12 @@
+const yesButton = document.getElementById('yes');
+const noButton = document.getElementById('no');
+const numCharsLabel = document.getElementById('num-chars');
+const sendButton = document.getElementById('send');
+const commentTextArea = document.getElementById('comment');
+const thankYouText = document.getElementById('thank-you');
+
+document.addEventListener('DOMContentLoaded', updateTextArea);
+
 document.addEventListener('click', function(event) {
     const { target } = event;
     if (target.matches('.feedback-issue')) {
@@ -7,7 +16,10 @@ document.addEventListener('click', function(event) {
         gtag('event', 'edit_page_click');
     }
     else if (target.matches('.feedback-button')) {
-        sendFeedback(target);
+        sendButton.disabled = false;
+    }
+    else if (target.matches('.send-button')) {
+        sendFeedback();
     }
     else if (target.matches('.copy-button')) {
         window.navigator.clipboard.writeText(target.getAttribute('data-text'));
@@ -17,17 +29,51 @@ document.addEventListener('click', function(event) {
     }
 });
 
-function sendFeedback(button) {
+commentTextArea.addEventListener('input', updateTextArea);
+
+function updateTextArea() {
+    const text = commentTextArea.value.trim();
+    
+    if (!yesButton.checked && !noButton.checked) {
+        text.length > 0 ? sendButton.disabled = false : sendButton.disabled = true;
+    }
+
+    // calculate the number of characters remaining
+    counter = 350 - commentTextArea.value.length;
+    numCharsLabel.innerText = counter + " characters left";
+}
+
+function sendFeedback() {
+    let helpful = 'none';
+    if (yesButton.checked) {
+        helpful = 'yes';
+    }
+    else if (noButton.checked) {
+        helpful = 'no';
+    }
+    
+    let comment = commentTextArea.value.trim();
+    if(comment.length == 0) {
+        comment = 'none';
+    }
+
+    if (helpful === 'none' && comment === 'none') return;
+
     gtag('event', 'feedback_click', { 
-        'helpful': button.value
+        'helpful': helpful,
+        'comment': comment
     });
+
     // show the hidden feedback text
-    const parent = button.parentElement;
-    const index = [...parent.children].indexOf(button) + 1;
-    const sibling = parent.querySelector(`:nth-child(${index}) ~ .text-small.hidden`);
-    sibling?.classList.remove('hidden');
+    thankYouText.classList.remove('hidden');
 
     // disable the feedback buttons
-    button.disabled = true;
-    button[button.id === 'yes' ? 'nextElementSibling' : 'previousElementSibling']?.setAttribute('disabled', true);
+    yesButton.disabled = true;
+    noButton.disabled = true;
+
+    // disable the text area
+    commentTextArea.disabled = true;
+
+    // disable the send button
+    sendButton.disabled = true;
 }