feat(experimental): Hint add new component with updated styles (#10051

) Co-authored-by: taiga-family-bot <[email protected]>
taiga-family · Dec 26, 2024 · 92e8b21 · 92e8b21
1 parent 8b8d6cb
commit 92e8b21
Show file tree

Hide file tree

Showing 23 changed files with 605 additions and 117 deletions.
diff --git a/projects/demo/src/modules/components/card-large/examples/14/index.html b/projects/demo/src/modules/components/card-large/examples/14/index.html
@@ -0,0 +1,67 @@
+<button
+    tuiButton
+    type="button"
+    (click)="step.set(step() || 1)"
+>
+    Show popover
+</button>
+<div
+    *tuiPopup="!!step()"
+    tuiAppearance="floating"
+    tuiCardLarge="compact"
+    class="popover"
+>
+    <ng-container *ngIf="step() === 1">
+        <h1 tuiTitle>
+            Leave your feedback
+            <span tuiSubtitle>It will only take 3 minutes</span>
+        </h1>
+        <tui-rating [(ngModel)]="rating" />
+    </ng-container>
+    <ng-container *ngIf="step() === 2">
+        <h1 tuiTitle>Why so?</h1>
+        <tui-textarea
+            tuiTextfieldSize="m"
+            [tuiTextfieldLabelOutside]="true"
+            [(ngModel)]="comment"
+        >
+            Leave a few words
+            <textarea
+                tuiAutoFocus
+                tuiTextfieldLegacy
+            ></textarea>
+        </tui-textarea>
+    </ng-container>
+    <button
+        appearance="icon"
+        iconStart="@tui.x"
+        size="xs"
+        tuiIconButton
+        type="button"
+        class="close"
+        (click)="close()"
+    >
+        Close
+    </button>
+    <footer class="footer">
+        <button
+            *ngIf="step() === 2"
+            appearance="secondary"
+            size="s"
+            tuiButton
+            type="button"
+            (click)="step.set(1)"
+        >
+            Back
+        </button>
+        <button
+            appearance="primary"
+            size="s"
+            tuiButton
+            type="button"
+            (click)="step() === 1 ? step.set(2) : close()"
+        >
+            {{ step() === 1 ? 'Next' : 'Submit' }}
+        </button>
+    </footer>
+</div>
diff --git a/projects/demo/src/modules/components/card-large/examples/14/index.less b/projects/demo/src/modules/components/card-large/examples/14/index.less
@@ -0,0 +1,18 @@
+.popover {
+    position: fixed;
+    right: 1.5rem;
+    bottom: 1.5rem;
+    inline-size: 20rem;
+}
+
+.close {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.75rem;
+}
+
+.footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+}
diff --git a/projects/demo/src/modules/components/card-large/examples/14/index.ts b/projects/demo/src/modules/components/card-large/examples/14/index.ts
@@ -0,0 +1,42 @@
+import {NgIf} from '@angular/common';
+import {Component, signal} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiAutoFocus} from '@taiga-ui/cdk';
+import {TuiAppearance, TuiButton, TuiPopup, TuiTitle} from '@taiga-ui/core';
+import {TuiRating} from '@taiga-ui/kit';
+import {TuiCardLarge} from '@taiga-ui/layout';
+import {TuiTextareaModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';
+
+@Component({
+    standalone: true,
+    imports: [
+        FormsModule,
+        NgIf,
+        TuiAppearance,
+        TuiAutoFocus,
+        TuiButton,
+        TuiCardLarge,
+        TuiPopup,
+        TuiRating,
+        TuiTextareaModule,
+        TuiTextfieldControllerModule,
+        TuiTitle,
+    ],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export default class Example {
+    protected readonly step = signal(0);
+    protected rating = 0;
+    protected comment = '';
+
+    protected close(): void {
+        this.rating = 0;
+        this.comment = '';
+        this.step.set(0);
+    }
+}
diff --git a/projects/demo/src/modules/components/card-large/index.html b/projects/demo/src/modules/components/card-large/index.html
@@ -8,8 +8,8 @@
         <tui-doc-example
             *ngFor="let example of examples; let index = index"
             [component]="index + 1 | tuiComponent"
-            [content]="index + 1 | tuiExample: 'html,less'"
-            [fullsize]="index === 5 || index === 8"
+            [content]="index + 1 | tuiExample"
+            [fullsize]="index === 5 || index === 8 || index === 12"
             [heading]="example"
             [id]="example | tuiKebab"
         />

diff --git a/projects/demo/src/modules/components/card-large/index.ts b/projects/demo/src/modules/components/card-large/index.ts
@@ -23,5 +23,6 @@ export default class Example {
         'Image-dark',
         'Paddings and radii',
         'Map',
+        'In portal',
     ];
 }
diff --git a/projects/demo/src/modules/components/pulse/examples/2/index.html b/projects/demo/src/modules/components/pulse/examples/2/index.html
@@ -0,0 +1,103 @@
+<tui-avatar
+    appearance="positive"
+    src="AI"
+>
+    <tui-pulse
+        *ngIf="step()"
+        tuiHintAppearance="floating"
+        class="step-2"
+        [tuiHint]="step2"
+        [tuiHintManual]="step() === 2"
+    >
+        <ng-template #step2>
+            <button
+                appearance="icon"
+                iconStart="@tui.x"
+                size="xs"
+                tuiIconButton
+                type="button"
+                (click)="step.set(0)"
+            >
+                Close
+            </button>
+            <h3 tuiTitle>
+                You can have images!
+                <div tuiSubtitle>Or any content really</div>
+            </h3>
+            <img
+                alt="Alex Inkin"
+                src="https://avatars.githubusercontent.com/u/11832552"
+                class="avatar"
+            />
+            <footer>
+                <button
+                    appearance="secondary-grayscale"
+                    tuiButton
+                    type="button"
+                    (click)="step.set(1)"
+                >
+                    Back
+                </button>
+                <button
+                    tuiButton
+                    type="button"
+                    (click)="step.set(0)"
+                >
+                    Got it!
+                </button>
+            </footer>
+        </ng-template>
+    </tui-pulse>
+</tui-avatar>
+<button
+    appearance="outline"
+    size="m"
+    tuiButton
+    type="button"
+    (click)="step.set(1)"
+>
+    Start tutorial
+    <tui-pulse
+        *ngIf="step()"
+        tuiHintAppearance="accent"
+        tuiHintDirection="right"
+        tuiTheme="dark"
+        class="step-1"
+        [tuiHint]="step1"
+        [tuiHintManual]="step() === 1"
+    >
+        <ng-template #step1>
+            <button
+                appearance="icon"
+                iconStart="@tui.x"
+                size="xs"
+                tuiIconButton
+                type="button"
+                (click)="step.set(0)"
+            >
+                Close
+            </button>
+            <h3 tuiTitle>
+                Welcome to the tutorial!
+                <div tuiSubtitle>This is the first step.</div>
+            </h3>
+            <footer>
+                <button
+                    appearance="secondary-grayscale"
+                    tuiButton
+                    type="button"
+                    (click)="step.set(0)"
+                >
+                    Close
+                </button>
+                <button
+                    tuiButton
+                    type="button"
+                    (click)="step.set(2)"
+                >
+                    Next
+                </button>
+            </footer>
+        </ng-template>
+    </tui-pulse>
+</button>
diff --git a/projects/demo/src/modules/components/pulse/examples/2/index.less b/projects/demo/src/modules/components/pulse/examples/2/index.less
@@ -0,0 +1,25 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+}
+
+.step-1 {
+    position: absolute;
+    top: 20%;
+    right: 10%;
+}
+
+.step-2 {
+    position: absolute;
+    top: 25%;
+    right: 25%;
+}
+
+.avatar {
+    inline-size: 100%;
+    block-size: 12rem;
+    object-fit: cover;
+    object-position: top;
+}
diff --git a/projects/demo/src/modules/components/pulse/examples/2/index.ts b/projects/demo/src/modules/components/pulse/examples/2/index.ts
@@ -0,0 +1,20 @@
+import {NgIf} from '@angular/common';
+import {Component, signal} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiButton, TuiHint, TuiTitle} from '@taiga-ui/core';
+import {tuiProvideExperimentalHint} from '@taiga-ui/experimental';
+import {TuiAvatar, TuiPulse} from '@taiga-ui/kit';
+
+@Component({
+    standalone: true,
+    imports: [NgIf, TuiAvatar, TuiButton, TuiHint, TuiPulse, TuiTitle],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+    providers: [tuiProvideExperimentalHint()],
+})
+export default class Example {
+    protected readonly step = signal(0);
+}
diff --git a/projects/demo/src/modules/components/pulse/index.html b/projects/demo/src/modules/components/pulse/index.html
@@ -5,10 +5,11 @@
 >
     <ng-template pageTab>
         <tui-doc-example
