Skip to content

Commit 2ea6bc4

Browse files
100stacks100stacks
authored
Merge pull request #780 from HelixDesignSystem/surf-2080-top-nav-fast-follow
feat(topnav): revise component styles
2 parents 7242435 + 0303246 commit 2ea6bc4

File tree

7 files changed

+257
-210
lines changed

7 files changed

+257
-210
lines changed

‎docs/components/beacon/index.html‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -105,10 +105,9 @@ <h2 id="beacon-with-inline-styles">Beacon with Inline Styles</h2>
105105
<h2 id="beacon-with-color-override">Beacon with Color Override</h2>
106106
</header>
107107
<p>
108-
This is an example implementation of <code>&lt;hx-beacon&gt;</code>
109-
With color override.
110-
Hexidecimal or named color values are valid, though hex values are
111-
best practice for consistency.
108+
This is an example implementation of <code>&lt;hx-beacon&gt;</code> with
109+
color override. Hexidecimal or named color values are valid, though hex
110+
values are best practice for consistency.
112111
</p>
113112
<p class="hxSubdued hxSubBody">
114113
<hx-icon type="exclamation-triangle"></hx-icon>

‎docs/components/topnav/index.html‎

Lines changed: 56 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -3,45 +3,55 @@
33
minver: 1.1.0
44
also:
55
components/topnav/test.html: Full Page Demo - Top Navigation
6-
elements/hx-navigation-control: <hx-navigation-control>
76
---
87
{% extends 'component.njk' %}
98

109
{% block page_header %}
1110
<p>
12-
The {{page.title}} is the top navigation menu bar across all breakpoints within the application frame of a HelixUI interface.
13-
Use the {{page.title}} to provide access to globally available features, such as account settings, billing, tickets,
14-
user management and so on.
11+
{{page.title}} is the top navigation menu bar across all breakpoints
12+
within the application frame of a HelixUI interface. Use {{page.title}} to
13+
provide access to globally available features, such as account settings,
14+
billing, tickets, user management and so on.
1515
</p>
1616
{% endblock %}
1717

1818
{% block content %}
1919

2020
<section>
2121
<header>
22-
<h2 id="icon-badge">Nav Menu</h2>
22+
<h2 id="top-navigation">Top Navigation</h2>
23+
<h3>
24+
See the snippet below in isolation with the
25+
<a href="components/topnav/test.html">full-page</a> demo.
26+
</h3>
27+
<br />
2328
</header>
2429

2530
<div id="vue-topNavDemo">
26-
<div id="hxTopNav">
27-
<a class="img-left brand-logo" href="#"> <img src="images/helix-logo.svg" alt="Logo" /></a>
28-
<div class="productMenu">
29-
<hx-disclosure id="topnav-productMenu" aria-controls="topnavProductDropdown" role="button"
30-
aria-expanded="true" class="disabled">
31-
<span>Select a Product</span>
31+
<nav id="hxTopNav">
32+
<a class="hxTopNavLogo" href="#">
33+
<img src="images/helix-logo.svg" alt="Brand Logo" />
34+
</a>
35+
<div class="hxTopNavMenu hxTopNavOptionMenu">
36+
<hx-disclosure
37+
aria-controls="topnav-menu-options"
38+
role="button"
39+
aria-expanded="true"
40+
>
41+
<span>Select an option</span>
3242
<hx-icon class="hxPrimary" type="angle-down"></hx-icon>
3343
</hx-disclosure>
34-
<hx-menu id="topnavProductDropdown">
35-
<div class="sectionHeader">
36-
<hx-menuitem role="menuitem">Product Alpha</hx-menuitem>
37-
<hx-menuitem role="menuitem">Product Beta Services</hx-menuitem>
38-
<hx-menuitem role="menuitem">Product Charlie Service Offering</hx-menuitem>
39-
</div>
44+
<hx-menu id="topnav-menu-options">
45+
<section>
46+
<hx-menuitem role="menuitem">Option Alpha</hx-menuitem>
47+
<hx-menuitem role="menuitem">Option Beta Services</hx-menuitem>
48+
<hx-menuitem role="menuitem">Option Gamma</hx-menuitem>
49+
</section>
4050
</hx-menu>
4151
</div>
42-
<div id="right-menu">
43-
<a>
44-
<a href="#" @click="selectedTag(tab)" :current-tab="currentTab">
52+
<div class="hxTopNavIconMenu">
53+
<div>
54+
<a href="#" @click="notify()">
4555
<hx-icon type="bell"></hx-icon>
4656
<p>Notifications</p>
4757
</a>
@@ -56,48 +66,51 @@ <h2 id="icon-badge">Nav Menu</h2>
5666
<p>Support</p>
5767
</a>
5868

