Skip to content

Commit b38d48d

Browse files
author
Cathy Siller
committed
refactor(docs): documentation refactor for npm release
1 parent 7a1f208 commit b38d48d

File tree

19 files changed

+179
-86
lines changed

19 files changed

+179
-86
lines changed

‎docs/_data/nav.json5‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,13 @@
5151
{ label: '<hx-checkbox>', path: 'hx-checkbox' },
5252
{ label: '<hx-disclosure>', path: 'hx-disclosure' },
5353
{ label: '<hx-icon>', path: 'hx-icon' },
54+
{ label: '<hx-menu>', path: 'hx-menu ' },
55+
{ label: '<hx-menuitem>', path: 'hx-menuitem' },
56+
{ label: '<hx-menuitem-group>', path: 'hx-menuitem-group' },
57+
{ label: '<hx-panel>', path: 'hx-panel' },
58+
{ label: '<hx-panelbody>', path: 'hx-panelbody' },
59+
{ label: '<hx-panelfoot>', path: 'hx-panelfoot' },
60+
{ label: '<hx-panelhead>', path: 'hx-panelhead' },
5461
{ label: '<hx-popover>', path: 'hx-popover' },
5562
{ label: '<hx-reveal>', path: 'hx-reveal' },
5663
{ label: '<hx-status>', path: 'hx-status' },

‎docs/components/buttons/index.html‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -90,12 +90,4 @@ <h2 class="hxSectionTitle" id="button-states">Button States</h2>
9090
</tbody>
9191
</table>
9292
</section>
93-
94-
<section>
95-
<h2 class="hxSectionTitle" id="attributes">Attributes</h2>
96-
<dl>
97-
<dt>disabled</dt>
98-
<dd>Boolean attribute. When present, prevents button interaction.</dd>
99-
</dl>
100-
</section>
10193
{% endblock %}

‎docs/components/forms/index.html‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -86,12 +86,4 @@ <h2 class="hxSectionTitle" id="multi-line-text">Multi-line Text</h2>
8686
placeholder="Disabled Text Area"></textarea>
8787
{% endcode %}
8888
</section>
89-
90-
<section>
91-
<h2 class="hxSectionTitle" id="attributes">Attributes</h2>
92-
<dl>
93-
<dt>invalid (Boolean)</dt>
94-
<dd>When present, indicates that a text control is not valid for submission.</dd>
95-
</dl>
96-
</section>
9789
{% endblock %}

‎docs/components/menus/index.html‎

Lines changed: 1 addition & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
{% block content %}
66

77
<section>
8-
<h2 class="hxSectionTitle" id="menu">Demo</h2>
8+
<h2 class="hxSectionTitle" id="menu">Basic Menu</h2>
99
<div class="demo">
1010
<hx-disclosure class="hxBtn" aria-controls="menuId">
1111
<hx-icon type="cog"></hx-icon>
@@ -132,22 +132,4 @@ <h2 class="hxSectionTitle" id="split-menu">Split Menu</h2>
132132
</hx-menu>
133133
{% endcode %}
134134
</section>
135-
136-
<section>
137-
<h2 class="hxSectionTitle" id="attributes">Attributes</h2>
138-
<dl>
139-
<dt>open</dt>
140-
<dd>Opens the menu</dd>
141-
142-
<dt>position</dt>
143-
<dd>Positions the menu</dd>
144-
145-
<dt>relative-to <small>(optional)</small></dt>
146-
<dd>
147-
ID of an element to relatively position the menu. If not
148-
set, the menu will be positioned relative to the element with the
149-
<code>aria-controls</code> attribute matching the menu id.
150-
</dd>
151-
</dl>
152-
</section>
153135
{% endblock %}

