feat(addon-doc): move language switcher to page from header (#9155)

taiga-family · Sep 25, 2024 · e1768c4 · e1768c4
1 parent 042bda2
commit e1768c4
Show file tree

Hide file tree

Showing 10 changed files with 76 additions and 56 deletions.
diff --git a/projects/addon-doc/components/language-switcher/index.html b/projects/addon-doc/components/language-switcher/index.html
@@ -1,29 +1,40 @@
-<button
-    appearance="whiteblock"
-    iconStart="@tui.languages"
-    size="s"
-    tuiButtonSelect
-    tuiIconButton
-    type="button"
-    [formControl]="language"
->
-    Language
-    <tui-data-list *tuiTextfieldDropdown>
-        <tui-opt-group label="Language of components">
-            <button
-                *ngFor="let name of names"
-                tuiOption
-                type="button"
-                [value]="name | titlecase"
-                (click)="setLang(name)"
-            >
-                <img
-                    alt=""
-                    class="t-flag"
-                    [src]="flags.get(name) | tuiFlag"
-                />
-                {{ name | titlecase }}
-            </button>
-        </tui-opt-group>
-    </tui-data-list>
-</button>
+<tui-badged-content>
+    <img
+        *ngIf="flags.get(language.value ?? '') | tuiFlag as flag"
+        alt=""
+        size="s"
+        tuiBadge
+        tuiSlot="bottom"
+        [src]="flag"
+    />
+
+    <button
+        appearance="whiteblock"
+        iconStart="@tui.languages"
+        size="s"
+        tuiButtonSelect
+        tuiIconButton
+        type="button"
+        [formControl]="language"
+    >
+        Language
+        <tui-data-list *tuiTextfieldDropdown>
+            <tui-opt-group label="Language of components">
+                <button
+                    *ngFor="let name of names"
+                    tuiOption
+                    type="button"
+                    [value]="name | titlecase"
+                    (click)="setLang(name)"
+                >
+                    <img
+                        alt=""
+                        class="t-flag"
+                        [src]="flags.get(name) | tuiFlag"
+                    />
+                    {{ name | titlecase }}
+                </button>
+            </tui-opt-group>
+        </tui-data-list>
+    </button>
+</tui-badged-content>
diff --git a/projects/addon-doc/components/language-switcher/index.less b/projects/addon-doc/components/language-switcher/index.less
@@ -9,3 +9,7 @@
     justify-content: flex-start;
     gap: 0.5rem;
 }
+
+img {
+    box-shadow: inset 0 0 0 1px var(--tui-border-normal);
+}
diff --git a/projects/addon-doc/components/language-switcher/index.ts b/projects/addon-doc/components/language-switcher/index.ts
@@ -1,27 +1,30 @@
-import {NgForOf, TitleCasePipe} from '@angular/common';
+import {NgForOf, NgIf, TitleCasePipe} from '@angular/common';
 import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
 import {FormControl, ReactiveFormsModule} from '@angular/forms';
 import {TuiButton} from '@taiga-ui/core/components/button';
 import {TuiDataList} from '@taiga-ui/core/components/data-list';
 import {tuiScrollbarOptionsProvider} from '@taiga-ui/core/components/scrollbar';
 import {TuiTextfield} from '@taiga-ui/core/components/textfield';
-import {TuiDropdown} from '@taiga-ui/core/directives/dropdown';
 import {TuiFlagPipe} from '@taiga-ui/core/pipes/flag';
 import type {TuiCountryIsoCode, TuiLanguageName} from '@taiga-ui/i18n/types';
 import {TuiLanguageSwitcherService} from '@taiga-ui/i18n/utils';
+import {TuiBadge} from '@taiga-ui/kit/components/badge';
+import {TuiBadgedContent} from '@taiga-ui/kit/components/badged-content';
 import {TuiButtonSelect} from '@taiga-ui/kit/directives/button-select';
 
 @Component({
     standalone: true,
     selector: 'tui-doc-language-switcher',
     imports: [
         NgForOf,
+        NgIf,
         ReactiveFormsModule,
         TitleCasePipe,
+        TuiBadge,
+        TuiBadgedContent,
         TuiButton,
         TuiButtonSelect,
         TuiDataList,
-        TuiDropdown,
         TuiFlagPipe,
         TuiTextfield,
     ],

diff --git a/projects/addon-doc/components/page/page.component.ts b/projects/addon-doc/components/page/page.component.ts
@@ -10,14 +10,14 @@ import {
 import {RouterLink, RouterLinkActive} from '@angular/router';
 import {TUI_DOC_DEFAULT_TABS} from '@taiga-ui/addon-doc/tokens';
 import {EMPTY_QUERY} from '@taiga-ui/cdk/constants';
-import {TuiItem} from '@taiga-ui/cdk/directives/item';
 import {TuiReplacePipe} from '@taiga-ui/cdk/pipes/replace';
 import {TuiAutoColorPipe} from '@taiga-ui/core/pipes/auto-color';
 import {TuiChip} from '@taiga-ui/kit/components/chip';
 import {TuiTabs} from '@taiga-ui/kit/components/tabs';
 
 import {TuiDocSeeAlso} from '../internal/see-also';
 import {TuiDocSourceCode} from '../internal/source-code/source-code.component';
+import {TuiDocLanguageSwitcher} from '../language-switcher';
 import {PAGE_PROVIDERS, PAGE_SEE_ALSO} from './page.providers';
 import {TuiDocPageTabConnector} from './page-tab.directive';
 
@@ -32,9 +32,9 @@ import {TuiDocPageTabConnector} from './page-tab.directive';
         RouterLinkActive,
         TuiAutoColorPipe,
         TuiChip,
+        TuiDocLanguageSwitcher,
         TuiDocSeeAlso,
         TuiDocSourceCode,
-        TuiItem,
         TuiReplacePipe,
         TuiTabs,
     ],

diff --git a/projects/addon-doc/components/page/page.style.less b/projects/addon-doc/components/page/page.style.less
@@ -82,8 +82,14 @@
     }
 }
 
