Skip to content

Commit ac423a6

Browse files
100stacks100stacks
authored
Merge pull request #749 from lalithkarikelli/surf1709
feat(hx-toggle): implement toggle component
2 parents b12b02c + ac7814a commit ac423a6

File tree

19 files changed

+765
-0
lines changed

19 files changed

+765
-0
lines changed

‎docs/_data/nav.json5‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@
6060
{ label: 'Text Input', path: 'text-input' },
6161
{ label: 'Textarea', path: 'textarea' },
6262
{ label: 'Toast', path: 'toast' },
63+
{ label: 'Toggle', path: 'toggle' },
6364
{ label: 'Tooltip', path: 'tooltip' },
6465
{ label: 'Typography', path: 'typography' },
6566
],
@@ -115,6 +116,8 @@
115116
{ label: '<hx-textarea-control>', path: 'hx-textarea-control' },
116117
{ label: '<hx-tile>', path: 'hx-tile' },
117118
{ label: '<hx-toast>', path: 'hx-toast' },
119+
{ label: '<hx-toggle>', path: 'hx-toggle' },
120+
{ label: '<hx-toggle-control>', path: 'hx-toggle-control'},
118121
{ label: '<hx-tooltip>', path: 'hx-tooltip' },
119122
],
120123
},

‎docs/components/toggle/_spec.scss‎

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

‎docs/components/toggle/index.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
title: Toggle
3+
minver: 1.0.0
4+
also:
5+
elements/hx-toggle: <hx-toggle>
6+
elements/hx-toggle-control: <hx-toggle-control>
7+
---
8+
{% extends 'component.njk' %}
9+
10+
{% block page_header %}
11+
<p>
12+
A {{page.title}} controls the presentation format (list || grid) for
13+
information on a control panel page.
14+
</p>
15+
{% endblock %}
16+
17+
{% block content %}
18+
<section>
19+
<header>
20+
<h2 id="basic-toggle">Toggle</h2>
21+
</header>
22+
<div class="example" id="vue-toggleDemo" v-cloak>
23+
<div>
24+
<hx-toggle-control>
25+
<input type="checkbox" id="toggleDemo" />
26+
<label for="toggleDemo">
27+
<hx-toggle aria-labelledby="toggleDemo" >
28+
</hx-toggle>
29+
</label>
30+
</hx-toggle-control>
31+
</div>
32+
33+
<footer>
34+
<pre><code v-text="snippet"></code></pre>
35+
</footer>
36+
</div>
37+
</section>
38+
{% endblock %}

‎docs/components/toggle/test.html‎

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

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import Util from '../../_util';
2+
3+
if (document.getElementById('vue-toggleDemo')) {
4+
new Vue({
5+
el: '#vue-toggleDemo',
6+
computed: {
7+
snippet: function () {
8+
return Util.snippet(`
9+
<hx-toggle-control>
10+
<input type="checkbox" id="toggleDemo" />
11+
<label for="toggleDemo">
12+
<hx-toggle aria-labelledby="toggleDemo">
13+
</hx-toggle>
14+
</label>
15+
</hx-toggle-control>
16+
`);
17+
},
18+
},
19+
});
20+
}

‎docs/docs.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ import './components/tabset/tabset-demo';
3838
import './components/text-input/text-input-demo';
3939
import './components/textarea/textarea-demo';
4040
import './components/toast/toast-demo';
41+
import './components/toggle/toggle-demo';
4142
import './components/tooltip/tooltip-demo';
4243

