[ADF-2627] Icons-only mode for Info Drawer (#3398)

* tab with icon

* docs

* test

docs/core/info-drawer-tab.md

@@ -0,0 +1,51 @@
+# Info Drawer Tab component
+
+![Info drawer screenshot](../docassets/images/label-tab.png)
+
+## Basic usage
+
+Render a tab with label:
+
+```html
+<adf-info-drawer>
+
+    <adf-info-drawer-tab [label]="'Tab1'">
+        <div> Tab1 content</div>
+    </adf-info-drawer-tab>
+
+    <adf-info-drawer-tab [label]="'Tab2'">
+        <div> Tab2 content</div>
+    </adf-info-drawer-tab>
+</adf-info-drawer>
+```
+
+Render tab with icon instead of labels:
+
+```html
+<adf-info-drawer>
+
+    <adf-info-drawer-tab [label]="'Tab1'" icon="comment">
+        <div> Tab1 content</div>
+    </adf-info-drawer-tab>
+
+    <adf-info-drawer-tab [label]="'Tab2'" icon="people">
+            <div> Tab2 content</div>
+    </adf-info-drawer-tab>
+
+</adf-info-drawer>
+```
+
+![Info drawer screenshot](../docassets/images/icon-tab.png)
+
+## Class members
+
+### Properties
+
+| Name | Type | Default value | Description |
+| -- | -- | -- | -- |
+| label | `string` | '' | Tab label. |
+| icon | `string` |  null | The material design icon. |
+
+## See also
+
+- [Info drawer layout component](info-drawer.component.md)

docs/core/info-drawer.component.md

@@ -53,4 +53,5 @@ You can also customize the three regions (title, buttons and content) as with th
 
 ## See also
 
--   [Info drawer layout component](info-drawer-layout.component.md)
+- [Info drawer layout component](info-drawer-layout.component.md)
+- [Info drawer layout component](info-drawer-tab.component.md)

lib/core/info-drawer/info-drawer.component.html

@@ -10,6 +10,12 @@
         <mat-tab-group [(selectedIndex)]="selectedIndex" class="adf-info-drawer-tabs" (selectedTabChange)="onTabChange($event)">
             <ng-container *ngFor="let contentBlock of contentBlocks">
                 <mat-tab [label]="contentBlock.label" class="adf-info-drawer-tab">
+                    <ng-container *ngIf="contentBlock.icon">
+                        <ng-template mat-tab-label>
+                            <mat-icon>{{ contentBlock.icon }}</mat-icon>
+                        </ng-template>
+                    </ng-container>
+
                     <ng-container *ngTemplateOutlet="contentBlock.content"></ng-container>
                 </mat-tab>
             </ng-container>

lib/core/info-drawer/info-drawer.component.spec.ts

@@ -75,6 +75,8 @@ describe('InfoDrawerComponent', () => {
         </adf-info-drawer-tab>
         <adf-info-drawer-tab label="Tab2">
         </adf-info-drawer-tab>
+        <adf-info-drawer-tab label="Tab3" icon="tab-icon">
+        </adf-info-drawer-tab>
     </adf-info-drawer>
        `
 })
@@ -123,4 +125,12 @@ describe('Custom InfoDrawer', () => {
         expect(tab.length).toBe(1);
         expect(tab[0].nativeElement.innerText).toBe('Tab2');
     });
+
+    it('should render a tab with icon', () => {
+        component.tabIndex = 2;
+        fixture.detectChanges();
+        let tab: any = fixture.debugElement.queryAll(By.css('.mat-tab-label-active'));
+        expect(tab[0].nativeElement.innerText).not.toBe('Tab3');
+        expect(tab[0].nativeElement.innerText).toContain('tab-icon');
+    });
 });

lib/core/info-drawer/info-drawer.component.ts

@@ -22,9 +22,14 @@ import { MatTabChangeEvent } from '@angular/material';
     template: '<ng-template><ng-content></ng-content></ng-template>'
 })
 export class InfoDrawerTabComponent {
+    /** The title of the tab. */
     @Input()
     label: string = 'Main tab';
 
+    /** Icon to render for the tab. */
+    @Input()
+    icon: string = null;
+
     @ViewChild(TemplateRef)
     content: TemplateRef<any>;
 }