From 8442ac0b5001fd0e4456a488f486258296b3e24a Mon Sep 17 00:00:00 2001 From: Maximilian Date: Wed, 26 Apr 2023 12:18:50 +0200 Subject: [PATCH 1/9] feat: added required example --- source/_patterns/01-elements/radio/radio.hbs | 3 ++- source/_patterns/01-elements/radio/radio~required.json | 4 ++++ 2 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 source/_patterns/01-elements/radio/radio~required.json diff --git a/source/_patterns/01-elements/radio/radio.hbs b/source/_patterns/01-elements/radio/radio.hbs index 4d60367f11..8abfc524cb 100644 --- a/source/_patterns/01-elements/radio/radio.hbs +++ b/source/_patterns/01-elements/radio/radio.hbs @@ -6,5 +6,6 @@ {{#if disabled}} disabled{{/if }} value="{{ value }}" {{#if describedbyid }} aria-describedby="{{ describedbyid }}"{{/if }} - {{#if invalid}} aria-invalid="true"{{/if }}> + {{#if invalid}} aria-invalid="true"{{/if }} + {{#if required}} required{{/if}}> diff --git a/source/_patterns/01-elements/radio/radio~required.json b/source/_patterns/01-elements/radio/radio~required.json new file mode 100644 index 0000000000..bb2b1b0330 --- /dev/null +++ b/source/_patterns/01-elements/radio/radio~required.json @@ -0,0 +1,4 @@ +{ + "id": "radio06", + "required": true +} From 242e8361b609cdce2e9622a06928d257716bc6ef Mon Sep 17 00:00:00 2001 From: Maximilian Date: Wed, 26 Apr 2023 12:31:20 +0200 Subject: [PATCH 2/9] feat: added relevant name --- source/_patterns/01-elements/radio/radio.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/source/_patterns/01-elements/radio/radio.json b/source/_patterns/01-elements/radio/radio.json index 2946dc20ee..d5e91520fa 100644 --- a/source/_patterns/01-elements/radio/radio.json +++ b/source/_patterns/01-elements/radio/radio.json @@ -1,4 +1,5 @@ { "id": "radio01", - "label": "Radio" + "label": "Radio", + "name": "radio" } From b6c439545a8f5b3d05c9fb1f9fe8468fedbdf276 Mon Sep 17 00:00:00 2001 From: Maximilian Date: Wed, 26 Apr 2023 13:11:49 +0200 Subject: [PATCH 3/9] feat: displayed further example elements --- helpers/unique-id.js | 8 ++++++++ .../01-elements/radio/{radio.hbs => _radio.hbs} | 4 ++-- source/_patterns/01-elements/radio/_radio.json | 4 ++++ source/_patterns/01-elements/radio/radio.json | 5 ----- source/_patterns/01-elements/radio/radios.hbs | 3 +++ source/_patterns/01-elements/radio/radios.json | 13 +++++++++++++ .../_patterns/01-elements/radio/radios~checked.json | 4 ++++ .../01-elements/radio/radios~disabled-checked.json | 5 +++++ .../01-elements/radio/radios~disabled.json | 4 ++++ .../_patterns/01-elements/radio/radios~invalid.json | 4 ++++ .../01-elements/radio/radios~required.json | 4 ++++ .../_patterns/01-elements/radio/radio~checked.json | 4 ---- .../01-elements/radio/radio~disabled-checked.json | 5 ----- .../_patterns/01-elements/radio/radio~disabled.json | 4 ---- .../_patterns/01-elements/radio/radio~invalid.json | 4 ---- .../_patterns/01-elements/radio/radio~required.json | 4 ---- 16 files changed, 51 insertions(+), 28 deletions(-) create mode 100644 helpers/unique-id.js rename source/_patterns/01-elements/radio/{radio.hbs => _radio.hbs} (78%) create mode 100644 source/_patterns/01-elements/radio/_radio.json delete mode 100644 source/_patterns/01-elements/radio/radio.json create mode 100644 source/_patterns/01-elements/radio/radios.hbs create mode 100644 source/_patterns/01-elements/radio/radios.json create mode 100644 source/_patterns/01-elements/radio/radios~checked.json create mode 100644 source/_patterns/01-elements/radio/radios~disabled-checked.json create mode 100644 source/_patterns/01-elements/radio/radios~disabled.json create mode 100644 source/_patterns/01-elements/radio/radios~invalid.json create mode 100644 source/_patterns/01-elements/radio/radios~required.json delete mode 100644 source/_patterns/01-elements/radio/radio~checked.json delete mode 100644 source/_patterns/01-elements/radio/radio~disabled-checked.json delete mode 100644 source/_patterns/01-elements/radio/radio~disabled.json delete mode 100644 source/_patterns/01-elements/radio/radio~invalid.json delete mode 100644 source/_patterns/01-elements/radio/radio~required.json 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 78% rename from source/_patterns/01-elements/radio/radio.hbs rename to source/_patterns/01-elements/radio/_radio.hbs index 8abfc524cb..7295d8fbf3 100644 --- a/source/_patterns/01-elements/radio/radio.hbs +++ b/source/_patterns/01-elements/radio/_radio.hbs @@ -1,10 +1,10 @@ diff --git a/source/_patterns/01-elements/radio/_radio.json b/source/_patterns/01-elements/radio/_radio.json new file mode 100644 index 0000000000..b7fad759f5 --- /dev/null +++ b/source/_patterns/01-elements/radio/_radio.json @@ -0,0 +1,4 @@ +{ + "label": "Radio", + "id": "radio" +} diff --git a/source/_patterns/01-elements/radio/radio.json b/source/_patterns/01-elements/radio/radio.json deleted file mode 100644 index d5e91520fa..0000000000 --- a/source/_patterns/01-elements/radio/radio.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "id": "radio01", - "label": "Radio", - "name": "radio" -} diff --git a/source/_patterns/01-elements/radio/radios.hbs b/source/_patterns/01-elements/radio/radios.hbs new file mode 100644 index 0000000000..746c4b29f7 --- /dev/null +++ b/source/_patterns/01-elements/radio/radios.hbs @@ -0,0 +1,3 @@ +{{#each radios }} + {{> elements-radio checked=../checked 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..fea141a7f5 --- /dev/null +++ b/source/_patterns/01-elements/radio/radios.json @@ -0,0 +1,13 @@ +{ + "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..e38e7fa9ea --- /dev/null +++ b/source/_patterns/01-elements/radio/radios~checked.json @@ -0,0 +1,4 @@ +{ + "checked": true, + "name": "radioChecked" +} 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..6c095b0952 --- /dev/null +++ b/source/_patterns/01-elements/radio/radios~disabled-checked.json @@ -0,0 +1,5 @@ +{ + "checked": true, + "disabled": true, + "name": "radioDisabledChecked" +} 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.json b/source/_patterns/01-elements/radio/radios~invalid.json new file mode 100644 index 0000000000..996f7ef64b --- /dev/null +++ b/source/_patterns/01-elements/radio/radios~invalid.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 -} diff --git a/source/_patterns/01-elements/radio/radio~required.json b/source/_patterns/01-elements/radio/radio~required.json deleted file mode 100644 index bb2b1b0330..0000000000 --- a/source/_patterns/01-elements/radio/radio~required.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "id": "radio06", - "required": true -} From 59608fca411e0f95c1af49b4228f57adc87ac44c Mon Sep 17 00:00:00 2001 From: Maximilian Date: Wed, 26 Apr 2023 13:24:34 +0200 Subject: [PATCH 4/9] chore: simplified the name declaration again --- source/_patterns/01-elements/radio/_radio.hbs | 2 +- source/_patterns/01-elements/radio/_radio.json | 3 ++- source/_patterns/01-elements/radio/radios.json | 1 + 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/source/_patterns/01-elements/radio/_radio.hbs b/source/_patterns/01-elements/radio/_radio.hbs index 7295d8fbf3..c704188402 100644 --- a/source/_patterns/01-elements/radio/_radio.hbs +++ b/source/_patterns/01-elements/radio/_radio.hbs @@ -1,6 +1,6 @@ Date: Wed, 26 Apr 2023 13:24:50 +0200 Subject: [PATCH 5/9] chore: wrong title --- source/_patterns/01-elements/radio/_radio.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 --- From 1993243ba92c7f2048a9c53d764072328b13cedb Mon Sep 17 00:00:00 2001 From: Maximilian Date: Wed, 26 Apr 2023 13:25:15 +0200 Subject: [PATCH 6/9] fix: only one radio is supposed to be checked --- source/_patterns/01-elements/radio/radios.hbs | 2 +- .../01-elements/radio/radios~checked.json | 14 ++++++++++++-- .../01-elements/radio/radios~disabled-checked.json | 14 ++++++++++++-- 3 files changed, 25 insertions(+), 5 deletions(-) diff --git a/source/_patterns/01-elements/radio/radios.hbs b/source/_patterns/01-elements/radio/radios.hbs index 746c4b29f7..72d987a589 100644 --- a/source/_patterns/01-elements/radio/radios.hbs +++ b/source/_patterns/01-elements/radio/radios.hbs @@ -1,3 +1,3 @@ {{#each radios }} - {{> elements-radio checked=../checked disabled=../disabled invalid=../invalid required=../required id=(unique-id) name=../name }}
+ {{> elements-radio disabled=../disabled invalid=../invalid required=../required id=(unique-id) name=../name }}
{{/each }} diff --git a/source/_patterns/01-elements/radio/radios~checked.json b/source/_patterns/01-elements/radio/radios~checked.json index e38e7fa9ea..49272c2913 100644 --- a/source/_patterns/01-elements/radio/radios~checked.json +++ b/source/_patterns/01-elements/radio/radios~checked.json @@ -1,4 +1,14 @@ { - "checked": true, - "name": "radioChecked" + "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 index 6c095b0952..0b3b34ba25 100644 --- a/source/_patterns/01-elements/radio/radios~disabled-checked.json +++ b/source/_patterns/01-elements/radio/radios~disabled-checked.json @@ -1,5 +1,15 @@ { - "checked": true, "disabled": true, - "name": "radioDisabledChecked" + "name": "radioDisabledChecked", + "radios": [ + { + "checked": true + }, + { + "checked": false + }, + { + "checked": false + } + ] } From 536c42f514fa64e732185859f3994671f9b52a74 Mon Sep 17 00:00:00 2001 From: Maximilian Date: Wed, 26 Apr 2023 13:34:46 +0200 Subject: [PATCH 7/9] chore: corrected the pseudo patterns name --- .../radio/{radios~invalid.json => radios~invalid-attribute.json} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename source/_patterns/01-elements/radio/{radios~invalid.json => radios~invalid-attribute.json} (100%) diff --git a/source/_patterns/01-elements/radio/radios~invalid.json b/source/_patterns/01-elements/radio/radios~invalid-attribute.json similarity index 100% rename from source/_patterns/01-elements/radio/radios~invalid.json rename to source/_patterns/01-elements/radio/radios~invalid-attribute.json From ae9b269c8c75e010b7a5a77c5256308aa1657bd7 Mon Sep 17 00:00:00 2001 From: Maximilian Date: Wed, 26 Apr 2023 13:35:23 +0200 Subject: [PATCH 8/9] fix: corrected invalid styling regarding border width --- source/_patterns/01-elements/radio/radio.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/source/_patterns/01-elements/radio/radio.scss b/source/_patterns/01-elements/radio/radio.scss index faf7c5d25b..b94e29dc92 100644 --- a/source/_patterns/01-elements/radio/radio.scss +++ b/source/_patterns/01-elements/radio/radio.scss @@ -31,9 +31,7 @@ background-color: rgba(40, 45, 55, 0.3); } - &:checked, - &:invalid, - &[aria-invalid="true"] { + &:checked { border-width: to-em($pxValue: 6); } // * the invalid style using the :invalid pseudo class (and [aria-invalid="true"] equivalent, see #136 and #141) From 5c0bea0ee83dfa838bca94c0f6b26385488e2f85 Mon Sep 17 00:00:00 2001 From: Maximilian Date: Wed, 26 Apr 2023 13:42:45 +0200 Subject: [PATCH 9/9] fix: we need to use this future selector --- source/_patterns/01-elements/radio/radio.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/_patterns/01-elements/radio/radio.scss b/source/_patterns/01-elements/radio/radio.scss index b94e29dc92..788149112d 100644 --- a/source/_patterns/01-elements/radio/radio.scss +++ b/source/_patterns/01-elements/radio/radio.scss @@ -35,7 +35,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; }