Skip to content

Commit e479824

Browse files
alyssachvastaalyssachvasta
authored
Merge pull request #34 from Psycle/site
Support for drop down menu and links to visualization docs
2 parents 8f36651 + dc063df commit e479824

6 files changed

Lines changed: 195 additions & 8 deletions

File tree

‎.github/workflows/site.yml‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,14 @@ jobs:
5959
# Move docs site into site/docs
6060
mv library/docs site
6161
62+
# Grab main:visualization-library
63+
rm -rf visualization-docs
64+
git checkout origin/main -- visualization-library/storybook-static
65+
66+
# Move visualization-library site into site/visualization-docs
67+
mv visualization-library/storybook-static site
68+
mv site/storybook-static site/visualization-docs
69+
6270
- name: Upload artifact
6371
uses: actions/upload-pages-artifact@v3
6472
with:

‎src/app/core/header/header.ts‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,54 @@
11
import {Header} from '@google/glue/lib/header';
22

3+
const enum Classes {
4+
isOpen = 'is-open',
5+
}
6+
7+
const enum Selectors {
8+
dropdown = '[data-js-dropdown]',
9+
dropdownTrigger = '[data-js-dropdown-trigger]',
10+
dropdownTarget = '[data-js-dropdown-target]',
11+
}
12+
313
module HeaderModule {
414
function init(): void {
515
const headerEl = document.querySelector<HTMLElement>('.glue-header');
616
if (headerEl) new Header(headerEl);
17+
18+
const dropdownEls = headerEl?.querySelectorAll(Selectors.dropdown);
19+
20+
dropdownEls?.forEach(el => bindDropdown(el as HTMLElement));
21+
}
22+
23+
function bindDropdown(dropdown: HTMLElement) {
24+
const trigger = dropdown.querySelector(Selectors.dropdownTrigger);
25+
const target = dropdown.querySelector(Selectors.dropdownTarget);
26+
27+
trigger?.addEventListener('click', e => {
28+
e.preventDefault();
29+
e.stopPropagation();
30+
31+
target?.classList.toggle(Classes.isOpen);
32+
33+
if (target?.classList.contains(Classes.isOpen)) {
34+
trigger.setAttribute('aria-expanded', 'true');
35+
document.body.addEventListener('click', onClickOutside);
36+
} else {
37+
trigger.setAttribute('aria-expanded', 'false');
38+
document.body.removeEventListener('click', onClickOutside);
39+
}
40+
});
41+
}
42+
43+
function onClickOutside(e: MouseEvent) {
44+
if (!(e.target as HTMLElement)?.closest(Selectors.dropdown)) {
45+
const dropdowns = document.querySelectorAll(Selectors.dropdown);
46+
dropdowns.forEach(el => {
47+
el.querySelector(Selectors.dropdownTarget)?.classList.remove(Classes.isOpen);
48+
el.querySelector(Selectors.dropdownTrigger)?.setAttribute('aria-expanded', 'false');
49+
document.body.removeEventListener('click', onClickOutside);
50+
});
51+
}
752
}
853

954
init();

‎src/index.html‎

Lines changed: 32 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -136,12 +136,38 @@ <h1 itemprop="name">Sensemaker | Jigsaw</h1>
136136
</div>
137137
<div class="glue-header__container">
138138
<div class="glue-header__supplemental">
139-
<a href="docs" class="g-header-link glue-header__link glue-button glue-button--icon-right" rel="noopener noreferrer" target="_blank" aria-label="Documentation">
140-
Documentation
141-
<svg role="presentation" aria-hidden="true" class="glue-icon glue-icon--open-in-new">
142-
<use href="assets/images/glue-icons.svg#open-in-new"></use>
143-
</svg>
144-
</a>
139+
<div class="link-bar-dropdown" data-js-dropdown>
140+
<button
141+
class="g-header-link glue-header__link glue-button glue-button--icon-right link-bar-dropdown-trigger"
142+
aria-expanded="false"
143+
data-js-dropdown-trigger
144+
>
145+
Documentation
146+
<svg role="presentation" aria-hidden="true" class="glue-icon glue-icon--open-in-new">
147+
<use href="assets/images/glue-icons.svg#arrow-drop-down"></use>
148+
</svg>
149+
</button>
150+
<div class="link-bar-dropdown-target" data-js-dropdown-target>
151+
<ul class="link-bar-dropdown-list">
152+
<li>
153+
<a href="docs" class="link-bar-dropdown-link" rel="noopener noreferrer" target="_blank" aria-label="Library Docs">
154+
Library Docs
155+
<svg role="presentation" aria-hidden="true" class="glue-icon glue-icon--open-in-new">
156+
<use href="assets/images/glue-icons.svg#open-in-new"></use>
157+
</svg>
158+
</a>
159+
</li>
160+
<li>
161+
<a href="visualization-docs" class="link-bar-dropdown-link" rel="noopener noreferrer" target="_blank" aria-label="Visualization Docs">
162+
Visualization Docs
163+
<svg role="presentation" aria-hidden="true" class="glue-icon glue-icon--open-in-new">
164+
<use href="assets/images/glue-icons.svg#open-in-new"></use>
165+
</svg>
166+
</a>
167+
</li>
168+
</ul>
169+
</div>
170+
</div>
145171
<a href="https://github.com/Jigsaw-Code/sensemaking-tools/" class="g-header-link glue-header__link glue-button glue-button--icon-right g-button-reverse" rel="noopener noreferrer" target="_blank" aria-label="Developer Library">
146172
Developer Library
147173
<svg role="presentation" aria-hidden="true" class="glue-icon glue-icon--open-in-new">

‎src/styles/components/link-bar-dropdown/_link-bar-dropdown.scss‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
@use '@google/glue/lib/breakpoints/_variables' as gb;
2+
@use '@google/glue/lib/colors/variables' as gc;
3+
4+
.link-bar-dropdown {
5+
@media #{gb.$media-query-lg} {
6+
position: relative;
7+
}
8+
}
9+
10+
.link-bar-dropdown-trigger {
11+
pointer-events: none;
12+
13+
svg {
14+
display: none !important;
15+
16+
@media #{gb.$media-query-lg} {
17+
display: block !important;
18+
}
19+
}
20+
21+
@media #{gb.$media-query-lg} {
22+
pointer-events: all;
23+
}
24+
}
25+
26+
.link-bar-dropdown-target {
27+
@media #{gb.$media-query-lg} {
28+
display: grid;
29+
grid-template-rows: 0fr;
30+
min-width: 100%;
31+
overflow: hidden;
32+
position: absolute;
33+
right: 0;
34+
top: 100%;
35+
transition: grid-template-rows 0.2s ease-in-out;
36+
37+
&.is-open {
38+
grid-template-rows: 1fr;
39+
}
40+
}
41+
}
42+
43+
.link-bar-dropdown-list {
44+
display: flex;
45+
flex-direction: column;
46+
gap: 8px;
47+
list-style-type: none;
48+
margin: 0 16px;
49+
min-height: 0;
50+
padding: 0 16px;
51+
transition: visibility 0.2s ease-in-out;
52+
53+
@media #{gb.$media-query-lg} {
54+
background: gc.$white;
55+
border: 1px solid #1e2526;
56+
gap: 0;
57+
margin: 0;
58+
padding: 0;
59+
visibility: hidden;
60+
61+
.is-open & {
62+
visibility: visible;
63+
}
64+
}
65+
}
66+
67+
.link-bar-dropdown-link {
68+
align-items: center;
69+
display: inline-flex;
70+
font-size: 0.875rem;
71+
gap: 8px;
72+
text-decoration: none;
73+
74+
&,
75+
&:hover,
76+
&:focus-visible,
77+
&:active,
78+
&:visited {
79+
color: gc.$white;
80+
}
81+
82+
&:hover {
83+
text-decoration: underline;
84+
}
85+
86+
@media #{gb.$media-query-lg} {
87+
padding: 12px 16px;
88+
text-transform: uppercase;
89+
white-space: nowrap;
90+
width: 100%;
91+
92+
&,
93+
&:hover,
94+
&:focus-visible,
95+
&:active,
96+
&:visited {
97+
color: #1e2526;
98+
}
99+
}
100+
101+
svg {
102+
fill: currentColor;
103+
height: 18px;
104+
min-width: 18px;
105+
width: 18px;
106+
}
107+
}

‎src/styles/styles.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
@use './app/webfonts/webfonts';
3131

3232
@use './components/bundle-error/bundle-error';
33+
@use './components/link-bar-dropdown/link-bar-dropdown';
3334

3435
// Custom overrides
3536
.glue-fullbleed {
@@ -269,7 +270,7 @@
269270
display: none;
270271
}
271272

272-
.g-header-link {
273+
.g-header-link {
273274
background: transparent;
274275
border: 0;
275276
color: #fff;

‎trigger-docs-deploy.txt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
05-19-25
1+
07-07-25-18-10-00

0 commit comments

Comments
 (0)