refactor: 💡 form fields should accept @'d attributes

2020-08-05 15:50:21 -04:00
1 parent da9587e43d
commit 19f7ca005a
@@ -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}}
@@ -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>
 ```
@@ -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}}
@@ -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>
    `
@@ -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}}
@@ -4,6 +4,7 @@
    ...attributes
    class="rose-form-checkbox-field"
    id={{this.id}}
+    name={{@name}}
    disabled={{@disabled}}
    @type="checkbox"
    @checked={{if @checked true false}}
@@ -1,5 +1,6 @@
 <span
  class="rose-form-helper-text"
+  id={{@id}}
  ...attributes
 >
  {{yield}}
@@ -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)}}" />
@@ -1,3 +1,3 @@
-<label class="rose-form-label" ...attributes>
+<label class="rose-form-label" for={{@for}} ...attributes>
  {{yield}}
 </label>
@@ -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}}
@@ -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)}}" />
@@ -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"
@@ -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"}}
@@ -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"}}
@@ -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"}}
@@ -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"}}
@@ -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"}}
@@ -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"}} />