docs: added button group docs (#782)

* added button group docs

* fixed tests

library/src/lib/button-group/button-group.component.ts

@@ -1,12 +1,24 @@
-import { Component } from '@angular/core';
+import { Component, HostBinding } from '@angular/core';
 
+/**
+ * Container for grouped buttons.
+ *
+ * ```html
+ * <fd-button-group>
+ *     <button fd-button-grouped>Button</button>
+ * </fd-button-group>
+ * ```
+ */
 @Component({
     selector: 'fd-button-group',
     templateUrl: './button-group.component.html',
     host: {
-        'role': 'group',
-        'aria-label': 'Group label',
-        class: 'fd-button-group'
+        'role': 'group'
     }
 })
-export class ButtonGroupComponent {}
+export class ButtonGroupComponent {
+
+    /** @hidden */
+    @HostBinding('class.fd-button-group')
+    fdButtonGroupClass: boolean = true;
+}

library/src/lib/button-group/button-grouped.directive.spec.ts

@@ -1,13 +1,16 @@
 import { ButtonGroupedDirective } from './button-grouped.directive';
-import { Component, DebugElement } from '@angular/core';
+import { Component, DebugElement, ElementRef, ViewChild } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
 @Component({
     selector: 'fd-test-component',
-    template: '<button fd-button-grouped>ButtonGrouped</button>'
+    template: '<button #directive fd-button-grouped>ButtonGrouped</button>'
 })
-export class TestComponent {}
+export class TestComponent {
+    @ViewChild('directive')
+    ref: ElementRef;
+}
 
 describe('ButtonGroupedDirective', () => {
     let fixture: ComponentFixture<TestComponent>,
@@ -33,27 +36,45 @@ describe('ButtonGroupedDirective', () => {
         directiveInstance = directive.injector.get(ButtonGroupedDirective);
 
         spyOn(directiveInstance, '_setProperties').and.callThrough();
-        spyOn(directiveInstance, '_addClassToElement');
+        spyOn(directiveInstance, '_addClassToElement').and.callThrough();
     });
 
     it('should create', () => {
         expect(directive).toBeTruthy();
-        directiveInstance.ngOnInit();
-        expect(directiveInstance._setProperties).toHaveBeenCalled();
-        expect(directiveInstance._addClassToElement).toHaveBeenCalledWith('fd-button--grouped');
     });
 
-    it('should add appropriate classes', () => {
-        directiveInstance.size = 'someSize';
-        directiveInstance.glyph = 'someGlyph';
+    it('should assign base class', () => {
+        expect(component.ref.nativeElement.className).toContain('fd-button--grouped');
+    });
+
+    it ('should support compact mode', () => {
         directiveInstance.compact = true;
-        directiveInstance.state = 'someState';
+        fixture.detectChanges();
+        expect(component.ref.nativeElement.className).toContain('fd-button--compact');
+    });
+
+    it('should support glyph', () => {
+        const testIconLabel = 'icon';
+        directiveInstance.glyph = testIconLabel;
+        directiveInstance.ngOnInit();
+        fixture.detectChanges();
+        expect(component.ref.nativeElement.className).toContain('sap-icon--' + testIconLabel);
+    });
+
+    it('should support state', () => {
+        const testState = 'state';
+        directiveInstance.state = testState;
+        directiveInstance.ngOnInit();
+        fixture.detectChanges();
+        expect(component.ref.nativeElement.className).toContain('is-' + testState);
+    });
+
+    it('should support size', () => {
+        const testSize = 'size';
+        directiveInstance.size = testSize;
         directiveInstance.ngOnInit();
-        expect(directiveInstance._setProperties).toHaveBeenCalled();
-        expect(directiveInstance._addClassToElement).toHaveBeenCalledWith('fd-button--grouped');
-        expect(directiveInstance._addClassToElement).toHaveBeenCalledWith('fd-button--someSize');
-        expect(directiveInstance._addClassToElement).toHaveBeenCalledWith('sap-icon--someGlyph');
-        expect(directiveInstance._addClassToElement).toHaveBeenCalledWith('fd-button--compact');
-        expect(directiveInstance._addClassToElement).toHaveBeenCalledWith('is-someState');
+        fixture.detectChanges();
+        expect(component.ref.nativeElement.className).toContain('fd-button--' + testSize);
     });
+
 });

library/src/lib/button-group/button-grouped.directive.ts

@@ -1,39 +1,56 @@
-import { Directive, ElementRef, Inject, Input } from '@angular/core';
+import { Directive, ElementRef, HostBinding, Input } from '@angular/core';
 import { AbstractFdNgxClass } from '../utils/abstract-fd-ngx-class';
 
+/**
+ * Directive to be applied to buttons that are members of a button group.
+ *
+ * ```html
+ * <button fd-button-grouped>Button</button>
+ * ```
+ */
 @Directive({
     // TODO to be discussed
     // tslint:disable-next-line:directive-selector
     selector: '[fd-button-grouped]'
 })
 export class ButtonGroupedDirective extends AbstractFdNgxClass {
-    @Input() id: string;
 
-    @Input() size: string;
+    /** Size of the button. Can be `xs`, `s`, or left blank for large size. */
+    @Input()
+    size: string;
 
-    @Input() glyph: string;
+    /** Glyph (icon) of the button. */
+    @Input()
+    glyph: string;
 
-    @Input() state: string;
+    /** State of the button. Can be `selected` or `disabled`. */
+    @Input()
+    state: string;
 
-    @Input() compact: boolean = false;
+    /** Whether the button should be in compact form. */
+    @Input()
+    @HostBinding('class.fd-button--compact')
+    compact: boolean = false;
 
+    /** @hidden */
+    @HostBinding('class.fd-button--grouped')
+    fdButtonGroupedClass: boolean = true;
+
+    /** @hidden */
+    constructor(private elementRef: ElementRef) {
+        super(elementRef);
+    }
+
+    /** @hidden */
     _setProperties() {
-        this._addClassToElement('fd-button--grouped');
         if (this.size) {
             this._addClassToElement('fd-button--' + this.size);
         }
         if (this.glyph) {
             this._addClassToElement('sap-icon--' + this.glyph);
         }
-        if (this.compact) {
-            this._addClassToElement('fd-button--compact');
-        }
         if (this.state) {
             this._addClassToElement('is-' + this.state);
         }
     }
-
-    constructor(@Inject(ElementRef) elementRef: ElementRef) {
-        super(elementRef);
-    }
 }