Merge pull request #897 from hashicorp/feat-helpr-txt-support-inp-txtarea

Feat: Add support for helper links to inputs, and textareas

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

@@ -29,7 +29,7 @@
     </Rose::Form::Label>
 
     {{#if @helperText}}
-      <Rose::Form::HelperText @id="helper-text-{{this.id}}" @error={{@error}}>
+      <Rose::Form::HelperText @id="helper-text-{{this.id}}" @error={{@error}} @link={{@link}} @linkText={{@linkText}}>
         {{@helperText}}
       </Rose::Form::HelperText>
     {{/if}}

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

@@ -16,6 +16,8 @@ Renders a simple form input.
   @value="info@example.com"
   @label="Email"
   @helperText="Enter your email"
+  @link='www.example.net'
+  @linkText='sample link text'
   @error={{false}}
   @disabled={{false}}
   @icon='flight-icons/svg/search-16'
@@ -33,6 +35,8 @@ Or a fully contextual component without a wrapper, for maximum flexibility.
   @value="info@example.com"
   @label="Email"
   @helperText="Enter your email"
+  @link='www.example.net'
+  @linkText='sample link text'
   @error={{false}}
   @disabled={{false}}
   readonly={{false}}
@@ -50,6 +54,8 @@ Or a fully contextual component without a wrapper, for maximum flexibility.
         @value={{value}}
         @label={{label}}
         @helperText={{helperText}}
+        @link={{link}}
+        @linkText={{linkText}}
         @error={{false}}
         @disabled={{disabled}}
         readonly={{read-only}}
@@ -70,6 +76,8 @@ Or a fully contextual component without a wrapper, for maximum flexibility.
       value: text('value', 'Value'),
       label: text('label', 'Label'),
       helperText: text('helperText', 'Helper text'),
+      link: text('link', 'link goes here'),
+      linkText: text('linkText', 'link text'),
       disabled: boolean('disabled', false),
       'read-only': boolean('readonly', false),
       icon: select(
@@ -93,6 +101,8 @@ Or a fully contextual component without a wrapper, for maximum flexibility.
         @value={{value}}
         @label={{label}}
         @helperText={{helperText}}
+        @link={{link}}
+        @linkText={{linkText}}
         @error={{true}}
         @disabled={{disabled}}
         readonly={{read-only}}
@@ -117,6 +127,8 @@ Or a fully contextual component without a wrapper, for maximum flexibility.
       value: text('value', 'Value'),
       label: text('label', 'Label'),
       helperText: text('helperText', 'Helper text'),
+      link: text('link', 'link goes here'),
+      linkText: text('linkText', 'link text'),
       disabled: boolean('disabled', false),
       'read-only': boolean('readonly', false),
     }

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

@@ -28,7 +28,7 @@
     </Rose::Form::Label>
 
     {{#if @helperText}}
-      <Rose::Form::HelperText @id="helper-text-{{this.id}}" @error={{@error}}>
+      <Rose::Form::HelperText @id="helper-text-{{this.id}}" @error={{@error}}  @link={{@link}} @linkText={{@linkText}}>
         {{@helperText}}
       </Rose::Form::HelperText>
     {{/if}}

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

@@ -18,6 +18,8 @@ Renders a simple form textarea.
   @error={{false}}
   @disabled={{false}}
   readonly={{false}}
+  @link='www.example.net'
+  @linkText='link text goes here'
 />
 ```
 
@@ -32,12 +34,16 @@ Renders a simple form textarea.
         @error={{false}}
         @disabled={{disabled}}
         readonly={{read-only}}
+        @link='www.example.net'
+        @linkText='link text goes here'
         />
     `,
     context: {
       value: text('value', 'Value'),
       label: text('label', 'Label'),
       helperText: text('helperText', 'Helper text'),
+      link: text('link', 'link'),
+      linkText: text('linkText', 'link text goes here'),
       disabled: boolean('disabled', false),
       'read-only': boolean('readonly', false),
     }