Create Overlay and Modal component

packages/buttons/package.json

@@ -36,7 +36,7 @@
     "@types/ember": "^3.1.2",
     "@types/ember-qunit": "^3.4.8",
     "@types/ember__test-helpers": "^0.7.10",
-    "@types/qunit": "^2.9.0",
+    "@types/qunit": "^2.9.1",
     "@types/rsvp": "^4.0.3",
     "autoprefixer": "^9.7.5",
     "broccoli-asset-rev": "^3.0.0",
@@ -52,7 +52,7 @@
     "ember-maybe-import-regenerator": "^0.1.6",
     "ember-qunit": "^4.6.0",
     "ember-resolver": "^7.0.0",
-    "ember-source": "~3.17.2",
+    "ember-source": "~3.17.3",
     "ember-try": "^1.4.0",
     "loader.js": "^4.7.0",
     "qunit-dom": "^1.1.0",

packages/changeset-form/package.json

@@ -38,7 +38,7 @@
     "@types/ember": "^3.1.2",
     "@types/ember-qunit": "^3.4.8",
     "@types/ember__test-helpers": "^0.7.10",
-    "@types/qunit": "^2.9.0",
+    "@types/qunit": "^2.9.1",
     "@types/rsvp": "^4.0.3",
     "autoprefixer": "^9.7.5",
     "broccoli-asset-rev": "^3.0.0",
@@ -54,7 +54,7 @@
     "ember-maybe-import-regenerator": "^0.1.6",
     "ember-qunit": "^4.6.0",
     "ember-resolver": "^7.0.0",
-    "ember-source": "~3.17.2",
+    "ember-source": "~3.17.3",
     "ember-try": "^1.4.0",
     "loader.js": "^4.7.0",
     "qunit-dom": "^1.1.0",

packages/core/package.json

@@ -27,7 +27,7 @@
     "ember-cli-babel": "^7.19.0",
     "ember-cli-htmlbars": "^4.2.3",
     "ember-cli-typescript": "^3.1.3",
-    "focus-visible": "^5.0.2"
+    "focus-visible": "^5.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",
@@ -37,7 +37,7 @@
     "@types/ember": "^3.1.2",
     "@types/ember-qunit": "^3.4.8",
     "@types/ember__test-helpers": "^0.7.10",
-    "@types/qunit": "^2.9.0",
+    "@types/qunit": "^2.9.1",
     "@types/rsvp": "^4.0.3",
     "broccoli-asset-rev": "^3.0.0",
     "ember-auto-import": "^1.3.0",
@@ -51,7 +51,7 @@
     "ember-maybe-import-regenerator": "^0.1.6",
     "ember-qunit": "^4.4.1",
     "ember-resolver": "^7.0.0",
-    "ember-source": "^3.17.2",
+    "ember-source": "^3.17.3",
     "ember-try": "^1.2.1",
     "loader.js": "^4.7.0",
     "qunit-dom": "^1.1.0",

packages/docs/app/components/demo/overlays/demo-modal.hbs

@@ -0,0 +1,37 @@
+<Button
+  {{on "click" this.toggleModal}}
+>
+  Open Modal
+</Button>
+
+<div class="relative h-48 w-3xl">
+  <Modal
+    @isOpen={{this.isOpen}}
+    @onClose={{this.toggleModal}}
+    @renderInPlace={{false}}
+    as |m|
+  >
+    <m.Header>Title</m.Header>
+    <m.Body>
+      <p>Some contents...</p>
+      <p>Some contents...</p>
+      <p>Some contents...</p>
+    </m.Body>
+    <m.Footer>
+      <Button
+        @appearance="minimal"
+        class="mr-4"
+        {{on "click" this.toggleModal}}
+      >
+        Cancel
+      </Button>
+      <Button
+        @intent="primary"
+        disabled={{this.isLoading}}
+        {{on "click" this.save}}
+      >
+        {{if this.isLoading "Loading..." "Save"}}
+      </Button>
+    </m.Footer>
+  </Modal>
+</div>

packages/docs/app/components/demo/overlays/demo-modal.ts

@@ -0,0 +1,28 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { later } from '@ember/runloop';
+
+interface DemoModalArgs {}
+
+export default class DemoModal extends Component<DemoModalArgs> {
+  @tracked isOpen = false;
+  @tracked isLoading = false;
+
+  @action toggleModal(): void {
+    this.isOpen = !this.isOpen;
+  }
+
+  @action save(): void {
+    this.isLoading = true;
+
+    later(
+      this,
+      () => {
+        this.isLoading = false;
+        this.isOpen = false;
+      },
+      1000
+    );
+  }
+}

packages/docs/app/router.js

