feat(addon-commerce): ThumbnailCard has new xs size (#9969)

projects/addon-commerce/components/thumbnail-card/thumbnail-card.component.ts

@@ -3,7 +3,7 @@ import {ChangeDetectionStrategy, Component, inject, Input} from '@angular/core';
 import type {TuiPaymentSystem} from '@taiga-ui/addon-commerce/types';
 import type {TuiBooleanHandler} from '@taiga-ui/cdk/types';
 import {TuiIcon, TuiIconPipe} from '@taiga-ui/core/components/icon';
-import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core/types';
+import type {TuiSizeL, TuiSizeXS} from '@taiga-ui/core/types';
 
 import {TUI_THUMBNAIL_CARD_OPTIONS} from './thumbnail-card.options';
 
@@ -22,7 +22,7 @@ export class TuiThumbnailCard {
     protected readonly options = inject(TUI_THUMBNAIL_CARD_OPTIONS);
 
     @Input()
-    public size: TuiSizeL | TuiSizeS = this.options.size;
+    public size: TuiSizeL | TuiSizeXS = this.options.size;
 
     @Input()
     public paymentSystem: TuiPaymentSystem | null = null;

projects/addon-commerce/components/thumbnail-card/thumbnail-card.options.ts

@@ -3,10 +3,10 @@ import {TUI_PAYMENT_SYSTEM_ICONS} from '@taiga-ui/addon-commerce/tokens';
 import type {TuiPaymentSystem} from '@taiga-ui/addon-commerce/types';
 import type {TuiBooleanHandler} from '@taiga-ui/cdk/types';
 import {tuiCreateTokenFromFactory} from '@taiga-ui/cdk/utils/miscellaneous';
-import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core/types';
+import type {TuiSizeL, TuiSizeXS} from '@taiga-ui/core/types';
 
 export interface TuiThumbnailCardOptions {
-    readonly size: TuiSizeL | TuiSizeS;
+    readonly size: TuiSizeL | TuiSizeXS;
     readonly icons: Record<TuiPaymentSystem, string>;
     readonly monoHandler: TuiBooleanHandler<TuiPaymentSystem>;
 }

projects/addon-commerce/components/thumbnail-card/thumbnail-card.style.less

@@ -10,6 +10,8 @@
     overflow: hidden;
     box-shadow: inset 0 0 0 1px var(--tui-background-neutral-1);
 
+    --t-logo-height: 0.8125rem;
+
     &::before {
         .fullsize();
 
@@ -29,88 +31,86 @@
         background: linear-gradient(to bottom, currentColor 0 20%, #959595 20% 40%, currentColor 40%);
     }
 
+    &[data-size='xs'],
     &[data-size='s'] {
-        inline-size: 2.5rem;
-        block-size: 1.625rem;
-        border-radius: 0.25rem;
         font-size: 0;
+        border-radius: 0.25rem;
+    }
 
-        .t-left {
-            transform: translate(0.125rem, 0.125rem) scale(0.625);
-        }
-
-        .t-right {
-            display: none;
-        }
+    &[data-size='xs'] {
+        inline-size: 2rem;
+        block-size: 1.375rem;
+    }
 
-        .t-logo {
-            bottom: -0.375rem;
-            transform: scale(0.55);
-        }
+    &[data-size='s'] {
+        inline-size: 2.5rem;
+        block-size: 1.625rem;
     }
 
     &[data-size='m'] {
         inline-size: 3rem;
         block-size: 2rem;
         border-radius: 0.3125rem;
-        text-indent: 0.1875rem;
-        font: normal 0.5625rem/0.875rem var(--tui-font-text);
-
-        .t-left {
-            transform: translate(0.1875rem, 0.25rem) scale(0.75);
-        }
-
-        .t-right {
-            transform: translate(-0.1875rem, 0.1875rem) scale(0.875);
-
-            .t-icon {
-                transform: scale(0.714);
-            }
-        }
-
-        .t-logo {
-            bottom: -0.3125rem;
-            transform: scale(0.55);
-        }
+        font: normal 0.5625rem / var(--t-logo-height) var(--tui-font-text);
     }
 
     &[data-size='l'] {
         inline-size: 3.375rem;
         block-size: 2.25rem;
         border-radius: 0.375rem;
-        text-indent: 0.3125rem;
-        font: normal 0.625rem/1.125rem var(--tui-font-text);
-
-        .t-left {
-            transform: translate(0.1875rem, 0.1875rem);
-        }
-
-        .t-right {
-            transform: translate(-0.1875rem, 0.1875rem);
-        }
-
-        .t-logo {
-            bottom: -0.1875rem;
-            transform: scale(0.75);
-        }
+        font: normal 0.6875rem / var(--t-logo-height) var(--tui-font-text);
     }
 }
 
-.t-left,
-.t-right {
+.t-left {
     position: absolute;
     top: 0;
-    display: flex;
-}
-
-.t-left {
     left: 0;
+    display: flex;
     transform-origin: top left;
+
+    :host[data-size='xs'] &,
+    :host[data-size='s'] & {
+        transform: translate(0.125rem, 0.125rem) scale(0.625);
+    }
+
+    :host[data-size='m'] & {
+        transform: translate(0.1875rem, 0.1875rem) scale(0.875);
+    }
+
+    :host[data-size='l'] & {
+        transform: translate(0.1875rem, 0.1875rem);
+    }
 }
 
 .t-right {
-    right: 0;
-    transform-origin: top right;
+    position: absolute;
+    top: 0.1875rem;
+    right: 0.1875rem;
+
+    :host[data-size='xs'] &,
+    :host[data-size='s'] & {
+        display: none;
+    }
+
+    :host[data-size='m'] & {
+        inline-size: 0.875rem;
+        block-size: 0.875rem;
+
+        &::after {
+            transform: scale(0.5);
+        }
+    }
+
+    :host[data-size='l'] & {
+        inline-size: 1rem;
+        block-size: 1rem;
+
+        &::after {
+            color: #fff;
+            transform: scale(0.625);
+        }
+    }
 
     &::before {
         content: '';
@@ -120,24 +120,41 @@
         background: currentColor;
         opacity: 0.35;
     }
-
-    .t-icon {
-        color: #fff;
-        transform: scale(0.625);
-    }
 }
 
 .t-logo {
     position: absolute;
-    right: 0.1875rem;
-    inline-size: 1.5rem;
-    block-size: 1.5rem;
+    right: 0.25rem;
+    bottom: 0;
+    block-size: var(--t-logo-height);
     transform-origin: right;
+
+    :host[data-size='xs'] & {
+        right: 0.125rem;
+    }
+
+    :host[data-size='m'] &,
+    :host[data-size='l'] & {
+        bottom: 0.0625rem;
+    }
+
+    &::after {
+        mask-position: right;
+    }
 }
 
 .t-content {
     position: absolute;
-    bottom: 0;
+
+    :host[data-size='m'] & {
+        left: 0.1875rem;
+        bottom: 0.0625rem;
+    }
+
+    :host[data-size='l'] & {
+        left: 0.25rem;
+        bottom: 0.0625rem;
+    }
 }
 
 .t-icon {

projects/addon-commerce/components/thumbnail-card/thumbnail-card.template.html

@@ -1,23 +1,20 @@
+<!-- TODO: use this icon as a fallback for <ng-content select="img" /> (Angular 18)  -->
 <tui-icon
     *ngIf="iconStart"
     class="t-icon t-left"
     [icon]="iconStart"
 />
 
-<div
-    *ngIf="iconEnd"
-    class="t-right"
->
-    <tui-icon
-        class="t-icon"
-        [icon]="iconEnd"
-    />
-</div>
-
 <div class="t-left t-icon">
     <ng-content select="img" />
 </div>
 
+<tui-icon
+    *ngIf="iconEnd"
+    class="t-right t-icon"
+    [icon]="iconEnd"
+/>
+
 <div class="t-content">
     <ng-content />
 </div>

projects/demo-playwright/tests/addon-commerce/thumbnail-card.pw.spec.ts

@@ -51,15 +51,17 @@ describe('ThumbnailCard', () => {
                     });
                 });
 
-                test('size = s', async ({page}) => {
-                    await tuiGoto(
-                        page,
-                        `${DemoRoute.ThumbnailCard}/API?paymentSystem=${paymentSystem}&size=s&[email protected]&[email protected]&ng-content=8888`,
-                    );
+                ['s', 'xs'].forEach((size) => {
+                    test(`size = ${size}`, async ({page}) => {
+                        await tuiGoto(
+                            page,
+                            `${DemoRoute.ThumbnailCard}/API?paymentSystem=${paymentSystem}&size=${size}&[email protected]&[email protected]&ng-content=8888`,
+                        );
 
-                    await expect(documentationPage.apiPageExample).toHaveScreenshot(
-                        `ps-${paymentSystem}-size-s-8888.png`,
-                    );
+                        await expect(documentationPage.apiPageExample).toHaveScreenshot(
+                            `ps-${paymentSystem}-size-${size}-8888.png`,
+                        );
+                    });
                 });
             });
         });

