feat: 🎸 add support for helper text to radio component

addons/rose/addon/components/rose/form/radio/radio/index.hbs

@@ -12,12 +12,8 @@
     @disabled={{@disabled}}
     @changed={{@changed}} />
 
-  <label class="rose-form-radio-label" for={{this.id}}>
-     {{#if @helperText}}
-      <Rose::Form::HelperText @id="helper-text-{{this.id}}" @error={{@error}} @link={{@link}} @linkText={{@linkText}}>
-        {{@helperText}}
-      </Rose::Form::HelperText>
-    {{/if}}
+  <label class="rose-form-radio-label{{if @helperText " helperText"}}" for={{this.id}}>
+
     {{#if @icon}}
       <Rose::Icon
         @name={{@icon}}
@@ -26,7 +22,11 @@
     {{/if}}
 
     {{@label}}
-
+     {{#if @helperText}}
+      <Rose::Form::HelperText @id="helper-text-{{this.id}}" @error={{@error}} @link={{@link}} @linkText={{@linkText}}>
+        {{@helperText}}
+      </Rose::Form::HelperText>
+    {{/if}}
   </label>
 
   {{yield}}

addons/rose/addon/components/rose/form/radio/radio/index.stories.mdx

@@ -65,6 +65,7 @@ Renders a form radiofield.
   @disabled={{false}}
   @changed={{fn}}
   @inline={{true}}
+  @helperText={{helperText}}
   />
 ```
 
@@ -79,6 +80,7 @@ Renders a form radiofield.
         @disabled={{disabled}}
         @icon={{icon}}
         @inline={{inline}}
+        @helperText={{helperText}}
         />
       <Rose::Form::Radio::Radio
         @label='Radiofield2'
@@ -88,6 +90,7 @@ Renders a form radiofield.
         @disabled={{disabled}}
         @icon={{icon}}
         @inline={{inline}}
+        @helperText={{helperText}}
         />
       <Rose::Form::Radio::Radio
         @label='Radiofield3'
@@ -97,6 +100,7 @@ Renders a form radiofield.
         @disabled={{disabled}}
         @icon={{icon}}
         @inline={{inline}}
+        @helperText={{helperText}}
         />
     `,
     context: {
@@ -106,6 +110,7 @@ Renders a form radiofield.
         'selectedValue',
         'value and selectedValue must match to select radiofield'
       ),
+      helperText: text('helperText', 'Helper text'),
       disabled: boolean('disabled', false),
       icon: select(
         'icon',

addons/rose/addon/styles/rose/components/form/_radio.scss

@@ -1,6 +1,6 @@
 @use '../../variables/sizing';
 @use '../../utilities/type';
-
+@use 'sass:math';
 $radio-svg: (
   'default':
     "<svg viewBox='0 0 24 24' fill='%23aaaaaa' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
@@ -32,7 +32,14 @@ $data-svg-prefix: 'data:image/svg+xml;utf-8,';
   position: relative;
   margin-bottom: sizing.rems(xs);
   color: var(--ui-gray);
-
+  .rose-form-radio-label.helperText {
+    display: flex;
+    .rose-form-helper-text {
+      margin-left: sizing.rems(xxs);
+      $lineHeight: math.div(20, 14);
+      line-height: $lineHeight;
+    }
+  }
   .rose-form-radio-label {
     @include type.type(s, semibold);
     color: currentColor;