feat(Button): Avvia l'implementazione della componente per i bottoni

ref #44

package.json

@@ -24,6 +24,7 @@
     "@angular/router": "^6.0.3",
     "bootstrap-italia": "^0.9.1",
     "core-js": "^2.5.4",
+    "io-ts": "^1.2.1",
     "ngx-highlightjs": "^2.1.1",
     "rxjs": "^6.0.0",
     "zone.js": "^0.8.26"

projects/design-angular-kit/src/lib/button/button.component.html

@@ -0,0 +1,3 @@
+<button type="button" [class]="buttonClass" [disabled]="disabled">
+  <ng-content></ng-content>
+</button>

projects/design-angular-kit/src/lib/button/button.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ButtonComponent } from './button.component';
+
+describe('ButtonComponent', () => {
+  let component: ButtonComponent;
+  let fixture: ComponentFixture<ButtonComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ButtonComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/design-angular-kit/src/lib/button/button.component.ts

@@ -0,0 +1,82 @@
+import { Component, OnInit, Input, HostBinding, Output, HostListener } from '@angular/core';
+import { ThemeColor, THEME_COLORS } from '../models/ThemeColor';
+import { ButtonSize, BUTTON_SIZES } from '../models/ButtonSize';
+import { EventEmitter } from 'events';
+
+
+@Component({
+  selector: 'it-button',
+  templateUrl: './button.component.html',
+  styleUrls: ['./button.component.css']
+})
+export class ButtonComponent implements OnInit {
+
+  @Input()
+  get disabled(): boolean { return this._disabled; }
+  set disabled(value: boolean) { this._disabled = value != null && `${value}` !== 'false'; }
+  private _disabled = false;
+
+  @Input()
+  get outline(): boolean { return this._outline; }
+  set outline(value: boolean) { this._outline = value != null && `${value}` !== 'false'; }
+  private _outline = false;
+
+  @Input()
+  get block(): boolean { return this._block; }
+  set block(value: boolean) { this._block = value != null && `${value}` !== 'false'; }
+  private _block = false;
+
+  @Input()
+  get color(): any {
+    return this._color;
+  }
+  set color(value: any) {
+    if (ThemeColor.is(value)) {
+      this._color = value;
+    }
+  }
+  private _color;
+
+  @Input()
+  get size(): any {
+    return this._size;
+  }
+  set size(value: any) {
+    if (ButtonSize.is(value)) {
+      this._size = value;
+    }
+  }
+  private _size;
+
+  protected get buttonClass() {
+    let cssClass = 'btn';
+
+    if (this.color) {
+      if (this.outline) {
+        cssClass += ` btn-outline-${this.color}`;
+      } else {
+        cssClass += ` btn-${this.color}`;
+      }
+    }
+
+    if (this.size) {
+      cssClass += ` btn-${this.size}`;
+    }
+
+    if (this.block) {
+      cssClass += ' btn-block';
+    }
+
+    if (this.disabled) {
+      cssClass += ' disabled';
+    }
+
+    return cssClass;
+  }
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

projects/design-angular-kit/src/lib/design-angular-kit.module.ts

@@ -5,13 +5,14 @@ import { FormsModule } from '@angular/forms';
 import { CheckboxComponent } from './checkbox/checkbox.component';
 import { RadioButtonComponent, RadioGroupDirective } from './radio/radio.component';
 import { ToggleComponent } from './toggle/toggle.component';
+import { ButtonComponent } from './button/button.component';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule
   ],
-  declarations: [CheckboxComponent, ToggleComponent, RadioGroupDirective, RadioButtonComponent],
-  exports: [CheckboxComponent, ToggleComponent, RadioGroupDirective, RadioButtonComponent]
+  declarations: [CheckboxComponent, ToggleComponent, RadioGroupDirective, RadioButtonComponent, ButtonComponent],
+  exports: [CheckboxComponent, ToggleComponent, RadioGroupDirective, RadioButtonComponent, ButtonComponent]
 })
 export class DesignAngularKitModule { }

projects/design-angular-kit/src/lib/models/ButtonSize.ts

@@ -0,0 +1,17 @@
+import * as t from 'io-ts';
+
+export const ButtonSize = t.keyof({
+  lg: null,
+  sm: null,
+  xs: null,
+});
+
+const LG = 'lg';
+const SM = 'sm';
+const XS = 'xs';
+
+export const BUTTON_SIZES = {
+  LG: LG,
+  SM: SM,
+  XS: XS,
+};

projects/design-angular-kit/src/lib/models/ThemeColor.ts

@@ -0,0 +1,32 @@
+import * as t from 'io-ts';
+
+export const ThemeColor = t.keyof({
+  primary: null,
+  secondary: null,
+  danger: null,
+  warning: null,
+  info: null,
+  success: null,
+  light: null,
+  dark: null,
+});
+
+const PRIMARY = 'primary';
+const SECONDARY = 'secondary';
+const DANGER = 'danger';
+const WARNING = 'warning';
+const INFO = 'info';
+const SUCCESS = 'success';
+const LIGHT = 'light';
+const DARK = 'dark';
+
+export const THEME_COLORS = {
+  PRIMARY: PRIMARY,
+  SECONDARY: SECONDARY,
+  DANGER: DANGER,
+  WARNING: WARNING,
+  INFO: INFO,
+  SUCCESS: SUCCESS,
+  LIGHT: LIGHT,
+  DARK: DARK
+};

projects/design-angular-kit/src/public_api.ts

@@ -5,4 +5,5 @@
 export * from './lib/checkbox/checkbox.component';
 export * from './lib/toggle/toggle.component';
 export * from './lib/radio/radio.component';
+export * from './lib/button/button.component';
 export * from './lib/design-angular-kit.module';