59-
<a href="#" class="disabled" id="billing">
69+
<a href="#" class="hxDisabled" id="billing">
6070
<hx-icon type="billing"></hx-icon>
6171
<p>Billing</p>
6272
<hx-tooltip for="billing" position="bottom-center">
63-
You do not have access to this area. Contact an account admin in your organization to request access to
64-
this item.
73+
You do not have access to this area. Contact an account admin
74+
in your organization to request access to this item.
6575
</hx-tooltip>
6676
</a>
6777

6878
<a href="#">
6979
<hx-icon type="account"></hx-icon>
7080
<p>Account</p>
7181
</a>
72-
</a>
73-
<div class="straightLine"></div>
74-
<div>
75-
<hx-disclosure id="topnav-menu" aria-controls="topnavMenuId" role="button" aria-expanded="true"
76-
class="disabled">
82+
</div>
83+
<div class="hxSpacer"></div>
84+
<div class="hxTopNavMenu">
85+
<hx-disclosure
86+
aria-controls="demo-user-menu"
87+
role="button"
88+
aria-expanded="true"
89+
>
7790
<span>Jane User</span>
7891
<hx-icon class="hxPrimary" type="angle-down"></hx-icon>
7992
</hx-disclosure>
80-
<hx-menu id="topnavMenuId" position="bottom-end">
81-
<div class="sectionHeader">
82-
<hx-menuitem role="menuitem" class="menuKey">Account Number :</hx-menuitem>
83-
<hx-menuitem role="menuitem" class="menuValue">12345678</hx-menuitem>
84-
</div>
85-
<hr class="divider">
86-
<div class="sectionBody">
87-
<hx-menuitem role="menuitem" class="menuValue">My Profile & Settings</hx-menuitem>
88-
</div>
89-
<hr class="divider">
90-
<div class="sectionFooter">
91-
<button class="hxBtn">Log Out </button>
92-
</div>
93+
<hx-menu id="demo-user-menu" position="bottom-end">
94+
<section>
95+
<header>
96+
<hx-menuitem role="menuitem" class="hxMenuKey">Account Number:</hx-menuitem>
97+
<hx-menuitem role="menuitem" class="hxMenuValue">12345678</hx-menuitem>
98+
</header>
99+
<hr class="hxDivider">
100+
<hx-menuitem role="menuitem" class="hxMenuValue">My Profile & Settings</hx-menuitem>
101+
<hr class="hxDivider">
102+
<footer>
103+
<button class="hxBtn">Log Out</button>
104+
</footer>
105+
</section>
93106
</hx-menu>
94107
</div>
95108
</div>
96-
</div>
109+
</nav>
97110

98111
<footer>
99112
<pre><code v-text="snippet"></code></pre>
100113
</footer>
101114
</div>
102115
</section>
103-
{% endblock %}
116+
{% endblock %}

‎docs/components/topnav/test.html‎

Lines changed: 44 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,30 @@
55

