Skip to content

Commit 3fd70a3

Browse files
lalithkarikellilalithkarikelli
committed
style(hx-secnav): fix warnings
1 parent 9a305b4 commit 3fd70a3

File tree

1 file changed

+134
-134
lines changed

1 file changed

+134
-134
lines changed

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

Lines changed: 134 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -1,144 +1,144 @@
11
import Util from '../../_util';
22

33
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-
notify() {
18-
alert('Your notifications...');
19-
},
20-
},
21-
computed: {
22-
attrDisabled: function () {
23-
return (this.isDisabled ? 'disabled' : '');
24-
},
25-
snippet: function () {
26-
return Util.snippet(`
27-
<div id="vue-secNavDemo">
28-
<nav id="hxTopNav">
29-
<div class="hxNavGradient">
30-
<a class="hxTopNavLogo" href="#">
31-
<img src="images/helix-logo.svg" alt="Brand Logo" />
32-
</a>
33-
<div class="hxTopNavMenu hxTopNavOptionMenu">
34-
<hx-disclosure aria-controls="topnav-menu-options">
35-
<span>Select an option</span>
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+
notify () {
18+
alert('Your notifications...');
19+
},
20+
},
21+
computed: {
22+
attrDisabled: function () {
23+
return (this.isDisabled ? 'disabled' : '');
24+
},
25+
snippet: function () {
26+
return Util.snippet(`
27+
<div id="vue-secNavDemo">
28+
<nav id="hxTopNav">
29+
<div class="hxNavGradient">
30+
<a class="hxTopNavLogo" href="#">
31+
<img src="images/helix-logo.svg" alt="Brand Logo" />
32+
</a>
33+
<div class="hxTopNavMenu hxTopNavOptionMenu">
34+
<hx-disclosure aria-controls="topnav-menu-options">
35+
<span>Select an option</span>
36+
<hx-icon class="hxPrimary" type="angle-down"></hx-icon>
37+
</hx-disclosure>
38+
<hx-menu id="topnav-menu-options">
39+
<section>
40+
<hx-menuitem>Option Alpha</hx-menuitem>
41+
<hx-menuitem>Option Beta Services</hx-menuitem>
42+
<hx-menuitem>Option Gamma</hx-menuitem>
43+
</section>
44+
</hx-menu>
45+
</div>
46+
<div class="hxTopNavIconMenu">
47+
<div>
48+
<a href="#" @click="notify()">
49+
<hx-icon type="bell"></hx-icon>
50+
<p>Notifications</p>
51+
</a>
52+
53+
<a href="#" class="selected">
54+
<hx-icon type="ticketing"></hx-icon>
55+
<p>Tickets</p>
56+
</a>
57+
58+
<a href="#">
59+
<hx-icon type="support"></hx-icon>
60+
<p>Support</p>
61+
</a>
62+
63+
<a href="#" class="hxDisabled" id="billing">
64+
<hx-icon type="billing"></hx-icon>
65+
<p>Billing</p>
66+
<hx-tooltip for="billing" position="bottom-center">
67+
You do not have access to this area. Contact an account admin
68+
in your organization to request access to this item.
69+
</hx-tooltip>
70+
</a>
71+
72+
<a href="#">
73+
<hx-icon type="account"></hx-icon>
74+
<p>Account</p>
75+
</a>
76+
</div>
77+
<div class="hxSpacer"></div>
78+
<div class="hxTopNavMenu">
79+
<hx-disclosure aria-controls="demo-user-menu">
80+
<hx-icon class="hxNavUser" type="user"></hx-icon>
81+
<span>Jane User</span>
82+
<hx-icon class="hxPrimary" type="angle-down"></hx-icon>
83+
</hx-disclosure>
84+
<hx-menu id="demo-user-menu" position="bottom-end">
85+
<section>
86+
<header>
87+
<hx-menuitem class="hxMenuKey">Account Number:</hx-menuitem>
88+
<hx-menuitem class="hxMenuValue">12345678</hx-menuitem>
89+
</header>
90+
<hr class="hxDivider">
91+
<hx-menuitem class="hxMenuValue">My Profile & Settings</hx-menuitem>
92+
<hr class="hxDivider">
93+
<footer>
94+
<button class="hxBtn">Log Out</button>
95+
</footer>
96+
</section>
97+
</hx-menu>
98+
</div>
99+
</div>
100+
</div>
101+
</nav>
102+
103+
<!-- Secondary Navigation -->
104+
<nav id="hxSecNav">
105+
<a href="#" class="hxNavLink">SecNav One</a>
106+
<hx-disclosure aria-controls="secnav-option-menu">
107+
<span>SecNav Two</span>
36108
<hx-icon class="hxPrimary" type="angle-down"></hx-icon>
37109
</hx-disclosure>
38-
<hx-menu id="topnav-menu-options">
110+
<hx-menu id="secnav-option-menu">
39111
<section>
40-
<hx-menuitem>Option Alpha</hx-menuitem>
41-
<hx-menuitem>Option Beta Services</hx-menuitem>
42-
<hx-menuitem>Option Gamma</hx-menuitem>
112+
<hx-menuitem>Link item 1</hx-menuitem>
113+
<hx-menuitem>Link item 2</hx-menuitem>
114+
<hx-menuitem>Link item 3</hx-menuitem>
43115
</section>
44116
</hx-menu>
45-
</div>
46-
<div class="hxTopNavIconMenu">
47-
<div>
48-
<a href="#" @click="notify()">
49-
<hx-icon type="bell"></hx-icon>
50-
<p>Notifications</p>
51-
</a>
52-
53-
<a href="#" class="selected">
54-
<hx-icon type="ticketing"></hx-icon>
55-
<p>Tickets</p>
56-
</a>
57-
58-
<a href="#">
59-
<hx-icon type="support"></hx-icon>
60-
<p>Support</p>
61-
</a>
62-
63-
<a href="#" class="hxDisabled" id="billing">
64-
<hx-icon type="billing"></hx-icon>
65-
<p>Billing</p>
66-
<hx-tooltip for="billing" position="bottom-center">
67-
You do not have access to this area. Contact an account admin
68-
in your organization to request access to this item.
69-
</hx-tooltip>
70-
</a>
71-
72-
<a href="#">
73-
<hx-icon type="account"></hx-icon>
74-
<p>Account</p>
75-
</a>
76-
</div>
77-
<div class="hxSpacer"></div>
78-
<div class="hxTopNavMenu">
79-
<hx-disclosure aria-controls="demo-user-menu">
80-
<hx-icon class="hxNavUser" type="user"></hx-icon>
81-
<span>Jane User</span>
82-
<hx-icon class="hxPrimary" type="angle-down"></hx-icon>
83-
</hx-disclosure>
84-
<hx-menu id="demo-user-menu" position="bottom-end">
85-
<section>
86-
<header>
87-
<hx-menuitem class="hxMenuKey">Account Number:</hx-menuitem>
88-
<hx-menuitem class="hxMenuValue">12345678</hx-menuitem>
89-
</header>
90-
<hr class="hxDivider">
91-
<hx-menuitem class="hxMenuValue">My Profile & Settings</hx-menuitem>
92-
<hr class="hxDivider">
93-
<footer>
94-
<button class="hxBtn">Log Out</button>
95-
</footer>
96-
</section>
97-
</hx-menu>
98-
</div>
99-
</div>
117+
<hx-disclosure aria-controls="secnav-option-menu-two">
118+
<span>SecNav Three</span>
119+
<hx-icon class="hxPrimary" type="angle-down"></hx-icon>
120+
</hx-disclosure>
121+
<hx-menu id="secnav-option-menu-two">
122+
<section>
123+
<header>
124+
L1 Section
125+
</header>
126+
<hx-menuitem>Link item 1-1</hx-menuitem>
127+
<hx-menuitem>Link item 1-2</hx-menuitem>
128+
</section>
129+
<hr class="hxDivider">
130+
<section>
131+
<header>
132+
L2 Section
133+
</header>
134+
<hx-menuitem>Link item 2-1</hx-menuitem>
135+
<hx-menuitem>Link item 2-2</hx-menuitem>
136+
</section>
137+
</hx-menu>
138+
</nav>
100139
</div>
101-
</nav>
102-
103-
<!-- Secondary Navigation -->
104-
<nav id="hxSecNav">
105-
<a href="#" class="hxNavLink">SecNav One</a>
106-
<hx-disclosure aria-controls="secnav-option-menu">
107-
<span>SecNav Two</span>
108-
<hx-icon class="hxPrimary" type="angle-down"></hx-icon>
109-
</hx-disclosure>
110-
<hx-menu id="secnav-option-menu">
111-
<section>
112-
<hx-menuitem>Link item 1</hx-menuitem>
113-
<hx-menuitem>Link item 2</hx-menuitem>
114-
<hx-menuitem>Link item 3</hx-menuitem>
115-
</section>
116-
</hx-menu>
117-
<hx-disclosure aria-controls="secnav-option-menu-two">
118-
<span>SecNav Three</span>
119-
<hx-icon class="hxPrimary" type="angle-down"></hx-icon>
120-
</hx-disclosure>
121-
<hx-menu id="secnav-option-menu-two">
122-
<section>
123-
<header>
124-
L1 Section
125-
</header>
126-
<hx-menuitem>Link item 1-1</hx-menuitem>
127-
<hx-menuitem>Link item 1-2</hx-menuitem>
128-
</section>
129-
<hr class="hxDivider">
130-
<section>
131-
<header>
132-
L2 Section
133-
</header>
134-
<hx-menuitem>Link item 2-1</hx-menuitem>
135-
<hx-menuitem>Link item 2-2</hx-menuitem>
136-
</section>
137-
</hx-menu>
138-
</nav>
139-
</div>
140-
`);
141-
},
142-
},
143-
});
140+
`);
141+
},
142+
},
143+
});
144144
}

0 commit comments

Comments
 (0)