@alfalab/core-components-product-cover 1.0.0

package/modern/components/text/Component.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import React from 'react';
+import { Size } from "../../typings";
+type TextProps = {
+    /**
+     * Кнопка показать номер карты
+     */
+    eyeButton?: boolean;
+    /**
+     * Размер
+     */
+    size?: Size;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Имя владельца карты в верхнем регистре
+     */
+    cardholderNameUppercase?: boolean;
+    /**
+     * Имя владельца карты
+     */
+    cardholderName?: string;
+    /**
+     * Номер карты
+     */
+    cardNumber?: number;
+    /**
+     * Количество карт
+     */
+    numberOfСards?: number;
+    /**
+     * Управление ориентацией стопки карт компонента
+     */
+    align?: 'bottom' | 'default';
+    /**
+     * Обработчик клика по иконке 'показать номер карты'
+     */
+    onEyeIconClick?: () => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования.
+     */
+    dataTestId?: string;
+};
+declare const Text: React.FC<TextProps>;
+export { TextProps, Text };

package/modern/components/text/Component.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import cn from 'classnames';
+import { ButtonDesktop } from '@alfalab/core-components-button/modern/desktop';
+import { getDataTestId } from '@alfalab/core-components-shared/modern';
+import { Typography } from '@alfalab/core-components-typography/modern';
+import { EyeMIcon } from '@alfalab/icons-glyph/EyeMIcon';
+import { pluralize } from '@alfalab/utils';
+import { TYPOGRAPHY_VIEW_FOR_SIZE } from '../../consts.js';
+import { showNumberOfСards } from '../../utils/index.js';
+
+const styles = {"component":"product-cover__component_15nup","cardholderName":"product-cover__cardholderName_15nup","cardNumber":"product-cover__cardNumber_15nup","buttonEye":"product-cover__buttonEye_15nup"};
+require('./index.css')
+
+const Text = ({ cardholderNameUppercase, cardholderName, cardNumber, numberOfСards, align, eyeButton, dataTestId, size = 164, onEyeIconClick, }) => {
+    const maxSize = size === 164;
+    const visibleNumberOfСards = showNumberOfСards(size, numberOfСards, align);
+    return (React.createElement("div", { className: cn(styles.component), "data-test-id": dataTestId },
+        maxSize && cardholderName ? (React.createElement(Typography.Text, { tag: 'div', view: 'secondary-medium', weight: 'medium', color: 'static-primary-light', className: styles.cardholderName }, cardholderNameUppercase ? cardholderName?.toUpperCase() : cardholderName)) : null,
+        cardNumber && !visibleNumberOfСards ? (React.createElement("div", { className: styles.cardNumber },
+            React.createElement(Typography.Text, { view: TYPOGRAPHY_VIEW_FOR_SIZE[size], weight: 'medium', color: 'static-primary-light' },
+                [164, 128].includes(size) && '··\u2009',
+                String(cardNumber).slice(-4)),
+            eyeButton && maxSize && (React.createElement(ButtonDesktop, { view: 'text', className: cn(styles.buttonEye), dataTestId: getDataTestId(dataTestId, 'eye-btn'), onClick: onEyeIconClick, colors: 'inverted' },
+                React.createElement(EyeMIcon, null))))) : null,
+        visibleNumberOfСards && (React.createElement("div", { className: styles.cardNumber },
+            React.createElement(Typography.Text, { view: TYPOGRAPHY_VIEW_FOR_SIZE[size], weight: 'medium', color: 'static-primary-dark' },
+                `+${numberOfСards}\u00A0`,
+                pluralize(numberOfСards || 0, 'карта', 'карты', 'карт'))))));
+};
+
+export { Text };

package/modern/components/text/index.css

