Added alerts (#16)

Added alerts component

Author: lalitindoria

.editorconfig

@@ -11,10 +11,15 @@ charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
 indent_style = space
+indent_size = 4
+
+[*.css]
 indent_size = 2
 
 [*.hbs]
 insert_final_newline = false
+indent_size = 2
 
 [*.{diff,md}]
 trim_trailing_whitespace = false
+indent_size = 2

addon/components/s-alert.js

@@ -0,0 +1,45 @@
+import Component from '@ember/component';
+import {
+    computed
+} from '@ember/object';
+import layout from '../templates/components/s-alert';
+import { later } from '@ember/runloop';
+
+export default Component.extend({
+    layout,
+    classNames: ['alert', 's-alert'],
+    classNameBindings: ['alertClass', 'disappearing'],
+    isHidden: false,
+    disappearing: computed('isHidden', function() {
+        return this.get('isHidden') ? 'disappearing' : '';
+    }),
+    alertClasses: computed(function () {
+        return {
+            info: 'alert-primary',
+            warning: 'alert-warning',
+            success: 'alert-success'
+        };
+    }),
+    alertIcons: computed(function () {
+        return {
+            info: 'info',
+            warning: 'alert-triangle',
+            success: 'check-circle'
+        };
+    }),
+
+    alertClass: computed('type', function () {
+        return this.get('alertClasses')[this.get('type')];
+    }),
+    alertIcon: computed('type', function () {
+        return this.get('alertIcons')[this.get('type')];
+    }),
+    actions: {
+        dismissAlert() {
+            this.set('isHidden', true);
+            later(this, function () {
+                this.set('isVisible', false);
+            }, 500);
+        }
+    }
+});

addon/styles/addon.scss

@@ -16,3 +16,4 @@
 @import "components/_s-notification";
 @import "components/_s-steps";
 @import "components/_s-timeline";
+@import "components/s-alert";

addon/styles/components/_s-alert.scss

@@ -0,0 +1,71 @@
+.s-alert {
+    &.alert-primary {
+        background: #F2FAFF;
+        border: 0.5px solid #049EE0;
+
+        .alert-icon {
+            color: #049EE0;
+        }
+    }
+
+    &.alert-warning {
+        background: #FFF4D6;
+        border: 0.5px solid #F5A623;
+        .alert-icon {
+            color: #F5A623;
+            vertical-align: sub;
+            margin-bottom: 0;
+        }
+    }
+
+    &.alert-success {
+        border: 0.5px solid #197B1B;
+        background: #E0F6DE;
+    }
+
+    &.alert {
+        border-radius: 4px !important;
+        padding: 0.2rem 1rem;
+        margin-bottom: 5px;
+    }
+
+    p {
+      margin-bottom: 0;
+      font-size: 12px;
+      color: #424B52;
+
+      .alert-icon {
+        width: 15px;
+        height: auto;
+        margin-bottom: 2px;
+      }
+
+      .close {
+        margin-left: 20px;
+        opacity: 1;
+        color: #424B52;
+        svg {
+          width: 15px;
+          height: auto;
+          margin-bottom: 13px;
+        }
+        &:focus {
+            outline: 0;
+        }
+      }
+    }
+
+    &.disappearing {
+        animation: out 0.5s ease 0s forwards 1;
+    }
+}
+
+@keyframes out {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+    }
+}

addon/templates/components/s-alert.hbs

@@ -0,0 +1,9 @@
+<p>
+  {{s-icon name=alertIcon cssClasses='alert-icon'}}
+  {{yield}}
+  {{#if dismissable}}
+    <button type="button" class="close" {{action "dismissAlert"}}>
+        {{s-icon name='x-circle'}}
+    </button>
+  {{/if}}
+</p>

app/components/s-alert.js

@@ -0,0 +1 @@
+export { default } from 'space-ui/components/s-alert';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "space-ui",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "description": "Space UI components for Ember projects.",
   "keywords": [
     "ember-addon",

tests/dummy/app/router.js

@@ -33,6 +33,7 @@ Router.map(function () {
         this.route('collapse');
         this.route('checkbox');
         this.route('timeline');
+        this.route('alerts');
 
 
   /* Your docs routes go here */

tests/dummy/app/templates/docs.hbs

@@ -14,6 +14,7 @@
     {{nav.item "Input" "docs.input"}}
     {{nav.item "Radio" "docs.radio"}}
     {{nav.item "Checkbox" "docs.checkbox"}}
+    {{nav.item "Alerts" "docs.alerts"}}
     {{nav.item "Tag" "docs.tag"}}
     {{nav.item "Icon" "docs.icon"}}
     {{nav.item "Loader" "docs.loader"}}

tests/dummy/app/templates/docs/alerts.md

@@ -0,0 +1,28 @@
+# Alerts
+
+<p>Short messages to provide contextual feedback.</p>
+
+{{#docs-demo as |demo|}}
+{{#demo.example name='demo-alerts.hbs'}}
+
+
+{{#s-alert
+    dismissable=true type='info'}}
+      This is a simple info alert.
+{{/s-alert}}
+
+{{/demo.example}}
+
+{{demo.snippet 'demo-alerts.hbs'}}
+{{/docs-demo}}
+
+
+
+
+
+
+
+| Property   | Description                                                                  | Type    | Default |
+| ---------- | ---------------------------------------------------------------------------- | ------- | ------- |
+| dismissable      | Specifies whether the alert can be dismissed.                                | boolean  | false  |
+

tests/integration/components/s-alert-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | s-alert', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`{{s-alert}}`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      {{#s-alert}}
+        template block text
+      {{/s-alert}}
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});