docs(Button): Inizia la realizzazione della documentazione dedicata a…

…lla componente per i bottoni

ref #44

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

@@ -1,31 +1,57 @@
 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';
-
 
+/**
+ * Un bottone con design bootstrap italia. Supporta tutte le funzionalità di un bottone HTML5.
+ */
 @Component({
   selector: 'it-button',
   templateUrl: './button.component.html',
   styleUrls: ['./button.component.css']
 })
 export class ButtonComponent implements OnInit {
 
+  /**
+   * Se presente, il pulsante avrà un effetto di trasparenza e non reagirà al click
+   */
   @Input()
   get disabled(): boolean { return this._disabled; }
   set disabled(value: boolean) { this._disabled = value != null && `${value}` !== 'false'; }
   private _disabled = false;
 
+  /**
+   * Stabilisce se lo stile del pulsante avrà un contorno.
+   * Accetta una espressione booleana o può essere usato come attributo senza valore.
+   * Deve funzionare solo in congiunzione con un colore definito, altrimenti l'attributo viene ignorato.
+   */
   @Input()
   get outline(): boolean { return this._outline; }
   set outline(value: boolean) { this._outline = value != null && `${value}` !== 'false'; }
   private _outline = false;
 
+  /**
+   * Indica se il pulsante occupa tutta l'ampiezza a sua disposizione.
+   */
   @Input()
   get block(): boolean { return this._block; }
   set block(value: boolean) { this._block = value != null && `${value}` !== 'false'; }
   private _block = false;
 
+  /**
+   * Stabilisce il colore del pulsante a seconda delle classi di bootstrap.
+   * Può avere valori:
+   * <ul style="list-style: none;">
+   * <li> primary
+   * <li> secondary
+   * <li> danger
+   * <li> warning
+   * <li> info
+   * <li> success
+   * <li> light
+   * <li> dark
+   * </ul>
+   */
   @Input()
   get color(): any {
     return this._color;
@@ -37,6 +63,14 @@ export class ButtonComponent implements OnInit {
   }
   private _color;
 
+  /**
+   * Indica la grandezza del pulsante. Può assumere i valori:
+   * <ul style="list-style: none;">
+   * <li> lg
+   * <li> sm
+   * <li> xs
+   * </ul>
+   */
   @Input()
   get size(): any {
     return this._size;

src/app/app-routing.module.ts

@@ -13,7 +13,8 @@ const routes: Routes = [
     { path: '', redirectTo: 'checkbox', pathMatch: 'full' },
     { path: 'checkbox', loadChildren: 'src/app/checkbox/checkbox.module#CheckboxModule' },
     { path: 'toggle', loadChildren: 'src/app/toggle/toggle.module#ToggleModule' },
-    { path: 'radio', loadChildren: 'src/app/radio/radio.module#RadioModule' }
+    { path: 'radio', loadChildren: 'src/app/radio/radio.module#RadioModule' },
+    { path: 'button', loadChildren: 'src/app/button/button.module#ButtonModule' }
   ]}
 ];
 

src/app/button/button-example-color/button-example-color.component.html

@@ -0,0 +1,33 @@
+<div class="card w-50 mt-2">
+  <div class="card-body">
+
+    <h4 class="card-title">Varianti di colore con sfondo chiaro</h4>
+    <div class="py-1">
+      <p class="card-text" class="example-section">
+        <it-button [color]="primaryColor">Primary</it-button>
+        <it-button [color]="primaryColor" [outline]="isOutlined">Primary outline</it-button>
+        <it-button [color]="primaryColor" [disabled]="isDisabled">Primary disabled</it-button>
+      </p>
+      <p class="card-text" class="example-section">
+        <it-button [color]="secondaryColor">Secondary</it-button>
+        <it-button [color]="secondaryColor" [outline]="isOutlined">Secondary outline</it-button>
+        <it-button [color]="secondaryColor" [disabled]="isDisabled">Secondary disabled</it-button>
+      </p>
+    </div>
+
+    <h4 class="card-title">Varianti di colore con sfondo scuro</h4>
+    <div class="bg-dark py-1">
+      <p class="card-text" class="example-section">
+        <it-button [color]="primaryColor">Primary</it-button>
+        <it-button [color]="primaryColor" [outline]="isOutlined">Primary outline</it-button>
+        <it-button [color]="primaryColor" [disabled]="isDisabled">Primary disabled</it-button>
+      </p>
+      <p class="card-text" class="example-section">
+        <it-button [color]="secondaryColor">Secondary</it-button>
+        <it-button [color]="secondaryColor" [outline]="isOutlined">Secondary outline</it-button>
+        <it-button [color]="secondaryColor" [disabled]="isDisabled">Secondary disabled</it-button>
+      </p>
+    </div>
+
+  </div>
+</div>

src/app/button/button-example-color/button-example-color.component.scss

@@ -0,0 +1,4 @@
+it-button {
+    margin: 4px 8px;
+    width: 200px;
+}

src/app/button/button-example-color/button-example-color.component.spec.ts

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

src/app/button/button-example-color/button-example-color.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'it-button-example-color',
+  templateUrl: './button-example-color.component.html',
+  styleUrls: ['./button-example-color.component.scss']
+})
+export class ButtonExampleColorComponent implements OnInit {
+
+  primaryColor = 'primary';
+  secondaryColor = 'secondary';
+  isDisabled = true;
+  isOutlined = true;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/button/button-example-size/button-example-size.component.html

@@ -0,0 +1,35 @@
+<div class="card w-50 mt-2">
+  <div class="card-body">
+    <h4 class="card-title">Varianti di dimensione</h4>
+
+    <p class="card-text" class="example-section">
+      <it-button [size]="xsSize" [color]="primaryColor">
+        Button XS
+      </it-button>
+
+      <it-button [size]="xsSize" [color]="secondaryColor">
+        Button XS
+      </it-button>
+    </p>
+
+    <p class="card-text" class="example-section">
+      <it-button [size]="smSize" [color]="primaryColor">
+        Button SM
+      </it-button>
+
+      <it-button [size]="smSize" [color]="secondaryColor">
+        Button SM
+      </it-button>
+    </p>
+
+    <p class="card-text" class="example-section">
+      <it-button [size]="lgSize" [color]="primaryColor">
+        Button LG
+      </it-button>
+
+      <it-button [size]="lgSize" [color]="secondaryColor">
+        Button LG
+      </it-button>
+    </p>
+  </div>
+</div>

src/app/button/button-example-size/button-example-size.component.scss

@@ -0,0 +1,4 @@
+it-button {
+    margin: 4px 8px;
+    width: 200px;
+}

src/app/button/button-example-size/button-example-size.component.spec.ts

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

src/app/button/button-example-size/button-example-size.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'it-button-example-size',
+  templateUrl: './button-example-size.component.html',
+  styleUrls: ['./button-example-size.component.scss']
+})
+export class ButtonExampleSizeComponent implements OnInit {
+
+  primaryColor = 'primary';
+  secondaryColor = 'secondary';
+
+  lgSize = 'lg';
+  smSize = 'sm';
+  xsSize = 'xs';
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/button/button-example/button-example.component.html

@@ -0,0 +1,23 @@
+<div class="card w-50 mt-2">
+  <div class="card-body">
+    <h4 class="card-title">Configurazione bottone</h4>
+
+    <p class="card-text" class="example-section">
+      <it-button>
+        Abilitato
+      </it-button>
+    </p>
+
+    <p class="card-text" class="example-section">
+      <it-button disabled>
+        Disabilitato
+      </it-button>
+    </p>
+
+    <p class="card-text" class="example-section">
+      <it-button block>
+        A blocco
+      </it-button>
+    </p>
+  </div>
+</div>

src/app/button/button-example/button-example.component.spec.ts

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

src/app/button/button-example/button-example.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'it-button-example',
+  templateUrl: './button-example.component.html',
+  styleUrls: ['./button-example.component.scss']
+})
+export class ButtonExampleComponent implements OnInit {
+  color = 'primary';
+  disabled = false;
+  isOutlined = false;
+  size = 'lg';
+  isBlock = false;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/button/button-examples/button-examples.component.scss

@@ -0,0 +1,4 @@
+it-button {
+    margin: 4px 8px;
+    width: 200px;
+}

src/app/button/button-examples/button-examples.component.spec.ts

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