@@ -0,0 +1,48 @@
+/* hash: nlylc */
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root {
+    --color-static-text-primary-light: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-3xs: 2px;
+} :root {
+} :root {
+} .product-cover__component_15nup {
+    display: flex;
+    flex-direction: column;
+    z-index: 2;
+    grid-gap: var(--gap-3xs);
+    grid-gap: var(--gap-3xs);
+    gap: var(--gap-3xs);
+} .product-cover__cardholderName_15nup {
+    -webkit-line-clamp: 1;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    word-break: break-all;
+} .product-cover__cardNumber_15nup {
+    display: flex;
+    align-items: center;
+} .product-cover__buttonEye_15nup.product-cover__buttonEye_15nup {
+    margin-left: 5px;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    color: var(--color-static-text-primary-light)
+} .product-cover__buttonEye_15nup.product-cover__buttonEye_15nup:hover {
+        color: var(--color-static-text-primary-light);
+    } .product-cover__buttonEye_15nup.product-cover__buttonEye_15nup:active {
+        color: var(--color-static-text-primary-light);
+    } .product-cover__buttonEye_15nup.product-cover__buttonEye_15nup > span {
+        display: flex;
+        align-items: center;
+    }

package/modern/components/text/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/modern/components/text/index.js

@@ -0,0 +1 @@
+export { Text } from './Component.js';

package/modern/consts.d.ts

@@ -0,0 +1,5 @@
+import { TextProps } from "@alfalab/core-components-typography";
+declare const WIDTH_TO_SIZE: Record<number, number>;
+declare const TYPOGRAPHY_VIEW_FOR_SIZE: Record<number, TextProps['view']>;
+declare const SECOND_CARD_SIZE: Record<number, number>;
+export { WIDTH_TO_SIZE, TYPOGRAPHY_VIEW_FOR_SIZE, SECOND_CARD_SIZE };

package/modern/consts.js

@@ -0,0 +1,26 @@
+const WIDTH_TO_SIZE = {
+    16: 24,
+    32: 51,
+    40: 65,
+    48: 76,
+    96: 152,
+    128: 205,
+    164: 264,
+};
+const TYPOGRAPHY_VIEW_FOR_SIZE = {
+    16: 'secondary-small',
+    32: 'secondary-small',
+    40: 'secondary-medium',
+    48: 'secondary-medium',
+    96: 'secondary-medium',
+    128: 'primary-small',
+    164: 'primary-medium',
+};
+const SECOND_CARD_SIZE = {
+    16: 16,
+    32: 32,
+    40: 40,
+    128: 96,
+};
+
+export { SECOND_CARD_SIZE, TYPOGRAPHY_VIEW_FOR_SIZE, WIDTH_TO_SIZE };

package/modern/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component";
+export type { SingleProps, StackProps } from "./typings";

package/modern/index.js

@@ -0,0 +1 @@
+export { ProductCover, Single } from './Component.js';

package/modern/shared/index.d.ts

@@ -0,0 +1 @@
+export { getProductCoverSingleTestIds, getProductCoverStackTestIds } from "../utils/index";

package/modern/shared/index.js

@@ -0,0 +1 @@
+export { getProductCoverSingleTestIds, getProductCoverStackTestIds } from '../utils/index.js';

package/modern/single/Component.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { SingleCommonProps } from "../typings";
+declare const Single: FC<SingleCommonProps>;
+export { Single };

