Skip to content

Commit f07ea6f

Browse files
bolt-botbolt-bot
committed
refactor: 1st pass cleaning up and converting original PL nav into a standalone web component
1 parent c325463 commit f07ea6f

File tree

5 files changed

+178
-63
lines changed

5 files changed

+178
-63
lines changed

‎packages/uikit-workshop/src/html/index.html

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,6 @@
2323
</pl-layout>
2424

2525

26-
<script type="text/mustache" class="pl-js-pattern-nav-template">
27-
${require('./partials/pattern-nav.html') }
28-
</script>
2926

3027
<script type="text/mustache" class="pl-js-ish-controls-template">
3128
${require('./partials/controls.html') }

‎packages/uikit-workshop/src/html/partials/pattern-nav.html

Lines changed: 0 additions & 59 deletions
This file was deleted.

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

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
import { define, props } from 'skatejs';
2+
import { h } from 'preact';
3+
const classNames = require('classnames');
4+
5+
import { BaseComponent } from '../base-component.js';
6+
import $ from 'jquery';
7+
8+
const Button = props => {
9+
return (
10+
<button
11+
class="pl-c-nav__link pl-c-nav__link--dropdown pl-js-acc-handle"
12+
role="tab"
13+
{...props}
14+
>
15+
{props.children}
16+
</button>
17+
);
18+
};
19+
20+
@define
21+
class Nav extends BaseComponent {
22+
static is = 'pl-nav';
23+
24+
_stateChanged(state) {}
25+
26+
constructor() {
27+
super();
28+
this.toggleNavPanel = this.toggleNavPanel.bind(this);
29+
}
30+
31+
toggleNavPanel(e) {
32+
const $this = $(e.target);
33+
const $panel = $this.next('.pl-js-acc-panel');
34+
const subnav = $this
35+
.parent()
36+
.parent()
37+
.hasClass('pl-js-acc-panel');
38+
39+
//Close other panels if link isn't a subnavigation item
40+
if (!subnav) {
41+
$('.pl-js-acc-handle')
42+
.not($this)
43+
.removeClass('pl-is-active');
44+
$('.pl-js-acc-panel')
45+
.not($panel)
46+
.removeClass('pl-is-active');
47+
}
48+
49+
//Activate selected panel
50+
$this.toggleClass('pl-is-active');
51+
$panel.toggleClass('pl-is-active');
52+
}
53+
54+
render() {
55+
const patternTypes = window.navItems.patternTypes;
56+
// const patternItems = window.navItems.patternItems;
57+
58+
return (
59+
<ol class="pl-c-nav__list pl-js-pattern-nav-target">
60+
{patternTypes.map((item, i) => {
61+
const classes = classNames({
62+
[`pl-c-nav__item pl-c-nav__item--${item.patternTypeLC}`]: true,
63+
});
64+
65+
const patternItems = item.patternItems;
66+
67+
return (
68+
<li className={classes}>
69+
<Button
70+
aria-controls={item.patternTypeLC}
71+
onClick={this.toggleNavPanel}
72+
>
73+
{item.patternTypeUC}
74+
</Button>
75+
76+
<ol
77+
id={item.patternSubtypeUC}
78+
class="pl-c-nav__sublist pl-c-nav__sublist--dropdown pl-js-acc-panel"
79+
>
80+
{item.patternTypeItems.map((patternSubtype, i) => {
81+
return (
82+
<li
83+
className={`pl-c-nav__item pl-c-nav__item--${
84+
patternSubtype.patternSubtypeLC
85+
}`}
86+
>
87+
<Button
88+
aria-controls={patternSubtype.patternSubtypeUC}
89+
onClick={this.toggleNavPanel}
90+
>
91+
{patternSubtype.patternSubtypeUC}
92+
</Button>
93+
94+
<ol
95+
id={patternSubtype.patternSubtypeUC}
96+
class="pl-c-nav__subsublist pl-c-nav__subsublist--dropdown pl-js-acc-panel"
97+
>
98+
{patternSubtype.patternSubtypeItems.map(
99+
(patternSubtypeItem, i) => {
100+
return (
101+
<li class="pl-c-nav__item">
102+
<a
103+
href={`patterns/${
104+
patternSubtypeItem.patternPath
105+
}`}
106+
class="pl-c-nav__link pl-c-nav__link--sublink"
107+
data-patternpartial={
108+
patternSubtypeItem.patternPartial
109+
}
110+
>
111+
{patternSubtypeItem.patternName}
112+
113+
{patternSubtypeItem.patternState && (
114+
<span
115+
class={`pl-c-pattern-state pl-c-pattern-state--${
116+
patternSubtypeItem.patternState
117+
}`}
118+
title={patternSubtypeItem.patternState}
119+
/>
120+
)}
121+
</a>
122+
</li>
123+
);
124+
}
125+
)}
126+
</ol>
127+
</li>
128+
);
129+
})}
130+
131+
{patternItems &&
132+
patternItems.map((patternItem, i) => {
133+
return (
134+
<li class="pl-c-nav__item">
135+
<a
136+
href={`patterns/${patternItem.patternPath}`}
137+
class="pl-c-nav__link"
138+
data-patternpartial={patternItem.patternPartial}
139+
tabindex="0"
140+
>
141+
{patternItem.patternName}
142+
143+
{patternItem.patternState && (
144+
<span
145+
class={`pl-c-pattern-state pl-c-pattern-state--${
146+
patternItem.patternState
147+
}`}
148+
title={patternItem.patternState}
149+
/>
150+
)}
151+
</a>
152+
</li>
153+
);
154+
})}
155+
</ol>
156+
</li>
157+
);
158+
})}
159+
160+
<li class="pl-c-nav__item">
161+
<a
162+
href="styleguide/html/styleguide.html"
163+
class="pl-c-nav__link"
164+
data-patternpartial="all"
165+
tabindex="0"
166+
>
167+
All
168+
</a>
169+
</li>
170+
</ol>
171+
);
172+
}
173+
}
174+
175+
export { Nav };

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
\*------------------------------------*/
44

55
pl-nav {
6-
background-color: inherit; // so the inside of dropdowns inherits the correct color
6+
background-color: inherit; // so the inside of dropdowns inherits the correct color
7+
display: flex; // vertically align children
78
}
89

910
/**

‎packages/uikit-workshop/src/scripts/patternlab-viewer.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ loadPolyfills.then(res => {
1010
}
1111
);
1212
import(/* webpackMode: 'lazy', webpackChunkName: 'pl-header' */ './components/pl-header/pl-header');
13+
import(/* webpackMode: 'lazy', webpackChunkName: 'pl-nav' */ './components/pl-nav/pl-nav');
1314
import(/* webpackMode: 'lazy', webpackChunkName: 'pl-search' */ './components/pl-search/pl-search');
1415
import(/* webpackMode: 'lazy', webpackChunkName: 'pl-toggle-info' */ './components/pl-toggle-info/pl-toggle-info');
1516
import(/* webpackMode: 'lazy', webpackChunkName: 'pl-toggle-layout' */ './components/pl-toggle-layout/pl-toggle-layout');

0 commit comments

Comments
 (0)