feat(modal): change to a composable component (#307)

Changes the uk-modal component to be composable with header, body and
footer.

BREAKING CHANGE: This removes the default stying of "uk-modal-body", to
migrate to this patch and keep the stying it will have to be changed from:
```hbs
{{#uk-modal}}
  Lorem ipsum
{{/uk-modal}}
```
to:
```hbs
{{#uk-modal as |modal|}}
  {{#modal.body}}
    Lorem ipsum
  {{/modal.body}}
{{/uk-modal}}
```
The footer can be migrated as follows:
```hbs
{{#uk-modal}}
  <p class="uk-text-right">
    Footer content
  </p>
{{/uk-modal}}
```
to:
```hbs
{{#uk-modal as |modal|}}
  {{#modal.footer class="uk-text-right"}}
    Footer content
  {{/modal.footer}}
{{/uk-modal}}
```

addon/components/uk-modal.js

@@ -10,6 +10,8 @@ const noop = () => {};
 export default Component.extend({
   layout,
 
+  modalClass: "",
+  dialogClass: "",
   btnClose: true,
   escClose: true,
   bgClose: true,

addon/components/uk-modal/body.js

@@ -0,0 +1,10 @@
+import Component from "@ember/component";
+import layout from "../../templates/components/uk-modal/body";
+
+export default Component.extend({
+  layout,
+
+  tagName: "div",
+
+  classNames: ["uk-modal-body"]
+});

addon/components/uk-modal/footer.js

@@ -0,0 +1,10 @@
+import Component from "@ember/component";
+import layout from "../../templates/components/uk-modal/footer";
+
+export default Component.extend({
+  layout,
+
+  tagName: "div",
+
+  classNames: ["uk-modal-footer"]
+});

addon/components/uk-modal/header.js

@@ -0,0 +1,10 @@
+import Component from "@ember/component";
+import layout from "../../templates/components/uk-modal/header";
+
+export default Component.extend({
+  layout,
+
+  tagName: "div",
+
+  classNames: ["uk-modal-header"]
+});

addon/templates/components/uk-modal.hbs

@@ -1,10 +1,12 @@
 {{#-in-element containerElement}}
-  <div id={{this.modalId}}>
-    <div class="uk-modal-dialog">
-      {{#if @btnClose}}<button class="uk-modal-close-default" type="button" uk-close></button>{{/if}}
-      <div class="uk-modal-body">
-        {{yield}}
-      </div>
+  <div id={{this.modalId}} class={{@modalClass}}>
+    <div class="uk-modal-dialog {{@dialogClass}}">
+      {{#if this.btnClose}}<button class="uk-modal-close-default" type="button" uk-close></button>{{/if}}
+      {{yield (hash
+        header = (component "uk-modal/header")
+        body = (component "uk-modal/body")
+        footer = (component "uk-modal/footer")
+      )}}
     </div>
   </div>
-{{/-in-element}}
+{{/-in-element}}

addon/templates/components/uk-modal/body.hbs

@@ -0,0 +1 @@
+{{yield}}

addon/templates/components/uk-modal/footer.hbs

@@ -0,0 +1 @@
+{{yield}}

addon/templates/components/uk-modal/header.hbs

@@ -0,0 +1 @@
+{{yield}}

app/components/uk-modal/body.js

@@ -0,0 +1 @@
+export { default } from "ember-uikit/components/uk-modal/body";

app/components/uk-modal/footer.js

@@ -0,0 +1 @@
+export { default } from "ember-uikit/components/uk-modal/footer";

app/components/uk-modal/header.js

@@ -0,0 +1 @@
+export { default } from "ember-uikit/components/uk-modal/header";

config/ember-try.js

@@ -4,6 +4,7 @@ const getChannelURL = require("ember-source-channel-url");
 
 module.exports = async function() {
   return {
+    useYarn: true,
     scenarios: [
       {
         name: "ember-lts-3.8",

tests/dummy/app/controllers/docs/components/modal.js

@@ -2,7 +2,10 @@ import Controller from "@ember/controller";
 
 export default Controller.extend({
   visible: false,
+  btnClose: true,
   closable: true,
+  modalClass: "",
+  dialogClass: "",
 
   actions: {
     submit() {

tests/dummy/app/snippets/modal.hbs

@@ -1,9 +1,13 @@
-{{#uk-modal visible=visible on-hide=(action (mut visible) false)}}
-  <h2 class="uk-modal-title">Attention</h2>
-  <p>Do you really want to proceed?</p>
-  <p class="uk-text-right">
+{{#uk-modal visible=visible on-hide=(action (mut visible) false) as |modal|}}
+  {{#modal.header}}
+    <h2 class="uk-modal-title">Attention</h2>
+  {{/modal.header}}
+  {{#modal.body}}
+    <p>Do you really want to proceed?</p>
+  {{/modal.body}}
+  {{#modal.footer class="uk-text-right"}}
     {{uk-button color="primary" label="Ok" on-click=(action "submit")}}
-  </p>
+  {{/modal.footer}}
 {{/uk-modal}}
 
-{{uk-button label="Open modal" on-click=(action (mut visible) true)}}
+{{uk-button label="Open modal" on-click=(action (mut visible) true)}}

tests/dummy/app/templates/docs/components/modal.hbs

@@ -3,14 +3,23 @@
 <div class="uk-padding uk-box-shadow-medium uk-margin">
   {{#uk-modal
     visible=visible
+    btnClose=btnClose
+    modalClass=modalClass
+    dialogClass=dialogClass
     on-show=(action (mut visible) true)
     on-hide=(action (mut visible) false)
+    as |modal|
   }}
-    <h2 class="uk-modal-title">Test</h2>
-    <p>Lorem Ipsum</p>
-    <p class="uk-text-right">
+
+    {{#modal.header}}
+      <h2 class="uk-modal-title">Test</h2>
+    {{/modal.header}}
+    {{#modal.body uk-modal-overflow-auto}}
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    {{/modal.body}}
+    {{#modal.footer class="uk-text-right"}}
       {{uk-button color="primary" label="Submit" on-click=(action "submit")}}
-    </p>
+    {{/modal.footer}}
   {{/uk-modal}}
 
   {{uk-button label="Open modal" on-click=(action (mut visible true))}}
@@ -47,6 +56,29 @@
                 {{input type="checkbox" class="uk-checkbox" checked=visible}}
               </td>
             </tr>
+            <tr>
+              <td><code>btnClose</code></td>
+              <td><code>Boolean</code></td>
+              <td><code>true</code></td>
+              <td>Whether a button to close the modal should show up in the top right corner or not</td>
+              <td>
+                {{input type="checkbox" class="uk-checkbox" checked=btnClose}}
+              </td>
+            </tr>
+            <tr>
+              <td><code>modalClass</code></td>
+              <td><code>String</code></td>
+              <td><code>""</code></td>
+              <td>Add CSS classes to the modal.</td>
+              <td>{{input class="uk-input" value=modalClass}}</td>
+            </tr>
+            <tr>
+              <td><code>dialogClass</code></td>
+              <td><code>String</code></td>
+              <td><code>""</code></td>
+              <td>Add CSS classes to the dialog.</td>
+              <td>{{input class="uk-input" value=dialogClass}}</td>
+            </tr>
             <tr>
               <td><code>escClose</code></td>
               <td><code>Boolean</code></td>

tests/integration/components/uk-modal-test.js

@@ -10,8 +10,10 @@ module("Integration | Component | uk-modal", function(hooks) {
     assert.expect(1);
 
     await render(hbs`
-      {{#uk-modal}}
-        <h2>Test</h2>
+      {{#uk-modal as |modal|}}
+        {{#modal.header}}
+          <h2>Test</h2>
+        {{/modal.header}}
       {{/uk-modal}}
     `);
 
@@ -25,7 +27,15 @@ module("Integration | Component | uk-modal", function(hooks) {
 
     await render(hbs`
       {{#uk-modal visible=true}}
-        <h2>Test</h2>
+        {{#modal.header}}
+          <h2>Test</h2>
+        {{/modal.header}}
+        {{#modal.body}}
+          <p>Lorem ipsum</p>
+        {{/modal.body}}
+        {{#modal.footer class="uk-text-right"}}
+          <button></button>
+        {{/modal.footer}}
       {{/uk-modal}}
     `);
 
@@ -41,7 +51,9 @@ module("Integration | Component | uk-modal", function(hooks) {
 
     await render(hbs`
       {{#uk-modal visible=true on-hide=hide}}
-        <h2>Test</h2>
+        {{#modal.header}}
+          <h2>Test</h2>
+        {{/modal.header}}
       {{/uk-modal}}
     `);
 

tests/integration/components/uk-modal/body-test.js

@@ -0,0 +1,26 @@
+import { module, test } from "qunit";
+import { setupRenderingTest } from "ember-qunit";
+import { render } from "@ember/test-helpers";
+import { hbs } from "ember-cli-htmlbars";
+
+module("Integration | Component | uk-modal/body", function(hooks) {
+  setupRenderingTest(hooks);
+
+  test("it renders", async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`{{uk-modal/body}}`);
+
+    assert.equal(this.element.textContent.trim(), "");
+
+    // Template block usage:
+    await render(hbs`
+      {{#uk-modal/body}}
+        template block text
+      {{/uk-modal/body}}
+    `);
+
+    assert.equal(this.element.textContent.trim(), "template block text");
+  });
+});

tests/integration/components/uk-modal/footer-test.js

@@ -0,0 +1,26 @@
+import { module, test } from "qunit";
+import { setupRenderingTest } from "ember-qunit";
+import { render } from "@ember/test-helpers";
+import { hbs } from "ember-cli-htmlbars";
+
+module("Integration | Component | uk-modal/header", function(hooks) {
+  setupRenderingTest(hooks);
+
+  test("it renders", async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`{{uk-modal/footer}}`);
+
+    assert.equal(this.element.textContent.trim(), "");
+
+    // Template block usage:
+    await render(hbs`
+      {{#uk-modal/footer}}
+        template block text
+      {{/uk-modal/footer}}
+    `);
+
+    assert.equal(this.element.textContent.trim(), "template block text");
+  });
+});

tests/integration/components/uk-modal/header-test.js

@@ -0,0 +1,26 @@
+import { module, test } from "qunit";
+import { setupRenderingTest } from "ember-qunit";
+import { render } from "@ember/test-helpers";
+import { hbs } from "ember-cli-htmlbars";
+
+module("Integration | Component | uk-modal/footer", function(hooks) {
+  setupRenderingTest(hooks);
+
+  test("it renders", async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`{{uk-modal/header}}`);
+
+    assert.equal(this.element.textContent.trim(), "");
+
+    // Template block usage:
+    await render(hbs`
+      {{#uk-modal/header}}
+        template block text
+      {{/uk-modal/header}}
+    `);
+
+    assert.equal(this.element.textContent.trim(), "template block text");
+  });
+});