4344
(function () {

‎docs/elements/hx-toggle-control/index.html‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
---
2+
title: <hx-toggle-control>
3+
minver: 1.0.0
4+
controlElement: <input type="checkbox">
5+
also:
6+
components/toggle: Toggle
7+
elements/hx-toggle: <hx-toggle>
8+
---
9+
{% extends 'element.njk' %}
10+
{% import '_utils.njk' as utils %}
11+
{% block page_header %}
12+
<p>
13+
The <code>{{page.title}}</code> is a container that provides behavior to
14+
augment native browser validation capabilities for the custom
15+
<code>&lt;hx-toggle&gt;</code> element. It is used to build a
16+
<a href="components/toggle">Toggle</a> component.
17+
</p>
18+
{% endblock %}
19+
20+
{% block content %}
21+
<section>
22+
<dl class="metadata hxList">
23+
<div>
24+
<dt>Permitted Parents</dt>
25+
<dd>any element that accepts flow content</dd>
26+
</div>
27+
<div>
28+
<dt>Permitted Children</dt>
29+
<dd>
30+
in this order:
31+
<ol class="hxList">
32+
<li>checkbox {{utils.element('input')}} element</li>
33+
<li>{{utils.element('label')}} (wrapper) element</li>
34+
<ul>
35+
<li>{{utils.element('hx-toggle')}} (facade) element</li>
36+
</ul>
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+
<dt>
98+
toggle {Boolean [false]}
99+
<hx-pill class="hxSubBody" persist>read-only</hx-pill>
100+
</dt>
101+
<dd>
102+
<p>
103+
Returns the toggled state of the <code>&lt;hx-toggle&gt;</code> element.
104+
</p>
105+
</dd>
106+
<dt>
107+
toggleElement {?HXToggleElement}
108+
<hx-pill class="hxSubBody" persist>read-only</hx-pill>
109+
</dt>
110+
<dd>
111+
<p>
112+
Returns the first <code>&lt;hx-toggle&gt;</code> descendant
113+
or <code>null</code> if none are found.
114+
</p>
115+
</dd>
116+
117+
<dt>
118+
isDirty {Boolean [false]}
119+
<hx-pill class="hxSubBody" persist>read-only</hx-pill>
120+
</dt>
121+
<dd>
122+
True if <code>controlElement</code> has emitted a "change" or "blur" event.
123+
</dd>
124+
125+
<dt>
126+
wasChanged {Boolean [false]}
127+
<hx-pill class="hxSubBody" persist>read-only</hx-pill>
128+
</dt>
129+
<dd>
130+
True if <code>controlElement</code> has emitted a "change" event.
131+
</dd>
132+
133+
<dt>
134+
wasTouched {Boolean [false]}
135+
<hx-pill class="hxSubBody" persist>read-only</hx-pill>
136+
</dt>
137+
<dd>
138+
True if <code>controlElement</code> has emitted a "blur" event.
139+
</dd>
140+
</dl>
141+
{% endblock %}

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
---
2+
title: <hx-toggle>
3+
minver: 1.0.0
4+
also:
5+
components/toggle: Toggle
6+
elements/hx-toggle-control: <hx-toggle-control>
7+
---
8+
{% extends 'element.njk' %}
9+
{% import '_utils.njk' as utils %}
10+
{% block page_header %}
11+
<p>
12+
The <code>{{page.title}}</code> controls the presentation format
13+
for information on a control panel page. It is used to build
14+
a <a href="components/toggle">Toggle</a> component.
15+
</p>
16+
{% endblock %}
17+
18+
{% block content %}
19+
<section>
20+
<dl class="metadata hxList">
21+
<div>
22+
<dt>Permitted Grandparent</dt>
23+
<dd>{{utils.element('hx-toggle-control')}} element</dd>
24+
</div>
25+
<div>
26+
<dt>Permitted Parent</dt>
27+
<dd>{{utils.element('label')}} (wrapper) element</dd>
28+
</div>
29+
<div>
30+
<dt>Permitted Children</dt>
31+
<dd><i>none</i></dd>
32+
</div>
33+
<div>
34+
<dt>Events</dt>
35+
<dd><i>none</i></dd>
36+
</div>
37+
</dl>
38+
</section>
39+
{% endblock %}
40+
41+
{% block attributes %}
42+
{% endblock %}
43+
44+
{% block properties %}
45+
{% endblock %}

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

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import { HXFormControlElement } from '../../interfaces/HXFormControlElement/index.js';
2+
3+
/**
4+
* Defines behavior for the `<hx-toggle-control>` element, which is the
5+
* controller for the `<hx-toggle>` element.
6+
*
7+
* @extends HXFormControlElement
8+
* @hideconstructor
9+
* @since 1.0.0
10+
*/
11+
export class HXToggleControlElement extends HXFormControlElement {
12+
/** @override */
13+
static get is () {
14+
return 'hx-toggle-control';
15+
}
16+
17+
$onCreate () {
18+
this._onClick = this._onClick.bind(this);
19+
}
20+
21+
$onConnect () {
22+
this.controlElement.addEventListener('click', this._onClick);
23+
}
24+
25+
$onDisconnect () {
26+
this.controlElement.removeEventListener('click', this._onClick);
27+
}
28+
29+
/**
30+
* Fetch the first `<input type="checkbox">`
31+
* descendant (there should only be one(1)).
32+
*
33+
* @override
34+
* @readonly
35+
* @type {?HTMLInputElement}
36+
*/
37+
get controlElement () {
38+
return this.querySelector('input[type="checkbox"]');
39+
}
40+
41+
/**
42+
* Fetch the first `<hx-toggle>` deccendant (there should only be one(1)).
43+
*/
44+
get toggleElement () {
45+
return this.querySelector('hx-toggle');
46+
}
47+
48+
/**
49+
* Get the Toggle Component state.
50+
*
51+
* @default false
52+
* @type {Boolean}
53+
*/
54+
get toggled () {
55+
return this.toggleElement.toggled;
56+
}
57+
58+
/** Determines the toggle state.
59+
*
60+
* @private
61+
*/
62+
// eslint-disable-next-line no-unused-vars
63+
_onClick (evt) {
64+
let isChecked = this.controlElement.checked;
65+
66+
if (isChecked) {
67+
this.toggleElement.toggled = true;
68+
} else {
69+
this.toggleElement.toggled = false;
70+
}
71+
}
72+
}

0 commit comments

Comments
 (0)