Skip to content

Commit a24ac0c

Browse files
literatliterat
committed
Feat(web): Introduce CheckboxField component (refs #DS-136)
1 parent 6fdcd6e commit a24ac0c

File tree

11 files changed

+454
-17
lines changed

11 files changed

+454
-17
lines changed

‎examples/web/index.html‎

Lines changed: 143 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,10 +56,14 @@
5656
padding: 0.25rem;
5757
}
5858

59+
.example-TextField-grid,
60+
.example-CheckboxField-grid {
61+
display: grid;
62+
grid-template-columns: 25rem;
63+
}
64+
5965
.example-TextField-grid {
60-
display: grid;
61-
grid-template-columns: 25rem;
62-
gap: 1.5rem;
66+
gap: 1.5rem;
6367
}
6468
</style>
6569
</head>
@@ -305,6 +309,142 @@ <h3 class="typography-heading-small-text">Typography</h3>
305309
</p>
306310
</div>
307311
</section>
312+
313+
<section>
314+
<div class="Container">
315+
<h2>CheckboxField</h2>
316+
<div class="example-CheckboxField-grid">
317+
<label for="checkboxfield1" class="CheckboxField">
318+
<input type="checkbox" id="checkboxfield1" class="CheckboxField__input" />
319+
<span class="CheckboxField__text">
320+
<span class="CheckboxField__label">Checkbox unselected</span>
321+
</span>
322+
</label>
323+
<label for="checkboxfield2" class="CheckboxField">
324+
<input type="checkbox" id="checkboxfield2" class="CheckboxField__input" />
325+
<span class="CheckboxField__text">
326+
<span class="CheckboxField__label">Checkbox unselected</span>
327+
<span class="CheckboxField__message">Message</span>
328+
</span>
329+
</label>
330+
<label for="checkboxfield3" class="CheckboxField CheckboxField--disabled">
331+
<input type="checkbox" id="checkboxfield3" class="CheckboxField__input" disabled />
332+
<span class="CheckboxField__text">
333+
<span class="CheckboxField__label">Checkbox unselected</span>
334+
</span>
335+
</label>
336+
<label for="checkboxfield4" class="CheckboxField CheckboxField--disabled">
337+
<input type="checkbox" id="checkboxfield4" class="CheckboxField__input" disabled />
338+
<span class="CheckboxField__text">
339+
<span class="CheckboxField__label">Checkbox unselected</span>
340+
<span class="CheckboxField__message">Message</span>
341+
</span>
342+
</label>
343+
<label for="checkboxfield5" class="CheckboxField">
344+
<input type="checkbox" id="checkboxfield5" class="CheckboxField__input" checked />
345+
<span class="CheckboxField__text">
346+
<span class="CheckboxField__label">Checkbox selected</span>
347+
</span>
348+
</label>
349+
<label for="checkboxfield6" class="CheckboxField CheckboxField--error">
350+
<input type="checkbox" id="checkboxfield6" class="CheckboxField__input" checked />
351+
<span class="CheckboxField__text">
352+
<span class="CheckboxField__label">Checkbox selected</span>
353+
<span class="CheckboxField__message">Message</span>
354+
</span>
355+
</label>
356+
<label for="checkboxfield7" class="CheckboxField CheckboxField--disabled">
357+
<input type="checkbox" id="checkboxfield7" class="CheckboxField__input" checked disabled />
358+
<span class="CheckboxField__text">
359+
<span class="CheckboxField__label">Checkbox selected</span>
360+
</span>
361+
</label>
362+
<label for="checkboxfield8" class="CheckboxField CheckboxField--disabled">
363+
<input type="checkbox" id="checkboxfield8" class="CheckboxField__input" checked disabled />
364+
<span class="CheckboxField__text">
365+
<span class="CheckboxField__label">Checkbox selected</span>
366+
<span class="CheckboxField__message">Message</span>
367+
</span>
368+
</label>
369+
<label for="checkboxfield9" class="CheckboxField">
370+
<input type="checkbox" id="checkboxfield9" class="CheckboxField__input" required />
371+
<span class="CheckboxField__text">
372+
<span class="CheckboxField__label CheckboxField__label--required">Label of required input</span>
373+
</span>
374+
</label>
375+
<label for="checkboxfield10" class="CheckboxField">
376+
<input type="checkbox" id="checkboxfield10" class="CheckboxField__input" value="Filled" />
377+
<span class="CheckboxField__text">
378+
<span class="CheckboxField__label CheckboxField__label--hidden">Label Hidden</span>
379+
</span>
380+
</label>
381+
<label for="checkboxfield11" class="CheckboxField CheckboxField--error">
382+
<input type="checkbox" id="checkboxfield11" class="CheckboxField__input" value="Filled" checked />
383+
<span class="CheckboxField__text">
384+
<span class="CheckboxField__label CheckboxField__label--required">Label of input with error</span>
385+
<span class="CheckboxField__message">Error message</span>
386+
</span>
387+
</label>
388+
<label for="checkboxfield12" class="CheckboxField CheckboxField--disabled">
389+
<input type="checkbox" id="checkboxfield12" class="CheckboxField__input" disabled />
390+
<span class="CheckboxField__text">
391+
<span class="CheckboxField__label CheckboxField__label--required">Label of disabled input</span>
392+
<span class="CheckboxField__message">Message</span>
393+
</span>
394+
</label>
395+
<label for="checkboxfield13" class="CheckboxField">
396+
<input type="checkbox" id="checkboxfield13" class="CheckboxField__input" />
397+
<span class="CheckboxField__text">
398+
<span class="CheckboxField__label CheckboxField__label--required">
399+
Souhlasím, aby mi provozovatel jobs.cz (LMC s.r.o.) pomáhal k nalezení lepší práce a osobnímu rozvoji
400+
</span>
401+
<span class="CheckboxField__message"><a href="#">Zobrazit více</a></span>
402+
</span>
403+
</label>
404+
<label for="checkboxfield14" class="CheckboxField">
405+
<input type="checkbox" id="checkboxfield14" class="CheckboxField__input" value="Filled" />
406+
<span class="CheckboxField__text">
407+
<span class="CheckboxField__label">Label of input with indeterminate</span>
408+
</span>
409+
</label>
410+
<label for="checkboxfield15" class="CheckboxField CheckboxField--error">
411+
<input type="checkbox" id="checkboxfield15" class="CheckboxField__input" />
412+
<span class="CheckboxField__text">
413+
<span class="CheckboxField__label CheckboxField__label--required">Label of input with indeterminate</span>
414+
<span class="CheckboxField__message">Message</span>
415+
</span>
416+
</label>
417+
<label for="checkboxfield16" class="CheckboxField CheckboxField--disabled">
418+
<input type="checkbox" id="checkboxfield16" class="CheckboxField__input" value="Filled" disabled />
419+
<span class="CheckboxField__text">
420+
<span class="CheckboxField__label">Label of input with indeterminate</span>
421+
</span>
422+
</label>
423+
<label for="checkboxfield17" class="CheckboxField CheckboxField--disabled">
424+
<input type="checkbox" id="checkboxfield17" class="CheckboxField__input" disabled />
425+
<span class="CheckboxField__text">
426+
<span class="CheckboxField__label CheckboxField__label--required">Label of input with indeterminate</span>
427+
<span class="CheckboxField__message">Message</span>
428+
</span>
429+
</label>
430+
<script type="text/javascript">
431+
const inputs = [
432+
'checkboxfield14',
433+
'checkboxfield15',
434+
'checkboxfield16',
435+
'checkboxfield17',
436+
];
437+
438+
window.addEventListener('DOMContentLoaded', function () {
439+
inputs.forEach(function (input) {
440+
const checkbox = document.getElementById(input);
441+
checkbox.indeterminate = true;
442+
});
443+
});
444+
</script>
445+
</div>
446+
</div>
447+
</section>
308448
</main>
309449
</body>
310450
</html>