package/modern/single/Component.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import cn from 'classnames';
+import { getDataTestId } from '@alfalab/core-components-shared/modern';
+import { Overlay } from '../components/overlay/Component.js';
+import { Text } from '../components/text/Component.js';
+import { ImageCard } from '../components/image-card/Component.js';
+import { WIDTH_TO_SIZE } from '../consts.js';
+
+const styles = {"component":"product-cover__component_6zdwr","size-164":"product-cover__size-164_6zdwr","size-128":"product-cover__size-128_6zdwr","size-96":"product-cover__size-96_6zdwr","size-48":"product-cover__size-48_6zdwr","size-40":"product-cover__size-40_6zdwr","size-32":"product-cover__size-32_6zdwr","size-16":"product-cover__size-16_6zdwr","icon":"product-cover__icon_6zdwr","border":"product-cover__border_6zdwr","contentAddons":"product-cover__contentAddons_6zdwr"};
+require('./index.css')
+
+const Single = ({ size = 164, icon: Icon, cardId, layers, baseUrl, shadow, iconColor, backgroundColor, borderColor, overlayProps = { colors: 'default', visible: false }, eyeButton, cardholderNameUppercase, cardholderName, numberOfСards, align, cardNumber, className, contentAddons, contentAddonsProps, onEyeIconClick, dataTestId, }) => {
+    const hasContent = Boolean(cardNumber || cardholderName || numberOfСards);
+    const showContent = hasContent && size !== 16 && !contentAddons;
+    return (React.createElement("div", { className: cn(styles.component, styles[`size-${size}`], className), style: {
+            width: WIDTH_TO_SIZE[size],
+            height: size,
+            boxShadow: shadow,
+            backgroundColor,
+        }, "data-test-id": dataTestId },
+        Icon && React.createElement(Icon, { color: iconColor, className: styles.icon }),
+        React.createElement(Overlay, { colors: overlayProps.colors, visible: overlayProps.visible }),
+        borderColor && (React.createElement("div", { className: cn(styles.border), style: { boxShadow: `inset 0 0 0 1px ${borderColor}` } })),
+        React.createElement(ImageCard, { width: WIDTH_TO_SIZE[size], height: size, cardId: cardId, layers: layers, baseUrl: baseUrl, "numberOf\u0421ards": numberOfСards }),
+        showContent && (React.createElement(Text, { cardNumber: cardNumber, eyeButton: eyeButton, cardholderNameUppercase: cardholderNameUppercase, cardholderName: cardholderName, "numberOf\u0421ards": numberOfСards, align: align, size: size, onEyeIconClick: onEyeIconClick, dataTestId: getDataTestId(dataTestId, 'user-info') })),
+        contentAddons && (React.createElement("div", { ...contentAddonsProps, className: cn(styles.contentAddons, contentAddonsProps?.className) }, contentAddons))));
+};
+
+export { Single };

package/modern/single/index.css

@@ -0,0 +1,72 @@
+/* hash: 7n3ug */
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root {
+    --color-light-graphic-tertiary: #b8b9c0; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+    --border-radius-xs: 2px;
+    --border-radius-s: 4px;
+    --border-radius-l: 12px;
+    --border-radius-xl: 16px;
+    --border-radius-xxl: 20px;
+} :root {
+    --gap-3xs: 2px;
+    --gap-2xs: 4px;
+    --gap-xs: 8px;
+    --gap-s: 12px;
+    --gap-m: 16px;
+} :root {
+} :root {
+} .product-cover__component_6zdwr {
+    display: flex;
+    align-items: end;
+    position: relative;
+    background-color: var(--color-light-graphic-tertiary);
+    box-sizing: border-box
+} .product-cover__component_6zdwr.product-cover__size-164_6zdwr {
+        border-radius: var(--border-radius-xxl);
+        padding: var(--gap-s) var(--gap-m);
+    } .product-cover__component_6zdwr.product-cover__size-128_6zdwr {
+        border-radius: var(--border-radius-xl);
+        padding: var(--gap-xs) var(--gap-s);
+    } .product-cover__component_6zdwr.product-cover__size-96_6zdwr {
+        border-radius: var(--border-radius-l);
+        padding: 6px var(--gap-s);
+    } .product-cover__component_6zdwr.product-cover__size-48_6zdwr,
+    .product-cover__component_6zdwr.product-cover__size-40_6zdwr {
+        border-radius: 6px;
+        padding: var(--gap-3xs) var(--gap-2xs);
+    } .product-cover__component_6zdwr.product-cover__size-32_6zdwr {
+        border-radius: var(--border-radius-s);
+        padding: 0 var(--gap-3xs);
+    } .product-cover__component_6zdwr.product-cover__size-16_6zdwr {
+        border-radius: var(--border-radius-xs);
+    } .product-cover__icon_6zdwr {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 4;
+} .product-cover__border_6zdwr {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    z-index: 3;
+} .product-cover__contentAddons_6zdwr {
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+    overflow: hidden;
+}

package/modern/single/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/modern/single/index.js

@@ -0,0 +1 @@
+export { Single } from './Component.js';

