feat(experimental): ThumbnailCard has new xs size (#10049)

projects/demo/src/modules/experimental/thumbnail-card/thumbnail-card.component.ts

@@ -3,7 +3,7 @@ import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiPaymentSystem} from '@taiga-ui/addon-commerce';
 import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {ALWAYS_TRUE_HANDLER, TuiBooleanHandler} from '@taiga-ui/cdk';
-import {TuiSizeL, TuiSizeS} from '@taiga-ui/core';
+import {TuiSizeL, TuiSizeXS} from '@taiga-ui/core';
 
 @Component({
     selector: 'example-tui-thumbnail-card',
@@ -39,14 +39,14 @@ export class ExampleTuiThumbnailCardComponent {
     iconRight = this.iconVariants[0];
 
     paymentSystemVariants: readonly TuiPaymentSystem[] = [
+        'mastercard',
         'amex',
         'dinersclub',
         'discover',
         'electron',
         'humo',
         'jcb',
         'maestro',
-        'mastercard',
         'mir',
         'rupay',
         'unionpay',
@@ -55,7 +55,7 @@ export class ExampleTuiThumbnailCardComponent {
         'visa',
     ];
 
-    sizeVariants: ReadonlyArray<TuiSizeL | TuiSizeS> = ['s', 'm', 'l'];
+    sizeVariants: ReadonlyArray<TuiSizeL | TuiSizeXS> = ['xs', 's', 'm', 'l'];
     size = this.sizeVariants[1];
 
     monoHandlerVariants: ReadonlyArray<TuiBooleanHandler<TuiPaymentSystem>> = [
@@ -65,5 +65,5 @@ export class ExampleTuiThumbnailCardComponent {
 
     monoHandler = this.monoHandlerVariants[0];
 
-    paymentSystem: TuiPaymentSystem | null = null;
+    paymentSystem: TuiPaymentSystem | null = this.paymentSystemVariants[0];
 }

projects/experimental/components/thumbnail-card/thumbnail-card.component.ts

@@ -1,13 +1,7 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    HostBinding,
-    Inject,
-    Input,
-} from '@angular/core';
-import {TuiPaymentSystem} from '@taiga-ui/addon-commerce';
-import {TuiBooleanHandler, TuiStringHandler} from '@taiga-ui/cdk';
-import {TuiSizeL, TuiSizeS} from '@taiga-ui/core';
+import {ChangeDetectionStrategy, Component, Inject, Input} from '@angular/core';
+import type {TuiPaymentSystem} from '@taiga-ui/addon-commerce';
+import type {TuiBooleanHandler, TuiStringHandler} from '@taiga-ui/cdk';
+import type {TuiSizeL, TuiSizeXS} from '@taiga-ui/core';
 import {TUI_ICON_RESOLVER} from '@taiga-ui/experimental/tokens';
 
 import {
@@ -20,20 +14,22 @@ import {
     templateUrl: './thumbnail-card.template.html',
     styleUrls: ['./thumbnail-card.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    host: {
+        '[attr.data-size]': 'size',
+    },
 })
 export class TuiThumbnailCardComponent {
     @Input()
-    @HostBinding('attr.data-size')
-    size: TuiSizeL | TuiSizeS = this.options.size;
+    size: TuiSizeL | TuiSizeXS = this.options.size;
 
     @Input()
     paymentSystem: TuiPaymentSystem | null = null;
 
-    @Input()
-    iconLeft = '';
+    @Input('iconLeft')
+    iconStart = '';
 
-    @Input()
-    iconRight = '';
+    @Input('iconRight')
+    iconEnd = '';
 
     @Input()
     monoHandler: TuiBooleanHandler<TuiPaymentSystem> = this.options.monoHandler;

projects/experimental/components/thumbnail-card/thumbnail-card.options.ts

@@ -1,9 +1,11 @@
-import {TUI_PAYMENT_SYSTEM_ICONS, TuiPaymentSystem} from '@taiga-ui/addon-commerce';
-import {TuiBooleanHandler, tuiCreateToken} from '@taiga-ui/cdk';
-import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core';
+import type {TuiPaymentSystem} from '@taiga-ui/addon-commerce';
+import {TUI_PAYMENT_SYSTEM_ICONS} from '@taiga-ui/addon-commerce';
+import type {TuiBooleanHandler} from '@taiga-ui/cdk';
+import {tuiCreateToken} from '@taiga-ui/cdk';
+import type {TuiSizeL, TuiSizeXS} from '@taiga-ui/core';
 
 export interface TuiThumbnailCardOptions {
-    readonly size: TuiSizeL | TuiSizeS;
+    readonly size: TuiSizeL | TuiSizeXS;
     readonly icons: Record<TuiPaymentSystem, string>;
     readonly monoHandler: TuiBooleanHandler<TuiPaymentSystem>;
 }

projects/experimental/components/thumbnail-card/thumbnail-card.style.less

@@ -1,150 +1,162 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
 :host {
+    --t-logo-height: 0.8125rem;
     position: relative;
-    display: inline-flex;
+    display: inline-block;
     flex-shrink: 0;
     background: #000;
     color: #fff;
     transform-style: preserve-3d;
     overflow: hidden;
+    box-shadow: inset 0 0 0 1px var(--tui-background-neutral-1);
 
-    &:before {
+    &::before {
         .fullsize();
+
         content: '';
+        border-radius: inherit;
     }
 
+    // card backface
+    &::after {
+        .fullsize();
+
+        content: '';
+        backface-visibility: hidden;
+        transform: rotateY(180deg) translate3d(0, 0, 1px);
+        color: #b0b0b0;
+        border-radius: inherit;
+        background: linear-gradient(to bottom, currentColor 0 20%, #959595 20% 40%, currentColor 40%);
+    }
+
+    &[data-size='xs'],
     &[data-size='s'] {
-        width: 2.5rem;
-        height: 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'] {
-        width: 3rem;
-        height: 2rem;
+        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'] {
-        width: 3.375rem;
-        height: 2.25rem;
+        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;
+    }
 
-    &:before {
+    :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: '';
         .fullsize();
+
         border-radius: 100%;
         background: currentColor;
         opacity: 0.35;
     }
-
-    .t-icon {
-        color: #fff;
-        transform: scale(0.625);
-    }
 }
 
 .t-logo {
     position: absolute;
-    right: 0.1875rem;
-    width: 1.5rem;
-    height: 1.5rem;
+    right: 0.25rem;
+    bottom: 0;
+    block-size: var(--t-logo-height);
     transform-origin: right;
-}
 
-.t-icon {
-    width: 1rem;
-    height: 1rem;
-}
+    :host[data-size='xs'] & {
+        right: 0.125rem;
+    }
 
-.t-front {
-    .fullsize();
-    display: flex;
-    align-items: flex-end;
-    backface-visibility: hidden;
-    box-shadow: inset 0 0 0 1px var(--tui-clear);
-    border-radius: inherit;
+    :host[data-size='m'] &,
+    :host[data-size='l'] & {
+        bottom: 0.0625rem;
+    }
+
+    &::after {
+        mask-position: right;
+    }
 }
 
-.t-back {
-    .fullsize();
-    backface-visibility: hidden;
-    transform: rotateY(180deg) translate3d(0, 0, 1px);
-    background: #b0b0b0;
-    border-radius: inherit;
+.t-content {
+    position: absolute;
 
-    &:after {
-        .fullsize(absolute, inset);
-        content: '';
-        top: 20%;
-        bottom: 60%;
-        background: #959595;
+    :host[data-size='m'] & {
+        left: 0.1875rem;
+        bottom: 0.0625rem;
     }
+
+    :host[data-size='l'] & {
+        left: 0.25rem;
+        bottom: 0.0625rem;
+    }
+}
+
+.t-icon {
+    inline-size: 1rem;
+    block-size: 1rem;
 }