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

---
 .../rose/addon/components/rose/form/label.js  |  7 +++++
 .../components/rose/form/label.stories.mdx    | 27 +++++++++++++++++++
 .../templates/components/rose/form/input.hbs  |  4 +--
 .../templates/components/rose/form/label.hbs  |  3 +++
 .../templates/components/rose/form/select.hbs |  4 +--
 .../components/rose/form/textarea.hbs         |  4 +--
 addons/rose/app/components/rose/form/label.js |  1 +
 .../components/rose/form/label-test.js        | 22 +++++++++++++++
 8 files changed, 63 insertions(+), 9 deletions(-)
 create mode 100644 addons/rose/addon/components/rose/form/label.js
 create mode 100644 addons/rose/addon/components/rose/form/label.stories.mdx
 create mode 100644 addons/rose/addon/templates/components/rose/form/label.hbs
 create mode 100644 addons/rose/app/components/rose/form/label.js
 create mode 100644 addons/rose/tests/integration/components/rose/form/label-test.js

diff --git a/addons/rose/addon/components/rose/form/label.js b/addons/rose/addon/components/rose/form/label.js
new file mode 100644
index 000000000..1d26edc8d
--- /dev/null
+++ b/addons/rose/addon/components/rose/form/label.js
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../templates/components/rose/form/label';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});
diff --git a/addons/rose/addon/components/rose/form/label.stories.mdx b/addons/rose/addon/components/rose/form/label.stories.mdx
new file mode 100644
index 000000000..fd263cedd
--- /dev/null
+++ b/addons/rose/addon/components/rose/form/label.stories.mdx
@@ -0,0 +1,27 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+import { text, boolean, select } from '@storybook/addon-knobs';
+
+<Meta title="Rose|Form/Label" component="Form/Label" />
+
+# Form Label
+
+Renders a simple form label.  This componet is used and yielded by form fields
+and should not be used directly.
+
+```htmlbars
+<Rose::Form::Label for="my-field-id">
+  Form Label
+</Rose::Form::Label>
+```
+
+<Preview>
+  <Story name="Form Label">{{
+    template: hbs`
+      <Rose::Form::Label for="my-field-id">
+        Form Label
+      </Rose::Form::Label>
+    `
+  }}</Story>
+</Preview>
diff --git a/addons/rose/addon/templates/components/rose/form/input.hbs b/addons/rose/addon/templates/components/rose/form/input.hbs
index b1d7e4183..1a6061750 100644
--- a/addons/rose/addon/templates/components/rose/form/input.hbs
+++ b/addons/rose/addon/templates/components/rose/form/input.hbs
@@ -1,8 +1,6 @@
 <div class="rose-form-input{{if @error " error"}}">
 
-  <label class="rose-form-label" for={{this.id}}>
-    {{@label}}
-  </label>
+  <Rose::Form::Label for={{this.id}}>{{@label}}</Rose::Form::Label>
 
   {{#if @helperText}}
     <span
diff --git a/addons/rose/addon/templates/components/rose/form/label.hbs b/addons/rose/addon/templates/components/rose/form/label.hbs
new file mode 100644
index 000000000..16686ef2e
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/form/label.hbs
@@ -0,0 +1,3 @@
+<label class="rose-form-label" ...attributes>
+  {{yield}}
+</label>
diff --git a/addons/rose/addon/templates/components/rose/form/select.hbs b/addons/rose/addon/templates/components/rose/form/select.hbs
index e9a14539d..f2c5fa91a 100644
--- a/addons/rose/addon/templates/components/rose/form/select.hbs
+++ b/addons/rose/addon/templates/components/rose/form/select.hbs
@@ -1,8 +1,6 @@
 <div class="rose-form-select{{if @error " error"}}">
 
-  <label class="rose-form-label" for={{this.id}}>
-    {{@label}}
-  </label>
+  <Rose::Form::Label for={{this.id}}>{{@label}}</Rose::Form::Label>
 
   {{#if @helperText}}
     <span
diff --git a/addons/rose/addon/templates/components/rose/form/textarea.hbs b/addons/rose/addon/templates/components/rose/form/textarea.hbs
index 27a3c4ea0..96a6d8ae0 100644
--- a/addons/rose/addon/templates/components/rose/form/textarea.hbs
+++ b/addons/rose/addon/templates/components/rose/form/textarea.hbs
@@ -1,8 +1,6 @@
 <div class="rose-form-input{{if @error " error"}}">
 
-  <label class="rose-form-label" for={{this.id}}>
-    {{@label}}
-  </label>
+  <Rose::Form::Label for={{this.id}}>{{@label}}</Rose::Form::Label>
 
   {{#if @helperText}}
     <span
diff --git a/addons/rose/app/components/rose/form/label.js b/addons/rose/app/components/rose/form/label.js
new file mode 100644
index 000000000..4e045a2e5
--- /dev/null
+++ b/addons/rose/app/components/rose/form/label.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/form/label';
\ No newline at end of file
diff --git a/addons/rose/tests/integration/components/rose/form/label-test.js b/addons/rose/tests/integration/components/rose/form/label-test.js
new file mode 100644
index 000000000..3a5298fb6
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/form/label-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/label', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    assert.expect(2);
+    await render(hbs`
+      <Rose::Form::Label>
+        Form Label
+      <//Rose::Form::Label>
+    `);
+    assert.ok(find('.rose-form-label'));
+    assert.equal(
+      find('.rose-form-label').textContent.trim(),
+      'Form Label'
+    );
+  });
+});