package/modern/stack/Component.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { StackProps } from "../typings";
+declare const Stack: FC<StackProps>;
+export { Stack };

package/modern/stack/Component.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import cn from 'classnames';
+import { getDataTestId } from '@alfalab/core-components-shared/modern';
+import { Single } from '../single/Component.js';
+import { getSizeSecondCard } from '../utils/index.js';
+
+const styles = {"wrapper":"product-cover__wrapper_pkwq0","size-128":"product-cover__size-128_pkwq0","size-40":"product-cover__size-40_pkwq0","size-32":"product-cover__size-32_pkwq0","size-16":"product-cover__size-16_pkwq0","bottom":"product-cover__bottom_pkwq0","componentImage":"product-cover__componentImage_pkwq0","componentStack":"product-cover__componentStack_pkwq0","firstCard":"product-cover__firstCard_pkwq0","wrapperSecondCard":"product-cover__wrapperSecondCard_pkwq0"};
+require('./index.css')
+
+const Stack = ({ firstCard, secondCard, size = 128, numberOfСards, className, align = 'default', dataTestId, }) => {
+    const sizeClassNames = `size-${size}`;
+    const secondCardSize = getSizeSecondCard(size, align);
+    const commonClassName = {
+        [styles[sizeClassNames]]: true,
+        [styles[align]]: Boolean(styles[align]),
+    };
+    return (React.createElement("div", { className: cn(styles.wrapper, styles.componentStack, commonClassName, className), "data-test-id": dataTestId },
+        React.createElement(Single, { ...firstCard, className: cn(styles.firstCard, commonClassName), size: size, dataTestId: getDataTestId(dataTestId, 'first-card') }),
+        React.createElement("div", { className: cn(styles.wrapperSecondCard, commonClassName) },
+            React.createElement(Single, { ...secondCard, size: secondCardSize, align: align, "numberOf\u0421ards": numberOfСards, dataTestId: getDataTestId(dataTestId, 'second-card') }))));
+};
+
+export { Stack };

package/modern/stack/index.css

@@ -0,0 +1,69 @@
+/* hash: 1s8sj */
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-2xs: 4px;
+    --gap-xs: 8px;
+    --gap-s: 12px;
+    --gap-m: 16px;
+    --gap-l-neg: -20px;
+} :root {
+} :root {
+} .product-cover__wrapper_pkwq0 {
+    display: flex;
+    justify-content: center;
+    box-sizing: border-box
+} .product-cover__wrapper_pkwq0.product-cover__size-128_pkwq0 {
+        width: 213px;
+        height: 128px;
+    } .product-cover__wrapper_pkwq0.product-cover__size-40_pkwq0 {
+        width: 76px;
+        height: 56px;
+    } .product-cover__wrapper_pkwq0.product-cover__size-32_pkwq0 {
+        width: 55px;
+        height: 48px;
+    } .product-cover__wrapper_pkwq0.product-cover__size-16_pkwq0 {
+        width: 28px;
+        height: 20px;
+    } .product-cover__wrapper_pkwq0.product-cover__size-40_pkwq0.product-cover__bottom_pkwq0 {
+        width: 65px;
+        height: 48px;
+    } .product-cover__componentImage_pkwq0 {
+    align-items: center;
+} .product-cover__componentStack_pkwq0.product-cover__size-128_pkwq0 {
+        padding-left: var(--gap-xs);
+    } .product-cover__firstCard_pkwq0 {
+    z-index: 4
+} .product-cover__firstCard_pkwq0.product-cover__size-32_pkwq0 {
+        margin-top: var(--gap-2xs);
+    } .product-cover__firstCard_pkwq0.product-cover__size-40_pkwq0.product-cover__bottom_pkwq0 {
+        margin-left: -7px;
+        margin-top: var(--gap-2xs);
+    } .product-cover__wrapperSecondCard_pkwq0.product-cover__size-128_pkwq0 {
+        width: 213px;
+        padding-left: var(--gap-xs);
+        margin-top: 18px;
+        margin-left: -221px;
+    } .product-cover__wrapperSecondCard_pkwq0.product-cover__size-40_pkwq0 {
+        margin-top: var(--gap-m);
+        margin-left: -54px;
+    } .product-cover__wrapperSecondCard_pkwq0.product-cover__size-32_pkwq0 {
+        margin-top: var(--gap-s);
+        margin-left: -47px;
+    } .product-cover__wrapperSecondCard_pkwq0.product-cover__size-16_pkwq0 {
+        margin-top: var(--gap-2xs);
+        margin-left: var(--gap-l-neg);
+    } .product-cover__wrapperSecondCard_pkwq0.product-cover__size-40_pkwq0.product-cover__bottom_pkwq0 {
+        margin-top: var(--gap-m);
+        margin-left: -58px;
+    }

