Add simple docs example for modal

josemarluedke · Apr 4, 2020 · f4fc0c0 · f4fc0c0
1 parent c84dd6c
commit f4fc0c0
Show file tree

Hide file tree

Showing 10 changed files with 85 additions and 2 deletions.
diff --git a/packages/docs/app/components/demo/overlays/demo-modal.hbs b/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>
diff --git a/packages/docs/app/components/demo/overlays/demo-modal.ts b/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
+    );
+  }
+}
diff --git a/packages/docs/app/router.js b/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' });

diff --git a/packages/docs/app/styles/tailwind.config.js b/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')
   ]
 };
diff --git a/packages/docs/app/templates/docs.hbs b/packages/docs/app/templates/docs.hbs
@@ -38,6 +38,11 @@
     {{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"}}
 

diff --git a/packages/docs/app/templates/docs/overlays/index.md b/packages/docs/app/templates/docs/overlays/index.md
@@ -0,0 +1,5 @@
+# Overlays Installation
+
+```sh
+ember install @frontile/overlays
+```
diff --git a/packages/docs/app/templates/docs/overlays/usage.md b/packages/docs/app/templates/docs/overlays/usage.md
@@ -0,0 +1,3 @@
+# Modal
+
+<Demo::Overlays::DemoModal />
diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -26,6 +26,7 @@
     "@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",

diff --git a/packages/overlays/package.json b/packages/overlays/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@frontile/overlays",
-  "version": "0.0.0",
+  "version": "0.1.0-alpha.6",
   "description": "Component Library for Ember Octane apps: overlays",
   "keywords": [
     "ember-addon"

diff --git a/yarn.lock b/yarn.lock
@@ -9010,7 +9010,7 @@ focus-trap@^5.1.0:
     tabbable "^4.0.0"
     xtend "^4.0.1"
 
-focus-visible@^5.0.2, focus-visible@^5.1.0:
+focus-visible@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/focus-visible/-/focus-visible-5.1.0.tgz#4b9d40143b865f53eafbd93ca66672b3bf9e7b6a"
   integrity sha512-nPer0rjtzdZ7csVIu233P2cUm/ks/4aVSI+5KUkYrYpgA7ujgC3p6J7FtFU+AIMWwnwYQOB/yeiOITxFeYIXiw==