Vertical tabs

skyux-spa-visual-tests/src/app/home.component.ts

@@ -43,6 +43,7 @@ export class HomeComponent {
     'text-highlight',
     'tiles',
     'toolbar',
+    'vertical-tabs',
     'wait'
   ];
 }

skyux-spa-visual-tests/src/app/vertical-tabs/index.html

@@ -0,0 +1 @@
+<vertical-tabs-visual></vertical-tabs-visual>

skyux-spa-visual-tests/src/app/vertical-tabs/vertical-tabs-visual.component.html

@@ -0,0 +1,50 @@
+<div id="screenshot-vertical-tabset">
+  <sky-vertical-tabset showTabsText='Tab list'>
+    <sky-vertical-tabset-group 
+      groupHeading="Group 1"
+      [open]="group1Open"
+      [disabled]="group1Disabled"
+    >
+      <sky-vertical-tab tabHeading="Group 1 Tab 1" tabHeaderCount="5" [active]="active">
+        Group 1 Tab 1 content
+      </sky-vertical-tab>
+      <sky-vertical-tab tabHeading="Group 1 Tab 2">
+        Group 1 Tab 2 content
+      </sky-vertical-tab>
+    </sky-vertical-tabset-group>
+
+    <sky-vertical-tabset-group 
+      class="group2"
+      groupHeading="Group 2"
+      [open]="group2Open"
+      [disabled]="group2Disabled"
+    >
+      <sky-vertical-tab tabHeading="Group 2 Tab 1" tabHeaderCount="6">
+        Group 2 Tab 1 content
+      </sky-vertical-tab>
+      <sky-vertical-tab id="group2Tab2" tabHeading="Group 2 Tab 2" tabHeaderCount="0">
+        Group 2 Tab 2 content
+      </sky-vertical-tab>
+      <sky-vertical-tab 
+        tabHeading="Group 2 Tab 2 - disabled" 
+        tabHeaderCount="0" 
+        [disabled]="tabDisabled"
+      >
+        Group 2 Tab 3 content
+      </sky-vertical-tab>
+    </sky-vertical-tabset-group>
+
+    <sky-vertical-tabset-group 
+      groupHeading="Group 3"
+      [open]="group3Open"
+      [disabled]="group3Disabled"
+    >
+      <sky-vertical-tab tabHeading="Group 3 Tab 1">
+        Group 3 Tab 1 content
+      </sky-vertical-tab>
+      <sky-vertical-tab tabHeading="Group 3 Tab 2">
+        Group 3 Tab 2 content
+      </sky-vertical-tab>
+    </sky-vertical-tabset-group>
+  </sky-vertical-tabset>
+</div>

skyux-spa-visual-tests/src/app/vertical-tabs/vertical-tabs-visual.component.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component} from '@angular/core';
+
+@Component({
+  selector: 'vertical-tabs-visual',
+  templateUrl: './vertical-tabs-visual.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class VerticalTabsVisualComponent {
+  public group1Open: boolean = true;
+  public group1Disabled: boolean = false;
+
+  public group2Open: boolean = false;
+  public group2Disabled: boolean = false;
+
+  public group3Open: boolean = false;
+  public group3Disabled: boolean = true;
+
+  public active: boolean = true;
+  public tabDisabled: boolean = true;
+}

skyux-spa-visual-tests/src/app/vertical-tabs/vertical-tabs.visual-spec.ts

@@ -0,0 +1,89 @@
+import { SkyVisualTest } from '../../../config/utils/visual-test-commands';
+import { element, by, browser } from 'protractor';
+
+describe('Vertical tabSet', () => {
+
+  it('should match previous vertical tabset screenshot', () => {
+    return SkyVisualTest.setupTest('vertical-tabs')
+    .then(() => {
+      return SkyVisualTest.compareScreenshot({
+        screenshotName: 'vertical-tabset',
+        selector: '#screenshot-vertical-tabset'
+      });
+    });
+  });
+
+  it('should match previous vertical tabset screenshot after clicking tab', () => {
+    return SkyVisualTest.setupTest('vertical-tabs')
+    .then(() => {
+
+      const groupElement = element(by.css('.group2'));
+      browser.wait(function() { return browser.isElementPresent(groupElement); }, 8000);
+
+      // open group
+      groupElement.click();
+
+      browser.sleep(1000);
+
+      // click tab
+      element(by.id('group2Tab2')).click();
+
+      return SkyVisualTest.compareScreenshot({
+        screenshotName: 'vertical-tabset-clicked-tab',
+        selector: '#screenshot-vertical-tabset'
+      });
+    });
+  });
+
+  it('should match previous vertical tabset screenshot on mobile', () => {
+    return SkyVisualTest.setupTest('vertical-tabs', 480)
+    .then(() => {
+      return SkyVisualTest.compareScreenshot({
+        screenshotName: 'vertical-tabset-mobile',
+        selector: '#screenshot-vertical-tabset'
+      });
+    });
+  });
+
+  it('should match previous vertical tabset screenshot on mobile clicking show tabs', () => {
+    return SkyVisualTest.setupTest('vertical-tabs', 480)
+    .then(() => {
+
+      const showTabsButton = element(by.css('.sky-vertical-tabset-show-tabs-btn'));
+      browser.wait(function() { return browser.isElementPresent(showTabsButton); }, 8000);
+
+      // show tabs
+      showTabsButton.click();
+
+      return SkyVisualTest.compareScreenshot({
+        screenshotName: 'vertical-tabset-mobile-show-tabs',
+        selector: '#screenshot-vertical-tabset'
+      });
+    });
+  });
+
+  it('should match previous vertical tabset screenshot on mobile clicking tab', () => {
+    return SkyVisualTest.setupTest('vertical-tabs', 480)
+    .then(() => {
+
+      const showTabsButton = element(by.css('.sky-vertical-tabset-show-tabs-btn'));
+      browser.wait(function() { return browser.isElementPresent(showTabsButton); }, 8000);
+
+      // show tabs
+      showTabsButton.click();
+      browser.sleep(1000);
+
+      // open group
+      element(by.css('.group2')).click();
+      browser.sleep(1000);
+
+      // click tab
+      element(by.id('group2Tab2')).click();
+
+      return SkyVisualTest.compareScreenshot({
+        screenshotName: 'vertical-tabset-mobile-clicked-tab',
+        selector: '#screenshot-vertical-tabset'
+      });
+    });
+  });
+});

src/app/components/demo-components.service.ts

@@ -973,6 +973,27 @@ export class SkyDemoComponentsService {
           ];
         }
       },
