chore(demo): update disable-animation page (#6167)

Co-authored-by: taiga-family-bot <[email protected]>

projects/addon-doc/components/doc-tab/doc-tab.component.html

@@ -0,0 +1,8 @@
+<div class="t-tab">
+    <img
+        alt="logo"
+        class="t-icon"
+        [src]="src"
+    />
+    <ng-content></ng-content>
+</div>

projects/addon-doc/components/doc-tab/doc-tab.component.less

@@ -0,0 +1,14 @@
+.t-tab {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 0.5rem;
+    gap: 0.5rem;
+    color: var(--tui-text-01);
+
+    .t-icon {
+        width: 1rem;
+        height: 1rem;
+        color: var(--tui-text-01);
+    }
+}

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

@@ -0,0 +1,12 @@
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+
+@Component({
+    selector: 'tui-doc-tab',
+    templateUrl: './doc-tab.component.html',
+    styleUrls: ['./doc-tab.component.less'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TuiDocTabComponent {
+    @Input()
+    src: string = '';
+}

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

@@ -0,0 +1,9 @@
+import {NgModule} from '@angular/core';
+
+import {TuiDocTabComponent} from './doc-tab.component';
+
+@NgModule({
+    declarations: [TuiDocTabComponent],
+    exports: [TuiDocTabComponent],
+})
+export class TuiDocTabModule {}

projects/addon-doc/components/documentation/documentation.module.ts

@@ -67,6 +67,7 @@ import {TuiDocTypeReferencePipe} from './pipes/type-reference.pipe';
         TuiDocDocumentationPropertyConnectorDirective,
     ],
     exports: [
+        TuiDocTypeReferencePipe,
         TuiDocDocumentationComponent,
         TuiDocDocumentationPropertyConnectorDirective,
     ],

projects/addon-doc/components/index.ts

@@ -4,6 +4,8 @@ export * from './copy/copy.component';
 export * from './copy/copy.module';
 export * from './demo/demo.component';
 export * from './demo/demo.module';
+export * from './doc-tab/doc-tab.component';
+export * from './doc-tab/doc-tab.module';
 export * from './documentation/documentation.component';
 export * from './documentation/documentation.module';
 export * from './documentation/documentation-property-connector.directive';

projects/demo-cypress/cypress.config.ts

@@ -1,9 +1,12 @@
 /// <reference types="node" />
+import {tuiAddSnapshotPlugin} from '@taiga-ui/testing/cypress/snapshot/plugin';
 import {defineConfig} from 'cypress';
 
 import {
     TUI_BLOCK_HOSTS as blockHosts,
+    TUI_CYPRESS_DESKTOP_VIEWPORT_HEIGHT,
     TUI_CYPRESS_DESKTOP_VIEWPORT_HEIGHT as viewportHeight,
+    TUI_CYPRESS_DESKTOP_VIEWPORT_WIDTH,
     TUI_CYPRESS_DESKTOP_VIEWPORT_WIDTH as viewportWidth,
 } from './cypress/cypress.options';
 import {DEEP_PATHS} from './cypress/support/helpers/deep-paths';
@@ -77,8 +80,32 @@ export const TUI_CYPRESS_CONFIG: Cypress.ConfigOptions = {
          * We've imported your old cypress plugins here.
          * You may want to clean this up later by importing these.
          */
-        setupNodeEvents(on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions) {
-            return require(`./cypress/plugins/index.ts`).default(on, config);
+        async setupNodeEvents(
+            on: Cypress.PluginEvents,
+            config: Cypress.PluginConfigOptions,
+        ) {
+            await tuiAddSnapshotPlugin(on, config, {
+                newSnapshotMarkFn: oldFileName => `==new==${oldFileName}`,
+                newSnapshotMarkEnabled: config.baseUrl === `http://localhost:3333/`,
+            });
+
+            on(`before:browser:launch`, (browser, launchOptions) => {
+                if (browser.name === `chrome`) {
+                    launchOptions.args.push(
+                        `--font-render-hinting=none`, // prevent inconsistent text rendering in headless mode
+                        `--window-size=${TUI_CYPRESS_DESKTOP_VIEWPORT_WIDTH},${TUI_CYPRESS_DESKTOP_VIEWPORT_HEIGHT}`,
+                        `--force-device-scale-factor=2`,
+                        `--high-dpi-support=1`,
+                        `--force-prefers-reduced-motion`,
+                        `--force-color-profile=srgb`,
+                        `--disable-dev-shm-usage`,
+                        `--disable-gpu`,
+                        `--incognito`,
+                    );
+                }
+
+                return launchOptions;
+            });
         },
     },
 };

projects/demo/src/modules/app/home/home.module.ts

@@ -1,7 +1,7 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
-import {TuiDocCodeModule} from '@taiga-ui/addon-doc';
+import {TuiDocCodeModule, TuiDocTabModule} from '@taiga-ui/addon-doc';
 import {TuiLinkModule, TuiNotificationModule} from '@taiga-ui/core';
 import {TuiIconModule} from '@taiga-ui/experimental';
 import {TuiAccordionModule, TuiTabsModule} from '@taiga-ui/kit';
@@ -18,6 +18,7 @@ import {HomeComponent} from './home.component';
         TuiAccordionModule,
         TuiTabsModule,
         TuiIconModule,
+        TuiDocTabModule,
     ],
     declarations: [HomeComponent],
     exports: [HomeComponent],

projects/demo/src/modules/app/home/home.style.less

@@ -7,17 +7,3 @@
 .tabs {
     z-index: 2;
 }
-
-.tab {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 0.5rem;
-    gap: 0.5rem;
-
-    .icon {
-        width: 1rem;
-        height: 1rem;
-        color: var(--tui-text-01);
-    }
-}