Skip to content

Commit 30a9ef1

Browse files
100stacks100stacks
authored
Merge pull request #773 from lalithkarikelli/surf1766
feat(secnav): implement secondary navigation component
2 parents 2ea6bc4 + f1e421f commit 30a9ef1

File tree

9 files changed

+588
-0
lines changed

9 files changed

+588
-0
lines changed

‎docs/_data/nav.json5‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444
{ label: 'Menu', path: 'menu' },
4545
{ label: 'Modal', path: 'modal' },
4646
{ label: 'Navigation - Top Nav', path: 'topnav' },
47+
{ label: 'Navigation - Sec Nav', path: 'secnav' },
4748
{ label: 'Navigation - Left Nav', path: 'navigation' },
4849
{ label: 'Pagination', path: 'pagination' },
4950
{ label: 'Panel', path: 'panel' },

‎docs/components/secnav/index.html‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
---
2+
title: Sec Nav
3+
minver: 1.1.0
4+
also:
5+
components/secnav/test.html: Full Page Demo - Secondary Navigation
6+
---
7+
{% extends 'component.njk' %}
8+
9+
{% block page_header %}
10+
<p>
11+
{{page.title}} (i.e., secondary navigation) is a variation of navigation
12+
that is used in lieu of left navigation. It establishes a user's location
13+
within an application. Unless a firm implementation constraint requires
14+
{{page.title}}, use the left navigation component for web applications.
15+
</p>
16+
{% endblock %}
17+
18+
{% block content %}
19+
20+
<section>
21+
<header>
22+
<h2 id="secondary-navigation">Secondary Navigation</h2>
23+
<h3>
24+
See the snippet below in isolation with the
25+
<a href="components/secnav/test.html">full-page</a> demo.
26+
</h3>
27+
<br />
28+
</header>
29+
30+
<div id="vue-secNavDemo">
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 aria-controls="topnav-menu-options" role="button" aria-expanded="true">
37+
<span>Select an option</span>
38+
<hx-icon class="hxPrimary" type="angle-down"></hx-icon>
39+
</hx-disclosure>
40+
<hx-menu id="topnav-menu-options">
41+
<section>
42+
<hx-menuitem role="menuitem">Option Alpha</hx-menuitem>
43+
<hx-menuitem role="menuitem">Option Beta Services</hx-menuitem>
44+
<hx-menuitem role="menuitem">Option Gamma</hx-menuitem>
45+
</section>
46+
</hx-menu>
47+
</div>
48+
<div class="hxTopNavIconMenu">
49+
<div>
50+
<a href="#" @click="notify()">
51+
<hx-icon type="bell"></hx-icon>
52+
<p>Notifications</p>
53+
</a>
54+
55+
<a href="#" class="selected">
56+
<hx-icon type="ticketing"></hx-icon>
57+
<p>Tickets</p>
58+
</a>
59+
60+
<a href="#">
61+
<hx-icon type="support"></hx-icon>
62+
<p>Support</p>
63+
</a>
64+
65+
<a href="#" class="hxDisabled" id="billing">
66+
<hx-icon type="billing"></hx-icon>
67+
<p>Billing</p>
68+
<hx-tooltip for="billing" position="bottom-center">
69+
You do not have access to this area. Contact an account admin
70+
in your organization to request access to this item.
71+
</hx-tooltip>
72+
</a>
73+
74+
<a href="#">
75+
<hx-icon type="account"></hx-icon>
76+
<p>Account</p>
77+
</a>
78+
</div>
79+
<div class="hxSpacer"></div>
80+
<div class="hxTopNavMenu">
81+
<hx-disclosure aria-controls="demo-user-menu" role="button" aria-expanded="true">
82+
<span>Jane User</span>
83+
<hx-icon class="hxPrimary" type="angle-down"></hx-icon>
84+
</hx-disclosure>
85+
<hx-menu id="demo-user-menu" position="bottom-end">
86+
<section>
87+
<header>
88+
<hx-menuitem role="menuitem" class="hxMenuKey">Account Number:</hx-menuitem>
89+
<hx-menuitem role="menuitem" class="hxMenuValue">12345678</hx-menuitem>
90+
</header>
91+
<hr class="hxDivider">
92+
<hx-menuitem role="menuitem" class="hxMenuValue">My Profile & Settings</hx-menuitem>
93+
<hr class="hxDivider">
94+
<footer>
95+
<button class="hxBtn">Log Out</button>
96+
</footer>
97+
</section>
98+
</hx-menu>
99+
</div>
100+
</div>
101+
</nav>
102+
<!-- Secondary Navigation -->
103+
<nav id="hxSecNav">
104+
<a href="#" class="navLink"> Nav Item One</a>
105+
<div class="hxSecNavMenu">
106+
<hx-disclosure aria-controls="secNavProductDropdown" role="button" aria-expanded="false" class="disabled">
107+
<span>Nav Item Two</span>
108+
<hx-icon class="hxPrimary" type="angle-down"></hx-icon>
109+
</hx-disclosure>
110+
<hx-menu id="secNavProductDropdown">
111+
<section>
112+
<header>
113+
<hx-menuitem role="menuitem" class="hxMenuKey">L1 Section :</hx-menuitem>
114+
<hx-menuitem role="menuitem">Link 1-1</hx-menuitem>
115+
<hx-menuitem role="menuitem">Link 1-2</hx-menuitem>
116+
<hx-menuitem role="menuitem">Link 1-3</hx-menuitem>
117+
</header>
118+
</section>
119+
</hx-menu>
120+
<hx-disclosure aria-controls="secNavProductDropdownTwo" role="button" aria-expanded="false" class="disabled">
121+
<span>Nav Item Three</span>
122+
<hx-icon class="hxPrimary" type="angle-down"></hx-icon>
123+
</hx-disclosure>
124+
<hx-menu id="secNavProductDropdownTwo">
125+
<section>
126+
<header>
127+
<hx-menuitem role="menuitem" class="hxMenuKey">L1 Section :</hx-menuitem>
128+
<hx-menuitem role="menuitem" class="hxMenuValue">Link 1-1</hx-menuitem>
129+
<hx-menuitem role="menuitem" class="hxMenuValue">Link 1-2</hx-menuitem>
130+
</header>
131+
<hr class="hxDivider">
132+
<hx-menuitem role="menuitem" class="hxMenuKey">L2 Section :</hx-menuitem>
133+
<hx-menuitem role="menuitem" class="hxMenuValue">Link 2-1</hx-menuitem>
134+
<hx-menuitem role="menuitem" class="hxMenuValue">Link 2-2</hx-menuitem>
135+
</section>
136+
</hx-menu>
137+
</div>
138+
</nav>
139+
<footer>
140+
<pre><code v-text="snippet"></code></pre>
141+
</footer>
142+
</div>
143+
</section>
144+
{% endblock %}