+      {
+        name: 'Vertical tabs',
+        icon: 'folder-open-o',
+        summary: `The vertical tabs module contains components to render a vertical tabset.`,
+        url: '/components/vertical-tabs',
+        getCodeFiles: function () {
+          return [
+            {
+              name: 'vertical-tabs-demo.component.html',
+              // tslint:disable-next-line:max-line-length
+              fileContents: require('!!raw-loader!./vertical-tabs/vertical-tabs-demo.component.html')
+            },
+            {
+              name: 'vertical-tabs-demo.component.ts',
+              fileContents: require('!!raw-loader!./vertical-tabs/vertical-tabs-demo.component.ts'),
+              componentName: 'SkyVerticalTabsDemoComponent',
+              bootstrapSelector: 'sky-vertical-tabs-demo'
+            }
+          ];
+        }
+      },
       {
         name: 'Wait',
         icon: 'spinner',

src/app/components/vertical-tabs/index.html

@@ -0,0 +1,78 @@
+<sky-demo-page title="Vertical tabs">
+  <sky-demo-page-summary>
+    <p>
+      The vertical tabs module contains components to render a vertical tabset.
+    </p>
+  </sky-demo-page-summary>
+
+  <sky-demo-page-properties sectionHeading="Vertical tabset properties">
+    <sky-demo-page-property
+        propertyName="showTabsText"
+        isOptional="true"
+    >
+      Specifies the text to use for the show tabs button in mobile.
+    </sky-demo-page-property>
+  </sky-demo-page-properties>
+
+  <sky-demo-page-properties sectionHeading="Vertical tab properties">
+    <sky-demo-page-property
+        propertyName="active"
+        isOptional="true"
+    >
+      Indicates whether or not the tab is active on load
+    </sky-demo-page-property>
+    <sky-demo-page-property
+        propertyName="tabHeading"
+    >
+      The text of the button that selects the tab.
+    </sky-demo-page-property>
+    <sky-demo-page-property
+        propertyName="tabHeaderCount"
+        isOptional="true"
+    >
+      Displays a counter alongside the tab header.
+    </sky-demo-page-property>
+    <sky-demo-page-property
+      propertyName="disabled"
+      isOptional="true"
+    >
+    Determines whether the tab is disabled.
+    </sky-demo-page-property>
+  </sky-demo-page-properties>
+
+
+  <sky-demo-page-properties sectionHeading="Vertical tab group properties">
+    <sky-demo-page-property
+        propertyName="groupHeading"
+    >
+      Specifies the text to use in the heading of the collapsible group of tabs.
+    </sky-demo-page-property>
+    <sky-demo-page-property
+        propertyName="disabled"
+        isOptional="true"
+    >
+      Boolean value that can be set to disabled expanding and collapsing a collapsible group.
+    </sky-demo-page-property>
+    <sky-demo-page-property
+        propertyName="open"
+        isOptional="true"
+    >
+      Boolean value indicating if the collapsible group is open.
+    </sky-demo-page-property>
+  </sky-demo-page-properties>
+
+  <sky-demo-page-properties sectionHeading="Vertical tab events">
+    <sky-demo-page-property
+      propertyName="activeChange"
+    >
+      Fires when the active tab changes. Emits the index of the active tab.
+    </sky-demo-page-property>
+  </sky-demo-page-properties>
+
+  <sky-demo-page-example>
+    <sky-vertical-tabs-demo></sky-vertical-tabs-demo>
+    <sky-demo-page-code demoName="Vertical tabs"></sky-demo-page-code>
+  </sky-demo-page-example>
+
+</sky-demo-page>
+

src/app/components/vertical-tabs/vertical-tabs-demo.component.html

@@ -0,0 +1,21 @@
+<sky-vertical-tabset
+  showTabsText="Tab list"
+  (activeChange)="tabChanged($event)"
+>
+  <sky-vertical-tabset-group 
+    *ngFor="let group of groups"
+    [groupHeading]="group.heading"
+    [open]="group.isOpen"
+    [disabled]="group.isDisabled"
+  >
+    <sky-vertical-tab
+      *ngFor="let tab of group.subTabs"
+      [active]="tab.active"
+      [tabHeading]="tab.tabHeading"
+      [tabHeaderCount]="tab.tabHeaderCount"
+      [disabled]="tab.disabled"
+    >
+      {{ tab.content }}
+    </sky-vertical-tab>
+  </sky-vertical-tabset-group>
+</sky-vertical-tabset>

src/app/components/vertical-tabs/vertical-tabs-demo.component.ts

@@ -0,0 +1,44 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sky-vertical-tabs-demo',
+  templateUrl: './vertical-tabs-demo.component.html'
+})
+export class SkyVerticalTabsDemoComponent {
+
+  public groups: any[];
+
+  constructor() {
+    this.groups = [
+      {
+        heading: 'Group 1',
+        isOpen: false,
+        isDisabled: false,
+        subTabs: [
+          { tabHeading: 'Group 1 - Tab 1', content: 'Group 1 - Tab 1 Content'},
+          { tabHeading: 'Group 1 - Tab 2', content: 'Group 1 - Tab 2 Content', tabHeaderCount: 7}]
+      },
+      {
+        heading: 'Group 2',
+        isOpen: true,
+        isDisabled: false,
+        subTabs: [
+          { tabHeading: 'Group 2 - Tab 1', content: 'Group 2 - Tab 1 Content', active: true},
+          { tabHeading: 'Group 2 - Tab 2 - Disabled',
+            content: 'Group 2 - Tab 2 Content',
+            disabled: true
+          }]
+      },
+      {
+        heading: 'Disabled',
+        isOpen: false,
+        isDisabled: true,
+        subTabs: []
+      }
+    ];
+  }
+
+  public tabChanged(newIndex: any) {
+    console.log(`new active ${newIndex}`);
+  }
+}

