From 19f7ca005a80e520630937e74a12c2dbc4b719fc Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Wed, 5 Aug 2020 15:50:21 -0400
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20form=20fields=20shou?=
 =?UTF-8?q?ld=20accept=20@'d=20attributes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addons/rose/addon/components/rose/form/checkbox.stories.mdx | 6 +++---
 .../rose/addon/components/rose/form/helper-text.stories.mdx | 2 +-
 addons/rose/addon/components/rose/form/input.stories.mdx    | 3 +++
 addons/rose/addon/components/rose/form/label.stories.mdx    | 4 ++--
 addons/rose/addon/components/rose/form/textarea.stories.mdx | 3 +++
 .../rose/addon/templates/components/rose/form/checkbox.hbs  | 1 +
 .../addon/templates/components/rose/form/helper-text.hbs    | 1 +
 addons/rose/addon/templates/components/rose/form/input.hbs  | 5 +++--
 addons/rose/addon/templates/components/rose/form/label.hbs  | 2 +-
 addons/rose/addon/templates/components/rose/form/select.hbs | 4 ++--
 .../rose/addon/templates/components/rose/form/textarea.hbs  | 5 +++--
 addons/rose/tests/integration/components/rose/form-test.js  | 6 +++---
 ui/core/app/components/form/group/index.hbs                 | 4 ++--
 ui/core/app/components/form/host-catalog/index.hbs          | 4 ++--
 ui/core/app/components/form/project/index.hbs               | 4 ++--
 ui/core/app/components/form/role/index.hbs                  | 4 ++--
 ui/core/app/components/form/user/index.hbs                  | 4 ++--
 ui/core/app/templates/scopes/scope/authenticate/method.hbs  | 4 ++--
 18 files changed, 38 insertions(+), 28 deletions(-)

diff --git a/addons/rose/addon/components/rose/form/checkbox.stories.mdx b/addons/rose/addon/components/rose/form/checkbox.stories.mdx
index 95200ce1c..3a15884dc 100644
--- a/addons/rose/addon/components/rose/form/checkbox.stories.mdx
+++ b/addons/rose/addon/components/rose/form/checkbox.stories.mdx
@@ -11,7 +11,7 @@ Renders a form input checkbox.
 
 ```htmlbars
 <Rose::Form::Checkbox
-  name="boolean-value"
+  @name="boolean-value"
   @label="Yes?"
   @checked={{false}}
   @error={{false}}
@@ -23,7 +23,7 @@ Renders a form input checkbox.
   <Story name="Basic Checkbox" height="10rem">{{
     template: hbs`
       <Rose::Form::Checkbox
-        name={{name}}
+        @name={{name}}
         @label={{label}}
         @checked={{checked}}
         @error={{error}}