66
{% block content %}
77
<div id="vue-topNavDemo">
8-
<div id="hxTopNav">
9-
<a class="img-left brand-logo" href="#"> <img src="images/helix-logo.svg" alt="Logo" /></a>
10-
<div class="productMenu">
11-
<hx-disclosure id="topnav-productMenu" aria-controls="topnavProductDropdown" role="button" aria-expanded="true"
12-
class="disabled">
13-
<span>Select a Product</span>
8+
<nav id="hxTopNav">
9+
<a class="hxTopNavLogo" href="#">
10+
<img src="images/helix-logo.svg" alt="Brand Logo" />
11+
</a>
12+
<div class="hxTopNavMenu hxTopNavOptionMenu">
13+
<hx-disclosure
14+
aria-controls="topnav-menu-options"
15+
role="button"
16+
aria-expanded="true"
17+
>
18+
<span>Select an option</span>
1419
<hx-icon class="hxPrimary" type="angle-down"></hx-icon>
1520
</hx-disclosure>
16-
<hx-menu id="topnavProductDropdown">
17-
<div class="sectionHeader">
18-
<hx-menuitem role="menuitem">Product Alpha</hx-menuitem>
19-
<hx-menuitem role="menuitem">Product Beta Services</hx-menuitem>
20-
<hx-menuitem role="menuitem">Product Charlie Service Offering</hx-menuitem>
21-
</div>
21+
<hx-menu id="topnav-menu-options">
22+
<section>
23+
<hx-menuitem role="menuitem">Option Alpha</hx-menuitem>
24+
<hx-menuitem role="menuitem">Option Beta Services</hx-menuitem>
25+
<hx-menuitem role="menuitem">Option Gamma</hx-menuitem>
26+
</section>
2227
</hx-menu>
2328
</div>
24-
<div id="right-menu">
29+
<div class="hxTopNavIconMenu">
2530
<div>
26-
<a href="#" @click="selectedTag(tab)" :current-tab="currentTab">
31+
<a href="#" @click="notify()">
2732
<hx-icon type="bell"></hx-icon>
2833
<p>Notifications</p>
2934
</a>
@@ -38,12 +43,12 @@
3843
<p>Support</p>
3944
</a>
4045

41-
<a href="#" class="disabled" id="billing">
46+
<a href="#" class="hxDisabled" id="billing">
4247
<hx-icon type="billing"></hx-icon>
4348
<p>Billing</p>
4449
<hx-tooltip for="billing" position="bottom-center">
45-
You do not have access to this area. Contact an account admin in your organization to request access to
46-
this item.
50+
You do not have access to this area. Contact an account admin
51+
in your organization to request access to this item.
4752
</hx-tooltip>
4853
</a>
4954

@@ -52,29 +57,32 @@
5257
<p>Account</p>
5358
</a>
5459
</div>
55-
<div class="straightLine"></div>
56-
<div>
57-
<hx-disclosure id="topnav-menu" aria-controls="topnavMenuId" role="button" aria-expanded="true"
58-
class="disabled">
60+
<div class="hxSpacer"></div>
61+
<div class="hxTopNavMenu">
62+
<hx-disclosure
63+
aria-controls="demo-user-menu"
64+
role="button"
65+
aria-expanded="true"
66+
>
5967
<span>Jane User</span>
6068
<hx-icon class="hxPrimary" type="angle-down"></hx-icon>
6169
</hx-disclosure>
62-
<hx-menu id="topnavMenuId" position="bottom-end">
63-
<div class="sectionHeader">
64-
<hx-menuitem role="menuitem" class="menuKey">Account Number :</hx-menuitem>
65-
<hx-menuitem role="menuitem" class="menuValue">12345678</hx-menuitem>
66-
</div>
67-
<hr class="divider">
68-
<div class="sectionBody">
69-
<hx-menuitem role="menuitem" class="menuValue">My Profile & Settings</hx-menuitem>
70-
</div>
71-
<hr class="divider">
72-
<div class="sectionFooter">
73-
<button class="hxBtn">Log Out </button>
74-
</div>
70+
<hx-menu id="demo-user-menu" position="bottom-end">
71+
<section>
72+
<header>
73+
<hx-menuitem role="menuitem" class="hxMenuKey">Account Number:</hx-menuitem>
74+
<hx-menuitem role="menuitem" class="hxMenuValue">12345678</hx-menuitem>
75+
</header>
76+
<hr class="hxDivider">
77+
<hx-menuitem role="menuitem" class="hxMenuValue">My Profile & Settings</hx-menuitem>
78+
<hr class="hxDivider">
79+
<footer>
80+
<button class="hxBtn">Log Out</button>
81+
</footer>
82+
</section>
7583
</hx-menu>
7684
</div>
7785
</div>
78-
</div>
86+
</nav>
7987
</div>
80-
{% endblock %}
88+
{% endblock %}

0 commit comments

Comments
 (0)