-.t-source-code {
-    align-self: flex-end;
-    line-height: 2.75rem;
+.t-right-side {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    align-self: center;
     margin-left: auto;
 }
+
+.t-source-code {
+    block-size: 3.125rem;
+}
diff --git a/projects/addon-doc/components/page/page.template.html b/projects/addon-doc/components/page/page.template.html
@@ -47,13 +47,21 @@ <h1 class="t-title">
             </ng-container>
         </ng-container>
     </tui-tabs-with-more>
-    <tui-doc-source-code
-        class="t-source-code"
-        [header]="header"
-        [package]="package"
-        [path]="path"
-        [type]="type"
-    />
+
+    <div
+        *ngIf="package || path || type"
+        class="t-right-side"
+    >
+        <tui-doc-source-code
+            class="t-source-code"
+            [header]="header"
+            [package]="package"
+            [path]="path"
+            [type]="type"
+        />
+
+        <tui-doc-language-switcher />
+    </div>
 </header>
 <div class="t-content">
     <ng-content />

diff --git a/projects/demo-playwright/tests/addon-doc/navigation.spec.ts b/projects/demo-playwright/tests/addon-doc/navigation.spec.ts
@@ -8,7 +8,6 @@ test.describe('Navigation', () => {
     test('getting started / [light mode]', async ({page}) => {
         await tuiGoto(page, DemoRoute.GettingStarted, {
             hideHeader: false,
-            hideLanguageSwitcher: true,
             hideVersionManager: true,
         });
         const sideNavigation = page.locator('tui-doc-navigation');
@@ -24,7 +23,6 @@ test.describe('Navigation', () => {
         await tuiGoto(page, DemoRoute.GettingStarted, {
             hideHeader: false,
             enableNightMode: true,
-            hideLanguageSwitcher: true,
             hideVersionManager: true,
         });
         const sideNavigation = page.locator('tui-doc-navigation');

diff --git a/projects/demo-playwright/utils/goto.ts b/projects/demo-playwright/utils/goto.ts
@@ -12,7 +12,6 @@ interface TuiGotoOptions extends NonNullable<Parameters<Page['goto']>[1]> {
     hideHeader?: boolean;
     enableNightMode?: boolean;
     hideVersionManager?: boolean;
-    hideLanguageSwitcher?: boolean;
 }
 
 export async function tuiGoto(
@@ -23,7 +22,6 @@ export async function tuiGoto(
         hideHeader = true,
         enableNightMode = false,
         hideVersionManager = false,
-        hideLanguageSwitcher = false,
         language,
         ...playwrightGotoOptions
     }: TuiGotoOptions = {},
@@ -71,10 +69,6 @@ export async function tuiGoto(
         await tuiRemoveElement(page.locator('version-manager'));
     }
 
-    if (hideLanguageSwitcher) {
-        await tuiRemoveElement(page.locator('tui-doc-language-switcher'));
-    }
-
     expect(
         await page.evaluate("matchMedia('(prefers-reduced-motion)').matches"),
     ).toBeTruthy();

diff --git a/projects/demo/src/modules/app/app.component.ts b/projects/demo/src/modules/app/app.component.ts
@@ -8,7 +8,6 @@ import {DemoRoute} from '@demo/routes';
 import {TuiDemo} from '@demo/utils';
 import {WA_LOCAL_STORAGE} from '@ng-web-apis/common';
 import {ResizeObserverService} from '@ng-web-apis/resize-observer';
-import {TuiDocLanguageSwitcher} from '@taiga-ui/addon-doc';
 import {TuiButton, TuiDataList, TuiDropdown} from '@taiga-ui/core';
 import {TuiSheetModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';
 import {distinctUntilChanged, filter, map, startWith} from 'rxjs';
@@ -29,7 +28,6 @@ import {TUI_VERSION_MANAGER_PROVIDERS} from './version-manager/version-manager.p
         TuiButton,
         TuiDataList,
         TuiDemo,
-        TuiDocLanguageSwitcher,
         TuiDropdown,
         TuiSheetModule,
         TuiTextfieldControllerModule,

diff --git a/projects/demo/src/modules/app/app.template.html b/projects/demo/src/modules/app/app.template.html
@@ -12,8 +12,6 @@
                 class="app-christmas"
             />
 
-            <tui-doc-language-switcher />
-
             <tui-algolia-search />
 
             <button
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,8 +12,6 @@ @@
                     class="app-christmas"
                 />
-                <tui-doc-language-switcher />
                 <tui-algolia-search />
                 <button
@@ Expand Down @@