Skip to content

Commit c8ac719

Browse files
CITguyCITguy
authored
Merge pull request #235 from rackerlabs/refactoring
Refactoring
2 parents 2802ac5 + 19ee7d1 commit c8ac719

21 files changed

+146
-1204
lines changed

‎docs/_data/cdn.json5‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
webComponents: 'https://ab2b55b0a26bb32fdc01-2c8b94bcec8e01c366189541a4035ea4.ssl.cf5.rackcdn.com',
3+
}

‎docs/_data/nav.json5‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@
4242
{ label: 'Lists', path: 'lists' },
4343
{ label: 'Menus', path: 'menus' },
4444
{ label: 'Modals', path: 'modals' },
45+
{ label: 'Navigation', path: 'navigation' },
4546
{ label: 'Panels', path: 'panels' },
4647
{ label: 'Pagination', path: 'pagination' },
4748
{ label: 'Pills', path: 'pills' },

‎docs/_templates/partials/after_footer.njk‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
elAdapter.parentElement.removeChild(elAdapter);
1010
}
1111
</script>
12-
<script src="vendor/scripts/custom-elements-es5-adapter.js"></script>
12+
<script src="{{ data.cdn.webComponents }}/custom-elements-es5-adapter.js"></script>
1313
</span>
1414

1515
<script src="https://code.jquery.com/jquery-3.2.1.min.js"

‎docs/_templates/partials/head.njk‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,5 @@
1010
<link rel="stylesheet" href="docs.css">
1111

1212
<!-- Polyfill Loader -->
13-
<script src="vendor/scripts/webcomponents-loader.js"></script>
13+
<script src="{{ data.cdn.webComponents }}/webcomponents-loader.js"></script>
1414
</head>

‎docs/_templates/partials/lorem-nav.njk‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<a href="#">Link 1</a>
2+
<a href="#">Link 2</a>
3+
<a href="#">Link 3</a>
4+
5+
<hx-disclosure aria-controls="section-1">
6+
Section 1
7+
<hx-icon class="toggle-icon" type="angle-down"></hx-icon>
8+
</hx-disclosure>
9+
<hx-reveal id="section-1" open>
10+
<a href="#">Link 1-1</a>
11+
<a href="#">Link 1-2</a>
12+
<a href="#">Link 1-3</a>
13+
14+
<hx-disclosure aria-controls="section-1-2">
15+
Section 2
16+
<hx-icon class="toggle-icon" type="angle-down"></hx-icon>
17+
</hx-disclosure>
18+
<hx-reveal id="section-1-2" open>
19+
<a href="#">Link 2-1</a>
20+
<a href="#">Link 2-2</a>
21+
<a href="#">Link 2-3</a>
22+
</hx-reveal>
23+
</hx-reveal>
24+

‎docs/components/layouts/horizontal-layout-template.html‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,7 @@
1515

1616
<!-- FIXME: Add your application styles here! -->
1717

18-
<!-- FIXME: point to loader in node_modules/@webcomponents/webcomponentsjs -->
19-
<script src="vendor/scripts/webcomponents-loader.js"></script>
18+
<script src="{{ data.cdn.webComponents }}/webcomponents-loader.js"></script>
2019
</head>
2120
<body class="hxHorizontal" id="top">
2221
<!--
@@ -31,7 +30,9 @@
3130
<div id="app">
3231
<div id="stage">
3332
<nav id="nav" class="hxNav">
34-
{% include 'partials/app_nav.njk' %}
33+
<!-- Product Navigation -->
34+
{% include 'partials/lorem-nav.njk' %}
35+
<!-- end:Product Navigation -->
3536
</nav>
3637

3738
<!--
@@ -53,14 +54,9 @@
5354
</nav>
5455
<h1>Left Panel</h1>
5556

