Skip to content

Commit d0155b5

Browse files
bolt-botbolt-bot
committed
refactor: split apart existing Nav UI into smaller, more manageable pieces
1 parent ff18eb5 commit d0155b5

File tree

8 files changed

+184
-188
lines changed

8 files changed

+184
-188
lines changed

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

Lines changed: 15 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 {
@@ -393,32 +242,28 @@ class Nav extends BaseComponent {
393242
return (
394243
<ol class="pl-c-nav__list pl-js-pattern-nav-target">
395244
{patternTypes.map((item, i) => {
396-
const classes = classNames({
397-
[`pl-c-nav__item pl-c-nav__item--${item.patternTypeLC}`]: true,
398-
});
399-
400245
const patternItems = item.patternItems;
401246

402247
return (
403-
<li className={classes}>
404-
<ButtonTitle
248+
<NavItem className={`pl-c-nav__item--${item.patternTypeLC}`}>
249+
<NavTitle
405250
aria-controls={item.patternTypeLC}
406251
onClick={this.toggleNavPanel}
407252
>
408253
{item.patternTypeUC}
409-
</ButtonTitle>
254+
</NavTitle>
410255
<ol
411256
id={item.patternSubtypeUC}
412257
className={`pl-c-nav__sublist pl-c-nav__sublist--dropdown pl-js-acc-panel`}
413258
>
414259
{item.patternTypeItems.map((patternSubtype, i) => {
415260
return (
416-
<SubSubList
261+
<NavList
417262
elem={this.elem}
418263
category={patternSubtype.patternSubtypeUC}
419264
>
420265
{patternSubtype.patternSubtypeItems}
421-
</SubSubList>
266+
</NavList>
422267
);
423268
})}
424269

@@ -428,31 +273,13 @@ class Nav extends BaseComponent {
428273
patternItem.patternPartial.includes('viewall') ? (
429274
''
430275
) : (
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>
276+
<NavItem>
277+
<NavLink item={patternItem} elem={this} />
278+
</NavItem>
452279
);
453280
})}
454281
</ol>
455-
</li>
282+
</NavItem>
456283
);
457284
})}
458285

@@ -461,7 +288,7 @@ class Nav extends BaseComponent {
461288
window.ishControls.ishControlsHide === undefined ||
462289
(window.ishControls.ishControlsHide['views-all'] !== true &&
463290
window.ishControls.ishControlsHide.all !== true)) && (
464-
<li class="pl-c-nav__item">
291+
<NavItem>
465292
<a
466293
onClick={e => this.handleClick(e, 'all')}
467294
href="styleguide/html/styleguide.html"
@@ -471,7 +298,7 @@ class Nav extends BaseComponent {
471298
>
472299
All
473300
</a>
474-
</li>
301+
</NavItem>
475302
)}
476303
</ol>
477304
);

‎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+
};

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

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import { h } from 'preact';
2+
import { NavToggle } from './NavToggle';
3+
import { NavLink } from './NavLink';
4+
import { NavItem } from './NavItem';
5+
6+
export const NavList = props => {
7+
const { children, category, elem } = props;
8+
const reorderedChildren = [];
9+
10+
const nonViewAllItems = elem.noViewAll
11+
? children.filter(item => item.patternName !== 'View All')
12+
: children.filter(
13+
item =>
14+
item.patternName !== 'View All' && !item.patternName.includes(' Docs')
15+
);
16+
const viewAllItems = elem.noViewAll
17+
? []
18+
: children.filter(item => item.patternName === 'View All');
19+
20+
reorderedChildren.push(...viewAllItems, ...nonViewAllItems);
21+
22+
return (
23+
<NavItem className={`pl-c-nav__item--${category.toLowerCase()}`}>
24+
{viewAllItems.length > 0 ? (
25+
viewAllItems.map(patternSubtypeItem => (
26+
<div class="pl-c-nav__link--overview-wrapper">
27+
<NavLink
28+
category={category}
29+
item={patternSubtypeItem}
30+
elem={elem}
31+
/>
32+
33+
{nonViewAllItems.length >= 1 && (
34+
<NavToggle
35+
aria-controls={category}
36+
onClick={elem.toggleSpecialNavPanel}
37+
>
38+
{category}
39+
</NavToggle>
40+
)}
41+
</div>
42+
))
43+
) : (
44+
<Button aria-controls={category} onClick={elem.toggleNavPanel}>
45+
{category}
46+
</Button>
47+
)}
48+
49+
{((viewAllItems.length && nonViewAllItems.length) ||
50+
viewAllItems.length === 0) && (
51+
<ol
52+
id={category}
53+
className={`pl-c-nav__subsublist pl-c-nav__subsublist--dropdown pl-js-acc-panel`}
54+
>
55+
{nonViewAllItems.map(patternSubtypeItem => (
56+
<NavItem>
57+
<NavLink
58+
category={category}
59+
item={patternSubtypeItem}
60+
elem={elem}
61+
/>
62+
</NavItem>
63+
))}
64+
</ol>
65+
)}
66+
</NavItem>
67+
);
68+
};

0 commit comments

Comments
 (0)