Add tab ui

src/browser/ui/_all-theme.scss

@@ -9,6 +9,7 @@
 @import "./button-toggle/button-toggle-theme";
 @import "./radio/radio-theme";
 @import "./line/line-theme";
+@import "./tabs/tab-group-theme";
 
 @mixin gd-ui-all-theme($theme) {
     @include gd-ui-autocomplete-theme($theme);
@@ -22,4 +23,5 @@
     @include gd-ui-button-toggle-theme($theme);
     @include gd-ui-radio-theme($theme);
     @include gd-ui-line-theme($theme);
+    @include gd-ui-tab-group-theme($theme);
 }

src/browser/ui/tabs/_tab-group-sizes.scss

@@ -0,0 +1 @@
+$tab-size: 29px;

src/browser/ui/tabs/_tab-group-theme.scss

@@ -0,0 +1,32 @@
+@import "../style/theming";
+
+@mixin gd-ui-tab-group-theme($theme) {
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+    $primary: map-get($theme, primary);
+
+    .TabGroup {
+        border-bottom: 1px solid gd-color($foreground, divider);
+
+        &__list > li:not(:last-child) {
+            border-right: 1px solid gd-color($foreground, divider);
+        }
+
+        &__inkBar {
+            background-color: gd-color($primary);
+        }
+    }
+
+    .TabItem {
+        background-color: gd-color($background, background-highlight);
+
+        &--activate {
+            box-shadow: inset 0 -2px 0px gd-color($primary);
+        }
+
+        &:focus {
+            outline: 0;
+            background-color: gd-color($background, focused-button);
+        }
+    }
+}

src/browser/ui/tabs/index.ts

@@ -0,0 +1,3 @@
+export * from './tabs.module';
+export * from './tab-group.component';
+export * from './tab-item.directive';

src/browser/ui/tabs/tab-control.spec.ts

@@ -0,0 +1,90 @@
+import { TabControl } from './tab-control';
+
+
+describe('browser.ui.tabs.TabControl', () => {
+    let control: TabControl;
+
+    beforeEach(() => {
+        control = new TabControl([
+            { name: 'Apple', value: 'apple' },
+            { name: 'Banana', value: 'banana' },
+            { name: 'Tomato', value: 'tomato' },
+        ]);
+    });
+
+    describe('construct', () => {
+        it('should make unique id when id was not provided.', () => {
+            expect(/gd-tab-\d+/.test(control.tabs[0].id)).toBe(true);
+            expect(/gd-tab-\d+/.test(control.tabs[1].id)).toBe(true);
+        });
+
+        it('should select first tab as active.', () => {
+            expect(control.activeTabIndex).toEqual(0);
+            expect(control.activateTab.value).toEqual('apple');
+        });
+    });
+
+    describe('activateTabChanges', () => {
+        it('should emit event when active tab changed.', () => {
+            const callback = jasmine.createSpy('activate tab changes callback');
+            const subscription = control.activateTabChanges.subscribe(callback);
+
+            control.selectTabByIndex(1);
+
+            expect(callback).toHaveBeenCalledWith(control.tabs[1]);
+            subscription.unsubscribe();
+        });
+    });
+
+    describe('selectFirstTab', () => {
+        beforeEach(() => {
+            control.selectTabByIndex(2);
+        });
+
+        it('should select first tab.', () => {
+            control.selectFirstTab();
+            expect(control.activeTabIndex).toEqual(0);
+        });
+    });
+
+    describe('selectLastTab', () => {
+        it('should select last tab.', () => {
+            control.selectLastTab();
+            expect(control.activeTabIndex).toEqual(2);
+        });
+    });
+
+    describe('selectTabByIndex', () => {
+        it('should select tab by index.', () => {
+            control.selectTabByIndex(1);
+            expect(control.activeTabIndex).toEqual(1);
+        });
+
+        it('should not select tab if index is not valid.', () => {
+            control.selectTabByIndex(3);
+            expect(control.activeTabIndex).toEqual(0);
+
+            control.selectTabByIndex(-1);
+            expect(control.activeTabIndex).toEqual(0);
+        });
+    });
+
+    describe('selectTabByValue', () => {
+        it('should select tab by value.', () => {
+            control.selectTabByValue('tomato');
+            expect(control.activeTabIndex).toEqual(2);
+        });
+
+        it('should not select tab if value is not valid.', () => {
+            control.selectTabByValue('whats this?');
+            expect(control.activeTabIndex).toEqual(0);
+        });
+    });
+
+    describe('deselect', () => {
+        it('should remove active tab.', () => {
+            control.deselect();
+            expect(control.activeTabIndex).toBeNull();
+        });
+    });
+});

