Merge pull request acoustep#62 from donaldwasserman/feat/flash

Add Callout/Flash Message component

README.md

@@ -191,6 +191,38 @@ Usage
 {{/zf-accordion}}
 ```
 
+### Callout (With `ember-cli-flash` Integration)
+
+This addon tends to avoid markup-only related components, this component is a special case.
+This is a good way to easily provide a flash-message-style component to your Ember app.
+
+This is designed to integrate with the [ember-cli-flash](https://github.com/poteto/ember-cli-flash) addon
+(which provides a foundation5 styling option)
+
+Usage with ember-cli-flash
+
+```hbs
+  {{#each flashMessages.queue as |flash|}}
+    {{zf-callout flash=flash}}
+  {{/each}}
+
+```
+
+If you want to bring your own data and actions:
+
+```hbs
+  {{zf-callout type="success" content="add content here"}}
+```
+
+Or use block params:
+
+```hbs
+  {{#zf-callout}}
+    Oops, something happened, but I don't know what.
+  {{/zf-callout}}
+```
+
+
 ### Drilldown Menu
 
 Usage

addon/components/zf-callout.js

@@ -0,0 +1,23 @@
+import Ember from 'ember';
+import layout from '../templates/components/zf-callout';
+import zfWidget from 'ember-cli-foundation-6-sass/mixins/zf-widget';
+
+const {computed} = Ember;
+
+export default Ember.Component.extend(zfWidget, {
+  layout: layout,
+  type: '',
+  content: null,
+  classNameBindings: ['alertType', 'active', 'exiting', 'flashType'],
+  classNames: ['callout'],
+
+  // handle bindings for ember-cli-flash integration
+  flashType: computed('flash.type', function() {
+    return this.get('flash.type');
+  }),
+
+  // handle bindings for regular integration
+  alertType: computed('type', function() {
+    return this.get('type');
+  })
+});

addon/templates/components/zf-callout.hbs

@@ -0,0 +1,20 @@
+{{#if hasBlock}}
+  {{#if flash}}
+    {{!-- todo: investigate using block-slots --}}
+    {{yield this flash}}
+  {{/if}}
+  {{!-- this contains user provided block content --}}
+  {{yield}}
+
+{{else}}
+
+  {{#if flash}}
+    {{flash.message}}
+
+  {{/if}}
+
+  {{#if content}}
+    {{content}}
+  {{/if}}
+
+{{/if}}

app/components/zf-callout.js

@@ -0,0 +1 @@
+export { default } from 'ember-cli-foundation-6-sass/components/zf-callout';

tests/dummy/app/templates/application.hbs

@@ -303,5 +303,14 @@
     </div>
   </div>
 
+  <div class="row">
+    <div class="small-8 large-expand columns">
+      <h2>Callout</h2>
+      {{#zf-callout type="success"}}
+        Your data was successfully saved to <code>dev/null</code>
+      {{/zf-callout}}
+    </div>
+  </div>
+
   {{/if}}
 {{/zf-off-canvas}}

tests/integration/components/zf-callout-test.js

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