feat(layout): BlockStatus add desktop "m" size (#9651)

taiga-family · Nov 1, 2024 · 8cd3eb8 · 8cd3eb8
1 parent 01967d9
commit 8cd3eb8
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 10 deletions.
diff --git a/projects/demo/src/modules/components/block-status/examples/2/index.html b/projects/demo/src/modules/components/block-status/examples/2/index.html
@@ -20,7 +20,7 @@ <h4>Something has been achieved</h4>
         Do
     </button>
     <button
-        appearance="mono"
+        appearance="flat-grayscale"
         tuiButton
         type="button"
         [size]="size"

diff --git a/projects/demo/src/modules/components/block-status/examples/6/index.html b/projects/demo/src/modules/components/block-status/examples/6/index.html
@@ -0,0 +1,20 @@
+<tui-block-status size="m">
+    <img
+        alt="survived"
+        src="./assets/images/going-up.svg"
+        tuiSlot="top"
+    />
+
+    <h4>There is nothing here yet</h4>
+
+    <span>To get started, create a server</span>
+
+    <button
+        appearance="primary"
+        size="s"
+        tuiButton
+        type="button"
+    >
+        Create
+    </button>
+</tui-block-status>
diff --git a/projects/demo/src/modules/components/block-status/examples/6/index.ts b/projects/demo/src/modules/components/block-status/examples/6/index.ts
@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiButton} from '@taiga-ui/core';
+import {TuiBlockStatus} from '@taiga-ui/layout';
+
+@Component({
+    standalone: true,
+    imports: [TuiBlockStatus, TuiButton],
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+})
+export default class Example {}
diff --git a/projects/demo/src/modules/components/block-status/index.html b/projects/demo/src/modules/components/block-status/index.html
@@ -18,7 +18,10 @@
 
     <ng-template pageTab>
         <tui-doc-demo>
-            <tui-block-status [card]="card">
+            <tui-block-status
+                [card]="card"
+                [size]="size"
+            >
                 <img
                     alt="hidden content"
                     src="./assets/images/camping.svg"
@@ -35,16 +38,25 @@ <h4>Title</h4>
                 </button>
             </tui-block-status>
         </tui-doc-demo>
-        <tui-doc-documentation>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="card"
-                documentationPropertyType="boolean"
-                [(documentationPropertyValue)]="card"
+        <table tuiDocAPI>
+            <tr
+                name="[card]"
+                tuiDocAPIItem
+                type="boolean"
+                [(value)]="card"
             >
                 Enable border radius and padding for card view
-            </ng-template>
-        </tui-doc-documentation>
+            </tr>
+            <tr
+                name="[size]"
+                tuiDocAPIItem
+                type="TuiSizeL"
+                [items]="sizes"
+                [(value)]="size"
+            >
+                Size (for desktop only)
+            </tr>
+        </table>
     </ng-template>
 
     <tui-setup *pageTab />

diff --git a/projects/demo/src/modules/components/block-status/index.ts b/projects/demo/src/modules/components/block-status/index.ts
@@ -1,6 +1,7 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiDemo} from '@demo/utils';
+import type {TuiSizeL} from '@taiga-ui/core';
 import {TuiButton} from '@taiga-ui/core';
 import {TuiBlockStatus} from '@taiga-ui/layout';
 
@@ -13,11 +14,16 @@ import {TuiBlockStatus} from '@taiga-ui/layout';
 export default class Example {
     protected card = false;
 
+    protected readonly sizes: TuiSizeL[] = ['l', 'm'];
+
+    protected size: TuiSizeL = this.sizes[0] || 'l';
+
     protected readonly examples = [
         'Basic',
         'With actions',
         'Cards',
         'Customization',
         'Mobile',
+        'Desktop medium',
     ];
 }
diff --git a/projects/layout/components/block-status/block-status.component.ts b/projects/layout/components/block-status/block-status.component.ts
@@ -4,6 +4,7 @@ import {
     Input,
     ViewEncapsulation,
 } from '@angular/core';
+import type {TuiSizeL} from '@taiga-ui/core/types';
 
 @Component({
     standalone: true,
@@ -14,9 +15,13 @@ import {
     changeDetection: ChangeDetectionStrategy.OnPush,
     host: {
         '[class._card]': 'card',
+        '[attr.data-size]': 'size',
     },
 })
 export class TuiBlockStatusComponent {
     @Input()
     public card = false;
+
+    @Input()
+    public size: TuiSizeL = 'l';
 }
diff --git a/projects/layout/components/block-status/block-status.style.less b/projects/layout/components/block-status/block-status.style.less
@@ -55,3 +55,32 @@ tui-block-status {
         margin-bottom: 0.75rem;
     }
 }
+
+[data-platform='web'] tui-block-status {
+    &[data-size='m'] {
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            font: var(--tui-font-heading-6);
+            margin-top: 0;
+            margin-bottom: 0.75rem;
+        }
+
+        img {
+            inline-size: 6rem;
+            block-size: 6rem;
+        }
+
+        .t-block-text:not(:empty) {
+            font: var(--tui-font-text-s);
+            margin-bottom: 1.5rem;
+        }
+
+        .t-block-image {
+            margin-bottom: 1.5rem;
+        }
+    }
+}