src/browser/ui/tabs/tab-control.ts

@@ -0,0 +1,78 @@
+import { Observable, Subject } from 'rxjs';
+
+
+let uniqueId = 0;
+
+
+export interface Tab<T = any> {
+    id?: string;
+    name: string;
+    value: T;
+}
+
+
+export class TabControl<T = any> {
+    readonly tabs: Tab<T>[] = [];
+
+    private currentActiveTabIndex: number | null = null;
+    private _activateTabChanges = new Subject<Tab>();
+
+    constructor(tabs: Tab<T>[]) {
+        if (tabs.length === 0) {
+            throw new Error('Tabs must be provided at least 1.');
+        }
+
+        this.tabs = tabs.map(tab => ({
+            id: tab.id ? tab.id : `gd-tab-${uniqueId++}`,
+            name: tab.name,
+            value: tab.value,
+        }));
+
+        this.selectTabByIndex(0);
+    }
+
+    get activateTabChanges(): Observable<Tab> {
+        return this._activateTabChanges.asObservable();
+    }
+
+    get activateTab(): Tab | null {
+        if (this.currentActiveTabIndex !== null) {
+            return this.tabs[this.currentActiveTabIndex];
+        } else {
+            return null;
+        }
+    }
+
+    get activeTabIndex(): number | null {
+        return this.currentActiveTabIndex;
+    }
+
+    selectFirstTab(): void {
+        this.selectTabByIndex(0);
+    }
+
+    selectLastTab(): void {
+        this.selectTabByIndex(this.tabs.length - 1);
+    }
+
+    selectTabByIndex(index: number): void {
+        if (this.tabs[index]) {
+            this.currentActiveTabIndex = index;
+            this._activateTabChanges.next(this.activateTab);
+        }
+    }
+
+    selectTabByValue(value: T): void {
+        const index = this.tabs.findIndex(tab => tab.value === value);
+
+        if (index !== -1) {
+            this.currentActiveTabIndex = index;
+            this._activateTabChanges.next(this.activateTab);
+        }
+    }
+
+    deselect(): void {
+        this.currentActiveTabIndex = null;
+        this._activateTabChanges.next(this.activateTab);
+    }
+}

src/browser/ui/tabs/tab-group.component.html

@@ -0,0 +1,10 @@
+<ul fxLayout role="tablist" class="TabGroup__list">
+    <li fxFlex="1 0 auto" role="tab" gdTabItem *ngFor="let tab of tabs; let i = index"
+        (click)="_onClickTab(i)"
+        [active]="tabControl.activeTabIndex === i"
+        [attr.tabIndex]="_getTabIndex(i)"
+        [attr.aria-posinset]="i + 1"
+        [attr.aria-selected]="tabControl.activeTabIndex === i">
+        {{ tab.name }}
+    </li>
+</ul>

src/browser/ui/tabs/tab-group.component.scss

@@ -0,0 +1,33 @@
+@import "../style/typography";
+@import "./tab-group-sizes";
+
+.TabGroup {
+    position: relative;
+
+    &__list {
+        margin: 0;
+        padding: 0;
+
+        > li {
+            list-style: none;
+        }
+    }
+
+    &__inkBar {
+        position: absolute;
+        height: 2px;
+        bottom: 0;
+    }
+}
+
+.TabItem {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: $tab-size;
+
+    font: {
+        size: $font-size;
+        weight: $font-weight-semiBold;
+    };
+}