Skip to content

Commit 1e7ed0d

Browse files
JosefBredereckJosefBredereck
committed
Merge remote-tracking branch 'upstream/dev' into dev
2 parents 2475cac + 190b494 commit 1e7ed0d

File tree

9 files changed

+264
-197
lines changed

9 files changed

+264
-197
lines changed

‎packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js

Lines changed: 42 additions & 197 deletions
Original file line numberDiff line numberDiff line change
@@ -10,156 +10,10 @@ import { BaseComponent } from '../base-component.js';
1010
import Mousetrap from 'mousetrap';
1111
import 'url-search-params-polyfill';
1212

13-
const SubSubList = props => {
14-
const { children, category, elem } = props;
15-
const reorderedChildren = [];
16-
17-
const nonViewAllItems = children.filter(item => !item.isDocPattern);
18-
const viewAllItems = elem.noViewAll
19-
? []
20-
: children.filter(item => item.isDocPattern);
21-
22-
reorderedChildren.push(...viewAllItems, ...nonViewAllItems);
23-
24-
return (
25-
<li className={`pl-c-nav__item pl-c-nav__item--${category.toLowerCase()}`}>
26-
{viewAllItems.length > 0 ? (
27-
viewAllItems.map(patternSubtypeItem => (
28-
<div class="pl-c-nav__link--overview-wrapper">
29-
<a
30-
href={`patterns/${patternSubtypeItem.patternPath}`}
31-
className={`pl-c-nav__link pl-c-nav__link--sublink
32-
${
33-
patternSubtypeItem.isDocPattern
34-
? 'pl-c-nav__link--overview pl-js-link-overview'
35-
: 'pl-c-nav__link--subsublink'
36-
}
37-
`}
38-
onClick={e =>
39-
elem.handleClick(e, patternSubtypeItem.patternPartial)
40-
}
41-
data-patternpartial={patternSubtypeItem.patternPartial}
42-
>
43-
{patternSubtypeItem.isDocPattern
44-
? `${category}`
45-
: patternSubtypeItem.patternName}
46-
{patternSubtypeItem.patternState && (
47-
<span
48-
class={`pl-c-pattern-state pl-c-pattern-state--${patternSubtypeItem.patternState}`}
49-
title={patternSubtypeItem.patternState}
50-
/>
51-
)}
52-
</a>
53-
54-
{nonViewAllItems.length >= 1 && (
55-
<SpecialButton
56-
aria-controls={category}
57-
onClick={elem.toggleSpecialNavPanel}
58-
>
59-
{category}
60-
</SpecialButton>
61-
)}
62-
</div>
63-
))
64-
) : (
65-
<Button aria-controls={category} onClick={elem.toggleNavPanel}>
66-
{category}
67-
</Button>
68-
)}
69-
70-
{((viewAllItems.length && nonViewAllItems.length) ||
71-
viewAllItems.length === 0) && (
72-
<ol
73-
id={category}
74-
className={`pl-c-nav__subsublist pl-c-nav__subsublist--dropdown pl-js-acc-panel`}
75-
>
76-
{nonViewAllItems.map(patternSubtypeItem => (
77-
<li class="pl-c-nav__item">
78-
<a
79-
href={`patterns/${patternSubtypeItem.patternPath}`}
80-
className={`pl-c-nav__link pl-c-nav__link--sublink
81-
${
82-
patternSubtypeItem.isDocPattern
83-
? 'pl-c-nav__link--overview'
84-
: 'pl-c-nav__link--subsublink'
85-
}
86-
`}
87-
onClick={e =>
88-
elem.handleClick(e, patternSubtypeItem.patternPartial)
89-
}
90-
data-patternpartial={patternSubtypeItem.patternPartial}
91-
>
92-
{patternSubtypeItem.isDocPattern
93-
? `${category} Overview`
94-
: patternSubtypeItem.patternName}
95-
{patternSubtypeItem.patternState && (
96-
<span
97-
class={`pl-c-pattern-state pl-c-pattern-state--${patternSubtypeItem.patternState}`}
98-
title={patternSubtypeItem.patternState}
99-
/>
100-
)}
101-
</a>
102-
</li>
103-
))}
104-
</ol>
105-
)}
106-
</li>
107-
);
108-
};
109-
110-
const SpecialButton = props => {
111-
return (
112-
<button
113-
className={`pl-c-nav__link pl-c-nav__link--section-dropdown pl-js-acc-handle`}
114-
role="tab"
115-
{...props}
116-
>
117-
{props.children}
118-
<span
119-
class="pl-c-nav__link-icon"
120-
dangerouslySetInnerHTML={{
121-
__html: '<pl-icon name="arrow-down"></pl-icon>',
122-
}}
123-
/>
124-
</button>
125-
);
126-
};
127-
128-
const Button = props => {
129-
return (
130-
<button
131-
className={`pl-c-nav__link pl-c-nav__link--dropdown pl-js-acc-handle`}
132-
role="tab"
133-
{...props}
134-
>
135-
<span className={`pl-c-nav__link-text`}>{props.children}</span>
136-
<span
137-
class="pl-c-nav__link-icon"
138-
dangerouslySetInnerHTML={{
139-
__html: '<pl-icon name="arrow-down"></pl-icon>',
140-
}}
141-
/>
142-
</button>
143-
);
144-
};
145-
146-
const ButtonTitle = props => {
147-
return (
148-
<button
149-
className={`pl-c-nav__link pl-c-nav__link--title pl-js-acc-handle`}
150-
role="tab"
151-
{...props}
152-
>
153-
<span
154-
class="pl-c-nav__link-icon"
155-
dangerouslySetInnerHTML={{
156-
__html: '<pl-icon name="arrow-down"></pl-icon>',
157-
}}
158-
/>
159-
<span className={`pl-c-nav__link-text`}>{props.children}</span>
160-
</button>
161-
);
162-
};
13+
import { NavTitle } from './src/NavTitle';
14+
import { NavList } from './src/NavList';
15+
import { NavLink } from './src/NavLink';
16+
import { NavItem } from './src/NavItem';
16317