56-
<div class="hxAlert">
57-
<div class="hxAlert__icon">
58-
<hx-icon type="info-circle"></hx-icon>
59-
</div>
60-
<div class="hxAlert__text">
61-
Copy the source of this page to use as a template for your application.
62-
</div>
63-
</div>
57+
<hx-alert type="info" static>
58+
Copy the source of this page to use as a template for your application.
59+
</hx-alert>
6460

6561
<ul>
6662
<li>
@@ -114,8 +110,7 @@ <h2>Right Panel</h2>
114110
elAdapter.parentElement.removeChild(elAdapter);
115111
}
116112
</script>
117-
<!-- FIXME: point to adapter in node_modules/@webcomponents/webcomponentsjs -->
118-
<script src="vendor/scripts/custom-elements-es5-adapter.js"></script>
113+
<script src="{{ data.cdn.webComponents }}/custom-elements-es5-adapter.js"></script>
119114
</span>
120115

121116
<!-- FIXME: point to HelixUI behavior in node_modules/helix-ui -->

‎docs/components/layouts/index.html‎

Lines changed: 34 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -5,33 +5,18 @@
55
guides/getting-started: Getting Started
66
components/box: Box
77
components/grid: Grid
8+
components/navigation: Navigation
89
---
910
{% extends 'component.njk' %}
1011
{% block content %}
1112
<section>
12-
<div class="hxAlert hxAlert--warning">
13-
<div class="hxAlert__icon">
14-
<hx-icon type="exclamation-triangle"></hx-icon>
15-
</div>
16-
<div class="hxAlert__text">
17-
<span class="hxAlert__status">WARNING</span>
13+
<hx-alert type="warning" status="warning" static>
14+
Layouts are not automatic. Apply appropriate CSS class to document body.
15+
</hx-alert>
1816

19-
Layouts are not automatic. Apply appropriate CSS class to document body.
20-
</div>
21-
</div>
22-
<br />
23-
24-
<div class="hxAlert hxAlert--warning">
25-
<div class="hxAlert__icon">
26-
<hx-icon type="exclamation-triangle"></hx-icon>
27-
</div>
28-
<div class="hxAlert__text">
29-
<span class="hxAlert__status">WARNING</span>
30-
31-
Padding is not automatic. Add Box styling to apply padding.
32-
</div>
33-
</div>
34-
<br />
17+
<hx-alert type="warning" status="warning" static>
18+
Padding is not automatic. Add Box styling to apply padding.
19+
</hx-alert>
3520

3621
<p>
3722
Two application layouts are available.
@@ -64,17 +49,11 @@
6449

6550
<section><!-- VERTICAL LAYOUT -->
6651
<h2 id="vertical-layout">Vertical Layout</h2>
67-
<div class="hxAlert">
68-
<div class="hxAlert__icon">
69-
<hx-icon type="info-circle"></hx-icon>
70-
</div>
71-
<div class="hxAlert__text">
72-
You can copy/paste the source code from the
73-
<a href="components/layouts/vertical-layout-template.html">vertical layout template</a>
74-
to get a head start.
75-
</div>
76-
</div>
77-
<br />
52+
<hx-alert type="info" static>
53+
You can copy/paste the source code from the
54+
<a href="components/layouts/vertical-layout-template.html">vertical layout template</a>
55+
to get a head start.
56+
</hx-alert>
7857
<p>
7958
Use a Vertical layout if your application content needs to grow along the y-axis
8059
(pushing the footer down past the bottom of the viewport).
@@ -105,17 +84,11 @@ <h2 id="vertical-layout">Vertical Layout</h2>
10584