package/modern/stack/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/modern/stack/index.js

@@ -0,0 +1 @@
+export { Stack } from './Component.js';

package/modern/typings.d.ts

@@ -0,0 +1,144 @@
+import { ElementType, HTMLAttributes, ReactNode } from 'react';
+type Size = 16 | 32 | 40 | 48 | 96 | 128 | 164;
+type OverlayProps = {
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: 'default' | 'inverted';
+    /**
+     * Управление видимостью
+     */
+    visible?: boolean;
+};
+type SingleCommonProps = {
+    /**
+     * Размер
+     */
+    size?: Size;
+    /**
+     * Идентификатор карты
+     * (например: RM,SQ,SR)
+     */
+    cardId?: string;
+    /**
+     * Базовый URL сервиса с изображениями
+     * (например: https://online.alfabank.ru/cards-images/cards/)
+     */
+    baseUrl?: string;
+    /**
+     * Какие слои показывать, через запятую без пробелов
+     * (полный набор: BACKGROUND,CARD_NUMBER,CARD_HOLDER,PAY_PASS,CHIP,LOGO,PAYMENT_SYSTEM,RESERVED_1,RESERVED_2,VALID_DATE)
+     */
+    layers?: string;
+    /**
+     * Слот для иконки с оверлеем
+     */
+    icon?: ElementType;
+    /**
+     * Тень для компонента
+     */
+    shadow?: string;
+    /**
+     * Цвет иконки
+     */
+    iconColor?: string;
+    /**
+     * Фон для компонента
+     */
+    backgroundColor?: string;
+    /**
+     * Бордер для компонента
+     */
+    borderColor?: string;
+    /**
+     * Настройки оверлея
+     */
+    overlayProps?: OverlayProps;
+    /**
+     * Кнопка показать номер карты
+     */
+    eyeButton?: boolean;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Имя владельца карты в верхнем регистре
+     */
+    cardholderNameUppercase?: boolean;
+    /**
+     * Имя владельца карты
+     */
+    cardholderName?: string;
+    /**
+     * Номер карты
+     */
+    cardNumber?: number;
+    /**
+     * Количество карт
+     */
+    numberOfСards?: number;
+    /**
+     * Управление ориентацией стопки карт компонента
+     */
+    align?: 'bottom' | 'default';
+    /**
+     * Слот для кастомного контента компонента
+     */
+    contentAddons?: ReactNode;
+    /**
+     * Свойства для обертки кастомного контента
+     */
+    contentAddonsProps?: HTMLAttributes<HTMLDivElement>;
+    /**
+     * Обработчик клика по кнопке 'показать номер карты'
+     */
+    onEyeIconClick?: () => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+type SingleProps = Omit<SingleCommonProps, 'numberOfСards' | 'align'>;
+type BankCardImageProps = Omit<SingleCommonProps, 'size' | 'numberOfСards' | 'className' | 'dataTestId' | 'align'>;
+type SizeStack = Exclude<Size, 48 | 96 | 164>;
+type ConditionalProps = {
+    /**
+     * Размер
+     */
+    size?: SizeStack;
+    /**
+     * Управление ориентацией стопки карт компонента
+     * для размеров 16, 32 - default (ориентация только вправо и вниз)
+     * для размера 40 -  default или bottom (ориентация вправо и вниз или вниз)
+     * для размера 164 - default (ориентация только влево)
+     * @default default
+     */
+    align?: 'default';
+} | {
+    size?: 40;
+    align?: 'bottom' | 'default';
+};
+type StackProps = ConditionalProps & {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Свойства для первой карты
+     */
+    firstCard?: BankCardImageProps;
+    /**
+     * Свойства для второй карты
+     */
+    secondCard?: BankCardImageProps;
+    /**
+     * Количество карт
+     */
+    numberOfСards?: number;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+export { Size, OverlayProps, SingleCommonProps, SingleProps, BankCardImageProps, SizeStack, ConditionalProps, StackProps };

package/modern/typings.js

@@ -0,0 +1 @@
+

package/modern/utils/index.d.ts

@@ -0,0 +1,15 @@
+declare function getProductCoverSingleTestIds(dataTestId: string): {
+    productCoverSingle: string;
+    userInfo: string;
+    userInfoEye: string;
+};
+declare function getProductCoverStackTestIds(dataTestId: string): {
+    productCoverStack: string;
+    firstCard: string;
+    secondCard: string;
+    userInfoFirstCard: string;
+    userInfoSecondCard: string;
+};
+declare const showNumberOfСards: (sizeCard: number, numberOfСards?: number, align?: string) => boolean;
+declare const getSizeSecondCard: (size: number, align: string) => number;
+export { getProductCoverSingleTestIds, getProductCoverStackTestIds, showNumberOfСards, getSizeSecondCard };

package/modern/utils/index.js

@@ -0,0 +1,32 @@
+import { getDataTestId } from '@alfalab/core-components-shared/modern';
+import { SECOND_CARD_SIZE } from '../consts.js';
+
+function getProductCoverSingleTestIds(dataTestId) {
+    return {
+        productCoverSingle: dataTestId,
+        userInfo: getDataTestId(dataTestId, 'user-info'),
+        userInfoEye: getDataTestId(dataTestId, 'user-info-eye-btn'),
+    };
+}
+function getProductCoverStackTestIds(dataTestId) {
+    return {
+        productCoverStack: dataTestId,
+        firstCard: getDataTestId(dataTestId, 'first-card'),
+        secondCard: getDataTestId(dataTestId, 'second-card'),
+        userInfoFirstCard: getDataTestId(dataTestId, 'first-card-user-info'),
+        userInfoSecondCard: getDataTestId(dataTestId, 'second-card-user-info'),
+    };
+}
+const showNumberOfСards = (sizeCard, numberOfСards, align) => {
+    if (numberOfСards) {
+        return numberOfСards >= 2 && numberOfСards < 10 && sizeCard === 40 && align === 'default';
+    }
+    return false;
+};
+const getSizeSecondCard = (size, align) => {
+    if (align === 'bottom' && size === 40)
+        return 32;
+    return SECOND_CARD_SIZE[size];
+};
+
+export { getProductCoverSingleTestIds, getProductCoverStackTestIds, getSizeSecondCard, showNumberOfСards };

package/package.json

@@ -0,0 +1,27 @@
+{
+    "name": "@alfalab/core-components-product-cover",
+    "version": "1.0.0",
+    "description": "ProductCover component",
+    "keywords": [],
+    "license": "MIT",
+    "main": "index.js",
+    "module": "./esm/index.js",
+    "publishConfig": {
+        "access": "public",
+        "directory": "dist"
+    },
+    "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.1 || ^18.0.0",
+        "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
+    },
+    "dependencies": {
+        "@alfalab/core-components-button": "^11.4.1",
+        "@alfalab/core-components-typography": "^4.5.0",
+        "@alfalab/core-components-shared": "^0.9.1",
+        "@alfalab/icons-glyph": "^2.139.0",
+        "@alfalab/hooks": "^1.13.0",
+        "@alfalab/utils": "^1.15.2",
+        "classnames": "^2.3.1",
+        "tslib": "^2.4.0"
+    }
+}

package/shared/index.d.ts

@@ -0,0 +1 @@
+export { getProductCoverSingleTestIds, getProductCoverStackTestIds } from "../utils/index";