Merge pull request #1119 from scheduleonce/avengers/tabs-module-qa

update the document with the stackblitz url

.storybook/preview-head.html

@@ -727,7 +727,4 @@
     border-color: #666;
     opacity: 1;
   }
-  .oui-mdc-tab-body-wrapper {
-    min-height: 100px;
-  }
 </style>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "oncehub-ui",
-  "version": "8.0.0",
+  "version": "8.0.1",
   "scripts": {
     "ng": "ng",
     "build": "ng build ui",

ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oncehub/ui",
-  "version": "8.0.0",
+  "version": "8.0.1",
   "description": "Oncehub UI",
   "peerDependencies": {},
   "repository": {

ui/src/components/tabs/README.md

@@ -1 +1,48 @@
-Please see the official documentation at https://material.angular.io/components/component/tabs
+The `oui-tab` efficiently arrange content into distinct views, allowing visibility for only one view at a time.
+The tab header displays each tab's label, with the active tab highlighted by an animated ink bar.
+
+### Usage
+
+```js
+import { OuiTabsModule } from '@oncehub/ui';
+
+@NgModule({
+  imports: [
+    OuiTabsModule
+  ]
+})
+```
+
+## Usage Example
+
+```html
+<oui-tab-group (selectedTabChange)="onTabChanged($event);">
+  <oui-tab label="First1" text="<h2>Content in tab 1</h2>"></oui-tab>
+  <oui-tab label="Second" text="<h2>Content in tab 2</h2>"></oui-tab>
+  <oui-tab label="Third" text="<h2>Content in tab 3</h2>"></oui-tab>
+</oui-tab-group>
+```
+
+## API OuiTab
+
+| Input | Type   | Default | Description                                                 |
+| ----- | ------ | ------- | ----------------------------------------------------------- |
+| label | string | empty   | Label Text                                                  |
+| text  | string | empty   | The text/HTML that we want to display in the respective tab |
+
+| Method            | Description                                    |
+| ----------------- | ---------------------------------------------- |
+| selectedTabChange | The selectedTabChange, emits the change event. |
+
+## Stackblitz demo link
+
+[https://stackblitz.com/edit/oui-tab](https://stackblitz.com/edit/oui-tab)
+
+You can click here and can change code to try and test different scenarios.
+
+### Accessibility
+
+Elements with the `ouiTab` will add an `aria-describedby` label that provides a reference
+to a visually hidden element containing the title. This provides screenreaders the
+information needed to read out the contents when the end-user focuses on the element
+triggering the tab.

ui/src/components/tabs/tab-body.html

@@ -1,9 +1,4 @@
-<div
-  class="oui-mdc-tab-body-content"
-  #content
-  cdkScrollable
-  [innerHTML]="_content2"
->
+<div class="oui-mdc-tab-body-content" #content [innerHTML]="_innerContent">
   <!-- {{_content}} -->
   <!-- <ng-template [OuiTabBodyHost]></ng-template> -->
 </div>

ui/src/components/tabs/tab-body.spec.ts

@@ -10,9 +10,8 @@ import {
 } from '@angular/core';
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { CdkScrollable, ScrollingModule } from '@angular/cdk/scrolling';
+import { ScrollingModule } from '@angular/cdk/scrolling';
 import { OuiTabBody, OuiTabBodyPortal } from './tab-body';
-import { By } from '@angular/platform-browser';
 import { Subject } from 'rxjs';
 
 describe('MDC-based OuiTabBody', () => {
@@ -203,15 +202,6 @@ describe('MDC-based OuiTabBody', () => {
         declarations: [OuiTabBody, OuiTabBodyPortal, SimpleTabBodyApp],
       })
       .compileComponents();
-
-    const fixture = TestBed.createComponent(SimpleTabBodyApp);
-    const tabBodyContent = fixture.nativeElement.querySelector(
-      '.oui-mdc-tab-body-content'
-    );
-    const scrollable = fixture.debugElement.query(By.directive(CdkScrollable));
-
-    expect(scrollable).toBeTruthy();
-    expect(scrollable.nativeElement).toBe(tabBodyContent);
   });
 });
 

ui/src/components/tabs/tab-body.ts

@@ -156,7 +156,7 @@ export class OuiTabBody implements OnInit, OnDestroy {
 
   /** Whether the tab's content should be kept in the DOM while it's off-screen. */
   @Input() preserveContent = false;
-  _content2: any;
+  _innerContent: any;
 
   /** The shifted index position of the tab body, where zero represents the active center tab. */
   @Input()
@@ -211,7 +211,7 @@ export class OuiTabBody implements OnInit, OnDestroy {
     if (this._position == 'center' && this.origin != null) {
       this._position = this._computePositionFromOrigin(this.origin);
     }
-    this._content2 = this._content ? this._content : '';
+    this._innerContent = this._content ? this._content : '';
   }
 
   ngOnDestroy() {

ui/src/components/tabs/tab-group.html

@@ -51,6 +51,7 @@
 
 <div
   class="oui-mdc-tab-body-wrapper"
+  [class.oui-text-height]="getHTMLText"
   [class._oui-animation-noopable]="_animationMode === 'NoopAnimations'"
   #tabBodyWrapper
 >

ui/src/components/tabs/tab-group.scss

@@ -43,7 +43,6 @@
 }
 
 .oui-mdc-tab-group {
-  //   @include tabs-common.paginated-tab-header-with-background('.oui-mdc-tab-header', '.oui-mdc-tab');
   display: flex;
   flex-direction: column;
 
@@ -61,8 +60,11 @@
 
 // The bottom section of the view; contains the tab bodies
 .oui-mdc-tab-body-wrapper {
-  //   @include private.private-animation-noop();
   position: relative;
   overflow: hidden;
   display: flex;
 }
+
+.oui-text-height {
+  min-height: 100px;
+}

ui/src/stories/tabs/tabs.component.ts

@@ -4,11 +4,9 @@ import { Component } from '@angular/core';
   selector: 'oui-tab-storybook',
   template: `
     <oui-tab-group>
-      <oui-tab label="First1" text="<h2>AAAAA123</h2>"></oui-tab>
-      <oui-tab label="Second" text="<h2>BBBBB123</h2>"></oui-tab>
-      <oui-tab label="Third" text="<h2>CCCCCC123</h2>"></oui-tab>
-      <!-- <oui-tab label="Fourth" text="<h2>ddddddddddd123</h2>"></oui-tab>
-      <oui-tab label="Fifth" text="<h2>eeeeeeee123</h2>"></oui-tab> -->
+      <oui-tab label="First1" text="<h2>Content in tab 1</h2>"></oui-tab>
+      <oui-tab label="Second" text="<h2>Content in tab 2</h2>"></oui-tab>
+      <oui-tab label="Third" text="<h2>Content in tab 3</h2>"></oui-tab>
     </oui-tab-group>
   `,
 })