@@ -35,6 +35,9 @@ Router.map(function () {
     this.route('notifications', function () {
       this.route('usage');
     });
+    this.route('overlays', function () {
+      this.route('usage');
+    });
   });
 
   this.route('not-found', { path: '/*path' });

packages/docs/app/styles/tailwind.config.js

@@ -7,6 +7,7 @@ module.exports = {
   plugins: [
     require('@frontile/forms/tailwind'),
     require('@frontile/notifications/tailwind'),
+    require('@frontile/overlays/tailwind'),
     require('@frontile/buttons/tailwind')
   ]
 };

packages/docs/app/templates/docs.hbs

@@ -38,6 +38,10 @@
     {{nav.item "Installation" "docs.notifications.index"}}
     {{nav.item "Usage" "docs.notifications.usage"}}
 
+    {{nav.section "Overlays"}}
+    {{nav.item "Installation" "docs.overlays.index"}}
+    {{nav.item "Usage" "docs.overlays.usage"}}
+
     {{nav.section "Buttons"}}
     {{nav.item "Installation" "docs.buttons.index"}}
 

packages/docs/app/templates/docs/overlays/index.md

@@ -0,0 +1,5 @@
+# Overlays Installation
+
+```sh
+ember install @frontile/overlays
+```

packages/docs/app/templates/docs/overlays/usage.md

@@ -0,0 +1,3 @@
+# Modal
+
+<Demo::Overlays::DemoModal />

packages/docs/package.json

@@ -26,12 +26,13 @@
     "@frontile/core": "^0.1.0-alpha.6",
     "@frontile/forms": "^0.1.0-alpha.6",
     "@frontile/notifications": "^0.1.0-alpha.6",
+    "@frontile/overlays": "^0.1.0-alpha.6",
     "@glimmer/component": "^1.0.0",
     "@glimmer/tracking": "^1.0.0",
     "@types/ember": "^3.1.2",
     "@types/ember-qunit": "^3.4.8",
     "@types/ember__test-helpers": "^0.7.10",
-    "@types/qunit": "^2.9.0",
+    "@types/qunit": "^2.9.1",
     "@types/rsvp": "^4.0.3",
     "autoprefixer": "^9.7.5",
     "broccoli-asset-rev": "^3.0.0",
@@ -58,7 +59,7 @@
     "ember-maybe-import-regenerator": "^0.1.6",
     "ember-qunit": "^4.6.0",
     "ember-resolver": "^7.0.0",
-    "ember-source": "^3.17.2",
+    "ember-source": "^3.17.3",
     "loader.js": "^4.7.0",
     "qunit-dom": "^1.1.0",
     "tailwindcss": "^1.2.0",

packages/forms/package.json

@@ -38,7 +38,7 @@
     "@types/ember": "^3.1.2",
     "@types/ember-qunit": "^3.4.8",
     "@types/ember__test-helpers": "^0.7.10",
-    "@types/qunit": "^2.9.0",
+    "@types/qunit": "^2.9.1",
     "@types/rsvp": "^4.0.3",
     "autoprefixer": "^9.7.5",
     "broccoli-asset-rev": "^3.0.0",
@@ -54,7 +54,7 @@
     "ember-maybe-import-regenerator": "^0.1.6",
     "ember-qunit": "^4.6.0",
     "ember-resolver": "^7.0.0",
-    "ember-source": "^3.17.2",
+    "ember-source": "^3.17.3",
     "ember-try": "^1.4.0",
     "loader.js": "^4.7.0",
     "qunit-dom": "^1.1.0",

packages/notifications/package.json

@@ -39,9 +39,9 @@
     "@types/ember": "^3.1.2",
     "@types/ember-qunit": "^3.4.8",
     "@types/ember__test-helpers": "^0.7.10",
-    "@types/qunit": "^2.9.0",
+    "@types/qunit": "^2.9.1",
     "@types/rsvp": "^4.0.3",
-    "@types/sinon": "^7.5.2",
+    "@types/sinon": "^9.0.0",
     "autoprefixer": "^9.7.5",
     "broccoli-asset-rev": "^3.0.0",
     "ember-auto-import": "^1.5.3",
@@ -58,7 +58,7 @@
     "ember-qunit": "^4.6.0",
     "ember-resolver": "^7.0.0",
     "ember-sinon": "^5.0.0",
-    "ember-source": "~3.17.2",
+    "ember-source": "~3.17.3",
     "ember-try": "^1.4.0",
     "loader.js": "^4.7.0",
     "qunit-dom": "^1.1.0",

packages/overlays/addon/-private/dom.d.ts

@@ -0,0 +1,5 @@
+export function getDOM(context: unknown): null | HTMLDocument;
+export function getElementById(
+  doc: HTMLElement | HTMLDocument,
+  id: string
+): null | HTMLElement;

packages/overlays/addon/-private/dom.js

