refactor: 💡 extract form label into its own component

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: '',
+});

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>

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

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

@@ -0,0 +1,3 @@
+<label class="rose-form-label" ...attributes>
+  {{yield}}
+</label>

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

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

addons/rose/app/components/rose/form/label.js

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

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'
+    );
+  });
+});