base components for tab group and tab

README.md

@@ -27,6 +27,7 @@ This repository consists of two projects:
 - Radio
 - Select
 - Table
+- Tabs
 - Tag
 - Textarea
 - Tooltip directive

package.json

@@ -33,6 +33,7 @@
     "@angular-devkit/build-angular": "^15.2.4",
     "@angular/cli": "~15.2.4",
     "@angular/compiler-cli": "^15.2.0",
+    "@cypress/angular": "^2.0.3",
     "@cypress/schematic": "^2.5.0",
     "@types/jasmine": "~4.3.0",
     "@typescript-eslint/eslint-plugin": "^5.59.5",

projects/composition/src/app/app-routing.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { TabGroupPageComponent } from 'projects/composition/src/app/pages/tab-group-page/tab-group-page.component';
 import { InputPageComponent } from './pages/input-page/input-page.component';
 import { SelectPageComponent } from './pages/select-page/select-page.component';
 import { IconsPageComponent } from './pages/icons-page/icons-page/icons-page.component';
@@ -46,6 +47,11 @@ const routes: Routes = [
     title: 'Select',
     component: SelectPageComponent
   },
+  {
+    path: 'tabs',
+    title: 'Tabs',
+    component: TabGroupPageComponent
+  },
   {
     path: 'tree-select',
     title: 'Tree select',

projects/composition/src/app/components/navigation-sidebar/navigation-sidebar.component.ts

@@ -93,6 +93,10 @@ export class NavigationSidebarComponent implements OnInit {
       title: 'Table',
       url: '/table'
     },
+    {
+      title: 'Tabs',
+      url: '/tabs'
+    },
     {
       title: 'Tag',
       url: '/tag'

projects/composition/src/app/pages/info-circle-page/info-circle-page.component.scss

@@ -10,18 +10,5 @@
       padding-bottom: 8px;
       font-weight: 600;
     }
-    &-row {
-      width: 100%;
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      margin-bottom: 18px;
-      align-items: center;
-    }
-
-    &-elem-left {
-      margin-right: 40px;
-      display: inline-flex;
-    }
   }
 }

projects/composition/src/app/pages/tab-group-page/tab-group-page.component.html

@@ -0,0 +1,63 @@
+<div class="tabs-elems-group">
+  <div class="tabs-elems-group-title">
+    Center-aligned tabs with slide transition
+  </div>
+  <cps-tab-group
+    class="tab-example--center-aligned"
+    (afterTabChanged)="changeTab($event)">
+    <cps-tab label="Tab 1" id="tab1">Content of tab 1</cps-tab>
+    <cps-tab label="Tab 2">Content of tab 2</cps-tab>
+    <cps-tab label="Tab 3">Content of tab 3</cps-tab>
+  </cps-tab-group>
+</div>
+
+<div class="tabs-elems-group">
+  <div class="tabs-elems-group-title">
+    Left-aligned tabs with fade transition and tooltips
+  </div>
+  <cps-tab-group
+    class="tab-example--left-aligned"
+    animationType="fade"
+    (afterTabChanged)="changeTab($event)">
+    <cps-tab label="Tab 1" tooltipText="Tooltip of tab 1" id="tab1"
+      >Content of tab 1</cps-tab
+    >
+    <cps-tab label="Tab 2" tooltipText="Tooltip of tab 2"
+      >Content of tab 2</cps-tab
+    >
+    <cps-tab label="Tab 3" tooltipText="Tooltip of tab 3"
+      >Content of tab 3</cps-tab
+    >
+  </cps-tab-group>
+</div>
+
+<div class="tabs-elems-group">
+  <div class="tabs-elems-group-title">
+    Right-aligned tabs with icons and all contents inited
+  </div>
+  <cps-tab-group
+    class="tab-example--right-aligned"
+    (afterTabChanged)="changeTab($event)"
+    [initAllTabsContent]="true">
+    <cps-tab label="Tab 1" icon="survivorship" id="tab1"
+      >Content of tab 1</cps-tab
+    >
+    <cps-tab label="Tab 2" icon="kris">Content of tab 2</cps-tab>
+    <cps-tab label="Tab 3" icon="dq">Content of tab 3</cps-tab>
+  </cps-tab-group>
+</div>
+
+<div class="tabs-elems-group">
+  <div class="tabs-elems-group-title">
+    Tabs styled as subtabs out of the box
+  </div>
+  <cps-tab-group
+    class="tab-example--left-aligned"
+    [isSubTabs]="true"
+    animationType="fade"
+    (afterTabChanged)="changeTab($event)">
+    <cps-tab label="Tab 1" icon="avatar" id="tab1">Content of tab 1</cps-tab>
+    <cps-tab label="Tab 2">Content of tab 2</cps-tab>
+    <cps-tab label="Tab 3">Content of tab 3</cps-tab>
+  </cps-tab-group>
+</div>

projects/composition/src/app/pages/tab-group-page/tab-group-page.component.scss

@@ -0,0 +1,30 @@
+:host {
+  overflow-x: hidden;
+  .tabs-elems-group {
+    margin-bottom: 4px;
+
+    &-title {
+      font-size: 24px;
+      color: var(--cps-color-depth);
+      margin-bottom: 12px;
+      padding-bottom: 8px;
+      font-weight: 600;
+    }
+    ::ng-deep .tab-example--center-aligned {
+      .cps-tabs {
+        align-items: center;
+        justify-content: center;
+      }
+      .cps-tab-content {
+        margin: 15px 20%;
+      }
+    }
+
+    ::ng-deep .tab-example--right-aligned {
+      .cps-tabs {
+        align-items: end;
+        justify-content: right;
+      }
+    }
+  }
+}

projects/composition/src/app/pages/tab-group-page/tab-group-page.component.ts

