TF-toasts component implementation

README.md

@@ -1,27 +1,34 @@
-# ember-ticketfly-toasts
+# Ember Ticketfly Toasts
 
-This README outlines the details of collaborating on this Ember addon.
+This Ember addon provides the **toasts** and **toast outlet** components and the **toast service** of the Ticketfly UI library.
 
-## Installation
+## Usage
 
-* `git clone <repository-url>` this repository
-* `cd ember-ticketfly-toasts`
-* `npm install`
-* `bower install`
+#### Toast Component
 
-## Running
+The toast component renders a single toast on the page. Pass `type` and/or `message` attributes, and `onDismiss` or `onClick` actions to configure the **toast category**. You will rarely, if ever, use the `tf-toast` component, but would use the `tf-toast-service` instead.
 
-* `ember serve`
-* Visit your app at [http://localhost:4200](http://localhost:4200).
+**Template:**
+```hbs
+{{!-- Inline form --}}
+{{tf-toast type='positive' message="Positive alert message." onClick=(action "myAction")}}
 
-## Running Tests
+{{!--Block form--}}
+{{#tf-toast type='neutral'}}Neutral alert message.{{/tf-toast}}
+```
 
-* `npm test` (Runs `ember try:each` to test your addon against multiple Ember versions)
-* `ember test`
-* `ember test --server`
+**Resulting HTML:**
+```html
+<div class="tf-toast tf-toast--positive">Positive alert message.</div>
 
-## Building
+<div class="tf-toast tf-toast--neutral">Neutral alert message.</div>
+```
 
-* `ember build`
-
-For more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).
+#### Toast Outlet
+```hbs
+{{#each flashMessages.queue as |flash|}}
+  {{#flash-message flash=flash as |component flash| }}
+    <div>{{flash.message}}<i class="tf-x"></i></div>
+  {{/flash-message}}
+{{/each}}
+```

addon/components/tf-toast.js

@@ -0,0 +1,6 @@
+import Ember from 'ember';
+import layout from '../templates/components/tf-toast';
+
+export default Ember.Component.extend({
+  layout
+});

addon/components/tf-toaster.js

@@ -0,0 +1,13 @@
+import Ember from 'ember';
+import layout from '../templates/components/tf-toaster';
+
+export default Ember.Component.extend({
+  layout,
+  toast: Ember.inject.service('tf-toast-service'),
+
+  actions: {
+    onDismiss() {
+      this.get('toast.messages').popObject();
+    }
+  }
+});

addon/services/tf-toast-service.js

@@ -0,0 +1,15 @@
+import Ember from 'ember';
+
+export default Ember.Service.extend({
+  // this will have all the info: action, message, which toast is active, etc.
+  messages: Ember.A([
+  ]),
+
+  success() {
+    this.get('messages').pushObject({message: 'Success!'});
+  },
+
+  failure() {
+    this.get('messages').pushObject({message: 'Failed to save.'});
+  }
+});

addon/templates/components/tf-toast.hbs

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

addon/templates/components/tf-toaster.hbs

@@ -0,0 +1,6 @@
+{{#each toast.messages as |toast|}}
+  {{#tf-toast class="tf-toast"}}
+    {{toast.message}}
+    <div class="close-x" {{action 'onDismiss'}}>{{'X'}}</div>
+  {{/tf-toast}}
+{{/each}}

app/components/tf-toast.js

@@ -0,0 +1 @@
+export { default } from 'ember-ticketfly-toasts/components/tf-toast';

app/components/tf-toaster.js

@@ -0,0 +1 @@
+export { default } from 'ember-ticketfly-toasts/components/tf-toaster';

app/services/tf-toast-service.js

@@ -0,0 +1 @@
+export { default } from 'ember-ticketfly-toasts/services/tf-toast-service';

package.json

@@ -43,7 +43,6 @@
     "ember-export-application-global": "^1.0.5",
     "ember-load-initializers": "^0.5.1",
     "ember-resolver": "^2.0.3",
-    "ember-welcome-page": "^1.0.3",
     "loader.js": "^4.0.10"
   },
   "engines": {

tests/dummy/app/controllers/index.js

@@ -0,0 +1,11 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  toast: Ember.inject.service('tf-toast-service'),
+
+  actions: {
+    onClick() {
+      this.get('toast').success();
+    }
+  }
+});

tests/dummy/app/routes/index.js

@@ -0,0 +1,4 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+});

tests/dummy/app/styles/app.css

@@ -0,0 +1,18 @@
+.tf-toast {
+  background-color: #1DE099;
+  z-index: 1;
+  width: 500px;
+  height: 24px;
+  font-size: 14px;
+  color: black;
+  border-radius: 2px;
+  padding: 16px;
+  border: none;
+  text-align: center;
+  margin: auto;
+}
+
+.close-x {
+  display: inline;
+  float: right;
+}

tests/dummy/app/templates/application.hbs

@@ -1,3 +1,2 @@
-<h2 id="title">Welcome to Ember</h2>
-
+{{tf-toaster}}
 {{outlet}}

tests/dummy/app/templates/index.hbs

@@ -0,0 +1,2 @@
+<button {{action 'onClick'}}>Click Me.</button>
+{{outlet}}

tests/integration/components/tf-toast-test.js

@@ -0,0 +1,25 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('tf-toast', 'Integration | Component | tf toast', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{tf-toast}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#tf-toast}}
+      template block text
+    {{/tf-toast}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});

tests/integration/components/tf-toaster-test.js

@@ -0,0 +1,25 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('tf-toaster', 'Integration | Component | tf toaster', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{tf-toaster}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#tf-toaster}}
+      template block text
+    {{/tf-toaster}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});

tests/unit/services/tf-toast-service-test.js

@@ -0,0 +1,12 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('service:tf-toast-service', 'Unit | Service | tf toast service', {
+  // Specify the other units that are required for this test.
+  // needs: ['service:foo']
+});
+
+// Replace this with your real tests.
+test('it exists', function(assert) {
+  let service = this.subject();
+  assert.ok(service);
+});