10685
<section><!-- HORIZONTAL LAYOUT -->
10786
<h2 id="horizontal-layout">Horizontal Layout</h2>
108-
<div class="hxAlert">
109-
<div class="hxAlert__icon">
110-
<hx-icon type="info-circle"></hx-icon>
111-
</div>
112-
<div class="hxAlert__text">
113-
You can copy/paste the source code from the
114-
<a href="components/layouts/horizontal-layout-template.html">horizontal layout template</a>
115-
to get a head start.
116-
</div>
117-
</div>
118-
<br />
87+
<hx-alert type="info" static>
88+
You can copy/paste the source code from the
89+
<a href="components/layouts/horizontal-layout-template.html">horizontal layout template</a>
90+
to get a head start.
91+
</hx-alert>
11992
<p>
12093
Use a Horizontal layout if your application content needs to grow across the x-axis
12194
(keeping the footer visible at all times).
@@ -155,16 +128,9 @@ <h2 id="app-area">App Area</h2>
155128
<section>
156129
<h2 id="stage-area">Stage</h2>
157130
<section>
158-
<div class="hxAlert hxAlert--warning">
159-
<div class="hxAlert__icon">
160-
<hx-icon type="exclamation-triangle"></hx-icon>
161-
</div>
162-
<div class="hxAlert__text">
163-
<span class="hxAlert__status">WARNING</span>
164-
Do not use more than one side rail in your application.
165-
</div>
166-
</div>
167-
<br />
131+
<hx-alert type="warning" status="warning" static>
132+
Do not use more than one side rail in your application.
133+
</hx-alert>
168134

169135
<p>
170136
The Stage contains three potential children.
@@ -213,74 +179,19 @@ <h3 id="product-nav">Product Navigation</h3>
213179
<li>
214180
Give the element a class of <code>hxNav</code> to apply visual styles.
215181
</li>
182+
<li>
183+
The product navigation is most commonly implemented using a
184+
<a href="components/navigation/#vertical-nav">vertical navigation</a>
185+
component.
186+
</li>
216187
</ul>
217-
<div class="demo nav-demo">
218-
<nav class="hxNav">
219-
<a href="#">Link 1-1</a>
220-
<a href="#">Link 1-2</a>
221-
<a href="#">Link 1-3</a>
222-
223-
<hx-disclosure aria-controls="section-1">
224-
L1 Section
225-
<hx-icon class="toggle-icon" type="angle-down"></hx-icon>
226-
</hx-disclosure>
227-
<hx-reveal id="section-1" open>
228-
<a href="#">Link 2-1</a>
229-
<a href="#">Link 2-2</a>
230-
<a href="#">Link 2-3</a>
231-
232-
<hx-disclosure aria-controls="section-1-2">
233-
L2 Section
234-
<hx-icon class="toggle-icon" type="angle-down"></hx-icon>
235-
</hx-disclosure>
236-
<hx-reveal id="section-1-2" open>
237-
<a href="#">Link 3-1</a>
238-
<a href="#">Link 3-2</a>
239-
<a href="#">Link 3-3</a>
240-
</hx-reveal>
241-
</hx-reveal>
242-
</nav>
243-
</div>
244-
{% code 'html' %}
245-
<nav id="nav" class="hxNav">
246-
<a href="#">Link 1-1</a>
247-
<a href="#">Link 1-2</a>
248-
<a href="#">Link 1-3</a>
249-
250-
<hx-disclosure aria-controls="section-1">
251-
L1 Section
252-
<hx-icon class="toggle-icon" type="angle-down"></hx-icon>
253-
</hx-disclosure>
254-
<hx-reveal id="section-1" open>
255-
<a href="#">Link 2-1</a>
256-
<a href="#">Link 2-2</a>
257-
<a href="#">Link 2-3</a>
258-
259-
<hx-disclosure aria-controls="section-1-2">
260-
L2 Section
261-
<hx-icon class="toggle-icon" type="angle-down"></hx-icon>
262-
</hx-disclosure>
263-
<hx-reveal id="section-1-2" open>
264-
<a href="#">Link 3-1</a>
265-
<a href="#">Link 3-2</a>
266-
<a href="#">Link 3-3</a>
267-
</hx-reveal>
268-
</hx-reveal>
269-
</nav>
270-
{% endcode %}
271188
</section>
272189