@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import {
+  CpsIconComponent,
+  CpsTabGroupComponent,
+  CpsTabComponent,
+  TabChangeEvent
+} from 'cps-ui-kit';
+
+@Component({
+  standalone: true,
+  imports: [
+    CommonModule,
+    CpsIconComponent,
+    CpsTabGroupComponent,
+    CpsTabComponent
+  ],
+  selector: 'app-tab-group-page',
+  templateUrl: './tab-group-page.component.html',
+  styleUrls: ['./tab-group-page.component.scss'],
+  host: { class: 'composition-page' }
+})
+export class TabGroupPageComponent {
+  selectedTabIndex = 0;
+
+  changeTab({ currentTabIndex }: TabChangeEvent) {
+    this.selectedTabIndex = currentTabIndex;
+    console.log('Tab changed to: ' + currentTabIndex);
+  }
+}

projects/cps-ui-kit/README.md

@@ -22,6 +22,7 @@
 - Radio
 - Select
 - Table
+- Tabs
 - Tag
 - Textarea
 - Tooltip directive

projects/cps-ui-kit/src/lib/components/cps-tab-group/cps-tab-group.component.cy.ts

@@ -0,0 +1,45 @@
+import { Component } from '@angular/core';
+import { getTestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { CpsTabGroupComponent } from './cps-tab-group.component';
+import { CpsTabComponent } from './cps-tab/cps-tab.component';
+
+@Component({
+  template: `
+    <cps-tab-group selectedIndex="0">
+      <cps-tab label="Tab 1">
+        <div id="tab-content-1">This is content for Tab 1</div>
+      </cps-tab>
+      <cps-tab label="Tab 2">
+        <div id="tab-content-2">This is content for Tab 2</div>
+      </cps-tab>
+    </cps-tab-group>
+  `
+})
+export class MockTabGroupComponent {}
+
+describe('CpsTabGroupComponent', () => {
+  beforeEach(() => {
+    getTestBed().resetTestingModule();
+  });
+
+  it('should create and select first tab by default', () => {
+    cy.mount(MockTabGroupComponent, {
+      imports: [CpsTabGroupComponent, CpsTabComponent, NoopAnimationsModule]
+    });
+    cy.get('li').should('have.length', 2);
+    cy.get('li.active a').should('contain.text', 'Tab 1');
+    cy.get('#tab-content-1').should('be.visible');
+    cy.get('#tab-content-2').should('not.exist');
+  });
+
+  it('should switch tabs on click', () => {
+    cy.mount(MockTabGroupComponent, {
+      imports: [CpsTabGroupComponent, CpsTabComponent, NoopAnimationsModule]
+    });
+    cy.get('li').eq(1).click();
+    cy.get('li.active a').should('contain.text', 'Tab 2');
+    cy.get('#tab-content-2').should('be.visible');
+    cy.get('#tab-content-1').should('not.exist');
+  });
+});

projects/cps-ui-kit/src/lib/components/cps-tab-group/cps-tab-group.component.html

@@ -0,0 +1,57 @@
+<ul class="cps-tabs" [ngClass]="{ 'cps-tabs-subtabs': isSubTabs }">
+  <ng-container *ngFor="let tab of tabs; let tabIndex = index">
+    <li
+      *ngIf="tab.tooltipText"
+      class="cps-tab"
+      (click)="selectTab(tabIndex)"
+      [ngClass]="{ active: tab.active }"
+      [cpsTooltip]="tab.tooltipText"
+      tooltipOpenDelay="1000"
+      tooltipCloseDelay="0"
+      tooltipPosition="bottom"
+      [tooltipMaxWidth]="tab.tooltipMaxWidth"
+      [tooltipPersistent]="tab.tooltipPersistent"
+      [tooltipContentClass]="tab.tooltipContentClass">
+      <cps-icon *ngIf="tab.icon" class="cps-tab-icon" [icon]="tab.icon">
+      </cps-icon>
+      <a class="cps-tab-link">{{ tab.label }}</a>
+    </li>
+    <li
+      *ngIf="!tab.tooltipText"
+      class="cps-tab"
+      (click)="selectTab(tabIndex)"
+      [ngClass]="{ active: tab.active }">
+      <cps-icon *ngIf="tab.icon" class="cps-tab-icon" [icon]="tab.icon">
+      </cps-icon>
+      <a class="cps-tab-link">{{ tab.label }}</a>
+    </li>
+  </ng-container>
+</ul>
+<div
+  class="cps-tab-content"
+  [ngClass]="{ 'cps-tab-content-subtabs': isSubTabs }">
+  <ng-container *ngFor="let tab of tabs">
+    <div
+      [@slideInOut]="animationState"
+      *ngIf="tab.active && !initAllTabsContent && animationType === 'slide'">
+      <ng-container [ngTemplateOutlet]="tab.content"></ng-container>
+    </div>
+    <div
+      [@fadeInOut]="animationState"
+      *ngIf="tab.active && !initAllTabsContent && animationType === 'fade'">
+      <ng-container [ngTemplateOutlet]="tab.content"></ng-container>
+    </div>
+    <div
+      *ngIf="initAllTabsContent && animationType === 'slide'"
+      [@slideInOut]="animationState"
+      [ngStyle]="{ display: tab.active ? null : 'none' }">
+      <ng-container [ngTemplateOutlet]="tab.content"></ng-container>
+    </div>
+    <div
+      *ngIf="initAllTabsContent && animationType === 'fade'"
+      [@fadeInOut]="animationState"
+      [ngStyle]="{ display: tab.active ? null : 'none' }">
+      <ng-container [ngTemplateOutlet]="tab.content"></ng-container>
+    </div>
+  </ng-container>
+</div>