feat: 🎸 add helper text support to inp & textarea

addons/rose/addon/components/rose/form/helper-text/index.hbs

@@ -4,5 +4,5 @@
   ...attributes
 >
   {{yield}}
-<a href={{@link}} target='_blank' rel='noreferrer noopener'>{{@linkTxt}}</a>
+<a href={{@link}} target='_blank' rel='noreferrer noopener'>{{@linkText}}</a>
 </span>

addons/rose/addon/components/rose/form/helper-text/index.stories.mdx

@@ -11,7 +11,7 @@ Displays helpful messages related to a form field.  This component is used
 by form fields and should not be used directly.
 
 ```html
-<Rose::Form::HelperText @id="helper-text-{{field.id}}" @link='text link' @linkTxt='text goes here'>
+<Rose::Form::HelperText @id="helper-text-{{field.id}}" @link='text link' @linkText='text goes here'>
   Helper text
 </Rose::Form::HelperText>
 ```
@@ -19,14 +19,14 @@ by form fields and should not be used directly.
 <Preview>
   <Story name="HelperText">{{
     template: hbs`
-      <Rose::Form::HelperText @error={{this.error}} @link={{this.link}} @linkTxt={{this.linkTxt}}>
+      <Rose::Form::HelperText @error={{this.error}} @link={{this.link}} @linkText={{this.linkText}}>
         Helper text
       </Rose::Form::HelperText>
     `,
     context: {
       error: boolean('error', false),
       link: text('link', 'http://www.example.net/'),
-      linkTxt: text('linkTxt', 'link text')
+      linkText: text('linkText', 'link text')
     },
   }}</Story>
 </Preview>

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),
     }

addons/rose/jsconfig.json

@@ -0,0 +1 @@
+{"compilerOptions":{"target":"es6","experimentalDecorators":true},"exclude":["node_modules","bower_components","tmp","vendor",".git","dist"]}