Skip to content

Commit 20deb37

Browse files
author
Ryan A. Johnson
committed
refactor(docs): Layouts + Navigation
* Split Navigation from Layouts into its own component * Refactor Layouts docs to use `<hx-alert>`
1 parent 5e3de13 commit 20deb37

File tree

3 files changed

+101
-139
lines changed

3 files changed

+101
-139
lines changed

‎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/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/navigation/index.html‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
---
2+
title: Navigation
3+
minver: 0.2.0
4+
also:
5+
components/layouts: Layouts
6+
---
7+
{% extends 'component.njk' %}
8+
{% block content %}
9+
<section>
10+
<h3 id="vertical-nav">Vertical Navigation</h3>
11+
<div class="demo nav-demo">
12+
<nav class="hxNav">
13+
<a href="#">Link 1-1</a>
14+
<a href="#">Link 1-2</a>
15+
<a href="#">Link 1-3</a>
16+
17+
<hx-disclosure aria-controls="section-1">
18+
L1 Section
19+
<hx-icon class="toggle-icon" type="angle-down"></hx-icon>
20+
</hx-disclosure>
21+
<hx-reveal id="section-1" open>
22+
<a href="#">Link 2-1</a>
23+
<a href="#">Link 2-2</a>
24+
<a href="#">Link 2-3</a>
25+
26+
<hx-disclosure aria-controls="section-1-2">
27+
L2 Section
28+
<hx-icon class="toggle-icon" type="angle-down"></hx-icon>
29+
</hx-disclosure>
30+
<hx-reveal id="section-1-2" open>
31+
<a href="#">Link 3-1</a>
32+
<a href="#">Link 3-2</a>
33+
<a href="#">Link 3-3</a>
34+
</hx-reveal>
35+
</hx-reveal>
36+
</nav>
37+
</div>
38+
{% code 'html' %}
39+
<nav class="hxNav">
40+
<a href="#">Link 1-1</a>
41+
<a href="#">Link 1-2</a>
42+
<a href="#">Link 1-3</a>
43+
44+
<hx-disclosure aria-controls="section-1">
45+
L1 Section
46+
<hx-icon class="toggle-icon" type="angle-down"></hx-icon>
47+
</hx-disclosure>
48+
<hx-reveal id="section-1" open>
49+
<a href="#">Link 2-1</a>
50+
<a href="#">Link 2-2</a>
51+
<a href="#">Link 2-3</a>
52+
53+
<hx-disclosure aria-controls="section-1-2">
54+
L2 Section
55+
<hx-icon class="toggle-icon" type="angle-down"></hx-icon>
56+
</hx-disclosure>
57+
<hx-reveal id="section-1-2" open>
58+
<a href="#">Link 3-1</a>
59+
<a href="#">Link 3-2</a>
60+
<a href="#">Link 3-3</a>
61+
</hx-reveal>
62+
</hx-reveal>
63+
</nav>
64+
{% endcode %}
65+
</section>
66+
{% endblock %}

0 commit comments

Comments
 (0)