Skip to content

Commit d43311d

Browse files
100stacks100stacks
authored
Merge pull request #757 from lalithkarikelli/surf2072
docs(hx-switch): Switch documentation
2 parents 7af6858 + acacd8c commit d43311d

File tree

9 files changed

+440
-157
lines changed

9 files changed

+440
-157
lines changed

‎docs/_data/nav.json5‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@
105105
{ label: '<hx-select-control>', path: 'hx-select-control' },
106106
{ label: '<hx-status>', path: 'hx-status' },
107107
{ label: '<hx-switch>', path: 'hx-switch' },
108+
{ label: '<hx-switch-control>', path: 'hx-switch-control'},
108109
{ label: '<hx-tab>', path: 'hx-tab' },
109110
{ label: '<hx-tabcontent>', path: 'hx-tabcontent' },
110111
{ label: '<hx-tablist>', path: 'hx-tablist' },

‎docs/components/switch/error-switch-demo.js‎

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

3-
if (document.getElementById('vue-errorSwitchDemo')) {
3+
if (document.getElementById('vue-switchErrorDemo')) {
44
new Vue({
5-
el: '#vue-errorSwitchDemo',
5+
el: '#vue-switchErrorDemo',
66
data: {
77
isInValid: false,
88
labelState: '',
@@ -14,12 +14,17 @@ if (document.getElementById('vue-errorSwitchDemo')) {
1414
},
1515
snippet: function () {
1616
return Util.snippet(`
17-
<hx-switch-control class="switch">
18-
<input type="checkbox" id="errorChkDemo" ${this.isInValid ? 'invalid' : '' }/>
19-
<label for="errorChkDemo">
20-
<hx-switch onlabel="on" offlabel="off" aria-labelledby="switchTest">
21-
</hx-switch>
22-
</label>
17+
<hx-switch-control>
18+
<input
19+
type="checkbox"
20+
id="switchErrorTest" ${this.isInValid ? 'invalid' : '' } />
21+
<label for="switchErrorTest">
22+
<hx-switch
23+
onlabel="on"
24+
offlabel="off"
25+
aria-labelledby="switchErrorTest">
26+
</hx-switch>
27+
</label>
2328
</hx-switch-control>
2429
`);
2530
},

‎docs/components/switch/index.html‎

Lines changed: 107 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
minver: 0.24.0
44
also:
55
elements/hx-switch: <hx-switch>
6+
elements/hx-switch-control>: <hx-switch-control>
67
---
78
{% extends 'component.njk' %}
89

@@ -15,13 +16,104 @@
1516
{% endblock %}
1617

1718
{% block content %}
19+
20+
<!-- start of demo no label example section for switch -->
21+
22+
<section>
23+
<header>
24+
<h2 id="default-switch">Default Switch (no labels)</h2>
25+
</header>
26+
27+
<div class="example" id="vue-switchNoneDemo" v-cloak>
28+
<div>
29+
<hx-switch-control>
30+
<input type="checkbox" id="switchNoneTest" />
31+
<label for="switchNoneTest">
32+
<hx-switch aria-labelledby="switchNoneTest">
33+
</hx-switch>
34+
</label>
35+
</hx-switch-control>
36+
</div>
37+
38+
<footer>
39+
<pre><code v-text="snippet"></code></pre>
40+
</footer>
41+
</div>
42+
43+
</section>
44+
45+
<!-- end of demo no label example section for switch -->
46+
47+
<!-- start of demo on/off label example section for switch -->
48+
1849
<section>
1950
<header>
20-
<h2 id="basic-checkbox">Switch</h2>
21-
<p></p>
51+
<h2 id="on-switch">Switch with <b><i>on/off</i></b> labels</h2>
2252
</header>
53+
<p class="hxSubdued hxSubBody">
54+
<hx-icon type="exclamation-triangle"></hx-icon>
55+
The label can be overridden to provide a different label (for i18n support).
56+
The character width is limited to 2-3 characters.
57+
</p>
58+
<div class="example" id="vue-switchOnOffDemo" v-cloak>
59+
<div>
60+
<hx-switch-control>
61+
<input type="checkbox" id="switchOnOffTest" />
62+
<label for="switchOnOffTest">
63+
<hx-switch onlabel="on" offlabel="off" aria-labelledby="switchOnOffTest">
64+
</hx-switch>
65+
</label>
66+
</hx-switch-control>
67+
</div>
2368

24-
<div class="example" id="vue-switchDemo" v-cloak>
69+
<footer>
70+
<pre><code v-text="snippet"></code></pre>
71+
</footer>
72+
</div>
73+
74+
</section>
75+
76+
<!-- end of demo on/off label example section for switch -->
77+
78+
<!-- start of demo yes/no label example section for switch -->
79+
80+
<section>
81+
<header>
82+
<h2 id="yes-switch">Switch with <b><i>yes/no</i></b> labels</h2>
83+
</header>
84+
<p class="hxSubdued hxSubBody">
85+
<hx-icon type="exclamation-triangle"></hx-icon>
86+
The label can be overridden to provide a different label (for i18n support).
87+
The character width is limited to 2-3 characters.
88+
</p>
89+
<div class="example" id="vue-switchYesNoDemo" v-cloak>
90+
<div class="hx2x">
91+
<hx-switch-control>
92+
<input type="checkbox" id="switchYesNoTest" />
93+
<label for="switchYesNoTest">
94+
<hx-switch onlabel="yes" offlabel="no" aria-labelledby="switchYesNoTest">
95+
</hx-switch>
96+
</label>
97+
</hx-switch-control>
98+
</div>
99+
100+
<footer>
101+
<pre><code v-text="snippet"></code></pre>
102+
</footer>
103+
</div>
104+
105+
</section>
106+
107+
<!-- end of demo yes/no label example section for switch -->
108+
109+
<!-- start of demo disabled example section for switch -->
110+
111+
<section>
112+
<header>
113+
<h2 id="disabled-switch">Disabled Switch</h2>
114+
</header>
115+
116+
<div class="example" id="vue-switchDisabledDemo" v-cloak>
25117
<header>
26118
<form class="beta-hxForm">
27119

@@ -40,10 +132,10 @@ <h2 id="basic-checkbox">Switch</h2>
40132
</header>
41133

42134
<div>
43-
<hx-switch-control class="switch">
44-
<input type="checkbox" id="switchTest" :disabled="isDisabled" />
45-
<label for="switchTest">
46-
<hx-switch onlabel="on" offlabel="off" aria-labelledby="switchTest" >
135+
<hx-switch-control>
136+
<input type="checkbox" id="switchDisabledTest" :disabled="isDisabled" />
137+
<label for="switchDisabledTest">
138+
<hx-switch onlabel="on" offlabel="off" aria-labelledby="switchDisabledTest">
47139
</hx-switch>
48140
</label>
49141
</hx-switch-control>
@@ -56,14 +148,16 @@ <h2 id="basic-checkbox">Switch</h2>
56148

57149
</section>
58150

151+
<!-- end of demo disabled example section for switch -->
152+
59153
<!-- start of demo error example section for switch -->
60154

61155
<section>
62156
<header>
63-
<h2 id="basic-checkbox">Error Switch</h2>
157+
<h2 id="error-switch">Error Switch</h2>
64158
</header>
65159

66-
<div class="example" id="vue-errorSwitchDemo" v-cloak>
160+
<div class="example" id="vue-switchErrorDemo" v-cloak>
67161
<header>
68162
<form class="beta-hxForm">
69163

@@ -82,10 +176,10 @@ <h2 id="basic-checkbox">Error Switch</h2>
82176
</header>
83177

84178
<div>
85-
<hx-switch-control class="switch">
86-
<input type="checkbox" id="errorChkDemo" :invalid="isInValid" />
87-
<label for="errorChkDemo">
88-
<hx-switch onlabel="on" offlabel="off" aria-labelledby="switchTest" >
179+
<hx-switch-control>
180+
<input type="checkbox" id="switchErrorTest" :invalid="isInValid" />
181+
<label for="switchErrorTest">
182+
<hx-switch onlabel="on" offlabel="off" aria-labelledby="switchErrorTest">
89183
</hx-switch>
90184
</label>
91185
</hx-switch-control>

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

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

3-
if (document.getElementById('vue-switchDemo')) {
4-
new Vue({
5-
el: '#vue-switchDemo',
6-
data: {
7-
isDisabled: false,
8-
option : 'ON',
9-
labelState: '',
10-
},
11-
computed: {
12-
attrDisabled: function () {
13-
return (this.isDisabled ? 'disabled' : '');
3+
(function () {
4+
if (document.getElementById('vue-switchNoneDemo')) {
5+
new Vue({
6+
el: '#vue-switchNoneDemo',
7+
computed: {
8+
attrDisabled: function () {
9+
return (this.isDisabled ? 'disabled' : '');
10+
},
11+
snippet :function (){
12+
return Util.snippet(`
13+
<hx-switch-control>
14+
<input type="checkbox" id="switchNoneTest" />
15+
<label for="switchNoneTest">
16+
<hx-switch aria-labelledby="switchNoneTest"></hx-switch>
17+
</label>
18+
</hx-switch-control>
19+
`);
20+
},
1421
},
15-
snippet: function () {
16-
return Util.snippet(`
17-
<hx-switch-control class="switch">
18-
<input type="checkbox" id="switchTest" ${this.isDisabled ? 'disabled' : ''} />
19-
<label for="switchTest">
20-
<hx-switch onlabel="on" offlabel="off" aria-labelledby="switchTest">
22+
});
23+
}
24+
if (document.getElementById('vue-switchOnOffDemo')) {
25+
new Vue({
26+
el: '#vue-switchOnOffDemo',
27+
computed: {
28+
attrDisabled: function () {
29+
return (this.isDisabled ? 'disabled' : '');
30+
},
31+
snippet :function (){
32+
return Util.snippet(`
33+
<hx-switch-control>
34+
<input type="checkbox" id="switchOnOffTest" />
35+
<label for="switchOnOffTest">
36+
<hx-switch
37+
onlabel="on"
38+
offlabel="off"
39+
aria-labelledby="switchOnOffTest">
2140
</hx-switch>
22-
</label>
23-
</hx-switch-control>
24-
`);
41+
</label>
42+
</hx-switch-control>
43+
`);
44+
},
2545
},
26-
},
27-
});
28-
}
46+
});
47+
}
48+
if (document.getElementById('vue-switchYesNoDemo')) {
49+
new Vue({
50+
el: '#vue-switchYesNoDemo',
51+
computed: {
52+
attrDisabled: function () {
53+
return (this.isDisabled ? 'disabled' : '');
54+
},
55+
snippet :function (){
56+
return Util.snippet(`
57+
<hx-switch-control>
58+
<input type="checkbox" id="switchYesNoTest" />
59+
<label for="switchYesNoTest">
60+
<hx-switch
61+
onlabel="yes"
62+
offlabel="no"
63+
aria-labelledby="switchYesNoTest">
64+
</hx-switch>
65+
</label>
66+
</hx-switch-control>
67+
`);
68+
},
69+
},
70+
});
71+
}
72+
if (document.getElementById('vue-switchDisabledDemo')) {
73+
new Vue({
74+
el: '#vue-switchDisabledDemo',
75+
data: {
76+
isDisabled: false,
77+
option : 'ON',
78+
labelState: '',
79+
},
80+
computed: {
81+
attrDisabled: function () {
82+
return (this.isDisabled ? 'disabled' : '');
83+
},
84+
snippet: function () {
85+
return Util.snippet(`
86+
<hx-switch-control>
87+
<input
88+
type="checkbox"
89+
id="switchDisabledTest" ${this.isDisabled ? 'disabled' : ''} />
90+
<label for="switchDisabledTest">
91+
<hx-switch
92+
onlabel="on"
93+
offlabel="off"
94+
aria-labelledby="switchDisabledTest">
95+
</hx-switch>
96+
</label>
97+
</hx-switch-control>
98+
`);
99+
},
100+
},
101+
});
102+
}
103+
})();

0 commit comments

Comments
 (0)