16418
@define
16519
class Nav extends BaseComponent {
@@ -365,7 +219,22 @@ class Nav extends BaseComponent {
365219

366220
toggleNavPanel(e) {
367221
const target = e.target;
222+
368223
target.classList.toggle('pl-is-active');
224+
225+
// when the Nav renders as a dropdown menu, only allow one top-level menu item to be open at a time to prevent overlap issues
226+
if (this.layoutMode !== 'vertical' && window.innerWidth > 670) {
227+
this.topLevelTriggers = document.querySelectorAll(
228+
'.pl-c-nav__link--title.pl-is-active'
229+
);
230+
231+
this.topLevelTriggers.forEach(trigger => {
232+
if (trigger !== target) {
233+
trigger.classList.remove('pl-is-active');
234+
trigger.nextSibling.classList.remove('pl-is-active');
235+
}
236+
});
237+
}
369238
}
370239

371240
rendered() {
@@ -388,32 +257,28 @@ class Nav extends BaseComponent {
388257
return (
389258
<ol class="pl-c-nav__list pl-js-pattern-nav-target">
390259
{patternTypes.map((item, i) => {
391-
const classes = classNames({
392-
[`pl-c-nav__item pl-c-nav__item--${item.patternTypeLC}`]: true,
393-
});
394-
395260
const patternItems = item.patternItems;
396261

397262
return (
398-
<li className={classes}>
399-
<ButtonTitle
263+
<NavItem className={`pl-c-nav__item--${item.patternTypeLC}`}>
264+
<NavTitle
400265
aria-controls={item.patternTypeLC}
401266
onClick={this.toggleNavPanel}
402267
>
403268
{item.patternTypeUC}
404-
</ButtonTitle>
269+
</NavTitle>
405270
<ol
406271
id={item.patternSubtypeUC}
407272
className={`pl-c-nav__sublist pl-c-nav__sublist--dropdown pl-js-acc-panel`}
408273
>
409274
{item.patternTypeItems.map((patternSubtype, i) => {
410275
return (
411-
<SubSubList
276+
<NavList
412277
elem={this.elem}
413278
category={patternSubtype.patternSubtypeLC}
414279
>
415280
{patternSubtype.patternSubtypeItems}
416-
</SubSubList>
281+
</NavList>
417282
);
418283
})}
419284

@@ -423,53 +288,33 @@ class Nav extends BaseComponent {
423288
patternItem.patternPartial.includes('viewall') ? (
424289
''
425290
) : (
426-
<li class="pl-c-nav__item">
427-
<a
428-
href={`patterns/${patternItem.patternPath}`}
429-
class="pl-c-nav__link pl-c-nav__link--pattern"
430-
onClick={e =>
431-
this.handleClick(e, patternItem.patternPartial)
432-
}
433-
data-patternpartial={patternItem.patternPartial}
434-
tabindex="0"
435-
>
436-
{patternItem.patternName}
437-
{patternItem.patternState && (
438-
<span
439-
class={`pl-c-pattern-state pl-c-pattern-state--${patternItem.patternState}`}
440-
title={patternItem.patternState}
441-
/>
442-
)}
443-
</a>
444-
</li>
291+
<NavItem>
292+
<NavLink item={patternItem} elem={this} />
293+
</NavItem>
445294
);
446295
})}
447296
</ol>
448-
</li>
297+
</NavItem>
449298
);
450299
})}
451300

452301
{/* display the All link if window.ishControlsHide is undefined (for some reason) OR window.ishControls.ishControlsHide doesn't have `views-all` and/or `all` set to true */}
453302
{(window.ishControls === undefined ||
454303
window.ishControls.ishControlsHide === undefined ||
455-
(!window.ishControls.ishControlsHide['views-all'] &&
456-
!window.ishControls.ishControlsHide.all)) &&
457-
!this.noViewAll && (
458-
<li class="pl-c-nav__item">
459-
<a
460-
onClick={e => this.handleClick(e, 'all')}
461-
href="styleguide/html/styleguide.html"
462-
class="pl-c-nav__link pl-c-nav__link--pattern"
463-
data-patternpartial="all"
464-
tabindex="0"
465-
>
466-
{window.config.patternTranslations &&
467-
window.config.patternTranslations.viewAllRoot
468-
? window.config.patternTranslations.viewAllRoot
469-
: 'All'}
470-
</a>
471-
</li>
472-
)}
304+
(window.ishControls.ishControlsHide['views-all'] !== true &&
305+
window.ishControls.ishControlsHide.all !== true)) && (
306+
<NavItem>
307+
<a
308+
onClick={e => this.handleClick(e, 'all')}
309+
href="styleguide/html/styleguide.html"
310+
class="pl-c-nav__link pl-c-nav__link--pattern"
311+
data-patternpartial="all"
312+
tabindex="0"
313+
>
314+
All
315+
</a>
316+
</NavItem>
317+
)}
473318
</ol>
474319
);
475320
}

