Skip to content

Commit 1bd866c

Browse files
xeniapexeniape
committed
add feedback form frontend for testing
1 parent a86aba3 commit 1bd866c

6 files changed

Lines changed: 147 additions & 0 deletions

File tree

‎src/css/feedback.css‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
.feedback-section {
2+
background-color: #1880bd1f;
3+
margin-top: 1rem;
4+
padding: 0.75rem;
5+
border-radius: 0.25rem;
6+
font-family: var(--body-font-family);
7+
font-weight: var(--body-font-weight);
8+
}
9+
10+
.feedback-section-title {
11+
font-family: var(--header-font-family);
12+
font-weight: var(--heading-font-weight);
13+
}
14+
15+
.feedback-form-button,
16+
.feedback-form-submit-button {
17+
margin: 20px 10px 20px 0;
18+
height: 2rem;
19+
width: 7.5rem;
20+
color: var(--feedback-button-font-color);
21+
background: var(--feedback-button-background);
22+
border-radius: calc(1.75rem / 2);
23+
border-style: solid;
24+
border-color: var(--feedback-button-border-color);
25+
}
26+
27+
.feedback-form-submit-button {
28+
width: 10rem;
29+
}
30+
31+
.feedback-form-button.selected,
32+
.feedback-form-submit-button.selected {
33+
color: var(--feedback-button-font-color-selected);
34+
border-color: var(--feedback-button-border-color-selected);
35+
}
36+
37+
.feedback-form-text {
38+
display: flex;
39+
flex-direction: column;
40+
}
41+
42+
.feedback-form-text.hide {
43+
display: none !important;
44+
}
45+
46+
.feedback-form-text textarea {
47+
resize: vertical;
48+
border-style: none;
49+
}
50+
51+
.feedback-form-submit {
52+
display: flex;
53+
flex-direction: row;
54+
align-items: center;
55+
}
56+
57+
.feedback-form-thank-you {
58+
color: var(--feedback-thank-you-font-color);
59+
}
60+
61+
.feedback-form-thank-you.hide {
62+
display: none !important;
63+
}

‎src/css/site.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,4 @@
2121
@import "vendor/fontawesome.css";
2222
@import "@asciidoctor/tabs";
2323
@import "tabs.css";
24+
@import "feedback.css";

‎src/css/vars.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,13 @@
108108
--toc-heading-font-color: var(--doc-font-color);
109109
--toc-border-color: var(--panel-border-color);
110110
--toc-line-height: 1.2;
111+
/* feedback */
112+
--feedback-button-background: var(--color-white);
113+
--feedback-button-font-color: var(--color-brand-primary);
114+
--feedback-button-font-color-selected: var(--color-brand-secondary);
115+
--feedback-button-border-color: var(--color-white);
116+
--feedback-button-border-color-selected: var(--color-brand-secondary);
117+
--feedback-thank-you-font-color: var(--color-brand-primary);
111118
/* footer */
112119
--footer-line-height: var(--doc-line-height);
113120
--footer-background: var(--color-white);

‎src/js/08-feedback.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
;(function () {
2+
'use strict'
3+
4+
var feedbackFormOptionButtons = document.querySelector('.feedback-form-options').querySelectorAll('button')
5+
if (!feedbackFormOptionButtons) return
6+
7+
feedbackFormOptionButtons.forEach((button) => {
8+
button.addEventListener('click', selectFeedbackFormOptionButton)
9+
})
10+
11+
function selectFeedbackFormOptionButton (e) {
12+
e.stopPropagation() // trap event
13+
feedbackFormOptionButtons.forEach((button) => {
14+
if (button === this) {
15+
this.classList.add('selected')
16+
} else {
17+
button.classList.remove('selected')
18+
}
19+
})
20+
21+
var feedbackFormText = document.querySelector('.feedback-form-text')
22+
if (!feedbackFormText) return
23+
24+
feedbackFormText.classList.remove('hide')
25+
}
26+
27+
var feedbackFormSubmitButton = document.querySelector('.feedback-form-submit-button')
28+
if (!feedbackFormSubmitButton) return
29+
30+
var feedbackFormTextArea = document.querySelector('.feedback-form-text textarea')
31+
if (!feedbackFormTextArea) return
32+
33+
feedbackFormSubmitButton.addEventListener('click', submitFeedback)
34+
35+
function submitFeedback (e) {
36+
e.stopPropagation() // trap event
37+
feedbackFormSubmitButton.classList.add('selected')
38+
39+
// TODO: Submit feedback to backend, alternatively let netlify handle it
40+
41+
feedbackFormSubmitButton.innerText = 'Submitted'
42+
feedbackFormSubmitButton.disabled = true
43+
feedbackFormTextArea.disabled = true
44+
45+
feedbackFormOptionButtons.forEach((button) => {
46+
button.disabled = true
47+
})
48+
49+
var feedbackFormThankYou = document.querySelector('.feedback-form-thank-you')
50+
if (!feedbackFormThankYou) return
51+
52+
feedbackFormThankYou.classList.remove('hide')
53+
}
54+
})()

‎src/partials/article.hbs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,5 +24,6 @@ data-pagefind-body
2424
<h1 class="page" data-pagefind-weight="10.0">{{{this}}}</h1>
2525
{{/with}}
2626
{{{page.contents}}}
27+
{{> feedback-form}}
2728
{{> pagination}}
2829
</article>

‎src/partials/feedback-form.hbs‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<div class="feedback-section" data-page-url="{{page.url}}" data-page-title="{{page.title}}">
2+
<p class="feedback-section-title">Was this page helpful?</p>
3+
<form name="feedback-form" method="POST" netlify netlify-honeypot="bot-field" onsubmit="return false">
4+
<div hidden>
5+
<label>
6+
Don't fill this out if you're human: <input name="bot-field" type="text" />
7+
</label>
8+
</div>
9+
<div class="feedback-form-options">
10+
<button class="feedback-form-button" type="button" name="feedback-yes" aria-label="The article was helpful">Yes</button>
11+
<button class="feedback-form-button" type="button" name="feedback-no" aria-label="The article was not helpful">No</button>
12+
</div>
13+
<div class="feedback-form-text hide">
14+
<textarea name="feedback-text" placeholder="Tell us what you liked or didn't like (optional)" rows="3"></textarea>
15+
<div class="feedback-form-submit">
16+
<button class="feedback-form-submit-button">Send feedback</button>
17+
<p class="feedback-form-thank-you hide">Thank you for your feedback!</p>
18+
</div>
19+
</div>
20+
</form>
21+
</div>

0 commit comments

Comments
 (0)