From 95c2f4a74d6678b2be55a50cf90594481efabe9b Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Tue, 11 Jan 2022 14:24:22 -0800
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20add=20support=20for=20he?=
 =?UTF-8?q?lper=20text=20to=20radio=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/rose/form/radio/radio/index.hbs     | 14 +++++++-------
 .../rose/form/radio/radio/index.stories.mdx        |  5 +++++
 .../addon/styles/rose/components/form/_radio.scss  | 11 +++++++++--
 3 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/addons/rose/addon/components/rose/form/radio/radio/index.hbs b/addons/rose/addon/components/rose/form/radio/radio/index.hbs
index ce2dc5d9a..e60c9ea0d 100644
--- a/addons/rose/addon/components/rose/form/radio/radio/index.hbs
+++ b/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}}
diff --git a/addons/rose/addon/components/rose/form/radio/radio/index.stories.mdx b/addons/rose/addon/components/rose/form/radio/radio/index.stories.mdx
index 01941dd68..613952aff 100644
--- a/addons/rose/addon/components/rose/form/radio/radio/index.stories.mdx
+++ b/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',
diff --git a/addons/rose/addon/styles/rose/components/form/_radio.scss b/addons/rose/addon/styles/rose/components/form/_radio.scss
index 3c94ac816..f29cc27e8 100644
--- a/addons/rose/addon/styles/rose/components/form/_radio.scss
+++ b/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;