projects/demo/src/modules/components/thumbnail-card/examples/1/index.ts

@@ -13,5 +13,5 @@ import {TuiThumbnailCard} from '@taiga-ui/addon-commerce';
     changeDetection,
 })
 export default class Example {
-    protected readonly sizes = ['s', 'm', 'l'] as const;
+    protected readonly sizes = ['xs', 's', 'm', 'l'] as const;
 }

projects/demo/src/modules/components/thumbnail-card/index.html

@@ -68,7 +68,7 @@
             <ng-template
                 documentationPropertyMode="input"
                 documentationPropertyName="size"
-                documentationPropertyType="TuiSizeS | TuiSizeL"
+                documentationPropertyType="TuiSizeXS | TuiSizeL"
                 [documentationPropertyValues]="sizeVariants"
                 [(documentationPropertyValue)]="size"
             >

projects/demo/src/modules/components/thumbnail-card/index.ts

@@ -5,7 +5,6 @@ import type {TuiPaymentSystem} from '@taiga-ui/addon-commerce';
 import {TuiThumbnailCard} from '@taiga-ui/addon-commerce';
 import type {TuiBooleanHandler} from '@taiga-ui/cdk';
 import {TUI_TRUE_HANDLER} from '@taiga-ui/cdk';
-import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core';
 
 @Component({
     standalone: true,
@@ -34,14 +33,14 @@ export default class Example {
     protected iconEnd = this.iconVariants[0]!;
 
     protected readonly paymentSystemVariants: readonly TuiPaymentSystem[] = [
+        'mastercard',
         'amex',
         'dinersclub',
         'discover',
         'electron',
         'humo',
         'jcb',
         'maestro',
-        'mastercard',
         'mir',
         'rupay',
         'unionpay',
@@ -50,16 +49,22 @@ export default class Example {
         'visa',
     ];
 
-    protected readonly sizeVariants: ReadonlyArray<TuiSizeL | TuiSizeS> = ['s', 'm', 'l'];
-    protected size = this.sizeVariants[1]!;
+    protected readonly sizeVariants: ReadonlyArray<TuiThumbnailCard['size']> = [
+        'l',
+        'm',
+        's',
+        'xs',
+    ];
+
+    protected size = this.sizeVariants[0]!;
 
     protected readonly monoHandlerVariants: ReadonlyArray<
         TuiBooleanHandler<TuiPaymentSystem>
     > = [(ps) => ps === 'mir' || ps === 'visa' || ps === 'electron', TUI_TRUE_HANDLER];
 
     protected monoHandler = this.monoHandlerVariants[0]!;
 
-    protected paymentSystem: TuiPaymentSystem | null = null;
+    protected paymentSystem = this.paymentSystemVariants[0]!;
 
     protected contentProjection = '1234';
     protected background =