Update to latest tabs design. General feedback tweaks to samples and data.

projects/erp-hgrid/src/app/erp-hgrid-sample/erp-hgrid-sample.component.html

@@ -13,7 +13,7 @@
         [moving]="true">
 
         <igx-grid-toolbar>
-            <igx-grid-toolbar-title>Actions</igx-grid-toolbar-title>
+            <igx-grid-toolbar-title>Inventory</igx-grid-toolbar-title>
             <igx-grid-toolbar-actions>
                 <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
                 <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>

projects/erp-hgrid/src/app/erp-hgrid-sample/erp-hgrid-sample.component.ts

@@ -167,7 +167,6 @@ export class ErpHGridSampleComponent implements AfterViewInit {
   }
 
   private calculateTotalNetProfit(product: TemplateDataModel): number {
-    const itemsSold: number = product.orders.length;
-    return itemsSold * (product.netPrice);
+    return product.unitsSold * (product.netPrice);
   }
 }

projects/finance-grid/src/app/finance-grid/finance-grid.component.html

@@ -1,6 +1,6 @@
 <igx-grid [data]="data$ | async" [allowFiltering]="true" [rowSelection]="'multiple'" [isLoading]="isLoading">
   <igx-grid-toolbar>
-    <igx-grid-toolbar-title>Actions</igx-grid-toolbar-title>
+    <igx-grid-toolbar-title>Financial Portfolio</igx-grid-toolbar-title>
     <igx-grid-toolbar-actions>
       <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
       <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>

projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.html

@@ -1,6 +1,6 @@
 <igx-grid class="main-grid" [data]="dataService.getVehiclesData()" #grid height="100%" width="100%">
   <igx-grid-toolbar>
-    <igx-grid-toolbar-title>Actions</igx-grid-toolbar-title>
+    <igx-grid-toolbar-title>Fleet Management</igx-grid-toolbar-title>
             <igx-grid-toolbar-actions>
                 <button igxButton="flat" *ngIf="grid.sortingExpressions.length > 0"
                   (buttonClick)="grid.sortingExpressions=[]">

projects/hr-portal/src/app/hr-portal/hr-portal.component.html

@@ -10,7 +10,7 @@
 >
   <igx-paginator [perPage]="20"></igx-paginator>
   <igx-grid-toolbar>
-    <igx-grid-toolbar-title>Actions</igx-grid-toolbar-title>
+    <igx-grid-toolbar-title>HR Portal</igx-grid-toolbar-title>
     <igx-grid-toolbar-actions>
       <button
         igxButton="flat"

projects/sales-grid/src/app/sales-grid/sales-grid.component.html

@@ -1,6 +1,6 @@
 <div class="rootSample">
     <div class="pivotToolbar igx-grid__tr-pivot">
-        <span class="igx-grid-toolbar__title">Quick Actions</span>
+        <span class="igx-grid-toolbar__title">Sales Dashboard</span>
         <div>
             <button igxButton="outlined" style="margin-right: 10px;" [igxToggleAction]="viewDropdown">
                 <igx-icon [name]="'visibility'" [family]="'material'"></igx-icon>

src/app/app.component.html

@@ -1,57 +1,42 @@
 <div class="demo-container">
   <div class="tab-container ">
-    <div class="tab-item" routerLink="inventory" routerLinkActive="tab-item--selected">
-      <div class="tab-header">
-        <igx-chip>Material Light</igx-chip>
-        ERP/Inventory
-      </div>
-      <div class="tab-content">
-        <span>Inventory grid for tracking and managing the quantity, location, and details of products in stock, which also displays orders of each item.</span>
-        <div class="learn-text">Learn more</div>
-      </div>
-    </div>
-    <div class="tab-item" routerLink="hr-portal" routerLinkActive="tab-item--selected">
-      <div class="tab-header">
-        <igx-chip>Fluent Light</igx-chip>
-        HR Portal
-      </div>
-      <div class="tab-content">
-        <span>An organizational chart outlining the company’s hierarchical structure, showing employees, their job titles, and direct reporting relationships.</span>
-        <div class="learn-text">Learn more</div>
-      </div>
-    </div>
-    <div class="tab-item" routerLink="finance" routerLinkActive="tab-item--selected">
-      <div class="tab-header">
-        <igx-chip>Bootstrap Light</igx-chip>
-        Finance
-      </div>
-      <div class="tab-content">
-        <span>A real-time portfolio management system featuring asset tracking, profit and loss analyses, and interactive, dynamic charts.</span>
-        <div class="learn-text">Learn more</div>
-      </div>
-    </div>
-    <div class="tab-item" routerLink="sales" routerLinkActive="tab-item--selected">
-      <div class="tab-header">
-        <igx-chip>Indigo Light</igx-chip>
-        Sales
-      </div>
-      <div class="tab-content">
-        <span>A sales summary by region, product, and time period, offering detailed trend analyses and key performance indicators (KPIs).</span>
-        <div class="learn-text">Learn more</div>
-      </div>
-    </div>
-    <div class="tab-item" routerLink="fleet" routerLinkActive="tab-item--selected">
-      <div class="tab-header">
-        <igx-chip>Material Dark</igx-chip>
-        Fleet Management
-      </div>
-      <div class="tab-content">
-        <span>A master-detail grid for managing vehicle acquisition, operations, and maintenance, offering detailed tracking and performance insights.</span>
-        <div class="learn-text">Learn more</div>
-      </div>
+    <div class="tab-item-container" routerLink="inventory" routerLinkActive #tab1="routerLinkActive"  >
+      <ng-container [ngTemplateOutlet]="tabItemTemplate" [ngTemplateOutletContext]="{ enabled: tab1.isActive, tabName: 'inventory' }"></ng-container>
     </div>
