Skip to content

Commit d4aaf73

Browse files
djthorpedjthorpe
committed
Updated form
1 parent 986af02 commit d4aaf73

File tree

8 files changed

+280
-43
lines changed

8 files changed

+280
-43
lines changed

‎html/index.html‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -15,23 +15,15 @@
1515
<div class="container m-1">
1616
<h4>Text</h4>
1717
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
18-
et dolore
19-
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
20-
ea
21-
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
22-
fugiat
23-
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
24-
mollit
25-
anim id est laborum.</p>
26-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
27-
et dolore
28-
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
29-
ea
30-
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
31-
fugiat
32-
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
33-
mollit
34-
anim id est laborum.</p>
18+
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
19+
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
20+
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
21+
culpa qui officia deserunt
22+
mollit anim id est laborum.</p>
23+
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
24+
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
25+
culpa qui officia deserunt
26+
mollit anim id est laborum.</p>
3527
</div>
3628

3729
<div class="container m-1">
@@ -85,8 +77,17 @@ <h4>Nav (Vertical)</h4>
8577
</div>
8678

8779
<div class="container m-1">
88-
<h4>Input</h4>
89-
<wc-input name="input" value="Placeholder">An input value</wc-input>
80+
<h4>Form Elements</h4>
81+
<wc-form action="/">
82+
<wc-input name="input-a" placeholder="Placeholder">First input value</wc-input>
83+
<wc-input name="input-b" placeholder="Placeholder">Second input value</wc-input>
84+
<wc-checkbox-group name="checkbox-c" radio>
85+
<wc-checkbox value="1">Checkbox 1</wc-checkbox>
86+
<wc-checkbox value="2" checked>Checkbox 2</wc-checkbox>
87+
<wc-checkbox value="3" disabled>Checkbox 3</wc-checkbox>
88+
</wc-checkbox-group>
89+
<wc-button>Submit</wc-button>
90+
</wc-form>
9091
</div>
9192

9293
</wc-col>

