Skip to content

Commit 08bc429

Browse files
josuebrancolegoldsmithmlr
authored
page survey and segment analytics (#31)
* add header script and track attrs to footer items * add survey handlebar * use handlebars for custom layouts * add feedback modal * fix segment missing param * Build preview * animate survey buttons --------- Co-authored-by: Cole Goldsmith <[email protected]> Co-authored-by: Ronnie Miller <[email protected]>
1 parent 61ffb04 commit 08bc429

17 files changed

+458
-153
lines changed

‎src/css/ds-blocks.css‎

Lines changed: 284 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,3 +75,287 @@ html[data-theme="dark"] .listingblock:not(.default) .content .source-toolbox {
7575
html[data-theme="dark"] .listingblock:not(.default) .hljs {
7676
border-top-color: var(--ds-neutral-700);
7777
}
78+
79+
/*
80+
*
81+
* Admonitions component
82+
*
83+
*/
84+
.doc .admonitionblock {
85+
border: 1px solid var(--ds-success-outlined-border);
86+
border-radius: calc(6 / var(--rem-base) * 1rem);
87+
overflow-x: hidden;
88+
}
89+
90+
.doc .admonitionblock > table > tbody > tr {
91+
display: flex;
92+
flex-direction: row;
93+
flex-wrap: wrap;
94+
}
95+
96+
.doc .admonitionblock .icon {
97+
display: flex;
98+
gap: var(--ds-space-1);
99+
align-items: center;
100+
align-self: stretch;
101+
position: unset;
102+
width: 100%;
103+
transform: none;
104+
text-transform: none;
105+
color: var(--ds-text-primary);
106+
font-size: calc(16 / var(--rem-base) * 1rem);
107+
line-height: 1.5;
108+
height: var(--ds-space-6);
109+
padding: var(--ds-space-1h) var(--ds-space-2);
110+
border-radius: 0;
111+
}
112+
113+
.doc .admonitionblock td.content > *,
114+
.doc .admonitionblock td.content p {
115+
margin-top: var(--ds-space-2);
116+
}
117+
118+
.doc .admonitionblock td.content .ulist p {
119+
margin-top: 0;
120+
}
121+
122+
.doc .admonitionblock td.content > .paragraph:first-child p:first-child,
123+
.doc .admonitionblock td.content > .title {
124+
margin: 0;
125+
}
126+
127+
.doc .admonitionblock .title {
128+
font-style: normal;
129+
}
130+
131+
.doc .admonitionblock td.content {
132+
background: none;
133+
}
134+
135+
.doc .admonitionblock .icon::before {
136+
font-family: "Material Icons Outlined", sans-serif;
137+
font-size: calc(20 / var(--rem-base) * 1rem);
138+
font-weight: normal;
139+
}
140+
141+
/* TIP, NOTE */
142+
.doc .admonitionblock.tip .icon,
143+
.doc .admonitionblock.note .icon {
144+
background: var(--ds-success-soft-bg);
145+
color: var(--ds-text-primary);
146+
}
147+
148+
.doc .admonitionblock.note .icon::before {
149+
color: var(--ds-success-500);
150+
content: '\e88e';
151+
}
152+
153+
.doc .admonitionblock.tip .icon::before {
154+
color: var(--ds-success-500);
155+
content: '\e0f0';
156+
}
157+
158+
/* CAUTION */
159+
.doc .admonitionblock.caution .icon {
160+
background: var(--ds-warning-soft-bg);
161+
color: var(--ds-text-primary);
162+
}
163+
164+
.doc .admonitionblock.caution {
165+
border: 1px solid var(--ds-warning-outlined-border);
166+
}
167+
168+
.doc .admonitionblock.caution .icon::before {
169+
color: var(--ds-warning-500);
170+
content: '\e88e';
171+
}
172+
173+
/* WARNING, IMPORTANT */
174+
.doc .admonitionblock.warning .icon,
175+
.doc .admonitionblock.important .icon {
176+
background: var(--ds-failure-soft-bg);
177+
color: var(--ds-text-primary);
178+
}
179+
180+
.doc .admonitionblock.warning,
181+
.doc .admonitionblock.important {
182+
border: 1px solid var(--ds-failure-outlined-border);
183+
}
184+
185+
.doc .admonitionblock.warning .icon::before {
186+
color: var(--ds-failure-500);
187+
content: '\f083';
188+
}
189+
190+
.doc .admonitionblock.important .icon::before {
191+
color: var(--ds-failure-500);
192+
content: '\e160';
193+
}
194+
195+
html[data-theme="dark"] .doc .admonitionblock .icon::before {
196+
color: var(--ds-primary-text);
197+
}
198+
199+
/*
200+
*
201+
* Dialog component
202+
*
203+
*/
204+
205+
dialog {
206+
display: none;
207+
padding: 0;
208+
flex-direction: column;
209+
align-items: flex-start;
210+
border-radius: 6px;
211+
border: 1px solid var(--ds-neutral-300);
212+
width: 90%;
213+
max-width: 640px;
214+
background: var(--body-background);
215+
color: var(--doc-font-color);
216+
}
217+
218+
/* dialog header */
219+
dialog .header {
220+
display: flex;
221+
padding: var(--ds-space-3);
222+
padding-bottom: var(--ds-space-2);
223+
align-items: center;
224+
gap: var(--ds-space-2);
225+
align-self: stretch;
226+
justify-content: space-between;
227+
border-bottom: 1px solid var(--ds-neutral-200);
228+
}
229+
230+
dialog .header .title {
231+
@include text-h1;
232+
233+
color: var(--heading-font-color);
234+
}
235+
236+
dialog .header .close-button {
237+
display: flex;
238+
justify-content: center;
239+
align-items: center;
240+
gap: var(--ds-space-1);
241+
}
242+
243+
dialog .header kbd {
244+
border: none;
245+
box-shadow: none;
246+
background: var(--ds-neutral-100);
247+
}
248+
249+
dialog .header button {
250+
background: transparent;
251+
border: none;
252+
line-height: 1;
253+
}
254+
255+
dialog .header .material-icons {
256+
color: var(--link-font-color);
257+
}
258+
259+
/* dialog content */
260+
dialog form {
261+
width: 100%;
262+
}
263+
264+
dialog .content {
265+
display: flex;
266+
flex-direction: column;
267+
align-self: stretch;
268+
border-bottom: 1px solid var(--ds-neutral-200);
269+
padding: var(--ds-space-3) var(--ds-space-4) var(--ds-space-3) var(--ds-space-3);
270+
}
271+
272+
dialog .content .message {
273+
@include text-h2;
274+
275+
color: var(--heading-font-color);
276+
margin-bottom: var(--ds-space-4);
277+
}
278+
279+
dialog .content .question {
280+
font-size: calc(13 / var(--rem-base) * 1rem);
281+
color: var(--ds-neutral-700);
282+
font-weight: 600;
283+
letter-spacing: 0.65px;
284+
}
285+
286+
dialog .content textarea {
287+
font-family: var(--body-font-family);
288+
color: var(--doc-font-color);
289+
background: var(--body-background);
290+
height: calc(160 / var(--rem-base) * 1rem);
291+
margin-top: var(--ds-space-h);
292+
resize: none;
293+
padding: var(--ds-space-1);
294+
border-radius: 6px;
295+
border: 1px solid var(--ds-neutral-300);
296+
}
297+
298+
dialog .action {
299+
display: flex;
300+
padding: var(--ds-space-2) var(--ds-space-3) var(--ds-space-3) var(--ds-space-3);
301+
align-items: center;
302+
gap: var(--ds-space-1);
303+
align-self: stretch;
304+
justify-content: flex-end;
305+
}
306+
307+
dialog[open] {
308+
display: flex;
309+
}
310+
311+
dialog::backdrop {
312+
background: rgba(10, 10, 10, 0.6);
313+
}
314+
315+
.dialog-action,
316+
.dialog-action--response {
317+
transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1), visibility 500ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
318+
transition-delay: 300ms;
319+
}
320+
321+
.dialog-action + .dialog-action--response {
322+
position: absolute;
323+
top: 0;
324+
line-height: var(--ds-space-5);
325+
height: var(--ds-space-5);
326+
}
327+
328+
.dialog-action--response {
329+
font-weight: 600;
330+
transition-delay: 1200ms;
331+
}
332+
333+
.dialog-action--container {
334+
position: relative;
335+
336+
& .dialog-action {
337+
opacity: 1;
338+
visibility: visible;
339+
}
340+
341+
& .dialog-action--response {
342+
opacity: 0;
343+
visibility: hidden;
344+
}
345+
346+
&:not(.first-time) .dialog-action {
347+
transition-delay: 2000ms;
348+
}
349+
350+
&.dialog-action--animate {
351+
& .dialog-action {
352+
opacity: 0;
353+
visibility: hidden;
354+
}
355+
356+
& .dialog-action--response {
357+
opacity: 1;
358+
visibility: visible;
359+
}
360+
}
361+
}

0 commit comments

Comments
 (0)