refactor: 💡 extract helper text into its own component

addons/rose/addon/components/rose/form/helper-text.js

@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../templates/components/rose/form/helper-text';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});

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

@@ -0,0 +1,28 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+import { text, boolean } from '@storybook/addon-knobs';
+
+<Meta title="Rose|Form/HelperText" component="Form/HelperText" />
+
+# Form Helper Text
+
+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}}">
+  Helper text
+</Rose::Form::HelperText>
+```
+
+<Preview>
+  <Story name="Basic Form Errors">{{
+    template: hbs`
+      <Rose::Form::HelperText>
+        Helper text
+      </Rose::Form::HelperText>
+    `,
+    context: {},
+  }}</Story>
+</Preview>

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

@@ -0,0 +1,6 @@
+<span
+  class="rose-form-helper-text"
+  ...attributes
+>
+  {{yield}}
+</span>

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

@@ -3,11 +3,9 @@
   <Rose::Form::Label for={{this.id}}>{{@label}}</Rose::Form::Label>
 
   {{#if @helperText}}
-    <span
-      class="rose-form-helper-text"
-      id="helper-text-{{this.id}}">
+    <Rose::Form::HelperText id="helper-text-{{this.id}}">
       {{@helperText}}
-    </span>
+    </Rose::Form::HelperText>
   {{/if}}
 
   <Input

addons/rose/addon/templates/components/rose/form/select.hbs

@@ -3,11 +3,9 @@
   <Rose::Form::Label for={{this.id}}>{{@label}}</Rose::Form::Label>
 
   {{#if @helperText}}
-    <span
-      class="rose-form-helper-text"
-      id="helper-text-{{this.id}}">
+    <Rose::Form::HelperText id="helper-text-{{this.id}}">
       {{@helperText}}
-    </span>
+    </Rose::Form::HelperText>
   {{/if}}
 
   {{yield (hash

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

@@ -3,11 +3,9 @@
   <Rose::Form::Label for={{this.id}}>{{@label}}</Rose::Form::Label>
 
   {{#if @helperText}}
-    <span
-      class="rose-form-helper-text"
-      id="helper-text-{{this.id}}">
+    <Rose::Form::HelperText id="helper-text-{{this.id}}">
       {{@helperText}}
-    </span>
+    </Rose::Form::HelperText>
   {{/if}}
 
   <Textarea

addons/rose/app/components/rose/form/helper-text.js

@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/form/helper-text';

addons/rose/tests/integration/components/rose/form/helper-text-test.js

@@ -0,0 +1,22 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/form/helper-text', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    assert.expect(2);
+    await render(hbs`
+      <Rose::Form::HelperText>
+        Helper text
+      </Rose::Form::HelperText>
+    `);
+    assert.ok(find('.rose-form-helper-text'));
+    assert.equal(
+      find('.rose-form-helper-text').textContent.trim(),
+      'Helper text'
+    );
+  });
+});