Skip to content

Commit 51fbd02

Browse files
100stacks100stacks
authored
Merge pull request #707 from lalithkarikelli/surf506
feat(hx-switch): implement switch component
2 parents f807c5a + 04716b2 commit 51fbd02

File tree

19 files changed

+815
-0
lines changed

19 files changed

+815
-0
lines changed

‎docs/_data/nav.json5‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@
5454
{ label: 'Search', path: 'search' },
5555
{ label: 'Selector Strip', path: 'selector-strip' },
5656
{ label: 'Stepper', path: 'stepper' },
57+
{ label: 'Switch', path: 'switch' },
5758
{ label: 'Table', path: 'table' },
5859
{ label: 'Tabset', path: 'tabset' },
5960
{ label: 'Text Input', path: 'text-input' },
@@ -103,6 +104,7 @@
103104
{ label: '<hx-select>', path: 'hx-select' },
104105
{ label: '<hx-select-control>', path: 'hx-select-control' },
105106
{ label: '<hx-status>', path: 'hx-status' },
107+
{ label: '<hx-switch>', path: 'hx-switch' },
106108
{ label: '<hx-tab>', path: 'hx-tab' },
107109
{ label: '<hx-tabcontent>', path: 'hx-tabcontent' },
108110
{ label: '<hx-tablist>', path: 'hx-tablist' },

‎docs/components/switch/_spec.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@import "components/switch/config";
2+
3+
// TBD

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import Util from '../../_util';
2+
3+
if (document.getElementById('vue-errorSwitchDemo')) {
4+
new Vue({
5+
el: '#vue-errorSwitchDemo',
6+
data: {
7+
isInValid: false,
8+
labelState: '',
9+
option : 'ON',
10+
},
11+
computed: {
12+
attrInValid: function () {
13+
return (this.isInValid ? 'invalid' : '');
14+
},
15+
snippet: function () {
16+
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>
23+
</hx-switch-control>
24+
`);
25+
},
26+
},
27+
});
28+
}

‎docs/components/switch/index.html‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
---
2+
title: Switch
3+
minver: 0.24.0
4+
also:
5+
elements/hx-switch: <hx-switch>
6+
---
7+
{% extends 'component.njk' %}
8+
9+
{% block page_header %}
10+
<p>
11+
A switch is used when a user needs to make a binary decision, such as,
12+
turning a setting on or off, or setting a preference enabling or disabling
13+
a device or system.
14+
</p>
15+
{% endblock %}
16+
17+
{% block content %}
18+
<section>
19+
<header>
20+
<h2 id="basic-checkbox">Switch</h2>
21+
<p></p>
22+
</header>
23+
24+
<div class="example" id="vue-switchDemo" v-cloak>
25+
<header>
26+
<form class="beta-hxForm">
27+
28+
<fieldset>
29+
<legend class="beta-hxFieldName">Options</legend>
30+
31+
<hx-checkbox-control>
32+
<input id="chkIsDisabled" type="checkbox" v-model="isDisabled" />
33+
<label for="chkIsDisabled">
34+
<hx-checkbox></hx-checkbox>
35+
Disabled
36+
</label>
37+
</hx-checkbox-control>
38+
</fieldset>
39+
</form>
40+
</header>
41+
42+
<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" >
47+
</hx-switch>
48+
</label>
49+
</hx-switch-control>
50+
</div>
51+
52+
<footer>
53+
<pre><code v-text="snippet"></code></pre>
54+
</footer>
55+
</div>
56+
57+
</section>
58+
59+
<!-- start of demo error example section for switch -->
60+
61+
<section>
62+
<header>
63+
<h2 id="basic-checkbox">Error Switch</h2>
64+
</header>
65+
66+
<div class="example" id="vue-errorSwitchDemo" v-cloak>
67+
<header>
68+
<form class="beta-hxForm">
69+
70+
<fieldset>
71+
<legend class="beta-hxFieldName">Options</legend>
72+
73+
<hx-checkbox-control>
74+
<input id="chkIsError" type="checkbox" v-model="isInValid" />
75+
<label for="chkIsError">
76+
<hx-checkbox></hx-checkbox>
77+
Error
78+
</label>
79+
</hx-checkbox-control>
80+
</fieldset>
81+
</form>
82+
</header>
83+
84+
<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" >
89+
</hx-switch>
90+
</label>
91+
</hx-switch-control>
92+
</div>
93+
94+
<footer>
95+
<pre><code v-text="snippet"></code></pre>
96+
</footer>
97+
</div>
98+
99+
</section>
100+
<!-- end of demo error example section for switch -->
101+
{% endblock %}

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import Util from '../../_util';
2+
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' : '');
14+
},
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">
21+
</hx-switch>
22+
</label>
23+
</hx-switch-control>
24+
`);
25+
},
26+
},
27+
});
28+
}