src/core.ts

@@ -47,6 +47,7 @@ import { SkyTextHighlightModule } from './modules/text-highlight';
 import { SkyToolbarModule } from './modules/toolbar';
 import { SkyTilesModule } from './modules/tiles';
 import { SkyTimepickerModule } from './modules/timepicker';
+import { SkyVerticalTabsetModule } from './modules/vertical-tabset';
 import { SkyWaitModule } from './modules/wait';
 
 @NgModule({
@@ -95,6 +96,7 @@ import { SkyWaitModule } from './modules/wait';
     SkyTilesModule,
     SkyTimepickerModule,
     SkyToolbarModule,
+    SkyVerticalTabsetModule,
     SkyWaitModule,
     SkyDatepickerModule
   ]
@@ -417,6 +419,11 @@ export {
   SkyToolbarModule,
   SkyToolbarSectionComponent
 } from './modules/toolbar';
+export {
+  SkyVerticalTabsetComponent,
+  SkyVerticalTabsetGroupComponent,
+  SkyVerticalTabComponent
+} from './modules/vertical-tabset';
 export {
   SkyWaitComponent,
   SkyWaitModule,

src/locales/resources_en_US.json

@@ -707,6 +707,10 @@
     "_description": "The close button for the timepicker modal",
     "message": "Done"
   },
+  "vertical_tabs_show_tabs_text": {
+    "_description": "The default text for the show tabs button in mobile",
+    "message": "Tab list"
+  },
   "wizard_navigator_finish": {
     "_description": "Text displayed on the next button when a wizard is ready for completion.",
     "message": "Finish"