‎docs/components/panels/index.html‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,28 @@
44
{% extends 'component.njk' %}
55
{% block content %}
66
<section>
7-
<h2 class="hxSectionTitle" id="summary">Summary</h2>
87
<p>
98
A panel is a utility for sectioning content vertically into a head,
109
body, and foot.
1110
</p>
1211
<ul>
13-
<li>The head is fixed to the top of the panel.</li>
14-
<li>The foot is fixed to the bottom of the panel.</li>
15-
<li>The body fills the space in the middle.</li>
12+
<li>
13+
The head is fixed to the top of the panel.
14+
<ul>
15+
<li><em>The head is optional.</em></li>
16+
</ul>
17+
</li>
18+
<li>The body fills the space between the head and foot.</li>
19+
<li>
20+
The foot is fixed to the bottom of the panel.
21+
<ul>
22+
<li><em>The foot is optional.</em></li>
23+
</ul>
24+
</li>
1625
</ul>
1726
</section>
1827
<section id="vue-panelDemo">
19-
<h2 class="hxSectionTitle" id="demo">Demo</h2>
28+
<h2 class="hxSectionTitle" id="basic-panel">Basic Panel</h2>
2029
<div class="hxRow">
2130
<div class="hxCol hxSpan-12-xs hxSpan-8-md">
2231
<div class="demo panel-demo">

‎docs/components/tables/index.html‎

Lines changed: 23 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,17 @@ <h2 class="hxSectionTitle" id="default-table">Default Table</h2>
1010
<em>a.k.a. "Unbound Table"</em>
1111
</p>
1212

13+
<dl>
14+
<dt><code>.hxTable</code></dt>
15+
<dd>
16+
Use on a table element to apply Helix styles.
17+
<em>This class is required to apply any modified table styling.</em>
18+
</dd>
19+
20+
<dt><code>.hxTable__control-col</code></dt>
21+
<dd>Use on a table cell to propery set its width for use with a checkbox, radio, or action icon.</dd>
22+
</dl>
23+
1324
<div class="demo">
1425
<table class="hxTable">
1526
<caption>Most popular Twitter accounts</caption>
@@ -136,7 +147,10 @@ <h2 class="hxSectionTitle" id="default-table">Default Table</h2>
136147
<section>
137148
<h2 class="hxSectionTitle" id="condensed-table">Condensed Table</h2>
138149

139-
<!-- explanation goes here -->
150+
<dl>
151+
<dt><code>.hxTable--condensed</code></dt>
152+
<dd>Use along with the <code>.hxTable</code> class to apply Helix styles for condensed data.</dd>
153+
</dl>
140154

141155
<div class="demo">
142156
<table class="hxTable hxTable--condensed">
@@ -228,7 +242,10 @@ <h2 class="hxSectionTitle" id="condensed-table">Condensed Table</h2>
228242
<section>
229243
<h2 class="hxSectionTitle" id="bound-table">Bound Table</h2>
230244

231-
<!-- explanation goes here -->
245+
<dl>
246+
<dt><code>.hxTable--bordered</code></dt>
247+
<dd>Use along with the <code>.hxTable</code> class to apply Helix styles for bound table data.</dd>
248+
</dl>
232249

233250
<div class="demo">
234251
<table class="hxTable hxTable--bordered">
@@ -320,7 +337,10 @@ <h2 class="hxSectionTitle" id="bound-table">Bound Table</h2>
320337
<section>
321338
<h2 class="hxSectionTitle" id="hoverable-table">Hoverable Table</h2>
322339

323-
<!-- explanation goes here -->
340+
<dl>
341+
<dt><code>.hxTable--hover</code></dt>
342+
<dd>Use along with the <code>.hxTable</code> class to apply Helix styles when hovering over a table row.</dd>
343+
</dl>
324344