273190
<section><!-- main content -->
274191
<h3 id="main-content">Main Content</h3>
275-
<div class="hxAlert">
276-
<div class="hxAlert__icon">
277-
<hx-icon type="info-circle"></hx-icon>
278-
</div>
279-
<div class="hxAlert__text">
280-
<span class="hxAlert__status">INFO</span>
281-
Content area behaves like a non-wrapping Grid row when using a Horizontal layout.
282-
</div>
283-
</div>
192+
<hx-alert type="info" status="info" static>
193+
Content area behaves like a non-wrapping Grid row when using a Horizontal layout.
194+
</hx-alert>
284195
<ul>
285196
<li>
286197
For accessibility reasons, use a <code>&lt;main&gt;</code> element.
@@ -298,29 +209,13 @@ <h3 id="main-content">Main Content</h3>
298209

299210
<section><!-- side rail -->
300211
<h3 id="side-rail">Side Rail</h3>
301-
<div class="hxAlert">
302-
<div class="hxAlert__icon">
303-
<hx-icon type="info-circle"></hx-icon>
304-
</div>
305-
<div class="hxAlert__text">
306-
<span class="hxAlert__status">OPTIONAL</span>
307-
308-
Main content will automatically fill the space of a missing side rail.
309-
</div>
310-
</div>
311-
<br />
312-
313-
<div class="hxAlert hxAlert--warning">
314-
<div class="hxAlert__icon">
315-
<hx-icon type="exclamation-triangle"></hx-icon>
316-
</div>
317-
<div class="hxAlert__text">
318-
<span class="hxAlert__status">WARNING</span>
212+
<hx-alert type="info" status="optional" static>
213+
Main content will automatically fill the space of a missing side rail.
214+
</hx-alert>
319215

320-
A side rail is not recommended for a Horizontal layout.
321-
</div>
322-
</div>
323-
<br />
216+
<hx-alert type="warning" status="warning" static>
217+
A side rail is not recommended for a Horizontal layout.
218+
</hx-alert>
324219

325220
<ul>
326221
<li>

‎docs/components/layouts/vertical-layout-template.html‎

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,7 @@
1515

1616
<!-- FIXME: Add your application styles here! -->
1717

18-
<!-- FIXME: point to loader in node_modules/@webcomponents/webcomponentsjs -->
19-
<script src="vendor/scripts/webcomponents-loader.js"></script>
18+
<script src="{{ data.cdn.webComponents }}/webcomponents-loader.js"></script>
2019
</head>
2120
<body class="hxVertical" id="top">
2221
<!--
@@ -31,9 +30,9 @@
3130
<div id="app">
3231
<div id="stage">
3332
<nav id="nav" class="hxNav">
34-
<!-- Left Navigation -->
35-
{% include 'partials/app_nav.njk' %}
36-
<!-- end:Left Navigation -->
33+
<!-- Product Navigation -->
34+
{% include 'partials/lorem-nav.njk' %}
35+
<!-- end:Product Navigation -->
3736
</nav>
3837

3938
<!--
@@ -51,14 +50,9 @@
5150

5251
<h1>Page Content</h1>
5352

54-
<div class="hxAlert">
55-
<div class="hxAlert__icon">
56-
<hx-icon type="info-circle"></hx-icon>
57-
</div>
58-
<div class="hxAlert__text">
59-
Copy the source of this page to use as a template for your application.
60-
</div>
61-
</div>
53+
<hx-alert type="info" static>
54+
Copy the source of this page to use as a template for your application.
55+
</hx-alert>
6256

6357
<ul>
6458
<li>
@@ -111,8 +105,7 @@ <h1>Page Content</h1>
111105
elAdapter.parentElement.removeChild(elAdapter);
112106
}
113107
</script>
114-
<!-- FIXME: point to adapter in node_modules/@webcomponents/webcomponentsjs -->
115-
<script src="vendor/scripts/custom-elements-es5-adapter.js"></script>
108+
<script src="{{ data.cdn.webComponents }}/custom-elements-es5-adapter.js"></script>
116109
</span>
117110

118111
<!-- FIXME: point to HelixUI behavior in node_modules/helix-ui -->

0 commit comments

Comments
 (0)