Skip to content

Commit e238642

Browse files
scottybollingerscottybollinger
committed
Add feedback widget to right sidebar
1 parent 6819c1d commit e238642

File tree

5 files changed

+225
-0
lines changed

5 files changed

+225
-0
lines changed

‎resources/web/docs_js/components/feedback_widget.jsx

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import { h, Component } from '../../../../../../node_modules/preact';
2+
3+
export default class FeedbackWidget extends Component {
4+
render() {
5+
return (
6+
<div>
7+
<div id="feedbackWidget">
8+
Was this helpful?
9+
<span className="docHorizontalSpacer"></span>
10+
<fieldset className="buttonGroup">
11+
<legend className="screenReaderOnly">Feedback</legend>
12+
<div className="buttonGroup">
13+
<button
14+
aria-pressed="false"
15+
id="feedbackLiked"
16+
type="button"
17+
className="feedbackButton feedbackLiked"
18+
title="Like"
19+
>
20+
<span className="feedbackButtonContent">
21+
<svg
22+
xmlns="http://www.w3.org/2000/svg"
23+
width="24"
24+
height="24"
25+
viewBox="0 0 24 24"
26+
className="feedbackIcon unpressed"
27+
role="img"
28+
aria-hidden="true"
29+
>
30+
<path d="M9 21h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2c0-1.1-.9-2-2-2h-6.31l.95-4.57l.03-.32c0-.41-.17-.79-.44-1.06L14.17 1L7.58 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2zM9 9l4.34-4.34L12 10h9v2l-3 7H9V9zM1 9h4v12H1z"></path>
31+
</svg>
32+
<svg
33+
xmlns="http://www.w3.org/2000/svg"
34+
width="24"
35+
height="24"
36+
viewBox="0 0 24 24"
37+
className="feedbackIcon pressed"
38+
role="img"
39+
data-is-loaded="true"
40+
aria-hidden="true"
41+
>
42+
<path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57l.03-.32c0-.41-.17-.79-.44-1.06L14.17 1L7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"></path>
43+
</svg>
44+
<span className="screenReaderOnly" data-text="Like">
45+
Like
46+
</span>
47+
</span>
48+
</button>
49+
<button
50+
aria-pressed="false"
51+
id="feedbackDisliked"
52+
type="button"
53+
className="feedbackButton feedbackDisliked"
54+
title="Dislike"
55+
>
56+
<span className="feedbackButtonContent">
57+
<svg
58+
xmlns="http://www.w3.org/2000/svg"
59+
width="24"
60+
height="24"
61+
viewBox="0 0 24 24"
62+
className="feedbackIcon unpressed"
63+
role="img"
64+
aria-hidden="true"
65+
>
66+
<path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57l-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm0 12l-4.34 4.34L12 14H3v-2l3-7h9v10zm4-12h4v12h-4z"></path>
67+
</svg>
68+
<svg
69+
xmlns="http://www.w3.org/2000/svg"
70+
width="24"
71+
height="24"
72+
viewBox="0 0 24 24"
73+
className="feedbackIcon pressed"
74+
role="img"
75+
data-is-loaded="true"
76+
aria-hidden="true"
77+
>
78+
<path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57l-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"></path>
79+
</svg>
80+
<span className="screenReaderOnly" data-text="Dislike">
81+
Dislike
82+
</span>
83+
</span>
84+
</button>
85+
</div>
86+
</fieldset>
87+
</div>
88+
<div id="feedbackSuccess" className="hidden">
89+
Thank you for your feedback.
90+
</div>
91+
</div>
92+
);
93+
}
94+
}

‎resources/web/docs_js/index.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import AlternativeSwitcher from "./components/alternative_switcher";
22
import ConsoleWidget from "./components/console_widget";
3+
import FeedbackWidget from './components/feedback_widget';
34
import Modal from "./components/modal";
45
import mount from "./components/mount";
56
import {switchTabs} from "./components/tabbed_widget";
@@ -89,6 +90,10 @@ export function init_console_widgets() {
8990
});
9091
}
9192

