From da9587e43d72b9e45b82672a0d9bc3de4259c49e Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Wed, 5 Aug 2020 14:23:44 -0400
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20extract=20helper=20t?=
 =?UTF-8?q?ext=20into=20its=20own=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../addon/components/rose/form/helper-text.js |  7 +++++
 .../rose/form/helper-text.stories.mdx         | 28 +++++++++++++++++++
 .../components/rose/form/helper-text.hbs      |  6 ++++
 .../templates/components/rose/form/input.hbs  |  6 ++--
 .../templates/components/rose/form/select.hbs |  6 ++--
 .../components/rose/form/textarea.hbs         |  6 ++--
 .../app/components/rose/form/helper-text.js   |  1 +
 .../components/rose/form/helper-text-test.js  | 22 +++++++++++++++
 8 files changed, 70 insertions(+), 12 deletions(-)
 create mode 100644 addons/rose/addon/components/rose/form/helper-text.js
 create mode 100644 addons/rose/addon/components/rose/form/helper-text.stories.mdx
 create mode 100644 addons/rose/addon/templates/components/rose/form/helper-text.hbs
 create mode 100644 addons/rose/app/components/rose/form/helper-text.js
 create mode 100644 addons/rose/tests/integration/components/rose/form/helper-text-test.js

diff --git a/addons/rose/addon/components/rose/form/helper-text.js b/addons/rose/addon/components/rose/form/helper-text.js
new file mode 100644
index 000000000..399088c44
--- /dev/null
+++ b/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: '',
+});
diff --git a/addons/rose/addon/components/rose/form/helper-text.stories.mdx b/addons/rose/addon/components/rose/form/helper-text.stories.mdx
new file mode 100644
index 000000000..ce556bcc5
--- /dev/null
+++ b/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>
diff --git a/addons/rose/addon/templates/components/rose/form/helper-text.hbs b/addons/rose/addon/templates/components/rose/form/helper-text.hbs
new file mode 100644
index 000000000..62f9197ee
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/form/helper-text.hbs
@@ -0,0 +1,6 @@
+<span
+  class="rose-form-helper-text"
+  ...attributes
+>
+  {{yield}}
+</span>
diff --git a/addons/rose/addon/templates/components/rose/form/input.hbs b/addons/rose/addon/templates/components/rose/form/input.hbs
index 1a6061750..571b435b0 100644
--- a/addons/rose/addon/templates/components/rose/form/input.hbs
+++ b/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
diff --git a/addons/rose/addon/templates/components/rose/form/select.hbs b/addons/rose/addon/templates/components/rose/form/select.hbs
index f2c5fa91a..3da24a792 100644
--- a/addons/rose/addon/templates/components/rose/form/select.hbs
+++ b/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
diff --git a/addons/rose/addon/templates/components/rose/form/textarea.hbs b/addons/rose/addon/templates/components/rose/form/textarea.hbs
index 96a6d8ae0..7786ace3c 100644
--- a/addons/rose/addon/templates/components/rose/form/textarea.hbs
+++ b/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
diff --git a/addons/rose/app/components/rose/form/helper-text.js b/addons/rose/app/components/rose/form/helper-text.js
new file mode 100644
index 000000000..28285ad50
--- /dev/null
+++ b/addons/rose/app/components/rose/form/helper-text.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/form/helper-text';
\ No newline at end of file
diff --git a/addons/rose/tests/integration/components/rose/form/helper-text-test.js b/addons/rose/tests/integration/components/rose/form/helper-text-test.js
new file mode 100644
index 000000000..277b6f2b6
--- /dev/null
+++ b/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'
+    );
+  });
+});