Use bootstrap 4 instead of bootswatch for dummy app

ember-cli-build.js

@@ -4,6 +4,11 @@ const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
 module.exports = function(defaults) {
   var app = new EmberAddon(defaults, {
     // Add options here
+    sassOptions: {
+      includePaths: [
+        'node_modules/bootstrap/scss'
+      ]
+    }
   });
 
   /*
@@ -13,7 +18,5 @@ module.exports = function(defaults) {
     behave. You most likely want to be modifying `./index.js` or app's build file
   */
 
-  app.import('node_modules/bootswatch/lumen/bootstrap.min.css');
-
   return app.toTree();
 };

package.json

@@ -33,7 +33,7 @@
     "ember-truth-helpers": "^1.3.0"
   },
   "devDependencies": {
-    "bootswatch": "^3.3.7",
+    "bootstrap": "4.0.0-alpha.6",
     "broccoli-asset-rev": "^2.4.5",
     "ember-ajax": "^3.0.0",
     "ember-cli": "2.13.2",
@@ -47,6 +47,7 @@
     "ember-cli-mocha": "^0.14.4",
     "ember-cli-page-object": "^1.10.0",
     "ember-cli-release": "^1.0.0-beta.2",
+    "ember-cli-sass": "^6.2.0",
     "ember-cli-shims": "^1.1.0",
     "ember-cli-sri": "^2.1.0",
     "ember-cli-uglify": "^1.2.0",

tests/dummy/app/styles/app.scss

@@ -0,0 +1,9 @@
+@import "bootstrap";
+
+.page-container {
+  margin: 2em auto;
+}
+
+.person-band-list-group {
+  margin-top: 2em;
+}

tests/dummy/app/templates/application.hbs

@@ -0,0 +1,5 @@
+<nav class="navbar navbar-inverse bg-inverse">
+  <span class="navbar-brand">emberx-form</span>
+</nav>
+
+{{outlet}}

tests/dummy/app/templates/components/my-form.hbs

@@ -6,8 +6,8 @@
 }}
 
   {{#form.field property="firstName" as |field|}}
-    <div data-test-first-name class={{concat "form-group" (if field.errors.validation " has-error")}}>
-      <h3>First Name</h3>
+    <div data-test-first-name class={{concat "form-group" (if field.errors.validation " has-danger")}}>
+      <label class="form-control-label">First Name</label>
         {{#each field.errors as |error|}}
           {{error}}
         {{/each}}
@@ -22,8 +22,8 @@
   {{/form.field}}
 
   {{#form.field property="lastName" as |field|}}
-    <div data-test-last-name class={{concat "form-group" (if field.errors.validation " has-error")}}>
-      <h3>Last Name</h3>
+    <div data-test-last-name class={{concat "form-group" (if field.errors.validation " has-danger")}}>
+      <label class="form-control-label">Last Name</label>
         {{one-way-input
           class="form-control"
           id="form-last-name"
@@ -35,8 +35,8 @@
   {{/form.field}}
 
   {{#form.field property="favoriteBand" as |field|}}
-    <div data-test-favorite-band class={{concat "form-group" (if field.errors.validation " has-error")}}>
-      <h3>Favorite Band</h3>
+    <div data-test-favorite-band class={{concat "form-group" (if field.errors.validation " has-danger")}}>
+      <label class="form-control-label">Favorite Band</label>
         {{one-way-select
           class="form-control"
           id="form-favorite-band"
@@ -50,7 +50,7 @@
 
   {{#if (or form.changeset.isDirty form.changeset.isInvalid)}}
     <button data-test-submit-button class="btn btn-primary" disabled={{form.isUnsubmittable}} {{action form.actions.submit}}>Save</button>
-    <button data-test-cancel-button class="btn btn-danger" {{action form.actions.cancel}}>Cancel</button>
+    <button data-test-cancel-button class="btn btn-secondary" {{action form.actions.cancel}}>Cancel</button>
   {{/if}}
 
 {{/x-form}}

tests/dummy/app/templates/index.hbs

@@ -1,7 +1,6 @@
-<div class="container">
-  <h2>Welcome to EmberX-Form!</h2>
+<div class="container page-container">
   <div class="row">
-    <div class="col-xs-6">
+    <div class="col-sm-6">
       {{#x-form
         class="test-form"
         id="test-form"
@@ -13,8 +12,8 @@
         onCancel=(action 'cancel') as |form|
       }}
         {{#form.field property="firstName" as |field|}}
-          <div data-test-first-name class={{concat "form-group" (if field.errors.validation " has-error")}}>
-            <h3>First Name</h3>
+          <div data-test-first-name class={{concat "form-group" (if field.errors.validation " has-danger")}}>
+            <label class="form-control-label">First Name</label>
               {{#each field.errors as |error|}}
                 {{error}}
               {{/each}}
@@ -29,8 +28,8 @@
         {{/form.field}}
 
         {{#form.field property="lastName" as |field|}}
-          <div data-test-last-name class={{concat "form-group" (if field.errors.validation " has-error")}}>
-            <h3>Last Name</h3>
+          <div data-test-last-name class={{concat "form-group" (if field.errors.validation " has-danger")}}>
+            <label class="form-control-label">Last Name</label>
               {{one-way-input
                 class="form-control"
                 id="form-last-name"
@@ -42,8 +41,8 @@
         {{/form.field}}
 
         {{#form.field property="favoriteBand" as |field|}}
-          <div data-test-favorite-band class={{concat "form-group" (if field.errors.validation " has-error")}}>
-            <h3>Favorite Band</h3>
+          <div data-test-favorite-band class={{concat "form-group" (if field.errors.validation " has-danger")}}>
+            <label class="form-control-label">Favorite Band</label>
               {{one-way-select
                 class="form-control"
                 id="form-favorite-band"
@@ -58,13 +57,14 @@
         <br />
 
         <button data-test-submit-button class="btn btn-primary" disabled={{form.isUnsubmittable}} {{action form.actions.submit}}>Save</button>
-        <button data-test-cancel-button class="btn btn-danger" {{action form.actions.cancel}}>Cancel</button>
+        <button data-test-cancel-button class="btn btn-secondary" {{action form.actions.cancel}}>Cancel</button>
       {{/x-form}}
     </div>
-    <div class="col-xs-6">
-      <div data-test-people-list class="list-group">
+
+    <div class="col-sm-6">
+      <div data-test-people-list class="list-group person-band-list-group">
         {{#each model as |person|}}
-          <div data-test-people-list-item class="list-group-item">
+          <div data-test-people-list-item class="list-group-item flex-column align-items-start">
             <h4 class="list-group-item-heading">{{person.firstName}} {{person.lastName}}</h4>
             <p class="list-group-item-text">Favorite Band: {{person.favoriteBand}}</p>
           </div>

tests/dummy/app/templates/reset-changeset.hbs

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container page-container">
   <h1>Hidden Save/Cancel Example</h1>
   {{my-form
     data=model

tests/dummy/app/templates/route-transitions.hbs

@@ -1,9 +1,10 @@
-<div class="container">
+<div class="container page-container">
   <h1>Route Transitions Test</h1>
-  <ul>
-    <li>{{#link-to 'route-transitions.edit' 1 class='test-first-edit-form'}}ID 1{{/link-to}}</li>
-    <li>{{#link-to 'route-transitions.edit' 2 class='test-second-edit-form'}}ID 2{{/link-to}}</li>
-    <li>{{#link-to 'route-transitions.new' class='test-create-form'}}New{{/link-to}}</li>
+  <ul class="nav nav-pills">
+    <li class="nav-item">{{#link-to 'route-transitions.edit' 1 class='nav-link test-first-edit-form'}}ID 1{{/link-to}}</li>
+    <li class="nav-item">{{#link-to 'route-transitions.edit' 2 class='nav-link test-second-edit-form'}}ID 2{{/link-to}}</li>
+    <li class="nav-item">{{#link-to 'route-transitions.new' class='nav-link test-create-form'}}New{{/link-to}}</li>
   </ul>
+  <hr>
   {{outlet}}
 </div>

tests/helpers/make-field.js

@@ -12,7 +12,7 @@ import makeComponent from '../helpers/make-component';
 
 const makeField = (fieldSelector, inputSelector, [name, action]) => {
   let options = {
-    hasErrors: hasClass('has-error'),
+    hasErrors: hasClass('has-danger'),
 
     value: value(inputSelector),