‎docs/components/switch/test.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
title: Testing - Switch
3+
crumbs:
4+
- path: components/switch
5+
label: Switch
6+
---
7+
{% extends 'test.njk' %}
8+
9+
{% block content %}
10+
{# TODO: Add <hx-switch> visual/interactive tests #}
11+
{% endblock %}

‎docs/docs.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ import './components/radio/radio-demo';
3131
import './components/reveal/reveal-demo';
3232
import './components/search/search-demo';
3333
import './components/stepper/stepper-demo';
34+
import './components/switch/switch-demo';
35+
import './components/switch/error-switch-demo';
3436
import './components/table/table-demo';
3537
import './components/tabset/tabset-demo';
3638
import './components/text-input/text-input-demo';

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

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
---
2+
title: <hx-switch>
3+
minver: 0.24.0
4+
controlElement: <input type="checkbox">
5+
also:
6+
components/switch: Switch
7+
elements/hx-switch: <hx-switch>
8+
---
9+
{% extends 'element.njk' %}
10+
{% import '_utils.njk' as utils %}
11+
{% block page_header %}
12+
<p>
13+
The <code>{{page.title}}</code> block element is a container that provides
14+
behavior to augment native browser validation capabilities. It is used to
15+
build a <a href="components/switch">Switch</a> component.
16+
</p>
17+
{% endblock %}
18+
19+
{% block content %}
20+
<section>
21+
<dl class="metadata hxList">
22+
<div>
23+
<dt>Permitted Parents</dt>
24+
<dd>any element that accepts flow content</dd>
25+
</div>
26+
<div>
27+
<dt>Permitted Children</dt>
28+
<dd>
29+
in this order:
30+
<ol class="hxList">
31+
<li>checkbox {{utils.element('input')}} element</li>
32+
<li>{{utils.element('label')}} element</li>
33+
<li>
34+
{{utils.element('p')}} element for control-level help text
35+
<small class="hxSubdued">(optional)</small>
36+
</li>
37+
</ol>
38+
</dd>
39+
</div>
40+
<div>
41+
<dt>Events</dt>
42+
<dd><i>none</i></dd>
43+
</div>
44+
</dl>
45+
</section>
46+
{% endblock %}
47+
48+
{% block attributes %}
49+
<dl class="memberList">
50+
<dt>
51+
hx-changed {Boolean}
52+
<hx-pill class="hxSubBody" persist>read-only</hx-pill>
53+
</dt>
54+
<dd>
55+
<p>
56+
Present if descendant <code>{{page.controlElement}}</code> element
57+
has emitted a "change" event.
58+
</p>
59+
</dd>
60+
61+
<dt>
62+
hx-dirty {Boolean}
63+
<hx-pill class="hxSubBody" persist>read-only</hx-pill>
64+
</dt>
65+
<dd>
66+
<p>
67+
Present if descendant <code>{{page.controlElement}}</code> element
68+
has emitted a "change" or "blur" event.
69+
</p>
70+
</dd>
71+
72+
<dt>
73+
hx-touched {Boolean}
74+
<hx-pill class="hxSubBody" persist>read-only</hx-pill>
75+
</dt>
76+
<dd>
77+
<p>
78+
Present if descendant <code>{{page.controlElement}}</code> element
79+
has emitted a "blur" event.
80+
</p>
81+
</dd>
82+
</dl>
83+
{% endblock %}
84+
85+
{% block properties %}
86+
<dl class="memberList">
87+
<dt>
88+
controlElement {?HTMLInputElement}
89+
<hx-pill class="hxSubBody" persist>read-only</hx-pill>
90+
</dt>
91+
<dd>
92+
<p>
93+
Returns the first <code>{{page.controlElement}}</code> descendant
94+
or <code>null</code> if none are found.
95+
</p>
96+
</dd>
97+
98+
<dt>
99+
isDirty {Boolean [false]}
100+
<hx-pill class="hxSubBody" persist>read-only</hx-pill>
101+
</dt>
102+
<dd>
103+
True if <code>controlElement</code> has emitted a "change" or "blur" event.
104+
</dd>
105+
106+
<dt>
107+
wasChanged {Boolean [false]}
108+
<hx-pill class="hxSubBody" persist>read-only</hx-pill>
109+
</dt>
110+
<dd>
111+
True if <code>controlElement</code> has emitted a "change" event.
112+
</dd>
113+
114+
<dt>
115+
wasTouched {Boolean [false]}
116+
<hx-pill class="hxSubBody" persist>read-only</hx-pill>
117+
</dt>
118+
<dd>
119+
True if <code>controlElement</code> has emitted a "blur" event.
120+
</dd>
121+
</dl>
122+
{% endblock %}

‎src/elements/hx-switch-control/index.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { HXFormControlElement } from '../../interfaces/HXFormControlElement/index.js';
2+
3+
/**
4+
* Defines behavior for the `<hx-switch-control>` element which is the
5+
* controller for the `<hx-switch>` element.
6+
*
7+
* @extends HXFormControlElement
8+
* @hideconstructor
9+
* @since 0.24.0
10+
*/
11+
export class HXSwitchControlElement extends HXFormControlElement {
12+
/** @override */
13+
static get is () {
14+
return 'hx-switch-control';
15+
}
16+
17+
/**
18+
* Fetch the first `<input type="checkbox">` descendant.
19+
*
20+
* @override
21+
* @readonly
22+
* @type {?HTMLInputElement}
23+
*/
24+
get controlElement () {
25+
return this.querySelector('input[type="checkbox"]');
26+
}
27+
}

‎src/elements/hx-switch-control/index.spec.js‎

Whitespace-only changes.

0 commit comments

Comments
 (0)