325345
<div class="demo">
326346
<table class="hxTable hxTable--hover">
@@ -408,31 +428,4 @@ <h2 class="hxSectionTitle" id="hoverable-table">Hoverable Table</h2>
408428
</table>
409429
{% endcode %}
410430
</section>
411-
412-
<section>
413-
<h2 class="hxSectionTitle" id="css-classes">CSS Classes</h2>
414-
415-
<dl>
416-
<dt><code>.hxTable</code></dt>
417-
<dd>
418-
Use on a table element to apply Helix styles.
419-
<em>This class is required to apply any modified table styling.</em>
420-
</dd>
421-
422-
<dt><code>.hxTable--bordered</code></dt>
423-
<dd>Use along with the <code>.hxTable</code> class to apply Helix styles for bound table data.</dd>
424-
425-
<dt><code>.hxTable--condensed</code></dt>
426-
<dd>Use along with the <code>.hxTable</code> class to apply Helix styles for condensed data.</dd>
427-
428-
<dt><code>.hxTable--hover</code></dt>
429-
<dd>Use along with the <code>.hxTable</code> class to apply Helix styles when hovering over a table row.</dd>
430-
431-
<dt><code>.hxTable__control-col</code></dt>
432-
<dd>Use on a table cell to propery set its width for use with a checkbox, radio, or action icon.</dd>
433-
434-
<dt><code>.selected</code></dt>
435-
<dd>Use on a table row to indicate selection.</dd>
436-
</dl>
437-
</section>
438431
{% endblock %}

‎docs/components/tabs/index.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
{% block content %}
66

77
<section>
8-
<h2 class="hxSectionTitle" id="tabset">Tabset</h2>
98
<div class="demo tabs-demo">
109
<hx-tabset>
1110
<hx-tablist>

‎docs/elements/hx-checkbox/index.html‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -99,16 +99,14 @@ <h2 class="hxSectionTitle" id="checkbox-states">Checkbox States</h2>
9999
</section>
100100

101101
<section>
102-
<h2 class="hxSectionTitle" id="html-attributes">HTML Attributes</h2>
102+
<h2 class="hxSectionTitle" id="attributes">Attributes</h2>
103103
<dl>
104104
<dt>checked</dt>
105105
<dd>Checks the checkbox</dd>
106-
</dl>
107-
<dl>
106+
108107
<dt>invalid</dt>
109108
<dd>Invalidates the checkbox</dd>
110-
</dl>
111-
<dl>
109+
112110
<dt>disabled</dt>
113111
<dd>Disables the checkbox</dd>
114112
</dl>
@@ -119,12 +117,10 @@ <h2 class="hxSectionTitle" id="properties">Properties</h2>
119117
<dl>
120118
<dt>checked <small>(Boolean [false])</small></dt>
121119
<dd>Determines if checkbox is checked.</dd>
122-
</dl>
123-
<dl>
120+
124121
<dt>disabled <small>(Boolean [false])</small></dt>
125122
<dd>Determines if checkbox is disabled.</dd>
126-
</dl>
127-
<dl>
123+
128124
<dt>indeterminate <small>(Boolean [false])</small></dt>
129125
<dd>Determines if checkbox is indeterminate.</dd>
130126
</dl>

‎docs/elements/hx-disclosure/index.html‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,10 @@
55
{% block content %}
66

77
<section>
8-
<h2 class="hxSectionTitle" id="summary">Summary</h2>
98
<p>When activated, a disclosure toggles the visibility of a target element.</p>
109
</section>
1110

1211
<section>
13-
<h2 class="hxSectionTitle" id="demo">Demo</h2>
1412
<div class="demo">
1513
<hx-disclosure class="hxBtn" aria-controls="demo-disclosure">
1614
Click me to show content

‎docs/elements/hx-icon/index.html‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
</p>
1111

1212
<section>
13-
<h2 class="hxSectionTitle" id="syntax">Example</h2>
1413
<p>
1514
Set the <code>type</code> attribute to any value <a href="#icon-types">listed below</a>.
1615
</p>
@@ -94,4 +93,12 @@ <h2 class="hxSectionTitle" id="icon-types">Icon Types</h2>
9493
{% endfor %}
9594
</div>
9695
</section>
96+
97+
<section>
98+
<h2 class="hxSectionTitle" id="attributes">Attributes</h2>
99+
<dl>
100+
<dt>type</dt>
101+
<dd>Changes the displayed icon</dd>
102+
</dl>
103+
</section>
97104
{% endblock %}

0 commit comments

Comments
 (0)