From e3f7f5cebbb93822a3be6998d57d57cebcc9efe9 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Thu, 6 Aug 2020 18:00:16 -0400
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20add=20support=20for?=
 =?UTF-8?q?=20fully=20contextual=20input=20field?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/rose/form/input.stories.mdx    | 39 ++++++++++
 .../templates/components/rose/form/input.hbs  | 71 +++++++++++++------
 .../components/rose/form/input/input.hbs      |  2 +-
 .../templates/components/rose/form/select.hbs |  3 +-
 .../components/rose/form/textarea.hbs         |  2 +-
 .../rose/form/textarea/textarea.hbs           |  2 +-
 .../components/rose/form/input-test.js        | 19 +++++
 7 files changed, 110 insertions(+), 28 deletions(-)

diff --git a/addons/rose/addon/components/rose/form/input.stories.mdx b/addons/rose/addon/components/rose/form/input.stories.mdx
index 7843c4cfd..041507976 100644
--- a/addons/rose/addon/components/rose/form/input.stories.mdx
+++ b/addons/rose/addon/components/rose/form/input.stories.mdx
@@ -22,6 +22,24 @@ Renders a simple form input.
 />
 ```
 
+Or a fully contextual component without a wrapper, for maximum flexibility.
+
+```htmlbars
+<Rose::Form::Input
+  @contextual={{true}}
+  @type="email"
+  @name="email"
+  @value="info@example.com"
+  @label="Email"
+  @helperText="Enter your email"
+  @error={{false}}
+  @disabled={{false}}
+  readonly={{false}}
+>
+
+</Rose::Form::Input>
+```
+
 <Preview>
   <Story name="Basic Field">{{
     template: hbs`
@@ -94,3 +112,24 @@ Renders a simple form input.
     }
   }}</Story>
 </Preview>
