josemarluedke · josemarluedke · Mar 22, 2020 · Mar 22, 2020
diff --git a/packages/docs/app/components/demo/notifications/demo.hbs b/packages/docs/app/components/demo/notifications/demo.hbs
@@ -0,0 +1,77 @@
+<div class="flex items-baseline">
+  <FormRadioGroup
+    @containerClass="mr-6"
+    @label="Placement"
+    @value={{this.placement}}
+    @onChange={{this.setPlacement}}
+    as |Radio|
+  >
+    <Radio @value="top-left" @label="top-left" />
+    <Radio @value="top-center" @label="top-center" />
+    <Radio @value="top-right" @label="top-right" />
+    <Radio @value="bottom-left" @label="bottom-left" />
+    <Radio @value="bottom-center" @label="bottom-center" />
+    <Radio @value="bottom-right" @label="bottom-right" />
+  </FormRadioGroup>
+
+  <FormRadioGroup
+    @label="Appearance"
+    @value={{this.options.appearance}}
+    @onChange={{fn this.setValue "appearance"}}
+    as |Radio|
+  >
+    <Radio @value="info" @label="info" />
+    <Radio @value="success" @label="success" />
+    <Radio @value="warning" @label="warning" />
+    <Radio @value="error" @label="error" />
+  </FormRadioGroup>
+</div>
+
+<FormCheckbox
+  @containerClass="mt-6"
+  @label="Preserve"
+  @hint="Preserved notifications will not automatically close"
+  @checked={{this.options.preserve}}
+  @onChange={{fn this.setValue "preserve"}}
+/>
+
+<FormCheckbox
+  @containerClass="mt-6"
+  @label="Allow Closing"
+  @hint="Allow users to close the notification"
+  @checked={{this.options.allowClosing}}
+  @onChange={{fn this.setValue "allowClosing"}}
+/>
+
+<div class="flex items-baseline mt-6 ">
+  <FormInput
+    @containerClass="w-24 mr-6"
+    @label="Duration"
+    @hint="Duration is in ms"
+    @value={{this.options.duration}}
+    @onInput={{fn this.setValue "duration"}}
+  />
+
+  <FormSelect
+    @containerClass="w-64"
+    @hint="Allow users to take an action on a notification"
+    @label="Custom Actions"
+    @options={{this.customActions}}
+    @isMultiple={{true}}
+    @selected={{this.options.customActions}}
+    @onChange={{fn this.setValue "customActions"}}
+    as |action|
+  >
+    {{action.label}}
+  </FormSelect>
+</div>
+
+<button
+  type="button"
+  {{on "click" this.addNotification}}
+  class="px-4 py-2 mt-6 text-white bg-teal-700 rounded hover:bg-teal-800"
+>
+  Add Notification
+</button>
+
+<NotificationsContainer @placement={{this.placement}} />
diff --git a/packages/docs/app/components/demo/notifications/demo.js b/packages/docs/app/components/demo/notifications/demo.js
@@ -0,0 +1,56 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class Demo extends Component {
+  @service notifications;
+  @tracked options = {
+    appearance: 'info',
+    preserve: false,
+    duration: 5000,
+    allowClosing: true
+  };
+
+  @tracked placement = 'bottom-right';
+
+  @tracked customActions = [
+    {
+      label: 'Ok',
+      onClick: () => {
+        // empty
+      }
+    },
+    {
+      label: 'Undo',
+      onClick: () => {
+        // empty
+      }
+    },
+    {
+      label: 'Cancel',
+      onClick: () => {
+        // empty
+      }
+    }
+  ];
+
+  @action setPlacement(placement) {
+    this.placement = placement;
+  }
+
+  @action setValue(key, value) {
+    const options = {
+      ...this.options,
+      [key]: value
+    };
+    this.options = options;
+  }
+
+  @action addNotification() {
+    this.notifications.add(
+      'Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.',
+      this.options
+    );
+  }
+}
diff --git a/packages/docs/app/router.js b/packages/docs/app/router.js
@@ -32,6 +32,9 @@ Router.map(function() {
     this.route('buttons', function() {
       this.route('button');
     });
+    this.route('notifications', 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
@@ -6,6 +6,7 @@ module.exports = {
   },
   plugins: [
     require('@frontile/forms').tailwind,
+    require('@frontile/notifications').tailwind,
     require('@frontile/buttons').tailwind
   ]
 };
diff --git a/packages/docs/app/templates/docs.hbs b/packages/docs/app/templates/docs.hbs
@@ -34,6 +34,10 @@
     {{nav.item "Installation" "docs.changeset-form.index"}}
     {{nav.item "Usage" "docs.changeset-form.usage"}}
 
+    {{nav.section "Notifications"}}
+    {{nav.item "Installation" "docs.notifications.index"}}
+    {{nav.item "Usage" "docs.notifications.usage"}}
+
     {{nav.section "Buttons"}}
     {{nav.item "Installation" "docs.buttons.index"}}
 

diff --git a/packages/docs/app/templates/docs/index.md b/packages/docs/app/templates/docs/index.md
@@ -9,3 +9,4 @@ Packages:
 - `@frontile/forms`
 - `@frontile/changeset-form`
 - `@frontile/buttons`
+- `@frontile/notifications`
diff --git a/packages/docs/app/templates/docs/notifications/index.md b/packages/docs/app/templates/docs/notifications/index.md
@@ -0,0 +1,5 @@
+# Notifications Installation
+
+```sh
+ember install @frontile/notifications
+```
diff --git a/packages/docs/app/templates/docs/notifications/usage.md b/packages/docs/app/templates/docs/notifications/usage.md
@@ -0,0 +1,3 @@
+# Notifications
+
+<Demo::Notifications::Demo />
diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -25,6 +25,7 @@
     "@frontile/changeset-form": "^0.1.0-alpha.3",
     "@frontile/core": "^0.1.0-alpha.3",
     "@frontile/forms": "^0.1.0-alpha.3",
+    "@frontile/notifications": "^0.1.0-alpha.4",
     "@glimmer/component": "^1.0.0",
     "@glimmer/tracking": "^1.0.0",
     "autoprefixer": "^9.7.4",

diff --git a/yarn.lock b/yarn.lock
@@ -6212,7 +6212,7 @@ debug@3.1.0, debug@~3.1.0:
   dependencies:
     ms "2.0.0"
 
-debug@^3.0.0, debug@^3.0.1, debug@^3.1.0, debug@^3.1.1, debug@^3.2.6:
+debug@^3.0.0, debug@^3.0.1, debug@^3.1.0, debug@^3.1.1:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
   integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
@@ -6382,11 +6382,6 @@ detect-indent@^6.0.0:
   resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.0.0.tgz#0abd0f549f69fc6659a254fe96786186b6f528fd"
   integrity sha512-oSyFlqaTHCItVRGK5RmrmjB+CmaMOW7IaNA/kdxqhoa6d17j/5ce9O9eWXmV/KEdRwqpQA+Vqe8a8Bsybu4YnA==
 
-detect-libc@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
-  integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
-
 detect-newline@3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
@@ -8053,7 +8048,7 @@ esdoc-ecmascript-proposal-plugin@^1.0.0:
   resolved "https://registry.yarnpkg.com/esdoc-ecmascript-proposal-plugin/-/esdoc-ecmascript-proposal-plugin-1.0.0.tgz#390dc5656ba8a2830e39dba3570d79138df2ffd9"
   integrity sha1-OQ3FZWuoooMOOdujVw15E43y/9k=
 
-"esdoc@github:pzuraq/esdoc#015a342":
+esdoc@pzuraq/esdoc#015a342:
   version "1.0.4"
   resolved "https://codeload.github.com/pzuraq/esdoc/tar.gz/015a3426b2e53b2b0270a9c00133780db3f1d144"
   dependencies:
@@ -9760,7 +9755,7 @@ ice-cap@0.0.4:
     cheerio "0.20.0"
     color-logger "0.0.3"
 
-iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
+iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@~0.4.13:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -11752,15 +11747,6 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
-needle@^2.2.1:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/needle/-/needle-2.3.3.tgz#a041ad1d04a871b0ebb666f40baaf1fb47867117"
-  integrity sha512-EkY0GeSq87rWp1hoq/sH/wnTWgFVhYlnIkbJ0YJFfRgEFlz2RraCjBpFQ+vrEgEdp0ThfyHADmkChEhcb7PKyw==
-  dependencies:
-    debug "^3.2.6"
-    iconv-lite "^0.4.4"
-    sax "^1.2.4"
-
 negotiator@0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
@@ -11883,22 +11869,6 @@ node-notifier@^5.0.1:
     shellwords "^0.1.1"
     which "^1.3.0"
 
-node-pre-gyp@*:
-  version "0.14.0"
-  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.14.0.tgz#9a0596533b877289bcad4e143982ca3d904ddc83"
-  integrity sha512-+CvDC7ZttU/sSt9rFjix/P05iS43qHCOOGzcr3Ry99bXG7VX953+vFyEuph/tfqoYu8dttBkE86JSKBO2OzcxA==
-  dependencies:
-    detect-libc "^1.0.2"
-    mkdirp "^0.5.1"
-    needle "^2.2.1"
-    nopt "^4.0.1"
-    npm-packlist "^1.1.6"
-    npmlog "^4.0.2"
-    rc "^1.2.7"
-    rimraf "^2.6.1"
-    semver "^5.3.0"
-    tar "^4.4.2"
-
 node-releases@^1.1.52:
   version "1.1.52"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.52.tgz#bcffee3e0a758e92e44ecfaecd0a47554b0bcba9"
@@ -12027,7 +11997,7 @@ npm-package-arg@^8.0.0:
     semver "^7.0.0"
     validate-npm-package-name "^3.0.0"
 
-npm-packlist@^1.1.6, npm-packlist@^1.4.4:
+npm-packlist@^1.4.4:
   version "1.4.8"
   resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.4.8.tgz#56ee6cc135b9f98ad3d51c1c95da22bbb9b2ef3e"
   integrity sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==
@@ -12066,7 +12036,7 @@ npm-run-path@^4.0.0:
   dependencies:
     path-key "^3.0.0"
 
-npmlog@^4.0.0, npmlog@^4.0.2, npmlog@^4.1.2:
+npmlog@^4.0.0, npmlog@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
   integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
@@ -13144,7 +13114,7 @@ raw-body@~1.1.0:
     bytes "1"
     string_decoder "0.10"
 
-rc@^1.0.1, rc@^1.1.6, rc@^1.2.7:
+rc@^1.0.1, rc@^1.1.6:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
   integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==
@@ -13844,7 +13814,7 @@ sass@^1.22.10:
   dependencies:
     chokidar ">=2.0.0 <4.0.0"
 
-sax@^1.1.4, sax@^1.2.4, sax@~1.2.4:
+sax@^1.1.4, sax@~1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
@@ -14770,7 +14740,7 @@ tapable@^1.0.0, tapable@^1.1.0:
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
   integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
 
-tar@^4.4.10, tar@^4.4.12, tar@^4.4.2, tar@^4.4.8:
+tar@^4.4.10, tar@^4.4.12, tar@^4.4.8:
   version "4.4.13"
   resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.13.tgz#43b364bc52888d555298637b10d60790254ab525"
   integrity sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==