Add Zippy component

lib/common/components/Zippy/zippy.html

@@ -0,0 +1,9 @@
+<div class="zippy zippy-{{type}}" [ng-class]="{'zippy-empty': empty}">
+  <div class="zippy-title" (click)="toggle()">
+    {{title}}
+    <span class="zippy-indicator"> {{ visible ? '&blacktriangledown;' : '&blacktriangleright;' }} </span>
+  </div>
+  <div class="zippy-content" [hidden]="!visible">
+    <ng-content></ng-content>
+  </div>
+</div>

lib/common/components/Zippy/zippy.js

@@ -0,0 +1,28 @@
+'use strict';
+
+import {Component, View, EventEmitter, CORE_DIRECTIVES} from 'angular2/angular2';
+
+@Component({
+  selector: 'zippy',
+  events: ['open', 'close'],
+  inputs: ['title', 'visible', 'type', 'empty']
+})
+@View({
+  templateUrl: './lib/common/components/Zippy/zippy.html',
+  styleUrls: ['./lib/common/components/Zippy/zippy.css'],
+  directives: [CORE_DIRECTIVES]
+})
+export class Zippy {
+
+  constructor() {
+    this.type = 'general';
+    this.visible = false;
+    this.open = new EventEmitter();
+    this.close = new EventEmitter();
+  }
+
+  toggle() {
+    this.visible = !this.visible;
+    (this.visible) ? this.open.next() : this.close.next();
+  }
+}

lib/common/components/Zippy/zippy.scss

@@ -0,0 +1,57 @@
+$zippy-success-bg-color: #E1F5E3;
+$zippy-success-color: #09AC1C;
+
+$zippy-error-bg-color: #FBE7E7;
+$zippy-error-color: #E54541;
+
+$zippy-info-bg-color: #E1EFF5;
+$zippy-info-color: #096DAC;
+
+$zippy-redirect-bg-color: #F5F0E1;
+$zippy-redirect-color: #AC7C09;
+
+.zippy-title {
+  padding: 10px;
+  margin: 2px 0;
+  background-color: #f2f2f2;
+  cursor: pointer;
+
+  .zippy-success > & {
+    color: $zippy-success-color;
+    background-color: $zippy-success-bg-color;
+  }
+
+  .zippy-error > & {
+    color: $zippy-error-color;
+    background-color: $zippy-error-bg-color;
+  }
+
+  .zippy-redirect > & {
+    color: $zippy-redirect-color;
+    background-color: $zippy-redirect-bg-color;
+  }
+
+  .zippy-info > & {
+    color: $zippy-info-color;
+    background-color: $zippy-info-bg-color;
+  }
+}
+
+span.zippy-indicator {
+  float: right;
+  font-size: 1.2em;
+}
+
+.zippy-content {
+  padding: 15px 0;
+}
+
+.zippy-empty {
+  .zippy-indicator {
+    display: none;
+  }
+
+  .zippy-content {
+    display: none;
+  }
+}