Skip to content

feat(): Introduce new design for feedback widget #113

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Oct 11, 2019
Merged

feat(): Introduce new design for feedback widget #113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
7c8e55b
wip()
bart-tonik Oct 9, 2019
fe9bd54
fix(): Suport for mobile Safari, add anchor indicator, centering icons
bart-tonik Oct 10, 2019
2424953
fix(): add slugify filter
bart-tonik Oct 10, 2019
82d5f55
fix(): Change require to import JS
bart-tonik Oct 10, 2019
da36eb2
feat(): Introduce new design
bart-tonik Oct 11, 2019
d383422
style(): Remove redundant code
bart-tonik Oct 11, 2019
64e60a9
chore(): Update to staging
jedrzejchalubek Oct 11, 2019
3fabd8b
fix(): Add hover state, remove underline
bart-tonik Oct 11, 2019
5663347
fix(): Add hover state and remove underline from content
bart-tonik Oct 11, 2019
52eec50
fix(feedback): Add message to feedback box after content
jedrzejchalubek Oct 11, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 20 additions & 11 deletions js/feedback/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,33 @@ 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 DEFAULTS = {
message: {
success: 'Thanks for your feedback!'
}
}
const CONTENT_SELECTOR = `[data-ref="feedback[content]"]`
const ACTIVE_CLASS = 'data-active-class'

export default function () {
const components = document.querySelectorAll(COMPONENT_SELECTOR)

for (let i = 0; i < components.length; i++) {
const options = JSON.parse(components[i].getAttribute(COMPONENT_NAME) || '{}')
const settings = Object.assign({}, DEFAULTS, options)

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
}

helpfulButton.disabled = true
unhelpfulButton.disabled = true
}

helpfulButton.addEventListener('click', (event) => {
event.preventDefault()

components[i].innerText = settings.message.success
const activeClass = helpfulButton.getAttribute(ACTIVE_CLASS)
helpfulButton.classList.add(activeClass)

clickHandler()

window.analytics.track('Docs Rated', {
title: '{{title}}',
Expand All @@ -34,7 +40,10 @@ export default function () {
unhelpfulButton.addEventListener('click', (event) => {
event.preventDefault()

components[i].innerText = settings.message.success
const activeClass = unhelpfulButton.getAttribute(ACTIVE_CLASS)
unhelpfulButton.classList.add(activeClass)

clickHandler()

window.analytics.track('Docs Rated', {
title: '{{title}}',
Expand Down
10 changes: 7 additions & 3 deletions src/_includes/components/feedback.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,12 @@ <h4>Need support?</h4>
<div class="flex__column flex__column--6 flex">
<div class="feedback-box flex flex--stack flex--justify waffle waffle--none waffle--large@medium">
<div class="flex__column flex__column--shrink">
<div class="feedback-box__content">
<div class="feedback-box__content" data-feedback>
<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]">
<button class="button button--small button-fill button-fill--white button-fill--borderable" data-ref="feedback[helpful]" data-active-class="button-fill--primary">
<span class="button__icon">
{% include icons/symbols/thumb-up.svg %}
</span>
Expand All @@ -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]">
<button class="button button--small button-fill button-fill--white button-fill--borderable" data-ref="feedback[unhelpful]" data-active-class="button-fill--error-light">
<span class="button__icon">
{% include icons/symbols/thumb-down.svg %}
</span>
Expand All @@ -42,6 +42,10 @@ <h4>Was this page helpful?</h4>
</button>
</div>
</div>

<p class="widget__content" data-ref="feedback[content]" hidden>
If you need help or have any questions, please consider contacting <a href="#">Support</a>.
</p>
</div>
</div>

Expand Down
9 changes: 5 additions & 4 deletions src/_includes/sidebar/feedback.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-ref="feedback[helpful]">
<button class="button button--small button-fill button-fill--white" data-ref="feedback[helpful]" data-active-class="button-fill--primary">
<span class="button__icon">
{% include icons/symbols/thumb-up.svg %}
</span>
Expand All @@ -13,7 +13,7 @@
</div>

<div class="flex__column flex__column--6">
<button class="button button--small button-fill button-fill--white" data-ref="feedback[unhelpful]">
<button class="button button--small button-fill button-fill--white" data-ref="feedback[unhelpful]" data-active-class="button-fill--error-light">
<span class="button__icon">
{% include icons/symbols/thumb-down.svg %}
</span>
Expand All @@ -22,6 +22,7 @@
</button>
</div>
</div>

<p class="widget__content" data-ref="feedback[message]"></p>
<p class="widget__content" data-ref="feedback[content]" hidden>
If you need help or have any questions, please consider contacting <a href="#">Support</a>.
</p>
</div>
20 changes: 20 additions & 0 deletions src/_sass/components/_button-fill.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,4 +25,24 @@
border: none;
}
}

&--primary {
background-color: color(primary);
color: color(white);

&:hover {
background-color: color(primary);
color: color(white);
}
}

&--error-light {
background-color: rgba(color(error), 0.78);
color: color(white);

&:hover {
background-color: rgba(color(error), 0.78);
color: color(white);
}
}
}
4 changes: 4 additions & 0 deletions src/_sass/components/_button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@
text-decoration: none;
cursor: pointer;

&:disabled {
pointer-events: none;
}

&:hover {
text-decoration: none;
}
Expand Down
5 changes: 5 additions & 0 deletions src/_sass/components/_widget.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,11 @@
font-size: 14px;
line-height: 1.71;
color: color(gray);

a {
text-decoration: underline;
font-weight: 500;
}
}

& > * + * {
Expand Down