@@ -44,7 +44,7 @@ Renders a form input checkbox.
   <Story name="Checkbox with errors" height="10rem">{{
     template: hbs`
       <Rose::Form::Checkbox
-        name={{name}}
+        @name={{name}}
         @label={{label}}
         @checked={{checked}}
         @error={{true}}
diff --git a/addons/rose/addon/components/rose/form/helper-text.stories.mdx b/addons/rose/addon/components/rose/form/helper-text.stories.mdx
index ce556bcc5..f22015f8f 100644
--- a/addons/rose/addon/components/rose/form/helper-text.stories.mdx
+++ b/addons/rose/addon/components/rose/form/helper-text.stories.mdx
@@ -11,7 +11,7 @@ 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}}">
+<Rose::Form::HelperText @id="helper-text-{{field.id}}">
   Helper text
 </Rose::Form::HelperText>
 ```
diff --git a/addons/rose/addon/components/rose/form/input.stories.mdx b/addons/rose/addon/components/rose/form/input.stories.mdx
index 48d38020a..7843c4cfd 100644
--- a/addons/rose/addon/components/rose/form/input.stories.mdx
+++ b/addons/rose/addon/components/rose/form/input.stories.mdx
@@ -12,6 +12,7 @@ Renders a simple form input.
 ```htmlbars
 <Rose::Form::Input
   @type="email"
+  @name="email"
   @value="info@example.com"
   @label="Email"
   @helperText="Enter your email"
@@ -26,6 +27,7 @@ Renders a simple form input.
     template: hbs`
       <Rose::Form::Input
         @type={{type}}
+        @name={{type}}
         @value={{value}}
         @label={{label}}
         @helperText={{helperText}}
@@ -59,6 +61,7 @@ Renders a simple form input.
     template: hbs`
       <Rose::Form::Input
         @type={{type}}
+        @name={{type}}
         @value={{value}}
         @label={{label}}
         @helperText={{helperText}}
diff --git a/addons/rose/addon/components/rose/form/label.stories.mdx b/addons/rose/addon/components/rose/form/label.stories.mdx
index fd263cedd..e8b180c02 100644
--- a/addons/rose/addon/components/rose/form/label.stories.mdx
+++ b/addons/rose/addon/components/rose/form/label.stories.mdx
@@ -11,7 +11,7 @@ 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">
+<Rose::Form::Label @for="my-field-id">
   Form Label
 </Rose::Form::Label>
 ```
@@ -19,7 +19,7 @@ and should not be used directly.
 <Preview>
   <Story name="Form Label">{{
     template: hbs`
-      <Rose::Form::Label for="my-field-id">
+      <Rose::Form::Label @for="my-field-id">
         Form Label
       </Rose::Form::Label>
     `
diff --git a/addons/rose/addon/components/rose/form/textarea.stories.mdx b/addons/rose/addon/components/rose/form/textarea.stories.mdx
index 2ddb54819..e1f9aad3b 100644
--- a/addons/rose/addon/components/rose/form/textarea.stories.mdx
+++ b/addons/rose/addon/components/rose/form/textarea.stories.mdx
@@ -11,6 +11,7 @@ Renders a simple form textarea.
 
 ```htmlbars
 <Rose::Form::Textarea
+  @name="field"
   @value="Descriptive content"
   @label="Description"
   @helperText="Enter a description"
@@ -24,6 +25,7 @@ Renders a simple form textarea.
   <Story name="Basic Textarea" height="10rem">{{
     template: hbs`
       <Rose::Form::Textarea
+        @name="field"
         @value={{value}}
         @label={{label}}
         @helperText={{helperText}}
@@ -46,6 +48,7 @@ Renders a simple form textarea.
   <Story name="Textarea with Errors" height="10rem">{{
     template: hbs`
       <Rose::Form::Textarea
+        @name="field"
         @value={{value}}
         @label={{label}}
         @helperText={{helperText}}
diff --git a/addons/rose/addon/templates/components/rose/form/checkbox.hbs b/addons/rose/addon/templates/components/rose/form/checkbox.hbs
index f24ed4478..0984f1bc0 100644
--- a/addons/rose/addon/templates/components/rose/form/checkbox.hbs
+++ b/addons/rose/addon/templates/components/rose/form/checkbox.hbs
@@ -4,6 +4,7 @@
     ...attributes
     class="rose-form-checkbox-field"
     id={{this.id}}
+    name={{@name}}
     disabled={{@disabled}}
     @type="checkbox"
     @checked={{if @checked true false}}
diff --git a/addons/rose/addon/templates/components/rose/form/helper-text.hbs b/addons/rose/addon/templates/components/rose/form/helper-text.hbs
index 62f9197ee..1320ad168 100644
--- a/addons/rose/addon/templates/components/rose/form/helper-text.hbs
+++ b/addons/rose/addon/templates/components/rose/form/helper-text.hbs
@@ -1,5 +1,6 @@
 <span
   class="rose-form-helper-text"
+  id={{@id}}
   ...attributes
 >
   {{yield}}
diff --git a/addons/rose/addon/templates/components/rose/form/input.hbs b/addons/rose/addon/templates/components/rose/form/input.hbs
index 571b435b0..ec5474b03 100644
--- a/addons/rose/addon/templates/components/rose/form/input.hbs
+++ b/addons/rose/addon/templates/components/rose/form/input.hbs
@@ -1,9 +1,9 @@
 <div class="rose-form-input{{if @error " error"}}">
 
-  <Rose::Form::Label for={{this.id}}>{{@label}}</Rose::Form::Label>
+  <Rose::Form::Label @for={{this.id}}>{{@label}}</Rose::Form::Label>
 
   {{#if @helperText}}
-    <Rose::Form::HelperText id="helper-text-{{this.id}}">
+    <Rose::Form::HelperText @id="helper-text-{{this.id}}">
       {{@helperText}}
     </Rose::Form::HelperText>
   {{/if}}
@@ -13,6 +13,7 @@
     class="rose-form-input-field"
     id={{this.id}}
     disabled={{@disabled}}
+    name={{@name}}
     @type={{@type}}
     @value={{@value}}
     aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}} {{if @error (concat 'errors-' this.id)}}" />
diff --git a/addons/rose/addon/templates/components/rose/form/label.hbs b/addons/rose/addon/templates/components/rose/form/label.hbs
index 16686ef2e..0e4c55e93 100644
--- a/addons/rose/addon/templates/components/rose/form/label.hbs
+++ b/addons/rose/addon/templates/components/rose/form/label.hbs
@@ -1,3 +1,3 @@
-<label class="rose-form-label" ...attributes>
+<label class="rose-form-label" for={{@for}} ...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 3da24a792..4d04a5753 100644
--- a/addons/rose/addon/templates/components/rose/form/select.hbs
+++ b/addons/rose/addon/templates/components/rose/form/select.hbs
@@ -1,9 +1,9 @@
 <div class="rose-form-select{{if @error " error"}}">
 
-  <Rose::Form::Label for={{this.id}}>{{@label}}</Rose::Form::Label>
+  <Rose::Form::Label @for={{this.id}}>{{@label}}</Rose::Form::Label>
 
   {{#if @helperText}}
-    <Rose::Form::HelperText id="helper-text-{{this.id}}">
+    <Rose::Form::HelperText @id="helper-text-{{this.id}}">
       {{@helperText}}
     </Rose::Form::HelperText>
   {{/if}}
diff --git a/addons/rose/addon/templates/components/rose/form/textarea.hbs b/addons/rose/addon/templates/components/rose/form/textarea.hbs
index 7786ace3c..fc5b406d5 100644
--- a/addons/rose/addon/templates/components/rose/form/textarea.hbs
+++ b/addons/rose/addon/templates/components/rose/form/textarea.hbs
@@ -1,9 +1,9 @@
 <div class="rose-form-input{{if @error " error"}}">
 
-  <Rose::Form::Label for={{this.id}}>{{@label}}</Rose::Form::Label>
+  <Rose::Form::Label @for={{this.id}}>{{@label}}</Rose::Form::Label>
 
   {{#if @helperText}}
-    <Rose::Form::HelperText id="helper-text-{{this.id}}">
+    <Rose::Form::HelperText @id="helper-text-{{this.id}}">
       {{@helperText}}
     </Rose::Form::HelperText>
   {{/if}}
@@ -12,6 +12,7 @@
     ...attributes
     class="rose-form-input-field"
     id={{this.id}}
+    name={{@name}}
     disabled={{@disabled}}
     @value={{@value}}
     aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}} {{if @error (concat 'errors-' this.id)}}" />
diff --git a/addons/rose/tests/integration/components/rose/form-test.js b/addons/rose/tests/integration/components/rose/form-test.js
index 3469cc830..f8d682fdd 100644
--- a/addons/rose/tests/integration/components/rose/form-test.js
+++ b/addons/rose/tests/integration/components/rose/form-test.js
@@ -39,8 +39,8 @@ module('Integration | Component | rose/form', function (hooks) {
         @disabled={{false}}
         as |form|
       >
-        <form.input @label="Input" name="input-field" />
-        <form.textarea @label="Textarea" name="textarea-field" />
+        <form.input @label="Input" @name="input-field" />
+        <form.textarea @label="Textarea" @name="textarea-field" />
         <form.select
           @label="Select"
           @name="select-field"
@@ -49,7 +49,7 @@ module('Integration | Component | rose/form', function (hooks) {
         >
           <field.field />
         </form.select>
-        <form.checkbox @label="Checkbox" name="checkbox-field" />
+        <form.checkbox @label="Checkbox" @name="checkbox-field" />
         <form.radioGroup @name="radio-group-field" @selectedValue="green" as |radioGroup|>
           <radioGroup.radio
             @label="Red"
diff --git a/ui/core/app/components/form/group/index.hbs b/ui/core/app/components/form/group/index.hbs
index e8d100b60..45adc26d0 100644
--- a/ui/core/app/components/form/group/index.hbs
+++ b/ui/core/app/components/form/group/index.hbs
@@ -7,7 +7,7 @@
 >
 
   <form.input
-    name="name"
+    @name="name"
     @type="name"
     @value={{@model.name}}
     @label={{t "form.label.name"}}
@@ -24,7 +24,7 @@
   </form.input>
 
   <form.textarea
-    name="description"
+    @name="description"
     @type="description"
     @value={{@model.description}}
     @label={{t "form.label.description"}}
diff --git a/ui/core/app/components/form/host-catalog/index.hbs b/ui/core/app/components/form/host-catalog/index.hbs
index e8d100b60..45adc26d0 100644
--- a/ui/core/app/components/form/host-catalog/index.hbs
+++ b/ui/core/app/components/form/host-catalog/index.hbs
@@ -7,7 +7,7 @@
 >
 
   <form.input
-    name="name"
+    @name="name"
     @type="name"
     @value={{@model.name}}
     @label={{t "form.label.name"}}
@@ -24,7 +24,7 @@
   </form.input>
 
   <form.textarea
-    name="description"
+    @name="description"
     @type="description"
     @value={{@model.description}}
     @label={{t "form.label.description"}}
diff --git a/ui/core/app/components/form/project/index.hbs b/ui/core/app/components/form/project/index.hbs
index e8d100b60..45adc26d0 100644
--- a/ui/core/app/components/form/project/index.hbs
+++ b/ui/core/app/components/form/project/index.hbs
@@ -7,7 +7,7 @@
 >
 
   <form.input
-    name="name"
+    @name="name"
     @type="name"
     @value={{@model.name}}
     @label={{t "form.label.name"}}
@@ -24,7 +24,7 @@
   </form.input>
 
   <form.textarea
-    name="description"
+    @name="description"
     @type="description"
     @value={{@model.description}}
     @label={{t "form.label.description"}}
diff --git a/ui/core/app/components/form/role/index.hbs b/ui/core/app/components/form/role/index.hbs
index e8d100b60..45adc26d0 100644
--- a/ui/core/app/components/form/role/index.hbs
+++ b/ui/core/app/components/form/role/index.hbs
@@ -7,7 +7,7 @@
 >
 
   <form.input
-    name="name"
+    @name="name"
     @type="name"
     @value={{@model.name}}
     @label={{t "form.label.name"}}
@@ -24,7 +24,7 @@
   </form.input>
 
   <form.textarea
-    name="description"
+    @name="description"
     @type="description"
     @value={{@model.description}}
     @label={{t "form.label.description"}}
diff --git a/ui/core/app/components/form/user/index.hbs b/ui/core/app/components/form/user/index.hbs
index e8d100b60..45adc26d0 100644
--- a/ui/core/app/components/form/user/index.hbs
+++ b/ui/core/app/components/form/user/index.hbs
@@ -7,7 +7,7 @@
 >
 
   <form.input
-    name="name"
+    @name="name"
     @type="name"
     @value={{@model.name}}
     @label={{t "form.label.name"}}
@@ -24,7 +24,7 @@
   </form.input>
 
   <form.textarea
-    name="description"
+    @name="description"
     @type="description"
     @value={{@model.description}}
     @label={{t "form.label.description"}}
diff --git a/ui/core/app/templates/scopes/scope/authenticate/method.hbs b/ui/core/app/templates/scopes/scope/authenticate/method.hbs
index 60057d773..014adf65b 100644
--- a/ui/core/app/templates/scopes/scope/authenticate/method.hbs
+++ b/ui/core/app/templates/scopes/scope/authenticate/method.hbs
@@ -8,13 +8,13 @@
 >
 
   <form.input
-    name="identification"
+    @name="identification"
     @type="text"
     @value={{this.identification}}
     @label={{t "form.label.identification"}} />
 
   <form.input
-    name="password"
+    @name="password"
     @type="password"
     @value={{this.password}}
     @label={{t "form.label.password"}} />