feat(addon-doc): improve ui for link to sample (#8406)

taiga-family · Aug 28, 2024 · e5beb47 · e5beb47
1 parent 0f534d1
commit e5beb47
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 22 deletions.
diff --git a/projects/addon-doc/components/example/example.component.ts b/projects/addon-doc/components/example/example.component.ts
@@ -1,7 +1,7 @@
 import {Clipboard} from '@angular/cdk/clipboard';
 import {AsyncPipe, NgForOf, NgIf, NgTemplateOutlet} from '@angular/common';
 import {ChangeDetectionStrategy, Component, inject, Input} from '@angular/core';
-import {RouterLink} from '@angular/router';
+import {RouterLink, RouterLinkActive} from '@angular/router';
 import {WA_LOCATION} from '@ng-web-apis/common';
 import {
     TUI_DOC_CODE_ACTIONS,
@@ -17,6 +17,7 @@ import {TUI_IS_E2E} from '@taiga-ui/cdk/tokens';
 import type {TuiContext} from '@taiga-ui/cdk/types';
 import {TuiAlertService} from '@taiga-ui/core/components/alert';
 import {TuiButton} from '@taiga-ui/core/components/button';
+import {TuiLink} from '@taiga-ui/core/components/link';
 import {TuiLoader} from '@taiga-ui/core/components/loader';
 import {TuiTabs} from '@taiga-ui/kit/components/tabs';
 import {TUI_COPY_TEXTS} from '@taiga-ui/kit/tokens';
@@ -50,6 +51,8 @@ import {TuiDocExampleGetTabsPipe} from './example-get-tabs.pipe';
         TuiMapperPipe,
         NgTemplateOutlet,
         TuiDocCode,
+        TuiLink,
+        RouterLinkActive,
     ],
     templateUrl: './example.template.html',
     styleUrls: ['./example.style.less'],

diff --git a/projects/addon-doc/components/example/example.style.less b/projects/addon-doc/components/example/example.style.less
@@ -16,13 +16,36 @@
     }
 }
 
+.t-title-block {
+    display: flex;
+    flex-direction: row-reverse;
+}
+
 .t-title {
     font: var(--tui-font-heading-5);
-    margin: 0 0 0.5rem;
+    margin: 0 auto 0.5rem 0;
 
     @media @tui-mobile {
         font: var(--tui-font-heading-6);
     }
+
+    &:hover + .t-link {
+        opacity: 1;
+    }
+}
+
+.t-link {
+    font: var(--tui-font-heading-6);
+    padding-right: 0.1rem;
+
+    @media not @tui-mobile {
+        font: var(--tui-font-heading-5);
+        margin-left: -1.6rem;
+
+        &:not(:hover):not(.t-link-active) {
+            opacity: 0;
+        }
+    }
 }
 
 .t-description {
@@ -89,11 +112,6 @@
     }
 }
 
-.t-link-icon {
-    margin-left: 0.3rem;
-    vertical-align: baseline;
-}
-
 .t-content {
     will-change: opacity;
     block-size: 0;

diff --git a/projects/addon-doc/components/example/example.template.html b/projects/addon-doc/components/example/example.template.html
@@ -1,26 +1,28 @@
-<h3
-    *ngIf="heading"
-    class="t-title"
->
-    <span
-        *polymorpheusOutlet="heading as text"
-        [textContent]="text"
-    ></span>
+<div class="t-title-block">
+    <h3
+        *ngIf="heading"
+        class="t-title"
+    >
+        <span
+            *polymorpheusOutlet="heading as text"
+            [textContent]="text"
+        ></span>
+    </h3>
     <a
         *ngIf="id"
-        appearance="icon"
         routerLink="."
-        size="xs"
-        tuiIconButton
+        routerLinkActive="t-link-active"
+        tuiLink
         type="button"
-        class="t-link-icon"
+        class="t-link"
+        [attr.title]="copy$ | async"
         [fragment]="id"
-        [iconStart]="icons.link"
+        [routerLinkActiveOptions]="{matrixParams: 'exact', queryParams: 'exact', paths: 'exact', fragment: 'exact'}"
         (click)="copyExampleLink($event.currentTarget)"
     >
-        {{ copy$ | async }}
+        #
     </a>
-</h3>
+</div>
 <h4
     *ngIf="description"
     class="t-description"