feat(docs): added "new" section badge in sidenav (#DS-3386) (#662)

Author: NikGurev

apps/docs/src/app/components/sidenav/sidenav.component.html

@@ -27,7 +27,15 @@
         </kbq-tree-option>
 
         <kbq-tree-option *kbqTreeNodeDef="let node" class="docs-sidenav__item">
-            {{ node.name[locale()] }}
+            <div class="layout-row layout-align-start-center">
+                <div class="layout-margin-right-s">
+                    {{ node.name[locale()] }}
+                </div>
+
+                @if (node.isNew) {
+                    <kbq-badge badgeColor="fade-theme" [compact]="true" [outline]="true">New</kbq-badge>
+                }
+            </div>
         </kbq-tree-option>
     </kbq-tree-selection>
 </div>

apps/docs/src/app/components/sidenav/sidenav.component.ts

@@ -2,6 +2,7 @@ import { Location, ViewportScroller } from '@angular/common';
 import { AfterViewInit, ChangeDetectionStrategy, Component, inject, ViewChild, ViewEncapsulation } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { Router, RouterLink } from '@angular/router';
+import { KbqBadgeModule } from '@koobiq/components/badge';
 import { KbqDividerModule } from '@koobiq/components/divider';
 import { KbqIconModule } from '@koobiq/components/icon';
 import { KbqScrollbar, KbqScrollbarModule } from '@koobiq/components/scrollbar';
@@ -28,7 +29,8 @@ class TreeNode {
         public id: string,
         public children: TreeNode[] | null,
         public name: Record<DocsLocale, string>,
-        public type: TreeNodeType
+        public type: TreeNodeType,
+        public isNew: boolean = false
     ) {}
 }
 
@@ -40,6 +42,7 @@ class TreeFlatNode {
     expandable: boolean;
     parent: any;
     type: TreeNodeType;
+    isNew: boolean;
 }
 
 function buildTree(categories: DocCategory[]): TreeNode[] {
@@ -49,7 +52,7 @@ function buildTree(categories: DocCategory[]): TreeNode[] {
         data.push(
             new TreeNode(
                 id,
-                items.map((item) => new TreeNode(item.id, null, item.name, TreeNodeType.Item)),
+                items.map((item) => new TreeNode(item.id, null, item.name, TreeNodeType.Item, item.isNew)),
                 name,
                 TreeNodeType.Category
             )
@@ -68,7 +71,8 @@ function buildTree(categories: DocCategory[]): TreeNode[] {
         KbqDividerModule,
         DocsFooterComponent,
         KbqScrollbarModule,
-        RouterLink
+        RouterLink,
+        KbqBadgeModule
     ],
     selector: 'docs-sidenav',
     templateUrl: './sidenav.component.html',
@@ -166,6 +170,7 @@ export class DocsSidenavComponent extends DocsLocaleState implements AfterViewIn
         flatNode.type = node.type;
         flatNode.level = level;
         flatNode.expandable = !!node.children;
+        flatNode.isNew = node.isNew;
 
         return flatNode;
     };

apps/docs/src/app/services/documentation-items.ts

@@ -1,6 +1,15 @@
 import { Injectable } from '@angular/core';
+import { DateTime } from 'luxon';
 import { DocsLocale } from '../constants/locale';
 
+const expiresAt = (expiresAt: string) => {
+    const createdDate = DateTime.fromISO(expiresAt);
+    if (!createdDate.isValid) {
+        throw new Error(createdDate.invalidReason);
+    }
+    return createdDate.diffNow('days').days > 0;
+};
+
 export type DocItem = {
     id: string;
     name: Record<DocsLocale, string>;
@@ -10,6 +19,11 @@ export type DocItem = {
     apiId?: string;
     svgPreview?: string;
     packageName?: string;
+    /**
+     * Indicates whether documentation item as "new".
+     * Determined by comparing the current date with expiration date.
+     */
+    isNew?: boolean;
 };
 
 export type DocCategory = {
@@ -147,7 +161,8 @@ const DOCS: { [key: string]: DocCategory[] } = {
                     },
                     svgPreview: 'ag-grid',
                     hasApi: false,
-                    hasExamples: false
+                    hasExamples: false,
+                    isNew: expiresAt('2025-05-04')
                 },
                 {
                     id: 'alert',
@@ -246,7 +261,8 @@ const DOCS: { [key: string]: DocCategory[] } = {
                     svgPreview: '',
                     hasApi: true,
                     apiId: 'core',
-                    hasExamples: false
+                    hasExamples: false,
+                    isNew: expiresAt('2025-05-04')
                 },
                 {
                     id: 'datepicker',