feat(Form): FormGroup component is yielded as a contextual component …

…from Form

Closes #186

addon/components/bs-form.js

@@ -16,11 +16,11 @@ const {
   You can use whatever markup you like within the form:
 
  ```handlebars
-   {{#bs-form action="submit"}}
-     {{#bs-form-group validation=firstNameValidation}}
+   {{#bs-form onSubmit=(action "submit") as |form|}}
+     {{#form.group validation=firstNameValidation}}
        <label class="control-label">First name</label>
        <input value={{firstname}} class="form-control" oninput={{action (mut firstname) value="target.value"}} type="text">
-    {{/bs-form-group}}
+    {{/form.group}}
   {{/bs-form}}
   ```
 
@@ -29,11 +29,11 @@ const {
 
   ### Submitting the form
 
-  When the form is submitted (e.g. by clicking a submit button), the event will be intercepted and the default action
-  will be sent to the controller.
-  In case the form supports validation (see "Form validation" below), the "before" action is called (which allows you to
-  do e.g. model data normalization), then the available  validation rules are evaluated, and if those fail, the "invalid"
-  action is sent instead of the default "action".
+  When the form is submitted (e.g. by clicking a submit button), the event will be intercepted and the `onSubmit` action
+  will be sent to the controller or parent component.
+  In case the form supports validation (see "Form validation" below), the `onBefore` action is called (which allows you to
+  do e.g. model data normalization), then the available validation rules are evaluated, and if those fail, the `onInvalid`
+  action is sent instead of `onSubmit`.
 
   ### Use with Components.FormElement
 
@@ -44,7 +44,7 @@ const {
   with an invalid validation, or when focusing out of invalid inputs
 
   ```handlebars
-  {{#bs-form formLayout="horizontal" model=this action="submit" as |form|}}
+  {{#bs-form formLayout="horizontal" model=this onSubmit=(action "submit") as |form|}}
     {{form.element controlType="email" label="Email" placeholder="Email" property="email"}}
     {{form.element controlType="password" label="Password" placeholder="Password" property="password"}}
     {{form.element controlType="checkbox" label="Remember me" property="rememberMe"}}

addon/components/bs-form/element.js

@@ -1,6 +1,6 @@
 import Ember from 'ember';
 import layout from '../../templates/components/bs-form/element';
-import FormGroup from 'ember-bootstrap/components/bs-form-group';
+import FormGroup from './group';
 
 const {
  computed,

addon/components/bs-form-group.js → addon/components/bs-form/group.js

@@ -1,5 +1,5 @@
 import Ember from 'ember';
-import layout from '../templates/components/bs-form-group';
+import layout from '../../templates/components/bs-form/group';
 import Config from 'ember-bootstrap/config';
 
 const { computed } = Ember;
@@ -9,10 +9,12 @@ const { computed } = Ember;
  Use as a block level component:
 
  ```hbs
- {{#bs-form-group validation=firstNameValidation}}
-   <label class="control-label">First name</label>
-   <input value={{firstname}} class="form-control" oninput={{action (mut firstname) value="target.value"}} type="text">
- {{/bs-form-group}}
+ {{#bs-form as |form|}}
+   {{#form.group validation=firstNameValidation}}
+     <label class="control-label">First name</label>
+     <input value={{firstname}} class="form-control" oninput={{action (mut firstname) value="target.value"}} type="text">
+   {{/form.group}}
+ {{/bs-form}}
  ```
 
  If the `validation` property is set to some state (usually Bootstrap's predefined states "success",

addon/templates/components/bs-form.hbs

@@ -7,5 +7,6 @@
             showAllValidations=showAllValidations
             onChange=(action "change")
         )
+        group=(component "bs-form/group")
     )
 }}

app/components/bs-form/group.js

@@ -0,0 +1,3 @@
+export { default } from 'ember-bootstrap/components/bs-form/group';
+
+

tests/integration/components/bs-form-group-test.js → tests/integration/components/bs-form/group-test.js

@@ -1,12 +1,12 @@
 import { moduleForComponent, test } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
 
-moduleForComponent('bs-form-group', 'Integration | Component | bs-form-group', {
+moduleForComponent('bs-form/group', 'Integration | Component | bs-form/group', {
   integration: true
 });
 
 test('component has form-group bootstrap class', function(assert) {
-  this.render(hbs`{{#bs-form-group}}{{/bs-form-group}}`);
+  this.render(hbs`{{#bs-form/group}}{{/bs-form/group}}`);
   assert.equal(this.$(':first-child').hasClass('form-group'), true, 'component has form-group class');
 });
 
@@ -27,7 +27,7 @@ const validations = {
 
 function testValidationState(assert, state) {
   let validationConfig = validations[state];
-  this.render(hbs`{{#bs-form-group validation=validation}}{{/bs-form-group}}`);
+  this.render(hbs`{{#bs-form/group validation=validation}}{{/bs-form/group}}`);
   this.set('validation', state);
   validationConfig.formGroupClasses.forEach((className) => {
     assert.equal(this.$(':first-child').hasClass(className), true, `component has ${className} class`);