+    <div class="tab-item-container" routerLink="hr-portal" routerLinkActive #tab2="routerLinkActive"  >
+      <ng-container [ngTemplateOutlet]="tabItemTemplate" [ngTemplateOutletContext]="{ enabled: tab2.isActive, tabName: 'hr-portal' }"></ng-container>
+    </div>
+    <div class="tab-item-container" routerLink="finance" routerLinkActive #tab3="routerLinkActive"  >
+      <ng-container [ngTemplateOutlet]="tabItemTemplate" [ngTemplateOutletContext]="{ enabled: tab3.isActive, tabName: 'finance' }"></ng-container>
+    </div>
+    <div class="tab-item-container" routerLink="sales" routerLinkActive #tab4="routerLinkActive"  >
+      <ng-container [ngTemplateOutlet]="tabItemTemplate" [ngTemplateOutletContext]="{ enabled: tab4.isActive, tabName: 'sales' }"></ng-container>
+    </div>
+    <div class="tab-item-container" routerLink="fleet" routerLinkActive #tab5="routerLinkActive"  >
+      <ng-container [ngTemplateOutlet]="tabItemTemplate" [ngTemplateOutletContext]="{ enabled: tab5.isActive, tabName: 'fleet' }"></ng-container>
+    </div>
+  </div>
+  <div class="router-container">
+    <router-outlet></router-outlet>
   </div>
 </div>
-<div class="router-container">
-  <router-outlet></router-outlet>
+
+<ng-template #tabItemTemplate let-enabled="enabled" let-tabName="tabName">
+  <div #tabItem class="tab-item" [ngClass]="{'tab-item--selected': enabled}">
+    <div class="tab-header" [ngClass]="{'tab-header--disabled': !enabled}">
+      {{ tabInfo.get(tabName)?.title }}
+      <igx-chip [disabled]="!enabled">{{ tabInfo.get(tabName)?.theme }}</igx-chip>
+    </div>
+    <div class="tab-content" [ngClass]="{'tab-content--disabled': !enabled}">
+      <span>{{ tabInfo.get(tabName)?.content }}</span>
+    </div>
+    <div class="tab-actions">
+      <a class="learn-text" href="{{ tabInfo.get(tabName)?.moreLink }}" (click)="onLinkClick($event)" [ngClass]="{'link--disabled': !enabled}">Learn more</a>
+      <button igxRipple [igxIconButton]="'contained'" [disabled]="!enabled" (click)="onDownloadClick($event, tabName)" [igxTooltipTarget]="tooltipRef"><igx-icon name="file_download" family="internal_indigo"></igx-icon></button>
+    </div>
+  </div>
+</ng-template>
+
+<div #tooltipRef="tooltip" igxTooltip>
+  Download app source.
 </div>

src/app/app.component.scss

@@ -1,12 +1,34 @@
+@use "igniteui-angular/theming" as *;
+
+$custom-icon-button-theme: icon-button-theme(
+  $background: #212121,
+  $foreground: #ffffff,
+  $disabled-background: #9e9e9e,
+  $disabled-foreground: #ffffff
+);
+
+// Pass the css-vars to the `css-vars` mixin
+@include css-vars($custom-icon-button-theme);
+
 :host {
   display: block;
   width: 100%;
   height: 100%;
   margin: auto;
+
+  ::ng-deep {
+    @include css-vars($custom-icon-button-theme);
+  }
+}
+
+igx-chip {
+  --igx-chip-hover-background: var(--ig-gray-300);
+  --igx-chip-focus-background: var(--ig-gray-300);
 }
 
 .demo-container {
   width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -19,19 +41,25 @@
 }
 
 .tab-container {
-  width: 1130px;
-  height: 208px;
+  width: 100%;
+  min-height: 132px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 }
 