93+
export function init_feedback_widget() {
94+
mount($('#feedbackWidgetContainer'), FeedbackWidget);
95+
}
96+
9297
export function init_sense_widgets() {
9398
$('div.sense_widget').each(function() {
9499
const div = $(this),
@@ -365,6 +370,7 @@ $(function() {
365370
init_sense_widgets();
366371
init_console_widgets();
367372
init_kibana_widgets();
373+
init_feedback_widget();
368374
$("div.ess_widget").each(function() {
369375
const div = $(this),
370376
snippet = div.attr('data-snippet'),

‎resources/web/style/feedback.pcss

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
#feedbackWidget {
2+
font-size: 14px;
3+
display: flex;
4+
line-height: 16px;
5+
margin: 0 12px;
6+
padding-top: 20px;
7+
align-items: center;
8+
justify-content: space-between;
9+
max-width: 200px;
10+
border-top: 1px solid rgb(211, 218, 230);
11+
12+
.docHorizontalSpacer {
13+
display: inline-block;
14+
width: 12px;
15+
}
16+
17+
.screenReaderOnly {
18+
position: absolute;
19+
inset-block-start: auto;
20+
inset-inline-start: -10000px;
21+
inline-size: 1px;
22+
block-size: 1px;
23+
clip: rect(0px, 0px, 0px, 0px);
24+
clip-path: inset(50%);
25+
overflow: hidden;
26+
margin: -1px;
27+
}
28+
29+
.buttonGroup {
30+
max-inline-size: 100%;
31+
display: flex;
32+
border-radius: 4px;
33+
}
34+
35+
.feedbackButton {
36+
-webkit-font-smoothing: antialiased;
37+
box-sizing: border-box;
38+
background: none;
39+
border: none;
40+
padding: 0;
41+
margin: 0;
42+
font-family: 'Inter',BlinkMacSystemFont,Helvetica,Arial,sans-serif;
43+
display: inline-block;
44+
appearance: none;
45+
cursor: pointer;
46+
white-space: nowrap;
47+
max-inline-size: 100%;
48+
vertical-align: middle;
49+
font-weight: 500;
50+
padding-block: 0px;
51+
block-size: 32px;
52+
font-size: 14px;
53+
line-height: 20px;
54+
min-inline-size: 0px;
55+
flex-shrink: 1;
56+
-webkit-box-flex: 0;
57+
flex-grow: 0;
58+
padding-inline: 8px;
59+
border-radius: 0px;
60+
color: rgb(52, 55, 65);
61+
background-color: rgb(233, 237, 243);
62+
transition: background-color 250ms ease-in-out 0s, color 250ms ease-in-out 0s;
63+
border-start-start-radius: 4px;
64+
border-start-end-radius: 0px;
65+
border-end-end-radius: 0px;
66+
border-end-start-radius: 4px;
67+
68+
&:last-child {
69+
border-start-start-radius: 0px;
70+
border-start-end-radius: 4px;
71+
border-end-end-radius: 4px;
72+
border-end-start-radius: 0px;
73+
box-shadow: rgba(0, 0, 0, 0.1) -1px 0px 0px 0px;
74+
}
75+
76+
.feedbackButtonContent {
77+
block-size: 100%;
78+
inline-size: 100%;
79+
display: flex;
80+
-webkit-box-pack: center;
81+
justify-content: center;
82+
-webkit-box-align: center;
83+
align-items: center;
84+
vertical-align: middle;
85+
gap: 8px;
86+
}
87+
88+
.feedbackIcon {
89+
-webkit-flex-shrink: 0;
90+
-ms-flex-negative: 0;
91+
flex-shrink: 0;
92+
display: inline-block;
93+
vertical-align: middle;
94+
fill: currentColor;
95+
-webkit-transform: translate(0, 0);
96+
-moz-transform: translate(0, 0);
97+
-ms-transform: translate(0, 0);
98+
transform: translate(0, 0);
99+
inline-size: 16px;
100+
block-size: 16px;
101+
color: inherit;
102+
103+
&.pressed {
104+
display: none;
105+
}
106+
}
107+
108+
&.isPressed {
109+
color: rgb(255, 255, 255);
110+
background-color: rgb(105, 112, 125);
111+
outline-color: rgb(0, 0, 0);
112+
.feedbackIcon.unpressed {
113+
display: none;
114+
}
115+
.feedbackIcon.pressed {
116+
display: inline-block;
117+
}
118+
}
119+
}
120+
121+
}

‎resources/web/styles.pcss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
@import './style/console_widget.pcss';
1515
@import './style/docbook.pcss';
1616
@import './style/example.pcss';
17+
@import './style/feedback.pcss';
1718
@import './style/heading.pcss';
1819
@import './style/img.pcss';
1920
@import './style/layout.pcss';

‎resources/web/template.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,9 @@
118118
</div>
119119
</div>
120120
</div>
121+
122+
<!-- Feedback widget -->
123+
<div id="feedbackWidgetContainer"></div>
121124
</div>
122125
</div>
123126
</div>

0 commit comments

Comments
 (0)