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

Create new component for tabs in once-ui

.storybook/preview-head.html

@@ -714,4 +714,20 @@
     button {
     cursor: default !important;
   }
+  .oui-tab
+    .oui-tab-labels-container
+    .cdk-focused:not(.mdc-tab--active)
+    .mdc-tab-indicator
+    .mdc-tab-indicator__content,
+  .oui-tab
+    .oui-tab-labels-container
+    .oui-mdc-tab:hover:not(.mdc-tab--active)
+    .mdc-tab-indicator
+    .mdc-tab-indicator__content {
+    border-color: #666;
+    opacity: 1;
+  }
+  .oui-mdc-tab-body-wrapper {
+    min-height: 100px;
+  }
 </style>

CHANGELOG.md

@@ -5,14 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [7.0.36] - 2023-12-28
+
+- [ONCEHUB-60767](https://scheduleonce.atlassian.net/browse/ONCEHUB-60767) Added the tab module and added storybook.
+
 ## [7.0.37] - 2023-12-26
 
 - [ONCEHUB-73711](https://scheduleonce.atlassian.net/browse/ONCEHUB-73711) fix UI issue for select checkbox.
 
 ## [7.0.36] - 2023-12-18
 
-- [ONCEHUB-74291](https://scheduleonce.atlassian.net/browse/ONCEHUB-75540) fix Added a null check on panel-trigger.
-
 ## [7.0.35] - 2023-12-12
 
 - [ONCEHUB-74291](https://scheduleonce.atlassian.net/browse/ONCEHUB-73711) fix UI and scrollbar issue for oui-select component.

package.json

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

ui/package.json

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

ui/src/components/core/common-behaviors/common-module.ts

@@ -0,0 +1,163 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import { HighContrastModeDetector } from '@angular/cdk/a11y';
+import { BidiModule } from '@angular/cdk/bidi';
+import {
+  inject,
+  Inject,
+  InjectionToken,
+  NgModule,
+  Optional,
+} from '@angular/core';
+import { VERSION as CDK_VERSION } from '@angular/cdk';
+import { DOCUMENT } from '@angular/common';
+import { Platform, _isTestEnvironment } from '@angular/cdk/platform';
+import { VERSION } from '../version';
+import { isDevMode } from '@angular/core';
+
+/** @docs-private */
+export function MATERIAL_SANITY_CHECKS_FACTORY(): SanityChecks {
+  return true;
+}
+
+/** Injection token that configures whether the Material sanity checks are enabled. */
+export const MATERIAL_SANITY_CHECKS = new InjectionToken<SanityChecks>(
+  'mat-sanity-checks',
+  {
+    providedIn: 'root',
+    factory: MATERIAL_SANITY_CHECKS_FACTORY,
+  }
+);
+
+/**
+ * Possible sanity checks that can be enabled. If set to
+ * true/false, all checks will be enabled/disabled.
+ */
+export type SanityChecks = boolean | GranularSanityChecks;
+
+/** Object that can be used to configure the sanity checks granularly. */
+export interface GranularSanityChecks {
+  doctype: boolean;
+  theme: boolean;
+  version: boolean;
+}
+
+/**
+ * Module that captures anything that should be loaded and/or run for *all* Angular Material
+ * components. This includes Bidi, etc.
+ *
+ * This module should be imported to each top-level component module (e.g., OuiTabsModule).
+ */
+@NgModule({
+  imports: [BidiModule],
+  exports: [BidiModule],
+})
+export class OuiCommonModule {
+  /** Whether we've done the global sanity checks (e.g. a theme is loaded, there is a doctype). */
+  private _hasDoneGlobalChecks = false;
+
+  constructor(
+    highContrastModeDetector: HighContrastModeDetector,
+    @Optional()
+    @Inject(MATERIAL_SANITY_CHECKS)
+    private _sanityChecks: SanityChecks,
+    @Inject(DOCUMENT) private _document: Document
+  ) {
+    // While A11yModule also does this, we repeat it here to avoid importing A11yModule
+    // in OuiCommonModule.
+    highContrastModeDetector._applyBodyHighContrastModeCssClasses();
+
+    if (!this._hasDoneGlobalChecks) {
+      this._hasDoneGlobalChecks = true;
+
+      if (typeof isDevMode === 'undefined' || isDevMode) {
+        // Inject in here so the reference to `Platform` can be removed in production mode.
+        const platform = inject(Platform, { optional: true });
+
+        if (this._checkIsEnabled('doctype')) {
+          _checkDoctypeIsDefined(this._document);
+        }
+
+        if (this._checkIsEnabled('theme')) {
+          _checkThemeIsPresent(this._document, !!platform?.isBrowser);
+        }
+
+        if (this._checkIsEnabled('version')) {
+          _checkCdkVersionMatch();
+        }
+      }
+    }
+  }
+
+  /** Gets whether a specific sanity check is enabled. */
+  private _checkIsEnabled(name: keyof GranularSanityChecks): boolean {
+    if (_isTestEnvironment()) {
+      return false;
+    }
+
+    if (typeof this._sanityChecks === 'boolean') {
+      return this._sanityChecks;
+    }
+
+    return !!this._sanityChecks[name];
+  }
+}
+
+/** Checks that the page has a doctype. */
+function _checkDoctypeIsDefined(doc: Document): void {
+  if (!doc.doctype) {
+    console.warn(
+      'Current document does not have a doctype. This may cause ' +
+        'some Angular Material components not to behave as expected.'
+    );
+  }
+}
+
+/** Checks that a theme has been included. */
+function _checkThemeIsPresent(doc: Document, isBrowser: boolean): void {
+  // We need to assert that the `body` is defined, because these checks run very early
+  // and the `body` won't be defined if the consumer put their scripts in the `head`.
+  if (!doc.body || !isBrowser) {
+    return;
+  }
+
+  const testElement = doc.createElement('div');
+  testElement.classList.add('mat-theme-loaded-marker');
+  doc.body.appendChild(testElement);
+
+  const computedStyle = getComputedStyle(testElement);
+
+  // In some situations the computed style of the test element can be null. For example in
+  // Firefox, the computed style is null if an application is running inside of a hidden iframe.
+  // See: https://bugzilla.mozilla.org/show_bug.cgi?id=548397
+  if (computedStyle && computedStyle.display !== 'none') {
+    console.warn(
+      'Could not find Angular Material core theme. Most Material ' +
+        'components may not work as expected. For more info refer ' +
+        'to the theming guide: https://material.angular.io/guide/theming'
+    );
+  }
+
+  testElement.remove();
+}
+
+/** Checks whether the Material version matches the CDK version. */
+function _checkCdkVersionMatch(): void {
+  if (VERSION.full !== CDK_VERSION.full) {
+    console.warn(
+      'The Angular Material version (' +
+        VERSION.full +
+        ') does not match ' +
+        'the Angular CDK version (' +
+        CDK_VERSION.full +
+        ').\n' +
+        'Please ensure the versions of these two packages exactly match.'
+    );
+  }
+}

ui/src/components/core/common-behaviors/constructor.ts

@@ -1 +1,5 @@
 export type Constructor<T> = new (...args: any[]) => T;
+
+export type AbstractConstructor<T = object> = abstract new (
+  ...args: any[]
+) => T;

ui/src/components/core/common-behaviors/disable-ripple.spec.ts

@@ -0,0 +1,43 @@
+import { mixinDisableRipple } from './disable-ripple';
+
+describe('mixinDisableRipple', () => {
+  it('should augment an existing class with a disableRipple property', () => {
+    const classWithMixin = mixinDisableRipple(TestClass);
+    const instance = new classWithMixin();
+
+    expect(instance.disableRipple)
+      .withContext(
+        'Expected the mixed-into class to have a disable-ripple property'
+      )
+      .toBe(false);
+
+    instance.disableRipple = true;
+
+    expect(instance.disableRipple)
+      .withContext(
+        'Expected the mixed-into class to have an updated disable-ripple property'
+      )
+      .toBe(true);
+  });
+
+  it('should coerce values being passed to the disableRipple property', () => {
+    const classWithMixin = mixinDisableRipple(TestClass);
+    const instance = new classWithMixin();
+
+    expect(instance.disableRipple)
+      .withContext('Expected disableRipple to be set to false initially')
+      .toBe(false);
+
+    // Setting string values to the disableRipple property should be prevented by TypeScript's
+    // type checking, but developers can still set string values from their template bindings.
+    (instance as any).disableRipple = '';
+
+    expect(instance.disableRipple)
+      .withContext(
+        'Expected disableRipple to be set to true if an empty string is set as value'
+      )
+      .toBe(true);
+  });
+});
+
+class TestClass {}

ui/src/components/core/common-behaviors/disable-ripple.ts

@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { AbstractConstructor, Constructor } from './constructor';
+
+/** @docs-private */
+export interface CanDisableRipple {
+  /** Whether ripples are disabled. */
+  disableRipple: boolean;
+}
+
+type CanDisableRippleCtor = Constructor<CanDisableRipple> &
+  AbstractConstructor<CanDisableRipple>;
+
+/** Mixin to augment a directive with a `disableRipple` property. */
+export function mixinDisableRipple<T extends AbstractConstructor<{}>>(
+  base: T
+): CanDisableRippleCtor & T;
+export function mixinDisableRipple<T extends Constructor<{}>>(
+  base: T
+): CanDisableRippleCtor & T {
+  return class extends base {
+    private _disableRipple = false;
+
+    /** Whether the ripple effect is disabled or not. */
+    get disableRipple(): boolean {
+      return this._disableRipple;
+    }
+    set disableRipple(value: any) {
+      this._disableRipple = coerceBooleanProperty(value);
+    }
+
+    constructor(...args: any[]) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      super(...args);
+    }
+  };
+}

ui/src/components/core/common-behaviors/index.ts

@@ -1,6 +1,8 @@
+export * from './common-module';
 export * from './color';
 export * from './disabled';
 export * from './constructor';
 export * from './tabIndex';
 export * from './initialized';
 export * from './error-state';
+export * from './disable-ripple';

ui/src/components/core/style/_layout-common.scss

@@ -0,0 +1,8 @@
+// This mixin ensures an element spans to fill the nearest ancestor with defined positioning.
+@mixin fill {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  position: absolute;
+}

ui/src/components/core/theming/_all-theme.scss

@@ -11,7 +11,9 @@
 @import '../../datepicker/datepicker-theme';
 @import '../../checkbox/checkbox-theme';
 @import '../../radio/radio-theme';
+@import '../../tabs/tabs-theme';
 @import '../cdk/overlay/overlay-prebuilt'; // Loading overlay
+
 // Create a theme.
 @mixin once-ui-theme($theme) {
   @include oui-button-theme($theme);
@@ -26,4 +28,5 @@
   @include oui-checkbox-theme($theme);
   @include oui-radio-theme($theme);
   @include oui-datepicker-theme($theme);
+  @include oui-tabs-theme($theme);
 }

ui/src/components/core/version.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import { Version } from '@angular/core';
+
+/** Current version of Angular Material. */
+export const VERSION = new Version('0.0.0-PLACEHOLDER');

ui/src/components/index.ts

@@ -18,3 +18,4 @@ export * from './panel/public-api';
 export * from './select/public-api';
 export * from './slide-toggle/public-api';
 export * from './scrollbar/public-api';
+export * from './tabs/public-api';