fix: required radio elements displayed as invalid (#431)

* feat: added required example

* feat: added relevant name

* feat: displayed further example elements

* chore: simplified the name declaration again

* chore: wrong title

* fix: only one radio is supposed to be checked

* chore: corrected the pseudo patterns name

* fix: corrected invalid styling regarding border width

* fix: we need to use this future selector

Author: mfranzke

helpers/unique-id.js

@@ -0,0 +1,8 @@
+/* eslint unicorn/prefer-module: 0, eqeqeq: 0 */
+module.exports = function (Handlebars) {
+	Handlebars.registerHelper('unique-id', function () {
+		const crypto = require('node:crypto');
+
+		return `id-${crypto.randomUUID()}`;
+	});
+};

source/_patterns/01-elements/radio/radio.hbs renamed to source/_patterns/01-elements/radio/_radio.hbs

@@ -1,10 +1,11 @@
 <input type="radio"
 	class="elm-radio {{ styleModifier }}"
-	{{#if name}} name="{{ name }}"{{/if }}
+	name="{{ name }}"
 	id="{{ id }}"
 	{{#if checked}} checked{{/if }}
 	{{#if disabled}} disabled{{/if }}
-	value="{{ value }}"
+	{{#if value}} value="{{ value }}"{{/if }}
 	{{#if describedbyid }} aria-describedby="{{ describedbyid }}"{{/if }}
-	{{#if invalid}} aria-invalid="true"{{/if }}>
+	{{#if invalid}} aria-invalid="true"{{/if }}
+	{{#if required}} required{{/if}}>
 <label class="elm-label" for="{{ id }}">{{ label }}</label>

source/_patterns/01-elements/radio/_radio.json

@@ -0,0 +1,5 @@
+{
+	"label": "Radio",
+	"id": "radio",
+	"name": "radio"
+}

source/_patterns/01-elements/radio/_radio.md

@@ -1,5 +1,5 @@
 ---
-title: Textarea
+title: Radio
 state: complete
 ---
 

source/_patterns/01-elements/radio/radio.json

@@ -39,7 +39,7 @@
 		border-width: to-em($pxValue: 6);
 	}
 	// * the invalid style using the :invalid pseudo class (and [aria-invalid="true"] equivalent, see #136 and #141)
-	&:invalid,
+	&:is(:user-invalid),
 	&[aria-invalid="true"] {
 		border-color: #c13e34;
 	}

source/_patterns/01-elements/radio/radio.scss

@@ -0,0 +1,3 @@
+{{#each radios }}
+	{{> elements-radio disabled=../disabled invalid=../invalid required=../required id=(unique-id) name=../name }}<br>
+{{/each }}

source/_patterns/01-elements/radio/radios.hbs

@@ -0,0 +1,14 @@
+{
+	"name": "radio",
+	"radios": [
+		{
+			"label": "Radio 01"
+		},
+		{
+			"label": "Radio 02"
+		},
+		{
+			"label": "Radio 03"
+		}
+	]
+}

source/_patterns/01-elements/radio/radios.json

@@ -0,0 +1,14 @@
+{
+	"name": "radioChecked",
+	"radios": [
+		{
+			"checked": true
+		},
+		{
+			"checked": false
+		},
+		{
+			"checked": false
+		}
+	]
+}

source/_patterns/01-elements/radio/radios~checked.json

@@ -0,0 +1,15 @@
+{
+	"disabled": true,
+	"name": "radioDisabledChecked",
+	"radios": [
+		{
+			"checked": true
+		},
+		{
+			"checked": false
+		},
+		{
+			"checked": false
+		}
+	]
+}