‎docs/components/secnav/secnav-demo.js‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
import Util from '../../_util';
2+
3+
if (document.getElementById('vue-secNavDemo')) {
4+
new Vue({
5+
el: '#vue-secNavDemo',
6+
data: {
7+
isDisabled: true,
8+
notifications: 'Notifications',
9+
tickets: 'Tickets',
10+
support: 'Support',
11+
billing: 'Billing',
12+
account: 'Account',
13+
user: 'User',
14+
currentTab: 0,
15+
},
16+
methods: {
17+
selectedTag (selectedTag) {
18+
alert('selected icon');
19+
this.a.forEach(tab => {
20+
alert('selected icon');
21+
tab.isActive = (tab === selectedTag);
22+
});
23+
},
24+
},
25+
computed: {
26+
attrDisabled: function () {
27+
return (this.isDisabled ? 'disabled' : '');
28+
},
29+
snippet: function () {
30+
return Util.snippet(`
31+
<div id="vue-secNavDemo">
32+
<nav id="hxTopNav">
33+
<a class="hxTopNavLogo" href="#">
34+
<img src="images/helix-logo.svg" alt="Brand Logo" />
35+
</a>
36+
<div class="hxTopNavMenu hxTopNavOptionMenu">
37+
<hx-disclosure aria-controls="topnav-menu-options" role="button" aria-expanded="true">
38+
<span>Select an option</span>
39+
<hx-icon class="hxPrimary" type="angle-down"></hx-icon>
40+
</hx-disclosure>
41+
<hx-menu id="topnav-menu-options">
42+
<section>
43+
<hx-menuitem role="menuitem">Option Alpha</hx-menuitem>
44+
<hx-menuitem role="menuitem">Option Beta Services</hx-menuitem>
45+
<hx-menuitem role="menuitem">Option Gamma</hx-menuitem>
46+
</section>
47+
</hx-menu>
48+
</div>
49+
<div class="hxTopNavIconMenu">
50+
<div>
51+
<a href="#" @click="notify()">
52+
<hx-icon type="bell"></hx-icon>
53+
<p>Notifications</p>
54+
</a>
55+
56+
<a href="#" class="selected">
57+
<hx-icon type="ticketing"></hx-icon>
58+
<p>Tickets</p>
59+
</a>
60+
61+
<a href="#">
62+
<hx-icon type="support"></hx-icon>
63+
<p>Support</p>
64+
</a>
65+
66+
<a href="#" class="hxDisabled" id="billing">
67+
<hx-icon type="billing"></hx-icon>
68+
<p>Billing</p>
69+
<hx-tooltip for="billing" position="bottom-center">
70+
You do not have access to this area. Contact an account admin
71+
in your organization to request access to this item.
72+
</hx-tooltip>
73+
</a>
74+
75+
<a href="#">
76+
<hx-icon type="account"></hx-icon>
77+
<p>Account</p>
78+
</a>
79+
</div>
80+
<div class="hxSpacer"></div>
81+
<div class="hxTopNavMenu">
82+
<hx-disclosure aria-controls="demo-user-menu" role="button" aria-expanded="true">
83+
<span>Jane User</span>
84+
<hx-icon class="hxPrimary" type="angle-down"></hx-icon>
85+
</hx-disclosure>
86+
<hx-menu id="demo-user-menu" position="bottom-end">
87+
<section>
88+
<header>
89+
<hx-menuitem role="menuitem" class="hxMenuKey">Account Number:</hx-menuitem>
90+
<hx-menuitem role="menuitem" class="hxMenuValue">12345678</hx-menuitem>
91+
</header>
92+
<hr class="hxDivider">
93+
<hx-menuitem role="menuitem" class="hxMenuValue">My Profile & Settings</hx-menuitem>
94+
<hr class="hxDivider">
95+
<footer>
96+
<button class="hxBtn">Log Out</button>
97+
</footer>
98+
</section>
99+
</hx-menu>
100+
</div>
101+
</div>
102+
</nav>
103+
<!-- Secondary Navigation -->
104+
<nav id="hxSecNav">
105+
<a href="#" class="navLink"> Nav Item One</a>
106+
<div class="hxSecNavMenu">
107+
<hx-disclosure aria-controls="secNavProductDropdown" role="button" aria-expanded="false" class="disabled">
108+
<span>Nav Item Two</span>
109+
<hx-icon class="hxPrimary" type="angle-down"></hx-icon>
110+
</hx-disclosure>
111+
<hx-menu id="secNavProductDropdown">
112+
<section>
113+
<header>
114+
<hx-menuitem role="menuitem" class="hxMenuKey">L1 Section :</hx-menuitem>
115+
<hx-menuitem role="menuitem">Link 1-1</hx-menuitem>
116+
<hx-menuitem role="menuitem">Link 1-2</hx-menuitem>
117+
<hx-menuitem role="menuitem">Link 1-3</hx-menuitem>
118+
</header>
119+
</section>
120+
</hx-menu>
121+
<hx-disclosure aria-controls="secNavProductDropdownTwo" role="button" aria-expanded="false" class="disabled">
122+
<span>Nav Item Three</span>
123+
<hx-icon class="hxPrimary" type="angle-down"></hx-icon>
124+
</hx-disclosure>
125+
<hx-menu id="secNavProductDropdownTwo">
126+
<section>
127+
<header>
128+
<hx-menuitem role="menuitem" class="hxMenuKey">L1 Section :</hx-menuitem>
129+
<hx-menuitem role="menuitem" class="hxMenuValue">Link 1-1</hx-menuitem>
130+
<hx-menuitem role="menuitem" class="hxMenuValue">Link 1-2</hx-menuitem>
131+
</header>
132+
<hr class="hxDivider">
133+
<hx-menuitem role="menuitem" class="hxMenuKey">L2 Section :</hx-menuitem>
134+
<hx-menuitem role="menuitem" class="hxMenuValue">Link 2-1</hx-menuitem>
135+
<hx-menuitem role="menuitem" class="hxMenuValue">Link 2-2</hx-menuitem>
136+
</section>
137+
</hx-menu>
138+
</div>
139+
</nav>
140+
<footer>
141+
<pre><code v-text="snippet"></code></pre>
142+
</footer>
143+
</div>
144+
`);
145+
},
146+
},
147+
});
148+
}

0 commit comments

Comments
 (0)