diff --git a/helpers/unique-id.js b/helpers/unique-id.js new file mode 100644 index 0000000000..e0cd307643 --- /dev/null +++ b/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()}`; + }); +}; diff --git a/source/_patterns/01-elements/radio/radio.hbs b/source/_patterns/01-elements/radio/_radio.hbs similarity index 65% rename from source/_patterns/01-elements/radio/radio.hbs rename to source/_patterns/01-elements/radio/_radio.hbs index 4d60367f11..c704188402 100644 --- a/source/_patterns/01-elements/radio/radio.hbs +++ b/source/_patterns/01-elements/radio/_radio.hbs @@ -1,10 +1,11 @@ + {{#if invalid}} aria-invalid="true"{{/if }} + {{#if required}} required{{/if}}> diff --git a/source/_patterns/01-elements/radio/_radio.json b/source/_patterns/01-elements/radio/_radio.json new file mode 100644 index 0000000000..bc2edeb4d3 --- /dev/null +++ b/source/_patterns/01-elements/radio/_radio.json @@ -0,0 +1,5 @@ +{ + "label": "Radio", + "id": "radio", + "name": "radio" +} diff --git a/source/_patterns/01-elements/radio/_radio.md b/source/_patterns/01-elements/radio/_radio.md index 19ea5b87f0..c402e8ae58 100644 --- a/source/_patterns/01-elements/radio/_radio.md +++ b/source/_patterns/01-elements/radio/_radio.md @@ -1,5 +1,5 @@ --- -title: Textarea +title: Radio state: complete --- diff --git a/source/_patterns/01-elements/radio/radio.json b/source/_patterns/01-elements/radio/radio.json deleted file mode 100644 index 2946dc20ee..0000000000 --- a/source/_patterns/01-elements/radio/radio.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "id": "radio01", - "label": "Radio" -} diff --git a/source/_patterns/01-elements/radio/radio.scss b/source/_patterns/01-elements/radio/radio.scss index e85bf7a6d9..0a9cdcc7da 100644 --- a/source/_patterns/01-elements/radio/radio.scss +++ b/source/_patterns/01-elements/radio/radio.scss @@ -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; } diff --git a/source/_patterns/01-elements/radio/radios.hbs b/source/_patterns/01-elements/radio/radios.hbs new file mode 100644 index 0000000000..72d987a589 --- /dev/null +++ b/source/_patterns/01-elements/radio/radios.hbs @@ -0,0 +1,3 @@ +{{#each radios }} + {{> elements-radio disabled=../disabled invalid=../invalid required=../required id=(unique-id) name=../name }}
+{{/each }} diff --git a/source/_patterns/01-elements/radio/radios.json b/source/_patterns/01-elements/radio/radios.json new file mode 100644 index 0000000000..7d4abf5148 --- /dev/null +++ b/source/_patterns/01-elements/radio/radios.json @@ -0,0 +1,14 @@ +{ + "name": "radio", + "radios": [ + { + "label": "Radio 01" + }, + { + "label": "Radio 02" + }, + { + "label": "Radio 03" + } + ] +} diff --git a/source/_patterns/01-elements/radio/radios~checked.json b/source/_patterns/01-elements/radio/radios~checked.json new file mode 100644 index 0000000000..49272c2913 --- /dev/null +++ b/source/_patterns/01-elements/radio/radios~checked.json @@ -0,0 +1,14 @@ +{ + "name": "radioChecked", + "radios": [ + { + "checked": true + }, + { + "checked": false + }, + { + "checked": false + } + ] +} diff --git a/source/_patterns/01-elements/radio/radios~disabled-checked.json b/source/_patterns/01-elements/radio/radios~disabled-checked.json new file mode 100644 index 0000000000..0b3b34ba25 --- /dev/null +++ b/source/_patterns/01-elements/radio/radios~disabled-checked.json @@ -0,0 +1,15 @@ +{ + "disabled": true, + "name": "radioDisabledChecked", + "radios": [ + { + "checked": true + }, + { + "checked": false + }, + { + "checked": false + } + ] +} diff --git a/source/_patterns/01-elements/radio/radios~disabled.json b/source/_patterns/01-elements/radio/radios~disabled.json new file mode 100644 index 0000000000..4186649610 --- /dev/null +++ b/source/_patterns/01-elements/radio/radios~disabled.json @@ -0,0 +1,4 @@ +{ + "disabled": true, + "name": "radioDisabled" +} diff --git a/source/_patterns/01-elements/radio/radios~invalid-attribute.json b/source/_patterns/01-elements/radio/radios~invalid-attribute.json new file mode 100644 index 0000000000..996f7ef64b --- /dev/null +++ b/source/_patterns/01-elements/radio/radios~invalid-attribute.json @@ -0,0 +1,4 @@ +{ + "invalid": true, + "name": "radioInvalid" +} diff --git a/source/_patterns/01-elements/radio/radios~required.json b/source/_patterns/01-elements/radio/radios~required.json new file mode 100644 index 0000000000..914767a51e --- /dev/null +++ b/source/_patterns/01-elements/radio/radios~required.json @@ -0,0 +1,4 @@ +{ + "required": true, + "name": "radioRequired" +} diff --git a/source/_patterns/01-elements/radio/radio~checked.json b/source/_patterns/01-elements/radio/radio~checked.json deleted file mode 100644 index d5a2c8a4bc..0000000000 --- a/source/_patterns/01-elements/radio/radio~checked.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "id": "radio02", - "checked": true -} diff --git a/source/_patterns/01-elements/radio/radio~disabled-checked.json b/source/_patterns/01-elements/radio/radio~disabled-checked.json deleted file mode 100644 index a062e3978e..0000000000 --- a/source/_patterns/01-elements/radio/radio~disabled-checked.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "id": "radio04", - "checked": true, - "disabled": true -} diff --git a/source/_patterns/01-elements/radio/radio~disabled.json b/source/_patterns/01-elements/radio/radio~disabled.json deleted file mode 100644 index b503f8b96a..0000000000 --- a/source/_patterns/01-elements/radio/radio~disabled.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "id": "radio03", - "disabled": true -} diff --git a/source/_patterns/01-elements/radio/radio~invalid.json b/source/_patterns/01-elements/radio/radio~invalid.json deleted file mode 100644 index f5e594bc0b..0000000000 --- a/source/_patterns/01-elements/radio/radio~invalid.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "id": "radio05", - "invalid": true -}