‎examples/web/jobs.html‎

Lines changed: 143 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -65,10 +65,14 @@
6565
padding: 0.25rem;
6666
}
6767

68+
.example-TextField-grid,
69+
.example-CheckboxField-grid {
70+
display: grid;
71+
grid-template-columns: 25rem;
72+
}
73+
6874
.example-TextField-grid {
69-
display: grid;
70-
grid-template-columns: 25rem;
71-
gap: 1.5rem;
75+
gap: 1.5rem;
7276
}
7377
</style>
7478
</head>
@@ -314,6 +318,142 @@ <h3 class="jobs-typography-heading-small-text">Typography</h3>
314318
</p>
315319
</div>
316320
</section>
321+
322+
<section>
323+
<div class="jobs-Container">
324+
<h2>CheckboxField</h2>
325+
<div class="example-CheckboxField-grid">
326+
<label for="checkboxfield1" class="jobs-CheckboxField">
327+
<input type="checkbox" id="checkboxfield1" class="jobs-CheckboxField__input" />
328+
<span class="jobs-CheckboxField__text">
329+
<span class="jobs-CheckboxField__label">Checkbox unselected</span>
330+
</span>
331+
</label>
332+
<label for="checkboxfield2" class="jobs-CheckboxField">
333+
<input type="checkbox" id="checkboxfield2" class="jobs-CheckboxField__input" />
334+
<span class="jobs-CheckboxField__text">
335+
<span class="jobs-CheckboxField__label">Checkbox unselected</span>
336+
<span class="jobs-CheckboxField__message">Message</span>
337+
</span>
338+
</label>
339+
<label for="checkboxfield3" class="jobs-CheckboxField jobs-CheckboxField--disabled">
340+
<input type="checkbox" id="checkboxfield3" class="jobs-CheckboxField__input" disabled />
341+
<span class="jobs-CheckboxField__text">
342+
<span class="jobs-CheckboxField__label">Checkbox unselected</span>
343+
</span>
344+
</label>
345+
<label for="checkboxfield4" class="jobs-CheckboxField jobs-CheckboxField--disabled">
346+
<input type="checkbox" id="checkboxfield4" class="jobs-CheckboxField__input" disabled />
347+
<span class="jobs-CheckboxField__text">
348+
<span class="jobs-CheckboxField__label">Checkbox unselected</span>
349+
<span class="jobs-CheckboxField__message">Message</span>
350+
</span>
351+
</label>
352+
<label for="checkboxfield5" class="jobs-CheckboxField">
353+
<input type="checkbox" id="checkboxfield5" class="jobs-CheckboxField__input" checked />
354+
<span class="jobs-CheckboxField__text">
355+
<span class="jobs-CheckboxField__label">Checkbox selected</span>
356+
</span>
357+
</label>
358+
<label for="checkboxfield6" class="jobs-CheckboxField jobs-CheckboxField--error">
359+
<input type="checkbox" id="checkboxfield6" class="jobs-CheckboxField__input" checked />
360+
<span class="jobs-CheckboxField__text">
361+
<span class="jobs-CheckboxField__label">Checkbox selected</span>
362+
<span class="jobs-CheckboxField__message">Message</span>
363+
</span>
364+
</label>
365+
<label for="checkboxfield7" class="jobs-CheckboxField jobs-CheckboxField--disabled">
366+
<input type="checkbox" id="checkboxfield7" class="jobs-CheckboxField__input" checked disabled />
367+
<span class="jobs-CheckboxField__text">
368+
<span class="jobs-CheckboxField__label">Checkbox selected</span>
369+
</span>
370+
</label>
371+
<label for="checkboxfield8" class="jobs-CheckboxField jobs-CheckboxField--disabled">
372+
<input type="checkbox" id="checkboxfield8" class="jobs-CheckboxField__input" checked disabled />
373+
<span class="jobs-CheckboxField__text">
374+
<span class="jobs-CheckboxField__label">Checkbox selected</span>
375+
<span class="jobs-CheckboxField__message">Message</span>
376+
</span>
377+
</label>
378+
<label for="checkboxfield9" class="jobs-CheckboxField">
379+
<input type="checkbox" id="checkboxfield9" class="jobs-CheckboxField__input" required />
380+
<span class="jobs-CheckboxField__text">
381+
<span class="jobs-CheckboxField__label jobs-CheckboxField__label--required">Label of required input</span>
382+
</span>
383+
</label>
384+
<label for="checkboxfield10" class="jobs-CheckboxField">
385+
<input type="checkbox" id="checkboxfield10" class="jobs-CheckboxField__input" value="Filled" />
386+
<span class="jobs-CheckboxField__text">
387+
<span class="jobs-CheckboxField__label jobs-CheckboxField__label--hidden">Label Hidden</span>
388+
</span>
389+
</label>
390+
<label for="checkboxfield11" class="jobs-CheckboxField jobs-CheckboxField--error">
391+
<input type="checkbox" id="checkboxfield11" class="jobs-CheckboxField__input" value="Filled" checked />
392+
<span class="jobs-CheckboxField__text">
393+
<span class="jobs-CheckboxField__label jobs-CheckboxField__label--required">Label of input with error</span>
394+
<span class="jobs-CheckboxField__message">Error message</span>
395+
</span>
396+
</label>
397+
<label for="checkboxfield12" class="jobs-CheckboxField jobs-CheckboxField--disabled">
398+
<input type="checkbox" id="checkboxfield12" class="jobs-CheckboxField__input" disabled />
399+
<span class="jobs-CheckboxField__text">
400+
<span class="jobs-CheckboxField__label jobs-CheckboxField__label--required">Label of disabled input</span>
401+
<span class="jobs-CheckboxField__message">Message</span>
402+
</span>
403+
</label>
404+
<label for="checkboxfield13" class="jobs-CheckboxField">
405+
<input type="checkbox" id="checkboxfield13" class="jobs-CheckboxField__input" />
406+
<span class="jobs-CheckboxField__text">
407+
<span class="jobs-CheckboxField__label jobs-CheckboxField__label--required">
408+
Souhlasím, aby mi provozovatel jobs.cz (LMC s.r.o.) pomáhal k nalezení lepší práce a osobnímu rozvoji
409+
</span>
410+
<span class="jobs-CheckboxField__message"><a href="#">Zobrazit více</a></span>
411+
</span>
412+
</label>
413+
<label for="checkboxfield14" class="jobs-CheckboxField">
414+
<input type="checkbox" id="checkboxfield14" class="jobs-CheckboxField__input" value="Filled" />
415+
<span class="jobs-CheckboxField__text">
416+
<span class="jobs-CheckboxField__label">Label of input with indeterminate</span>
417+
</span>
418+
</label>
419+
<label for="checkboxfield15" class="jobs-CheckboxField jobs-CheckboxField--error">
420+
<input type="checkbox" id="checkboxfield15" class="jobs-CheckboxField__input" />
421+
<span class="jobs-CheckboxField__text">
422+
<span class="jobs-CheckboxField__label jobs-CheckboxField__label--required">Label of input with indeterminate</span>
423+
<span class="jobs-CheckboxField__message">Message</span>
424+
</span>
425+
</label>
426+
<label for="checkboxfield16" class="jobs-CheckboxField jobs-CheckboxField--disabled">
427+
<input type="checkbox" id="checkboxfield16" class="jobs-CheckboxField__input" value="Filled" disabled />
428+
<span class="jobs-CheckboxField__text">
429+
<span class="jobs-CheckboxField__label">Label of input with indeterminate</span>
430+
</span>
431+
</label>
432+
<label for="checkboxfield17" class="jobs-CheckboxField jobs-CheckboxField--disabled">
433+
<input type="checkbox" id="checkboxfield17" class="jobs-CheckboxField__input" disabled />
434+
<span class="jobs-CheckboxField__text">
435+
<span class="jobs-CheckboxField__label jobs-CheckboxField__label--required">Label of input with indeterminate</span>
436+
<span class="jobs-CheckboxField__message">Message</span>
437+
</span>
438+
</label>
439+
<script type="text/javascript">
440+
const inputs = [
441+
'checkboxfield14',
442+
'checkboxfield15',
443+
'checkboxfield16',
444+
'checkboxfield17',
445+
];
446+
447+
window.addEventListener('DOMContentLoaded', function () {
448+
inputs.forEach(function (input) {
449+
const checkbox = document.getElementById(input);
450+
checkbox.indeterminate = true;
451+
});
452+
});
453+
</script>
454+
</div>
455+
</div>
456+
</section>
317457
</main>
318458
</body>
319459
</html>

