Skip to content

Commit 537b661

Browse files
bmuenzenmeyerbmuenzenmeyer
authored
Merge branch 'dev' into chore-docs-some-typos
2 parents e70e099 + 73eac97 commit 537b661

File tree

9 files changed

+257
-188
lines changed

9 files changed

+257
-188
lines changed

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

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

16918
@define
17019
class Nav extends BaseComponent {
@@ -370,7 +219,26 @@ class Nav extends BaseComponent {
370219

371220
toggleNavPanel(e) {
372221
const target = e.target;
222+
373223
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 (
227+
this.layoutMode !== 'vertical' &&
228+
window.innerWidth > 670 &&
229+
target.classList.contains('pl-c-nav__link--title')
230+
) {
231+
this.topLevelTriggers = document.querySelectorAll(
232+
'.pl-c-nav__link--title.pl-is-active'
233+
);
234+
235+
this.topLevelTriggers.forEach(trigger => {
236+
if (trigger !== target) {
237+
trigger.classList.remove('pl-is-active');
238+
trigger.nextSibling.classList.remove('pl-is-active');
239+
}
240+
});
241+
}
374242
}
375243

376244
rendered() {
@@ -393,32 +261,28 @@ class Nav extends BaseComponent {
393261
return (
394262
<ol class="pl-c-nav__list pl-js-pattern-nav-target">
395263
{patternTypes.map((item, i) => {
396-
const classes = classNames({
397-
[`pl-c-nav__item pl-c-nav__item--${item.patternTypeLC}`]: true,
398-
});
399-
400264
const patternItems = item.patternItems;
401265

402266
return (
403-
<li className={classes}>
404-
<ButtonTitle
267+
<NavItem className={`pl-c-nav__item--${item.patternTypeLC}`}>
268+
<NavTitle
405269
aria-controls={item.patternTypeLC}
406270
onClick={this.toggleNavPanel}
407271
>
408272
{item.patternTypeUC}
409-
</ButtonTitle>
273+
</NavTitle>
410274
<ol
411275
id={item.patternSubtypeUC}
412276
className={`pl-c-nav__sublist pl-c-nav__sublist--dropdown pl-js-acc-panel`}
413277
>
414278
{item.patternTypeItems.map((patternSubtype, i) => {
415279
return (
416-
<SubSubList
280+
<NavList
417281
elem={this.elem}
418282
category={patternSubtype.patternSubtypeUC}
419283
>
420284
{patternSubtype.patternSubtypeItems}
421-
</SubSubList>
285+
</NavList>
422286
);
423287
})}
424288

@@ -428,31 +292,13 @@ class Nav extends BaseComponent {
428292
patternItem.patternPartial.includes('viewall') ? (
429293
''
430294
) : (
431-
<li class="pl-c-nav__item">
432-
<a
433-
href={`patterns/${patternItem.patternPath}`}
434-
class="pl-c-nav__link pl-c-nav__link--pattern"
435-
onClick={e =>
436-
this.handleClick(e, patternItem.patternPartial)
437-
}
438-
data-patternpartial={patternItem.patternPartial}
439-
tabindex="0"
440-
>
441-
{patternItem.patternName === 'View All'
442-
? patternItem.patternName + ' ' + item.patternTypeUC
443-
: patternItem.patternName}
444-
{patternItem.patternState && (
445-
<span
446-
class={`pl-c-pattern-state pl-c-pattern-state--${patternItem.patternState}`}
447-
title={patternItem.patternState}
448-
/>
449-
)}
450-
</a>
451-
</li>
295+
<NavItem>
296+
<NavLink item={patternItem} elem={this} />
297+
</NavItem>
452298
);
453299
})}
454300
</ol>
455-
</li>
301+
</NavItem>
456302
);
457303
})}
458304

@@ -461,7 +307,7 @@ class Nav extends BaseComponent {
461307
window.ishControls.ishControlsHide === undefined ||
462308
(window.ishControls.ishControlsHide['views-all'] !== true &&
463309
window.ishControls.ishControlsHide.all !== true)) && (
464-
<li class="pl-c-nav__item">
310+
<NavItem>
465311
<a
466312
onClick={e => this.handleClick(e, 'all')}
467313
href="styleguide/html/styleguide.html"
@@ -471,7 +317,7 @@ class Nav extends BaseComponent {
471317
>
472318
All
473319
</a>
474-
</li>
320+
</NavItem>
475321
)}
476322
</ol>
477323
);

‎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)