‎js/wc/button/wc-button.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,10 +63,21 @@ window.customElements.define('wc-button', class extends LitElement {
6363

6464
render() {
6565
return html`
66-
<button @click=${this.onClick} class="${this.disabled ? 'disabled' : ''}"><slot></slot></button>
66+
<button @click=${this.onClick} class="${this.disabled ? 'disabled' : ''}" type="${this.hasParent('WC-FORM') ? 'submit' : ''}"><slot></slot></button>
6767
`;
6868
}
6969

70+
hasParent(tagName) {
71+
let parentNode = this.parentElement;
72+
while (parentNode) {
73+
if (parentNode.tagName === tagName) {
74+
return true;
75+
}
76+
parentNode = parentNode.parentElement;
77+
}
78+
return false;
79+
}
80+
7081
onClick() {
7182
this.dispatchEvent(new CustomEvent(
7283
Event.EVENT_CLICK, { detail: this.name || this.textContent },

‎js/wc/form/wc-checkbox-group.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { LitElement, html, css } from 'lit';
2+
3+
/**
4+
* A group of checkboxes
5+
*
6+
* @slot - This element has a slot for wc-checkbox elements
7+
*/
8+
window.customElements.define('wc-checkbox-group', class extends LitElement {
9+
constructor() {
10+
// Always call super() first
11+
super();
12+
13+
// Initialize properties
14+
this.radio = false;
15+
}
16+
17+
static get properties() {
18+
return {
19+
/**
20+
* The name for the group of checkboxes
21+
* @type {string}
22+
*/
23+
name: { type: String },
24+
25+
/**
26+
* Whether the group is "select one" (radio)
27+
* @type {boolean}
28+
*/
29+
radio: { type: Boolean },
30+
};
31+
}
32+
33+
// eslint-disable-next-line class-methods-use-this
34+
render() {
35+
return html`
36+
<slot></slot>
37+
`;
38+
}
39+
});

‎js/wc/form/wc-checkbox.js‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import { LitElement, html, css } from 'lit';
2+
3+
/**
4+
* A checkbox to be grouped within a wc-checkbox-group
5+
*
6+
* @slot - This element has a slot for text which is the label for the checkbox
7+
*/
8+
window.customElements.define('wc-checkbox', class extends LitElement {
9+
static get properties() {
10+
return {
11+
/**
12+
* The name for the checkbox
13+
* @type {string}
14+
*/
15+
name: { type: String },
16+
17+
/**
18+
* The type for the checkbox, if true then use radio
19+
* @type {boolean}
20+
*/
21+
radio: { type: Boolean },
22+
23+
/**
24+
* The value for the checkbox
25+
* @type {string}
26+
*/
27+
value: { type: String },
28+
29+
/**
30+
* Whether the checkbox is checked
31+
* @type {string}
32+
*/
33+
checked: { type: Boolean },
34+
35+
/**
36+
* Whether the checkbox is disabled
37+
* @type {string}
38+
*/
39+
disabled: { type: Boolean },
40+
};
41+
}
42+
43+
static get styles() {
44+
return css`
45+
:host {
46+
display: block;
47+
width: 100%;
48+
margin: var(--form-input-margin);
49+
}
50+
:host input {
51+
cursor: pointer;
52+
background-color: var(--form-input-background-color);
53+
color: var(--form-input-color);
54+
padding: var(--form-input-padding);
55+
font-size: var(--form-input-font-size);
56+
font-weight: var(--form-input-font-weight);
57+
line-height: var(--form-input-line-height);
58+
border: var(--form-input-border);
59+
}
60+
:host input:focus {
61+
background-color: var(--form-input-background-color-focus);
62+
color: var(--form-input-color-focus);
63+
border: var(--form-input-border-focus);
64+
outline: 0;
65+
}
66+
:host label {
67+
background-color: var(--form-label-background-color);
68+
color: var(--form-label-color);
69+
padding: var(--form-label-padding);
70+
font-size: var(--form-label-font-size);
71+
font-weight: var(--form-label-font-weight);
72+
line-height: var(--form-label-line-height);
73+
border: var(--form-label-border);
74+
}
75+
`;
76+
}
77+
78+
// eslint-disable-next-line class-methods-use-this
79+
render() {
80+
return html`
81+
<div class="input">
82+
<input type="${this.radio ? 'radio' : 'checkbox'}" name="${this.name}" id="checkbox" value="${this.value || this.textContent}" .checked=${this.checked} .disabled=${this.disabled}>
83+
<label for="checkbox"><slot></slot></label>
84+
</div>
85+
`;
86+
}
87+
88+
connectedCallback() {
89+
super.connectedCallback();
90+
// Type propogates from the wc-checkbox-group
91+
if (!this.radio) {
92+
this.radio = this.parentElement.getAttribute('radio');
93+
}
94+
95+
// Name propogates from the wc-checkbox-group
96+
if (!this.name) {
97+
this.name = this.parentElement.getAttribute('name');
98+
}
99+
}
100+
});

‎js/wc/form/wc-form.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { LitElement, html } from 'lit';
2+
3+
/**
4+
* A form element for submitting data
5+
*
6+
* @slot - This element has a slot for input elements
7+
*/
8+
window.customElements.define('wc-form', class extends LitElement {
9+
static get properties() {
10+
return {
11+
/**
12+
* The method for submitting the form
13+
* @type {string}
14+
*/
15+
method: { type: String },
16+
17+
/**
18+
* The action when submitting the form
19+
* @type {string}
20+
*/
21+
action: { type: String },
22+
};
23+
}
24+
25+
// eslint-disable-next-line class-methods-use-this
26+
render() {
27+
return html`
28+
<form method="${this.method || 'POST'}" action="${this.action || '#'}"><slot></slot></form>
29+
`;
30+
}
31+
});

‎js/wc/form/wc-input.js‎

Lines changed: 53 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -10,39 +10,69 @@ window.customElements.define('wc-input', class extends LitElement {
1010
static get properties() {
1111
return {
1212
/**
13-
* The background color
13+
* The value for the input
1414
* @type {string}
1515
*/
1616
value: { type: String },
17+
18+
/**
19+
* The placeholder text for the input
20+
* @type {string}
21+
*/
22+
placeholder: { type: String },
23+
24+
/**
25+
* Whether the input is required to be filled
26+
* for the form to submit
27+
* @type {boolean}
28+
*/
29+
required: { type: Boolean },
30+
31+
/**
32+
* The pattern used to validate the value on submission
33+
* @type {string}
34+
*/
35+
pattern: { type: String },
36+
37+
/**
38+
* Whether auto-complete is enabled
39+
* @type {boolean}
40+
*/
41+
autocomplete: { type: Boolean },
42+
1743
};
1844
}
1945

2046
static get styles() {
2147
return css`
2248
:host {
23-
display: inline-block;
24-
background-color: var(--badge-background-color);
25-
color: var(--badge-color);
26-
padding: var(--badge-padding-y) var(--badge-padding-x);
27-
font-size: var(--badge-font-size);
28-
font-weight: var(--badge-font-weight);
29-
border-radius: var(--badge-border-radius);
30-
line-height: 1;
31-
text-align: center;
32-
white-space: nowrap;
33-
vertical-align: baseline;
34-
}
35-
.transform-capitalize {
36-
text-transform: capitalize;
37-
}
38-
.transform-uppercase {
39-
text-transform: uppercase;
49+
display: block;
50+
width: 100%;
51+
margin: var(--form-input-margin);
4052
}
41-
.transform-lowercase {
42-
text-transform: lowercase;
53+
:host input {
54+
background-color: var(--form-input-background-color);
55+
color: var(--form-input-color);
56+
padding: var(--form-input-padding);
57+
font-size: var(--form-input-font-size);
58+
font-weight: var(--form-input-font-weight);
59+
line-height: var(--form-input-line-height);
60+
border: var(--form-input-border);
4361
}
44-
.transform-none {
45-
text-transform: none;
62+
:host input:focus {
63+
background-color: var(--form-input-background-color-focus);
64+
color: var(--form-input-color-focus);
65+
border: var(--form-input-border-focus);
66+
outline: 0;
67+
}
68+
:host label {
69+
background-color: var(--form-label-background-color);
70+
color: var(--form-label-color);
71+
padding: var(--form-label-padding);
72+
font-size: var(--form-label-font-size);
73+
font-weight: var(--form-label-font-weight);
74+
line-height: var(--form-label-line-height);
75+
border: var(--form-label-border);
4676
}
4777
`;
4878
}
@@ -52,7 +82,7 @@ window.customElements.define('wc-input', class extends LitElement {
5282
return html`
5383
<div class="input">
5484
<label for="input"><slot></slot></label>
55-
<input type="text" name="input" id="input" value="${this.value}">
85+
<input type="text" name="input" id="input" value="${this.value}" required="${this.required}" placeholder="${this.placeholder}" autocomplete="${this.autocomplete}" pattern="${this.pattern}">
5686
</div>
5787
`;
5888
}

‎js/wc/index.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,7 @@ import './grid/wc-col';
1414
import './nav/wc-nav';
1515
import './nav/wc-navbar';
1616
import './nav/wc-nav-item';
17+
import './form/wc-form';
1718
import './form/wc-input';
19+
import './form/wc-checkbox';
20+
import './form/wc-checkbox-group';

‎js/wc/vars.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,5 +113,27 @@
113113
--navitem-font-weight-hover: var(--font-weight-bold);
114114
--navitem-font-weight-disabled: var(--font-weight-light);
115115
--navitem-padding: calc(var(--spacer) * 0.5) var(--spacer);
116+
117+
/* forms */
118+
--form-input-background-color: none;
119+
--form-input-color: var(--dark-color);
120+
--form-input-margin: calc(var(--spacer) * 0.5) 0;
121+
--form-input-padding: calc(var(--spacer) * 0.5) calc(var(--spacer) * 0.5);
122+
--form-input-font-size: var(--font-size-normal);
123+
--form-input-font-weight: var(--font-weight-normal);
124+
--form-input-line-height: 1;
125+
--form-input-border: 0.5px solid var(--control-color);
126+
127+
--form-input-background-color-focus: none;
128+
--form-input-color-focus: var(--dark-color);
129+
--form-input-border-focus: 0.5px solid var(--dark-color);
130+
131+
--form-label-background-color: none;
132+
--form-label-color: var(--dark-color);
133+
--form-label-padding: calc(var(--spacer) * 0.5) calc(var(--spacer) * 0.5);
134+
--form-label-font-size: var(--font-size-small);
135+
--form-label-font-weight: var(--font-weight-light);
136+
--form-label-line-height: 1;
137+
--form-label-border: none;
116138
}
117139

0 commit comments

Comments
 (0)