feat(experimental): Header add new component (#6455)

Co-authored-by: taiga-family-bot <[email protected]>
taiga-family · Jan 22, 2024 · eef8e7d · eef8e7d
1 parent 787d525
commit eef8e7d
Show file tree

Hide file tree

Showing 36 changed files with 697 additions and 47 deletions.
diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts
@@ -367,6 +367,14 @@ export const ROUTES: Routes = [
             title: 'Fade',
         },
     },
+    {
+        path: 'experimental/header',
+        loadChildren: async () =>
+            (await import('../experimental/header/header.module')).ExampleTuiHeaderModule,
+        data: {
+            title: 'Header',
+        },
+    },
     {
         path: 'experimental/icon',
         loadChildren: async () =>

diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts
@@ -936,6 +936,12 @@ export const pages: TuiDocPages = [
         keywords: 'overflow, ellipsis, gradient, clamp, line',
         route: '/experimental/fade',
     },
+    {
+        section: 'Experimental',
+        title: 'Header',
+        keywords: 'header, заголовок, item',
+        route: '/experimental/header',
+    },
     {
         section: 'Experimental',
         title: 'Icon',

diff --git a/projects/demo/src/modules/experimental/badge-notification/examples/1/index.html b/projects/demo/src/modules/experimental/badge-notification/examples/1/index.html
@@ -1,23 +1,23 @@
 <h4>Desktop</h4>
 <p tuiPlatform="web">
+    <tui-badge-notification size="l">9</tui-badge-notification>
     <tui-badge-notification>9</tui-badge-notification>
-    <tui-badge-notification size="m">9</tui-badge-notification>
     <tui-badge-notification size="s">9</tui-badge-notification>
     <tui-badge-notification size="xs">9</tui-badge-notification>
 </p>
 
 <h4>Android</h4>
 <p tuiPlatform="android">
+    <tui-badge-notification size="l">9</tui-badge-notification>
     <tui-badge-notification>9</tui-badge-notification>
-    <tui-badge-notification size="m">9</tui-badge-notification>
     <tui-badge-notification size="s">9</tui-badge-notification>
     <tui-badge-notification size="xs">9</tui-badge-notification>
 </p>
 
 <h4>IOS</h4>
 <p tuiPlatform="ios">
+    <tui-badge-notification size="l">9</tui-badge-notification>
     <tui-badge-notification>9</tui-badge-notification>
-    <tui-badge-notification size="m">9</tui-badge-notification>
     <tui-badge-notification size="s">9</tui-badge-notification>
     <tui-badge-notification size="xs">9</tui-badge-notification>
 </p>
diff --git a/projects/demo/src/modules/experimental/badge-notification/examples/2/index.html b/projects/demo/src/modules/experimental/badge-notification/examples/2/index.html
@@ -1,4 +1,4 @@
-<tui-badge-notification>10</tui-badge-notification>
-<tui-badge-notification size="m">11</tui-badge-notification>
+<tui-badge-notification size="l">10</tui-badge-notification>
+<tui-badge-notification>11</tui-badge-notification>
 <tui-badge-notification size="s">12</tui-badge-notification>
 <tui-badge-notification size="xs"></tui-badge-notification>
diff --git a/projects/demo/src/modules/experimental/badged-content/badged-content.template.html b/projects/demo/src/modules/experimental/badged-content/badged-content.template.html
@@ -48,7 +48,12 @@
     <ng-template pageTab>
         <tui-doc-demo>
             <tui-badged-content [style.--tui-radius]="radius">
-                <tui-badge-notification tuiSlot="top">1</tui-badge-notification>
+                <tui-badge-notification
+                    size="l"
+                    tuiSlot="top"
+                >
+                    1
+                </tui-badge-notification>
                 <tui-avatar
                     size="l"
                     [round]="radius === '50%'"

diff --git a/projects/demo/src/modules/experimental/badged-content/examples/1/index.html b/projects/demo/src/modules/experimental/badged-content/examples/1/index.html
@@ -18,12 +18,7 @@
         src="tuiIconUserLarge"
         [round]="false"
     ></tui-avatar>
-    <tui-badge-notification
-        size="m"
-        tuiSlot="bottom"
-    >
-        120
-    </tui-badge-notification>
+    <tui-badge-notification tuiSlot="bottom">120</tui-badge-notification>
 </tui-badged-content>
 
 <tui-badged-content>

diff --git a/projects/demo/src/modules/experimental/cell/examples/4/index.html b/projects/demo/src/modules/experimental/cell/examples/4/index.html
@@ -3,7 +3,7 @@
     tuiCell
 >
     <div tuiTitle>Notifications</div>
-    <tui-badge-notification>3</tui-badge-notification>
+    <tui-badge-notification size="l">3</tui-badge-notification>
     <tui-tooltip
         content="A cell can be a link"
         (click.prevent)="(0)"

diff --git a/projects/demo/src/modules/experimental/cell/examples/5/index.html b/projects/demo/src/modules/experimental/cell/examples/5/index.html
@@ -1,7 +1,7 @@
 <div tuiCell>
     <tui-avatar
         src="tuiIconEyeLarge"
-        tuiCellSide
+        tuiAccessories
     ></tui-avatar>
     <div tuiTitle>
         Long title in a cell will wrap to multiple lines and so will the subtitle
@@ -10,11 +10,11 @@
             [style.display]="'block'"
         >
             Use
-            <strong>tuiCellSide</strong>
+            <strong>tuiAccessories</strong>
             to keep your side content properly aligned if you have many lines of text
         </div>
     </div>
-    <div tuiCellSide>
+    <div tuiAccessories>
         <tui-icon
             icon="tuiIconCheckLarge"
             [style.color]="'var(--tui-positive)'"
@@ -64,10 +64,10 @@
 <div tuiCell>
     <tui-avatar
         src="/assets/images/avatar.jpg"
-        tuiCellSide
+        tuiAccessories
     ></tui-avatar>
     <div
-        tuiCellSide
+        tuiAccessories
         tuiTitle
     >
         Alexander
@@ -83,15 +83,15 @@
 <div tuiCell>
     <tui-avatar
         src="tuiIconHomeLarge"
-        tuiCellSide
+        tuiAccessories
     ></tui-avatar>
     <div tuiTitle>
         <strong>Main account</strong>
         <div tuiSubtitle>USD</div>
         <tui-badge appearance="neutral">By default unless arrested</tui-badge>
     </div>
     <div
-        tuiCellSide
+        tuiAccessories
         tuiTitle
         [style.white-space]="'nowrap'"
         [style.width]="0"

diff --git a/projects/demo/src/modules/experimental/header/examples/1/index.html b/projects/demo/src/modules/experimental/header/examples/1/index.html
@@ -0,0 +1,108 @@
+<div tuiHeader="xxl">
+    <h1 tuiTitle>
+        Title
+        <div tuiSubtitle>Subtitle</div>
+    </h1>
+
+    <div tuiAccessories>
+        <tui-badge-notification>1</tui-badge-notification>
+        <button
+            size="l"
+            tuiButton
+        >
+            Button
+        </button>
+    </div>
+</div>
+
+<div tuiHeader="xl">
+    <h2 tuiTitle>
+        Title
+        <div tuiSubtitle>Subtitle</div>
+    </h2>
+
+    <div tuiAccessories>
+        <tui-badge-notification>1</tui-badge-notification>
+        <button
+            size="m"
+            tuiButton
+        >
+            Button
+        </button>
+    </div>
+</div>
+
+<div tuiHeader="l">
+    <h3 tuiTitle>
+        Title
+        <div tuiSubtitle>Subtitle</div>
+    </h3>
+
+    <div tuiAccessories>
+        <tui-badge-notification>1</tui-badge-notification>
+        <button
+            size="m"
+            tuiButton
+        >
+            Button
+        </button>
+    </div>
+</div>
+
+<div tuiHeader="m">
+    <h4 tuiTitle>
+        Title
+        <div tuiSubtitle>Subtitle</div>
+    </h4>
+
+    <div tuiAccessories>
+        <tui-badge-notification>1</tui-badge-notification>
+        <button tuiButton>Button</button>
+    </div>
+</div>
+
+<div tuiHeader="s">
+    <h5 tuiTitle>
+        Title
+        <div tuiSubtitle>Subtitle</div>
+    </h5>
+
+    <div tuiAccessories>
+        <tui-badge-notification>1</tui-badge-notification>
+        <button tuiButton>Button</button>
+    </div>
+</div>
+
+<div tuiHeader="xs">
+    <h6 tuiTitle>
+        Title
+        <div tuiSubtitle>Subtitle</div>
+    </h6>
+
+    <div tuiAccessories>
+        <tui-badge-notification size="s">1</tui-badge-notification>
+        <button
+            size="xs"
+            tuiButton
+        >
+            Button
+        </button>
+    </div>
+</div>
+
+<div tuiHeader="xxs">
+    <span tuiTitle>
+        Title
+        <div tuiSubtitle>Subtitle</div>
+    </span>
+
+    <div tuiAccessories>
+        <tui-badge-notification size="s">1</tui-badge-notification>
+        <button
+            size="xs"
+            tuiButton
+        >
+            Button
+        </button>
+    </div>
+</div>
diff --git a/projects/demo/src/modules/experimental/header/examples/1/index.less b/projects/demo/src/modules/experimental/header/examples/1/index.less
@@ -0,0 +1,5 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
diff --git a/projects/demo/src/modules/experimental/header/examples/1/index.ts b/projects/demo/src/modules/experimental/header/examples/1/index.ts
@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-header-example-1',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export class TuiHeaderExample1 {}
diff --git a/projects/demo/src/modules/experimental/header/examples/2/index.html b/projects/demo/src/modules/experimental/header/examples/2/index.html
@@ -0,0 +1,62 @@
+<div>
+    <div tuiHeader>
+        <h5 tuiTitle>
+            <div tuiCaption>Opensource</div>
+            Taiga UI
+            <div tuiSubtitle>Component library</div>
+        </h5>
+
+        <div tuiAccessories>
+            <tui-badge-notification>1</tui-badge-notification>
+            <tui-tooltip content="Angular kit"></tui-tooltip>
+            <tui-avatar
+                appearance="accent"
+                src="tuiIconStar"
+            ></tui-avatar>
+        </div>
+    </div>
+    <p class="description">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad aliquam asperiores atque autem
+        consequatur cumque cupiditate delectus doloremque doloribus ea earum eius eos error esse est eum eveniet
+    </p>
+</div>
+
+<div>
+    <div tuiHeader>
+        <div tuiTitle>
+            Maskito
+            <div tuiSubtitle>
+                Awesome
+                <span [tuiSensitive]="true">one</span>
+            </div>
+        </div>
+
+        <div tuiAccessories>
+            <tui-badge-notification>1</tui-badge-notification>
+            <tui-tooltip content="Mask it"></tui-tooltip>
+            <a
+                href="https://maskito.dev/"
+                rel="noreferrer"
+                target="_blank"
+                tuiButton
+            >
+                Support
+            </a>
+        </div>
+    </div>
+    <p class="description">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad aliquam asperiores atque autem
+        consequatur cumque cupiditate delectus doloremque doloribus ea earum eius eos error esse est eum eveniet
+    </p>
+</div>
+
+<div tuiHeader>
+    <div tuiTitle>
+        Polymorpheus
+        <div tuiSubtitle>The power of dreams</div>
+    </div>
+
+    <div tuiAccessories>
+        <tui-badge>Free tier</tui-badge>
+    </div>
+</div>
diff --git a/projects/demo/src/modules/experimental/header/examples/2/index.less b/projects/demo/src/modules/experimental/header/examples/2/index.less
@@ -0,0 +1,11 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    gap: 3rem;
+}
+
+.description {
+    font: var(--tui-font-text-l);
+    margin-top: 0.5rem;
+    max-width: 30rem;
+}
diff --git a/projects/demo/src/modules/experimental/header/examples/2/index.ts b/projects/demo/src/modules/experimental/header/examples/2/index.ts
@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-header-example-2',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export class TuiHeaderExample2 {}
diff --git a/projects/demo/src/modules/experimental/header/examples/3/index.html b/projects/demo/src/modules/experimental/header/examples/3/index.html
@@ -0,0 +1,10 @@
+<div tuiHeader="m">
+    <div tuiTitle>
+        <span class="interactive-title">
+            Title
+            <tui-icon icon="tuiIconChevronRight"></tui-icon>
+        </span>
+
+        <div tuiSubtitle>Subtitle</div>
+    </div>
+</div>
diff --git a/projects/demo/src/modules/experimental/header/examples/3/index.less b/projects/demo/src/modules/experimental/header/examples/3/index.less
@@ -0,0 +1,19 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
+.interactive-title {
+    .transition(color);
+
+    cursor: pointer;
+
+    & > tui-icon {
+        .transition(transform);
+    }
+
+    &:hover {
+        color: var(--tui-link);
+
+        & > tui-icon {
+            transform: translate(0.25rem);
+        }
+    }
+}