Skip to content

Commit 98d94c0

Browse files
author
Ryan A. Johnson
committed
docs(metadata): add metadata and element cross-linking
1 parent 7c00ec5 commit 98d94c0

File tree

26 files changed

+426
-53
lines changed

26 files changed

+426
-53
lines changed

‎docs/docs.less‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@
1313
For distributed HelixUI CSS styles, see source/styles/helix-ui.less
1414
*/
1515
@import (reference) 'vars';
16+
// import grid mixins from toolkit
17+
@import (reference) 'modules/grid';
1618

1719
.homepage {
1820
background-image: linear-gradient(0deg, @cyan-100, @gray-0 20%);
@@ -93,6 +95,19 @@ hx-status {
9395
}
9496
}
9597

98+
.metadata {
99+
background-color: @cyan-50;
100+
border: 1px solid @cyan-100;
101+
box-shadow: inset 0.5rem 0 0 0 @cyan-100;
102+
103+
hx-dt {
104+
#grid.span(3);
105+
}
106+
hx-dd {
107+
#grid.span(9);
108+
}
109+
}
110+
96111
@import 'demo/box-docs';
97112
@import 'demo/button-docs';
98113
@import 'demo/grid-docs';

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

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,23 @@
33
---
44
{% extends 'element.njk' %}
55
{% block content %}
6-
<!-- explanation goes here -->
6+
<section>
7+
<p>
8+
The custom <code>&lt;hx-checkbox&gt;</code> element renders an interactive
9+
checkbox control for use within forms.
10+
</p>
11+
12+
<hx-dl class="hxBox-md metadata">
13+
<hx-def>
14+
<hx-dt>Permitted Parents</hx-dt>
15+
<hx-dd>Any</hx-dd>
16+
</hx-def>
17+
<hx-def>
18+
<hx-dt>Permitted Children</hx-dt>
19+
<hx-dd>None</hx-dd>
20+
</hx-def>
21+
</hx-dl>
22+
</section>
723

824
<section>
925
<h2 class="hxSectionTitle" id="checkbox">Checkbox</h2>

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

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,20 @@
1010
{% block content %}
1111
<section>
1212
<p>
13-
The HTML <code>&lt;hx-dd&gt;</code> element defines a definition description.
13+
The custom <code>&lt;hx-dd&gt;</code> element defines a definition description.
1414
</p>
15+
16+
<hx-dl class="hxBox-md metadata">
17+
<hx-def>
18+
<hx-dt>Permitted Parents</hx-dt>
19+
<hx-dd>
20+
an <a href="elements/hx-def">&lt;hx-def&gt;</a> element
21+
</hx-dd>
22+
</hx-def>
23+
<hx-def>
24+
<hx-dt>Permitted Children</hx-dt>
25+
<hx-dd>Flow content</hx-dd>
26+
</hx-def>
27+
</hx-dl>
1528
</section>
1629
{% endblock %}

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

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,27 @@
1010
{% block content %}
1111
<section>
1212
<p>
13-
The HTML <code>&lt;hx-def&gt;</code> element defines a single definition within a description list.
13+
The custom <code>&lt;hx-def&gt;</code> element defines a single definition
14+
within a description list.
1415
</p>
16+
17+
<hx-dl class="hxBox-md metadata">
18+
<hx-def>
19+
<hx-dt>Permitted Parents</hx-dt>
20+
<hx-dd>
21+
an <a href="elements/hx-dl">&lt;hx-dl&gt;</a> element
22+
</hx-dd>
23+
</hx-def>
24+
<hx-def>
25+
<hx-dt>Permitted Children</hx-dt>
26+
<hx-dd>
27+
One or more of the following:
28+
<ul>
29+
<li>an <a href="elements/hx-dt">&lt;hx-dt&gt;</a> element</li>
30+
<li>an <a href="elements/hx-dd">&lt;hx-dd&gt;</a> element</li>
31+
</ul>
32+
</hx-dd>
33+
</hx-def>
34+
</hx-dl>
1535
</section>
1636
{% endblock %}

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

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,24 @@
33
---
44
{% extends 'element.njk' %}
55
{% block content %}
6+
<section>
7+
<p>
8+
The custom <code>&lt;hx-disclosure&gt;</code> element provides behavior
9+
required to toggle content visibility of a companion
10+
<a href="elements/hx-reveal">&lt;hx-reveal&gt;</a> element.
11+
</p>
612

7-
<section>
8-
<p>When activated, a disclosure toggles the visibility of a target element.</p>
9-
</section>
13+
<hx-dl class="hxBox-md metadata">
14+
<hx-def>
15+
<hx-dt>Permitted Parents</hx-dt>
16+
<hx-dd>Any</hx-dd>
17+
</hx-def>
18+
<hx-def>
19+
<hx-dt>Permitted Children</hx-dt>
20+
<hx-dd>Flow content</hx-dd>
21+
</hx-def>
22+
</hx-dl>
23+
</section>
1024