+
+<Preview>
+  <Story name="Fully Contextual Input">{{
+    template: hbs`
+      <Rose::Form::Input @value="Text" @error={{true}} @contextual={{true}} as |field|>
+        <hr />
+        <field.label>Label</field.label>
+        <hr />
+        <field.helperText>Help</field.helperText>
+        <hr />
+        <field.field />
+        <hr />
+        <field.errors as |errors|>
+          <errors.message>An error occurred.</errors.message>
+        </field.errors>
+        <hr />
+      </Rose::Form::Input>
+    `,
+    context: {},
+  }}</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 d232bf07b..9bf8003e3 100644
--- a/addons/rose/addon/templates/components/rose/form/input.hbs
+++ b/addons/rose/addon/templates/components/rose/form/input.hbs
@@ -1,29 +1,54 @@
-<div class="rose-form-input">
-
-  <Rose::Form::Label @for={{this.id}} @error={{@error}}>
-    {{@label}}
-  </Rose::Form::Label>
-
-  {{#if @helperText}}
-    <Rose::Form::HelperText @id="helper-text-{{this.id}}" @error={{@error}}>
-      {{@helperText}}
-    </Rose::Form::HelperText>
-  {{/if}}
-
-  <Rose::Form::Input::Input
-    ...attributes
-    class="{{if @error "error"}}"
-    @id={{this.id}}
-    @name={{@name}}
-    @value={{@value}}
-    @type={{@type}}
-    @disabled={{@disabled}}
-    @aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}} {{if @error (concat 'errors-' this.id)}}" />
-
+{{#if @contextual}}
   {{yield (hash
+    label=(component 'rose/form/label'
+      for=this.id
+      error=@error
+    )
+    helperText=(component 'rose/form/helper-text'
+      id=(concat 'helper-text-' this.id)
+      error=@error
+    )
+    field=(component 'rose/form/input/input'
+      id=this.id
+      name=@name
+      value=@value
+      type=@type
+      disabled=@disabled
+      error=@error
+      aria-describedby=(concat (if @helperText (concat 'helper-text-' this.id)) (if @error (concat ' errors-' this.id)))
+    )
     errors=(component 'rose/form/errors'
       id=(concat 'errors-' this.id)
     )
   )}}
+{{else}}
+  <div class="rose-form-input">
 
-</div>
+    <Rose::Form::Label @for={{this.id}} @error={{@error}}>
+      {{@label}}
+    </Rose::Form::Label>
+
+    {{#if @helperText}}
+      <Rose::Form::HelperText @id="helper-text-{{this.id}}" @error={{@error}}>
+        {{@helperText}}
+      </Rose::Form::HelperText>
+    {{/if}}
+
+    <Rose::Form::Input::Input
+      ...attributes
+      @id={{this.id}}
+      @name={{@name}}
+      @value={{@value}}
+      @type={{@type}}
+      @disabled={{@disabled}}
+      @error={{@error}}
+      @aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}} {{if @error (concat 'errors-' this.id)}}" />
+
+    {{yield (hash
+      errors=(component 'rose/form/errors'
+        id=(concat 'errors-' this.id)
+      )
+    )}}
+
+  </div>
+{{/if}}
diff --git a/addons/rose/addon/templates/components/rose/form/input/input.hbs b/addons/rose/addon/templates/components/rose/form/input/input.hbs
index c7153718c..95e81a114 100644
--- a/addons/rose/addon/templates/components/rose/form/input/input.hbs
+++ b/addons/rose/addon/templates/components/rose/form/input/input.hbs
@@ -1,6 +1,6 @@
 <Input
   ...attributes
-  class="rose-form-input-field"
+  class="rose-form-input-field{{if @error " error"}}"
   id={{@id}}
   disabled={{@disabled}}
   name={{@name}}
diff --git a/addons/rose/addon/templates/components/rose/form/select.hbs b/addons/rose/addon/templates/components/rose/form/select.hbs
index de2cf00bf..7210298ec 100644
--- a/addons/rose/addon/templates/components/rose/form/select.hbs
+++ b/addons/rose/addon/templates/components/rose/form/select.hbs
@@ -14,10 +14,9 @@
     field=(component 'rose/form/select/select'
       id=this.id
       name=@name
-      disabled=@disabled
       value=@value
       onChange=@onChange
-      helperText=@helperText
+      disabled=@disabled
       error=@error
       aria-describedby=(concat (if @helperText (concat 'helper-text-' this.id)) (if @error (concat ' errors-' this.id)))
     )
diff --git a/addons/rose/addon/templates/components/rose/form/textarea.hbs b/addons/rose/addon/templates/components/rose/form/textarea.hbs
index 7ab08489e..f9dd29891 100644
--- a/addons/rose/addon/templates/components/rose/form/textarea.hbs
+++ b/addons/rose/addon/templates/components/rose/form/textarea.hbs
@@ -12,11 +12,11 @@
 
   <Rose::Form::Textarea::Textarea
     ...attributes
-    class="{{if @error "error"}}"
     @id={{this.id}}
     @name={{@name}}
     @value={{@value}}
     @disabled={{@disabled}}
+    @error={{@error}}
     @aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}} {{if @error (concat 'errors-' this.id)}}" />
 
   {{yield (hash
diff --git a/addons/rose/addon/templates/components/rose/form/textarea/textarea.hbs b/addons/rose/addon/templates/components/rose/form/textarea/textarea.hbs
index dba3196d5..85add1b87 100644
--- a/addons/rose/addon/templates/components/rose/form/textarea/textarea.hbs
+++ b/addons/rose/addon/templates/components/rose/form/textarea/textarea.hbs
@@ -1,6 +1,6 @@
 <Textarea
   ...attributes
-  class="rose-form-input-field"
+  class="rose-form-input-field{{if @error " error"}}"
   id={{@id}}
   name={{@name}}
   disabled={{@disabled}}
diff --git a/addons/rose/tests/integration/components/rose/form/input-test.js b/addons/rose/tests/integration/components/rose/form/input-test.js
index c98826da5..edea0f7aa 100644
--- a/addons/rose/tests/integration/components/rose/form/input-test.js
+++ b/addons/rose/tests/integration/components/rose/form/input-test.js
@@ -67,4 +67,23 @@ module('Integration | Component | rose/form/input', function (hooks) {
     await render(hbs`<Rose::Form::Input @error={{true}} />`);
     assert.ok(await find('.error'));
   });
+
+  test('it supports a fully contextual usage', async function (assert) {
+    assert.expect(5);
+    await render(hbs`
+      <Rose::Form::Input @value="Text" @error={{true}} @contextual={{true}} as |field|>
+        <field.label>Label</field.label>
+        <field.helperText>Help</field.helperText>
+        <field.field />
+        <field.errors as |errors|>
+          <errors.message>An error occurred.</errors.message>
+        </field.errors>
+      </Rose::Form::Input>
+    `);
+    assert.notOk(find('.rose-form-input'), 'The form field wrapper element is not present in contextual mode');
+    assert.ok(find('.rose-form-label.error'));
+    assert.ok(find('.rose-form-helper-text.error'));
+    assert.ok(find('.rose-form-input-field.error'));
+    assert.ok(find('.rose-form-error-message'));
+  });
 });