+.tab-item-container {
+  height: 100%;
+  display: inline-flex;
+}
+
 .tab-item {
+  height: 100%;
   display: flex;
   flex-grow: 1;
   flex-basis: 0;
   flex-direction: column;
-  justify-content: space-evenly;
+  justify-content: space-between;
   gap: 8px;
   padding: 12px;
   cursor: pointer;
@@ -40,7 +68,7 @@
 
 
   &--selected {
-    border-bottom: 2px solid var(--ig-primary-500);
+    border-bottom: 3px solid var(--ig-primary-500);
   }
 
   &:hover {
@@ -50,29 +78,65 @@
 
 .tab-header {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   gap: 8px;
   color: var(--ig-gray-900);
   font-size: 20px;
   font-weight: 600;
   line-height: 24px;
   letter-spacing: 0.15px;
-  --ig-size: var(--ig-size-small);
+  --ig-size: var(--ig-size-medium);
+
+  &--disabled {
+    color: var(--ig-gray-700) !important;
+  }
 }
 
 .tab-content {
   display: flex;
   flex-direction: column;
   gap: 4px;
-  color: var(--ig-gray-700);
+  color: var(--ig-gray-900);
   font-size: 14px;
   font-weight: 400;
   font-family: "aktiv-grotesk", sans-serif;
   line-height: 20px;
   letter-spacing: 0.25px;
+
+  &--disabled {
+    color: var(--ig-gray-700) !important;
+  }
+}
+
+.tab-actions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  --ig-size: var(--ig-size-small);
+
+  a {
+    padding-bottom: 2px;
+    background: linear-gradient(0deg, var(--ig-primary-500), var(--ig-primary-500)) no-repeat right bottom / 0 var(--bg-h);
+    transition: background-size 350ms;
+    --bg-h: 2px;
+
+    &:where(:hover, :focus-visible) {
+      background-size: 100% var(--bg-h);
+      background-position-x: left;
+    }
+  }
+
+  .link--disabled {
+    color: var(--ig-primary-200);
+    background: none !important;
+    background-size: 0% var(--bg-h) !important;
+  }
+
 }
 
 .learn-text {
+  text-decoration: none;
   color: var(--ig-primary-500);
   font-size: 14px;
   font-weight: 700;

src/app/app.component.ts

@@ -1,14 +1,79 @@
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { IgxChipComponent } from 'igniteui-angular';
+import { RouterLinkActive, RouterModule } from '@angular/router';
+import { IgxCardModule, IgxChipComponent, IgxIconButtonDirective, IgxIconComponent, IgxRippleDirective, IgxTabsModule, IgxTooltipDirective, IgxTooltipModule } from 'igniteui-angular';
 
+interface TabInfo {
+  title: string;
+  theme: string;
+  content: string;
+  moreLink: string;
+  downloadLink: string;
+}
 @Component({
   selector: 'app-root',
-  imports: [CommonModule, RouterModule, IgxChipComponent],
+  imports: [CommonModule, RouterModule, IgxChipComponent, IgxIconComponent, IgxRippleDirective,
+    IgxIconButtonDirective, IgxTabsModule, IgxCardModule,RouterLinkActive, IgxTooltipModule ],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'
 })
 export class AppComponent {
   title = 'GridDemos';
+  public tabInfo = new Map<string, TabInfo>([
+    ['inventory', {
+      title: "ERP/ Inventory",
+      theme: "Material Light",
+      content: "Tracking and managing quantity, location and details of products in stock.",
+      moreLink: "https://github.com/IgniteUI/grid-demos/tree/vnext/projects/erp-hgrid",
+      downloadLink: ""
+    }],
+    ['hr-portal', {
+      title: "Org Chart/HR Portal",
+      theme: "Fluent Light",
+      content: "Displaying company's hierarchical structure and showing employees data.",
+      moreLink: "https://github.com/IgniteUI/grid-demos/tree/vnext/projects/hr-portal",
+      downloadLink: ""
+    }],
+    ['finance', {
+      title: "Financial Portfolio",
+      theme: "Bootstrap Light",
+      content: "Asset tracking, profit and loss analysis, featuring interactive dynamic charts.",
+      moreLink: "https://github.com/IgniteUI/grid-demos/tree/vnext/projects/finance-grid",
+      downloadLink: ""
+    }],
+    ['sales', {
+      title: "Sales Dashboard",
+      theme: "Indigo Light",
+      content: "For trend analysis, KPIs and viewing sales summaries by region, product, etc.",
+      moreLink: "https://github.com/IgniteUI/grid-demos/tree/vnext/projects/sales-grid",
+      downloadLink: ""
+    }],
+    ['fleet', {
+      title: "Fleet Management",
+      theme: "Material Dark",
+      content: "A master-detail grid for managing vehicle acquisition, operations, and maintenance.",
+      moreLink: "https://github.com/IgniteUI/grid-demos/tree/vnext/projects/fleet-management-grid",
+      downloadLink: ""
+    }],
+  ]);
+
+  public onLinkClick(event: MouseEvent) {
+    const targetHTML = event.currentTarget as HTMLAnchorElement;
+    if (!targetHTML.className.includes("--disabled")) {
+      window.open(targetHTML.href, '_blank')?.focus();
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+  }
+
+  public onDownloadClick(event: MouseEvent, tabName: string) {
+    const targetHTML = event.currentTarget as HTMLAnchorElement;
+    if (!targetHTML.className.includes("--disabled")) {
+      console.log("Downloading app source!");
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+  }
 }

src/styles.scss

@@ -11,4 +11,5 @@ html {
 
 body {
   height: 100%;
+  min-width: 1100px;
 }