@@ -0,0 +1,61 @@
+import { getOwner } from '@ember/application';
+
+// adjusted from https://github.com/yapplabs/ember-wormhole/blob/0.5.4/addon/utils/dom.js#L45-L63
+// Copied from https://github.com/ember-intl/ember-intl/blob/a66560d0af9f08af20778a3eb3003045e19fbf16/addon/-private/utils/get-dom.js
+//
+// Private Ember API usage. Get the dom implementation used by the current
+// renderer, be it native browser DOM or Fastboot SimpleDOM
+/**
+ * @private
+ * @hide
+ */
+export function getDOM(context) {
+  let { renderer } = context;
+  if (!renderer || !renderer._dom) {
+    // pre glimmer2
+    const container = getOwner ? getOwner(context) : context.container;
+    const documentService = container.lookup('service:-document');
+
+    if (documentService) {
+      return documentService;
+    }
+
+    renderer = container.lookup('renderer:-dom');
+  }
+
+  if (renderer._dom && renderer._dom.document) {
+    // pre Ember 2.6
+    return renderer._dom.document;
+  }
+
+  return null;
+}
+
+function childNodesOfElement(element) {
+  const children = [];
+  let child = element.firstChild;
+  while (child) {
+    children.push(child);
+    child = child.nextSibling;
+  }
+  return children;
+}
+
+export function getElementById(doc, id) {
+  if (doc.getElementById) {
+    return doc.getElementById(id);
+  }
+
+  let nodes = childNodesOfElement(doc);
+  let node;
+
+  while (nodes.length) {
+    node = nodes.shift();
+
+    if (node.getAttribute && node.getAttribute('id') === id) {
+      return node;
+    }
+
+    nodes = childNodesOfElement(node).concat(nodes);
+  }
+}

packages/overlays/addon/components/modal/body.hbs

@@ -0,0 +1,6 @@
+<div
+  class="modal__body"
+  ...attributes
+>
+  {{yield}}
+</div>

packages/overlays/addon/components/modal/body.ts

@@ -0,0 +1,5 @@
+import Component from '@glimmer/component';
+
+interface ModalBodyArgs {}
+
+export default class ModalBody extends Component<ModalBodyArgs> {}

packages/overlays/addon/components/modal/footer.hbs

@@ -0,0 +1,6 @@
+<div
+  class="modal__footer"
+  ...attributes
+>
+  {{yield}}
+</div>

packages/overlays/addon/components/modal/footer.ts

@@ -0,0 +1,5 @@
+import Component from '@glimmer/component';
+
+interface ModalFooterArgs {}
+
+export default class ModalFooter extends Component<ModalFooterArgs> {}

packages/overlays/addon/components/modal/header.hbs

@@ -0,0 +1,7 @@
+<div
+  id={{@labelledById}}
+  class="modal__header"
+  ...attributes
+>
+  {{yield}}
+</div>

packages/overlays/addon/components/modal/header.ts

@@ -0,0 +1,10 @@
+import Component from '@glimmer/component';
+
+interface ModalHeaderArgs {
+  /*
+   * The id used to reference labelledById in Modal component
+   */
+  labelledById: string;
+}
+
+export default class ModalHeader extends Component<ModalHeaderArgs> {}

packages/overlays/addon/components/modal/index.hbs

@@ -0,0 +1,39 @@
+<Overlay
+  @isOpen={{@isOpen}}
+  @onClose={{this.handleClose}}
+  @renderInPlace={{@renderInPlace}}
+  @destinationElementId={{@destinationElementId}}
+  @transitionDuration={{@transitionDuration}}
+  @disableBackdrop={{@disableBackdrop}}
+  @disableTransitions={{@disableTransitions}}
+  @disableFocusTrap={{@disableFocusTrap}}
+  @closeOnOutsideClick={{if this.preventClosing false @closeOnOutsideClick}}
+  @closeOnEscapeKey={{if this.preventClosing false @closeOnEscapeKey}}
+  @backdropTransitionName={{@backdropTransitionName}}
+  @contentTransitionName={{if @transitionName @transitionName "overlay--transition--zoom"}}
+>
+  <div
+    class="modal"
+    tabindex="0"
+    role="dialog"
+    aria-labelledby={{this.headerId}}
+    ...attributes
+  >
+    {{#unless this.preventClosing}}
+      <button
+        {{on "click" this.handleClose}}
+        type="button"
+        class="modal__close-btn"
+      >
+        <span class="modal__close-btn--icon"></span>
+        <VisuallyHidden>Close</VisuallyHidden>
+      </button>
+    {{/unless}}
+
+    {{yield (hash
+      Header=(component "modal/header" labelledById=this.headerId)
+      Body=(component "modal/body")
+      Footer=(component "modal/footer")
+    )}}
+  </div>
+</Overlay>