Merge branch 'DES/enhancement/705-vl-refactor/radio' into DES/enhance…

…ment/#705-vl-refactor

# Conflicts:
#	app/styles/app.scss

app/pods/components/utils/radio-dropdown-combo-select/template.hbs

@@ -1,35 +1,21 @@
-<div class="vlc-radio-inline">
+<WebComponents::AuRadioList @layout="inline">
   {{#each this.radioOptions as |opt index|}}
-    {{#let (concat this.radioName "-" index) as |radioId|}}
-      <label class="vl-radio" for={{radioId}}>
-        <Input
-          class="vl-radio__toggle"
-          id={{radioId}}
-          name={{this.radioName}}
-          @type="radio"
-          value={{get opt this.labelKey}}
-          checked={{eq opt this.selectedOption}}
-          {{on "input" (fn this.select opt)}}
-        />
-        <div class="vl-radio__label">{{get opt this.labelKey}}</div>
-      </label>
-    {{/let}}
+    <WebComponents::AuRadio
+      @label={{get opt this.labelKey}}
+      name={{this.radioName}}
+      value={{get opt this.labelKey}}
+      checked={{eq opt this.selectedOption}}
+      {{on "input" (fn this.select opt)}}
+    />
   {{/each}}
-  {{#let (concat this.radioName "-" "others") as |radioId|}}
-    <label class="vl-radio" for={{radioId}}>
-      <Input
-        class="vl-radio__toggle"
-        id={{radioId}}
-        name={{this.radioName}}
-        @type="radio"
-        value="Andere"
-        checked={{this.selectedIsInOthers}}
-        {{on "input" this.showOthers}}
-      />
-      <div class="vl-radio__label">{{t "option-others"}}</div>
-    </label>
-  {{/let}}
-</div>
+  <WebComponents::AuRadio
+    @label={{t "option-others"}}
+    name={{this.radioName}}
+    value="Andere"
+    checked={{this.selectedIsInOthers}}
+    {{on "input" this.showOthers}}
+  />
+</WebComponents::AuRadioList>
 {{#if this.othersShown}}
   <PowerSelect
     @options={{this.otherOptions}}

app/pods/components/web-components/vl-radio-button-list/template.hbs

@@ -1,33 +1,24 @@
-<div class="vlc-input-field-block">
-  <label class="vl-form__label auk-u-block">
-    {{title}}
-  </label>
-  <div class="vlc-radio-inline">
+<fieldset>
+  <legend class="auk-label">{{title}}</legend>
+  <WebComponents::AuRadioList @layout="inline">
     {{#each optionList as |option index|}}
-      <label class="vl-radio">
-        {{#if selectedModel}}
-          <input
-            class="vl-radio__toggle"
-            value={{option.id}}
-            type="radio"
-            name={{title}}
-            checked={{eq option.id selectedModel.id}}
-            onchange={{action "modelChanged"}}
-          />
-        {{else}}
-          <input
-            class="vl-radio__toggle"
-            value={{option.id}}
-            type="radio"
-            name={{title}}
-            checked={{eq index 0}}
-            onchange={{action "modelChanged"}}
-          />
-        {{/if}}
-        <div class="vl-radio__label">
-          {{option.label}}
-        </div>
-      </label>
+      {{#if selectedModel}}
+        <WebComponents::AuRadio
+          value={{option.id}}
+          name={{title}}
+          checked={{eq option.id selectedModel.id}}
+          onchange={{action "modelChanged"}}
+          @label={{option.label}}
+        />
+      {{else}}
+        <WebComponents::AuRadio
+          value={{option.id}}
+          name={{title}}
+          checked={{eq index 0}}
+          onchange={{action "modelChanged"}}
+          @label={{option.label}}
+        />
+      {{/if}}
     {{/each}}
-  </div>
-</div>
+  </WebComponents::AuRadioList>
+</fieldset>

app/styles/app.scss

@@ -41,7 +41,6 @@ $icon-font-location: '/fonts/'; // overrides the default location for flanders-i
 @import 'govflanders/components/_modal';
 @import 'govflanders/components/_pager';
 @import 'govflanders/components/_pill';
-@import 'govflanders/components/_radio';
 @import 'govflanders/components/_typography';
 @import 'govflanders/components/_upload';
 
@@ -105,7 +104,6 @@ $icon-font-location: '/fonts/'; // overrides the default location for flanders-i
 @import 'custom-components/vlc-procedure-step';
 @import 'custom-components/_vlc-publication-overview';
 @import 'custom-components/vlc-publication-status-pill';
-@import 'custom-components/vlc-radio-inline';
 @import 'custom-components/vlc-rdfa-editor';
 @import 'custom-components/vlc-scroll-wrapper';
 @import 'custom-components/vlc-search';