‎examples/web/src/jobs/jobs.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
@use '@lmc-eu/spirit-web/dist/scss/foundation';
44

55
@use '@lmc-eu/spirit-web/dist/scss/components/Button';
6+
@use '@lmc-eu/spirit-web/dist/scss/components/CheckboxField';
67
@use '@lmc-eu/spirit-web/dist/scss/components/Container';
78
@use '@lmc-eu/spirit-web/dist/scss/components/Grid';
89
@use '@lmc-eu/spirit-web/dist/scss/components/Stack';

‎packages/web/src/components/CheckboxField/README.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# CheckboxField
2+
3+
CheckboxField enables the user to check/uncheck choice. It has input, a label,
4+
and an optional message. It can be disabled or have an error state. The label can be hidden
5+
and show if the input is required.
6+
7+
```html
8+
<label for="checkboxfield1" class="CheckboxField">
9+
<input type="checkbox" id="checkboxfield1" class="CheckboxField__input" />
10+
<span class="CheckboxField__text">
11+
<span class="CheckboxField__label">Label</span>
12+
</span>
13+
</label>
14+
<label for="checkboxfield2" class="CheckboxField">
15+
<input type="checkbox" id="checkboxfield2" class="CheckboxField__input" required />
16+
<span class="CheckboxField__text">
17+
<span class="CheckboxField__label CheckboxField__label--required">Label of required input</span>
18+
</span>
19+
</label>
20+
<label for="checkboxfield3" class="CheckboxField">
21+
<input type="checkbox" id="checkboxfield3" class="CheckboxField__input" />
22+
<span class="CheckboxField__text">
23+
<span class="CheckboxField__label">Label of input with message</span>
24+
<span class="CheckboxField__message">Message</span>
25+
</span>
26+
</label>
27+
<label for="checkboxfield4" class="CheckboxField">
28+
<input type="checkbox" id="checkboxfield4" class="CheckboxField__input" value="Filled" />
29+
<span class="CheckboxField__text">
30+
<span class="CheckboxField__label CheckboxField__label--hidden">Label Hidden</span>
31+
</span>
32+
</label>
33+
<label for="checkboxfield5" class="CheckboxField jobs-CheckboxField--error">
34+
<input type="checkbox" id="checkboxfield5" class="CheckboxField__input" value="Filled" checked />
35+
<span class="CheckboxField__text">
36+
<span class="CheckboxField__label CheckboxField__label--required">Label of input with error</span>
37+
<span class="CheckboxField__message">Error message</span>
38+
</span>
39+
</label>
40+
<label for="checkboxfield6" class="CheckboxField jobs-CheckboxField--disabled">
41+
<input type="checkbox" id="checkboxfield6" class="CheckboxField__input" disabled />
42+
<span class="CheckboxField__text">
43+
<span class="CheckboxField__label CheckboxField__label--required">Label of disabled input</span>
44+
<span class="CheckboxField__message">Message</span>
45+
</span>
46+
</label>
47+
```

0 commit comments

Comments
 (0)