1125
<section>
1226
<div class="demo">

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

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,20 @@
1010
{% block content %}
1111
<section>
1212
<p>
13-
The HTML <code>&lt;hx-dl&gt;</code> element defines a description list (a.k.a. "Key/Value List").
13+
The custom <code>&lt;hx-dl&gt;</code> element defines a description list.
1414
</p>
15+
16+
<hx-dl class="hxBox-md metadata">
17+
<hx-def>
18+
<hx-dt>Permitted Parents</hx-dt>
19+
<hx-dd>Any</hx-dd>
20+
</hx-def>
21+
<hx-def>
22+
<hx-dt>Permitted Children</hx-dt>
23+
<hx-dd>
24+
Zero or more <a href="elements/hx-def">&lt;hx-def&gt;</a> elements
25+
</hx-dd>
26+
</hx-def>
27+
</hx-dl>
1528
</section>
1629
{% endblock %}

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

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,20 @@
1010
{% block content %}
1111
<section>
1212
<p>
13-
The HTML <code>&lt;hx-dt&gt;</code> element defines a definition term.
13+
The custom <code>&lt;hx-dt&gt;</code> element defines a description term.
1414
</p>
15+
16+
<hx-dl class="hxBox-md metadata">
17+
<hx-def>
18+
<hx-dt>Permitted Parents</hx-dt>
19+
<hx-dd>
20+
an <a href="elements/hx-def">&lt;hx-def&gt;</a> element
21+
</hx-dd>
22+
</hx-def>
23+
<hx-def>
24+
<hx-dt>Permitted Children</hx-dt>
25+
<hx-dd>Flow content</hx-dd>
26+
</hx-def>
27+
</hx-dl>
1528
</section>
1629
{% endblock %}

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

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,23 @@
33
---
44
{% extends 'element.njk' %}
55
{% block content %}
6+
<section>
7+
<p>
8+
The custom <code>&lt;hx-icon&gt;</code> element renders one of many
9+
built-in SVG icons.
10+
</p>
611

7-
<p>
8-
The <code>&lt;hx-icon&gt;</code> element delivers consistent, stylable,
9-
icons for use in Helix applications.
10-
</p>
12+
<hx-dl class="hxBox-md metadata">
13+
<hx-def>
14+
<hx-dt>Permitted Parents</hx-dt>
15+
<hx-dd>Any</hx-dd>
16+
</hx-def>
17+
<hx-def>
18+
<hx-dt>Permitted Children</hx-dt>
19+
<hx-dd>None</hx-dd>
20+
</hx-def>
21+
</hx-dl>
22+
</section>
1123

1224
<section>
1325
<p>

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

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,29 @@
77
---
88
{% extends 'element.njk' %}
99
{% block content %}
10-
<!-- TBD -->
10+
<section>
11+
<p>
12+
The custom <code>&lt;hx-menu&gt;</code> element defines a list of choices
13+
to the user, such as a list of actions or functions.
14+
</p>
15+
16+
<hx-dl class="hxBox-md metadata">
17+
<hx-def>
18+
<hx-dt>Permitted Parents</hx-dt>
19+
<hx-dd>Any</hx-dd>
20+
</hx-def>
21+
<hx-def>
22+
<hx-dt>Permitted Children</hx-dt>
23+
<hx-dd>
24+
Either of the following:
25+
<ul>
26+
<li>zero or more <a href="elements/hx-menuitem">&lt;hx-menuitem&gt;</a> elements</li>
27+
<li>zero or more <a href="elements/hx-menuitem-group">&lt;hx-menuitem-group&gt;</a> elements</li>
28+
</ul>
29+
</hx-dd>
30+
</hx-def>
31+
</hx-dl>
32+
</section>
1133
{% endblock %}
1234

1335
{% block attributes %}

‎docs/elements/hx-menuitem-group/index.html‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,21 @@
99
{% block content %}
1010
<section>
1111
<p>
12-
An <code>&lt;hx-menuitem-group&gt;</code> is an element that provides
13-
grouping of individual <a href="elements/hx-menuitem">&lt;hx-menuitem&gt;</a>
14-
elements within an <a href="elements/hx-menu">&lt;hx-menu&gt;</a>.
12+
The custom <code>&lt;hx-menuitem-group&gt;</code> element provides logical grouping
13+
of menu items within a menu.
1514
</p>
15+
16+
<hx-dl class="hxBox-md metadata">
17+
<hx-def>
18+
<hx-dt>Permitted Parents</hx-dt>
19+
<hx-dd>an <a href="elements/hx-menu">&lt;hx-menu&gt;</a> element</li></hx-dd>
20+
</hx-def>
21+
<hx-def>
22+
<hx-dt>Permitted Children</hx-dt>
23+
<hx-dd>
24+
zero or more <a href="elements/hx-menuitem">&lt;hx-menuitem&gt;</a> elements
25+
</hx-dd>
26+
</hx-def>
27+
</hx-dl>
1628
</section>
1729
{% endblock %}

0 commit comments

Comments
 (0)