feat(addon-doc): add fade in animation for tab content

package.json

@@ -94,9 +94,9 @@
         "core-js": "^2.6.9",
         "dompurify": "^2.2.3",
         "express": "^4.15.2",
-        "highlight.js": "^10.4.1",
-        "ngx-highlightjs": "^4.1.3",
-        "ngx-markdown": "^11.0.1",
+        "highlight.js": "^11.3.1",
+        "ngx-highlightjs": "^4.1.4",
+        "ngx-markdown": "^11.1.3",
         "preboot": "^7.0.0",
         "rxjs": "~6.6.3",
         "tslib": "^1.10.0",

projects/addon-doc/src/components/example/example.module.ts

@@ -1,23 +1,21 @@
-import {ClipboardModule} from '@angular/cdk/clipboard';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {TuiButtonModule} from '@taiga-ui/core';
 import {TuiTabsModule} from '@taiga-ui/kit';
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
 
-import {TuiDocCodeModule} from '../code/code.module';
 import {TuiDocCopyModule} from '../copy/copy.module';
+import {TuiTabContentModule} from '../tab-content/tab-content.module';
 import {TuiDocExampleComponent} from './example.component';
 import {TuiDocExampleGetTabsPipe} from './example-get-tabs.pipe';
 
 @NgModule({
     imports: [
         CommonModule,
-        ClipboardModule,
         TuiTabsModule,
         TuiButtonModule,
         TuiDocCopyModule,
-        TuiDocCodeModule,
+        TuiTabContentModule,
         PolymorpheusModule,
     ],
     declarations: [TuiDocExampleComponent, TuiDocExampleGetTabsPipe],

projects/addon-doc/src/components/example/example.style.less

@@ -61,22 +61,6 @@
     flex-grow: 1;
 }
 
-.t-demo {
-    .customize-scroll();
-    padding: 2rem;
-    overflow-x: auto;
-
-    @media @mobile-m {
-        padding: 1rem;
-    }
-}
-
-.t-copy-code {
-    position: absolute;
-    top: 4.375rem;
-    right: 1rem;
-}
-
 .t-link-icon {
     margin-left: 0.3rem;
     vertical-align: baseline;

projects/addon-doc/src/components/example/example.template.html

@@ -42,27 +42,15 @@ <h3 *ngIf="heading" class="t-title">
             </button>
         </div>
 
-        <ng-container
-            *ngIf="{
-                activeTab: tabs[activeItemIndex],
-                code: content[tabs[activeItemIndex]] || ''
-            } as state"
-        >
-            <div
-                *ngIf="state.activeTab == defaultTab; else codeSection"
-                automation-id="tui-doc-example"
-                class="t-demo"
+        <!-- dynamic re-render tab content in runtime for trigger css animation -->
+        <ng-container *ngFor="let tab of tabs; let index = index">
+            <tui-tab-content
+                *ngIf="index === activeItemIndex"
+                [code]="content[tabs[activeItemIndex]]"
+                [isActiveTab]="tabs[activeItemIndex] == defaultTab"
             >
                 <ng-content></ng-content>
-            </div>
-
-            <ng-template #codeSection>
-                <tui-doc-copy
-                    class="t-copy-code"
-                    [cdkCopyToClipboard]="state.code"
-                ></tui-doc-copy>
-                <tui-doc-code [code]="state.code"></tui-doc-code>
-            </ng-template>
+            </tui-tab-content>
         </ng-container>
     </ng-container>
 </div>

projects/addon-doc/src/components/main/main.component.ts

@@ -1,4 +1,10 @@
-import {Component, forwardRef, Inject, ViewEncapsulation} from '@angular/core';
+import {
+    Component,
+    forwardRef,
+    HostBinding,
+    Inject,
+    ViewEncapsulation,
+} from '@angular/core';
 import {LOCAL_STORAGE, WINDOW} from '@ng-web-apis/common';
 import {TuiSwipeService} from '@taiga-ui/cdk';
 import {TuiBrightness, TuiModeDirective} from '@taiga-ui/core';
@@ -31,6 +37,7 @@ export class TuiDocMainComponent {
         @Inject(WINDOW) private readonly windowRef: Window,
     ) {}
 
+    @HostBinding('attr.data-mode')
     get mode(): TuiBrightness | null {
         return this.night ? 'onDark' : null;
     }

projects/addon-doc/src/components/main/main.style.less

@@ -107,6 +107,10 @@ label.night-mode {
     padding: 0.5em;
     color: var(--tui-text-01);
     background-color: var(--tui-clear-disabled);
+
+    &.hljs-line-numbers {
+        background: transparent;
+    }
 }
 
 .hljs-subst,
@@ -170,7 +174,14 @@ label.night-mode {
 
 .hljs-variable,
 .hljs-template-variable {
-    color: var(--tui-warning-fill);
+    color: var(--tui-link-hover);
+}
+
+[data-mode='onDark'] {
+    .hljs-variable,
+    .hljs-template-variable {
+        color: var(--tui-warning-fill);
+    }
 }
 
 .hljs-addition {

projects/addon-doc/src/components/tab-content/tab-content.component.ts

@@ -0,0 +1,19 @@
+import {ChangeDetectionStrategy, Component, Inject, Input} from '@angular/core';
+import {TUI_IS_CYPRESS} from '@taiga-ui/cdk';
+
+@Component({
+    selector: 'tui-tab-content',
+    templateUrl: './tab-content.template.html',
+    styleUrls: ['./tab-content.template.less'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TuiTabContentComponent {
+    @Input() isActiveTab: boolean = false;
+    @Input() code?: string;
+
+    constructor(@Inject(TUI_IS_CYPRESS) private readonly isCypress: boolean) {}
+
+    get useAnimation() {
+        return !this.isCypress && !this.isActiveTab;
+    }
+}

projects/addon-doc/src/components/tab-content/tab-content.module.ts

@@ -0,0 +1,13 @@
+import {ClipboardModule} from '@angular/cdk/clipboard';
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {TuiDocCodeModule, TuiDocCopyModule} from '@taiga-ui/addon-doc';
+
+import {TuiTabContentComponent} from './tab-content.component';
+
+@NgModule({
+    imports: [CommonModule, TuiDocCodeModule, TuiDocCopyModule, ClipboardModule],
+    declarations: [TuiTabContentComponent],
+    exports: [TuiTabContentComponent],
+})
+export class TuiTabContentModule {}

projects/addon-doc/src/components/tab-content/tab-content.template.html

@@ -0,0 +1,17 @@
+<div [class.t-use-fade-animate]="useAnimation">
+    <div
+        *ngIf="isActiveTab; else codeSection"
+        automation-id="tui-doc-example"
+        class="t-demo"
+    >
+        <ng-content></ng-content>
+    </div>
+
+    <ng-template #codeSection>
+        <tui-doc-copy
+            class="t-copy-code"
+            [cdkCopyToClipboard]="code"
+        ></tui-doc-copy>
+        <tui-doc-code [code]="code"></tui-doc-code>
+    </ng-template>
+</div>

projects/addon-doc/src/components/tab-content/tab-content.template.less

@@ -0,0 +1,34 @@
+@import 'taiga-ui-local';
+
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+.t-use-fade-animate {
+    will-change: opacity;
+    animation: fadeIn ease-in 500ms;
+    animation-fill-mode: forwards;
+    animation-iteration-count: 1;
+}
+
+.t-demo {
+    .customize-scroll();
+    padding: 2rem;
+    overflow-x: auto;
+
+    @media @mobile-m {
+        padding: 1rem;
+    }
+}
+
+.t-copy-code {
+    position: absolute;
+    top: 4.375rem;
+    right: 1rem;
+}