Bug Fix: allow click of label and box for box-radio component (#10586)

* make glimmer component and remove extra lable, fix styling

* remove commented out code

* remove extra label for when disabled as well

ui/app/styles/components/box-radio.scss

@@ -39,12 +39,6 @@
     opacity: 0.5;
   }
 
-  input[type='radio'].radio {
-    position: absolute;
-    z-index: 1;
-    opacity: 0;
-  }
-
   input[type='radio'].radio + label {
     border: 1px solid $grey-light;
     border-radius: 50%;

ui/lib/core/addon/components/box-radio.js

@@ -16,11 +16,13 @@
  * @param {string} [tooltipMessage=default] - The message that shows in the tooltip if the radio option is disabled
  */
 
-import Component from '@ember/component';
+import Component from '@glimmer/component';
 import layout from '../templates/components/box-radio';
+import { setComponentTemplate } from '@ember/component';
 
-export default Component.extend({
-  layout,
-  disabled: false,
-  tooltipMessage: 'This option is not available to you at this time.',
-});
+class BoxRadio extends Component {
+  disabled = false;
+  tooltipMessage = 'This option is not available to you at this time.';
+}
+
+export default setComponentTemplate(layout, BoxRadio);

ui/lib/core/addon/templates/components/box-radio.hbs

@@ -1,4 +1,4 @@
-{{#if disabled}}
+{{#if @disabled}}
 <div class="box-radio-spacing">
   <ToolTip
     @verticalPosition="above"
@@ -6,32 +6,31 @@
     as |T|>
     <T.trigger @tabindex="-1">
       <label
-        for={{type}}
+        for={{@type}}
         class="box-radio is-disabled is-marginless"
         data-test-mount-type-radio
-        data-test-mount-type={{type}}
+        data-test-mount-type={{@type}}
       >
         <Icon
-          @glyph={{glyph}}
+          @glyph={{@glyph}}
           @size="xl"
           class="has-text-grey-light"
         />
-        {{displayName}}
+        {{@displayName}}
         <RadioButton
-          @value={{type}}
+          @value={{@type}}
           @radioClass="radio"
-          @groupValue={{groupValue}}
-          @changed={{onRadioChange}}
-          @name={{groupName}}
-          @radioId={{type}}
-          @disabled={{disabled}}
+          @groupValue={{@groupValue}}
+          @changed={{@onRadioChange}}
+          @name={{@groupName}}
+          @radioId={{@type}}
+          @disabled={{@disabled}}
         />
-        <label for={{type}}></label>
       </label>
     </T.trigger>
     <T.content @class="tool-tip">
       <div class="box">
-        {{tooltipMessage}}
+        {{@tooltipMessage}}
       </div>
     </T.content>
   </ToolTip>
@@ -39,28 +38,27 @@
 {{else}}
 <div class="box-radio-spacing">
   <label
-    for={{type}}
+    for={{@type}}
     class="box-radio is-marginless
-    {{if (eq groupValue type) " is-selected"}}"
+    {{if (eq @groupValue @type) " is-selected"}}"
     data-test-mount-type-radio
-    data-test-mount-type={{type}}
+    data-test-mount-type={{@type}}
   >
     <Icon
-      @glyph={{glyph}}
+      @glyph={{@glyph}}
       @size="xl"
       class="has-text-grey-light"
     />
-    {{displayName}}
+    {{@displayName}}
     <RadioButton
-      @value={{type}}
+      @value={{@type}}
       @radioClass="radio"
-      @groupValue={{mountType}}
-      @changed={{onRadioChange}}
-      @name={{groupName}}
-      @radioId={{type}}
-      @disabled={{disabled}}
+      @groupValue={{@mountType}}
+      @changed={{@onRadioChange}}
+      @name={{@groupName}}
+      @radioId={{@type}}
+      @disabled={{@disabled}}
       />
-    <label for={{type.type}}></label>
   </label>
   </div>
 {{/if}}