-            id="pulse"
-            heading="Pulse"
-            [component]="1 | tuiComponent"
-            [content]="1 | tuiExample: 'html,ts'"
+            *ngFor="let example of examples; let index = index"
+            [component]="index + 1 | tuiComponent"
+            [content]="index + 1 | tuiExample"
+            [heading]="example"
+            [id]="example | tuiKebab"
         />
     </ng-template>
 

diff --git a/projects/demo/src/modules/components/pulse/index.ts b/projects/demo/src/modules/components/pulse/index.ts
@@ -8,4 +8,6 @@ import {TuiDemo} from '@demo/utils';
     templateUrl: './index.html',
     changeDetection,
 })
-export default class Page {}
+export default class Page {
+    protected readonly examples = ['Basic', 'Popover'];
+}
diff --git a/projects/demo/src/modules/components/push/examples/3/index.ts b/projects/demo/src/modules/components/push/examples/3/index.ts
@@ -1,12 +1,12 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiButton, TuiIcon} from '@taiga-ui/core';
-import {TuiPush, TuiPushDirective} from '@taiga-ui/kit';
+import {TuiButton, TuiIcon, TuiLink} from '@taiga-ui/core';
+import {TuiPush} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
-    imports: [TuiButton, TuiIcon, TuiPush, TuiPushDirective],
+    imports: [TuiButton, TuiIcon, TuiLink, TuiPush],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,

