chore(docs): extend example form with date and checkbox group

adfinis · Sep 20, 2022 · 540fe74 · 540fe74
1 parent 899540a
commit 540fe74
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 37 deletions.
diff --git a/tests/dummy/app/components/favorite-colors.hbs b/tests/dummy/app/components/favorite-colors.hbs
@@ -1,23 +1,28 @@
 {{! BEGIN-SNIPPET favorite-colors.hbs }}
-<@labelComponent />
+<div class="form-group">
+  <@labelComponent />
 
-<div class="{{if @isValid 'is-valid'}} {{if @isInvalid 'is-invalid'}}">
-  {{#if @value}}
-    {{@value.name}}
-    <button
-      class="btn btn-secondary"
-      type="button"
-      {{on "click" this.clearSelection}}
-    >Clear Selection</button>
-    <br />
-    <br />
-  {{/if}}
+  <div class="{{if @isValid 'is-valid'}} {{if @isInvalid 'is-invalid'}}">
+    {{#if @value}}
+      {{@value.name}}
+      <button
+        class="btn btn-secondary"
+        type="button"
+        {{on "click" this.clearSelection}}
+      >Clear Selection</button>
+      <br />
+      <br />
+    {{/if}}
 
-  {{#each @colors as |color|}}
-    <ColorComponent @color={{color}} @colorSelected={{this.onColorSelected}} />
-  {{/each}}
-</div>
+    {{#each @colors as |color|}}
+      <ColorComponent
+        @color={{color}}
+        @colorSelected={{this.onColorSelected}}
+      />
+    {{/each}}
+  </div>
 
-<@hintComponent />
-<@errorComponent />
+  <@hintComponent />
+  <@errorComponent />
+</div>
 {{! END-SNIPPET }}
diff --git a/tests/dummy/app/controllers/index.js b/tests/dummy/app/controllers/index.js
@@ -19,23 +19,28 @@ export default class IndexController extends Controller {
     return ["United States", "United Kingdom", "Switzerland", "Other"];
   }
 
-  get genders() {
+  get titles() {
     return [
-      {
-        key: "m",
-        label: "Male",
-      },
-      {
-        key: "f",
-        label: "Female",
-      },
+      { key: "mr", label: "Mr." },
+      { key: "mrs", label: "Mrs." },
+      { key: "ms", label: "Ms." },
+      { key: "prof", label: "Prof." },
+      { key: "dr", label: "Dr." },
+    ];
+  }
+
+  get notifications() {
+    return [
+      { key: "offers", label: "Offers" },
+      { key: "news", label: "News" },
+      { key: "features", label: "Features" },
     ];
   }
 
   @task
   *submit(model) {
     yield timeout(1000);
-    model.save();
+    yield model.save();
   }
 }
 // END-SNIPPET
diff --git a/tests/dummy/app/templates/index.hbs b/tests/dummy/app/templates/index.hbs
@@ -48,6 +48,13 @@
         @on-submit={{perform this.submit}}
         as |f|
       >
+        <f.input
+          @type="radioGroup"
+          @label="Title"
+          @name="title"
+          @options={{this.titles}}
+          @required={{true}}
+        />
 
         <f.input @label="First name" @name="firstName" @required={{true}} />
 
@@ -71,13 +78,7 @@
           @required={{true}}
         />
 
-        <f.input
-          @type="radioGroup"
-          @label="Gender"
-          @name="gender"
-          @options={{this.genders}}
-          @required={{true}}
-        />
+        <f.input @type="date" @label="Date of birth" @name="birthday" />
 
         <f.input
           @renderComponent={{component "favorite-colors" colors=this.colors}}
@@ -86,14 +87,24 @@
           @required={{true}}
         />
 
+        <f.input
+          @type="checkboxGroup"
+          @label="Receive notifications about"
+          @name="notifications"
+          @options={{this.notifications}}
+        />
+
         <f.input
           @type="checkbox"
           @label="I agree with the terms and conditions"
           @name="terms"
           @required={{true}}
         />
 
-        <f.submit @label="Save" />
+        <f.submit
+          @label={{if this.submit.isRunning "Saving..." "Save"}}
+          @loading={{this.submit.isRunning}}
+        />
       </ValidatedForm>
       {{! END-SNIPPET }}
     </demo.example>

diff --git a/tests/dummy/app/validations/user.js b/tests/dummy/app/validations/user.js
@@ -10,7 +10,7 @@ export default {
   lastName: [validatePresence(true), validateLength({ min: 3, max: 40 })],
   aboutMe: [validateLength({ allowBlank: true, max: 200 })],
   country: [validatePresence(true)],
-  gender: [validatePresence(true)],
+  title: [validatePresence(true)],
   terms: [
     validateInclusion({
       list: [true],