‎packages/uikit-workshop/src/scripts/components/pl-nav/src/NavButton.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { h } from 'preact';
2+
3+
export const NavButton = props => {
4+
return (
5+
<button
6+
className={`pl-c-nav__link pl-c-nav__link--dropdown pl-js-acc-handle`}
7+
role="tab"
8+
{...props}
9+
>
10+
<span className={`pl-c-nav__link-text`}>{props.children}</span>
11+
<span
12+
class="pl-c-nav__link-icon"
13+
dangerouslySetInnerHTML={{
14+
__html: '<pl-icon name="arrow-down"></pl-icon>',
15+
}}
16+
/>
17+
</button>
18+
);
19+
};

‎packages/uikit-workshop/src/scripts/components/pl-nav/src/NavItem.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { h } from 'preact';
2+
import cx from 'classnames';
3+
4+
export const NavItem = props => {
5+
const classes = cx('pl-c-nav__item', props.className);
6+
7+
return <li className={classes}>{props.children}</li>;
8+
};

‎packages/uikit-workshop/src/scripts/components/pl-nav/src/NavLink.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { h } from 'preact';
2+
import { PatternState } from './PatternState';
3+
4+
export const NavLink = props => {
5+
return (
6+
<a
7+
href={`patterns/${props.item.patternPath}`}
8+
className={`pl-c-nav__link pl-c-nav__link--sublink
9+
${
10+
props.item.patternName === 'View All'
11+
? 'pl-c-nav__link--overview'
12+
: 'pl-c-nav__link--subsublink'
13+
}
14+
`}
15+
onClick={e => props.elem.handleClick(e, props.item.patternPartial)}
16+
data-patternpartial={props.item.patternPartial}
17+
>
18+
{props.item.patternName === 'View All' && props.category
19+
? `${props.category}`
20+
: props.item.patternName}
21+
{props.item.patternState && (
22+
<PatternState variant={props.item.patternState} />
23+
)}
24+
</a>
25+
);
26+
};

0 commit comments

Comments
 (0)