diff --git a/projects/demo/src/modules/components/push/index.html b/projects/demo/src/modules/components/push/index.html
@@ -7,24 +7,11 @@
         <p>Notifications in style of native browser push</p>
 
         <tui-doc-example
-            id="base"
-            heading="basic"
-            [component]="1 | tuiComponent"
-            [content]="1 | tuiExample"
-        />
-
-        <tui-doc-example
-            id="service"
-            heading="with service"
-            [component]="2 | tuiComponent"
-            [content]="2 | tuiExample: 'html,ts'"
-        />
-
-        <tui-doc-example
-            id="directive"
-            heading="with directive"
-            [component]="3 | tuiComponent"
-            [content]="3 | tuiExample: 'html,ts'"
+            *ngFor="let example of examples; let index = index"
+            [component]="index + 1 | tuiComponent"
+            [content]="index + 1 | tuiExample"
+            [heading]="example"
+            [id]="example | tuiKebab"
         />
     </ng-template>
 

diff --git a/projects/demo/src/modules/components/push/index.ts b/projects/demo/src/modules/components/push/index.ts
@@ -14,6 +14,7 @@ import {TuiPush} from '@taiga-ui/kit';
     changeDetection,
 })
 export default class Page {
+    protected readonly examples = ['Basic', 'Service', 'Directive'];
     protected heading = '';
     protected type = '';