fix: product-cover: исправлено название пропса numberOfCards

.changeset/big-apples-vanish.md

@@ -0,0 +1,6 @@
+---
+'@alfalab/core-components-product-cover': patch
+---
+
+   - Исправлено название пропса numberOfCards. Старый пропс (numberOfСards с русской C) оставлен для обратной совместимости, но помечен как деприкейт. При использовании сразу обоих, новый имеет приоритет.
+   - Микро-оптимизация: импорт кнопки заменён с десктоной на мобильный. (Мобильная сборка имеет приоритет по размеру, поэтому не нужно тащить туда десктопные импорты.)

packages/product-cover/src/Component.test.tsx

@@ -56,7 +56,7 @@ describe('ProductCover', () => {
                     secondCard={{
                         cardNumber: 1234000000001234,
                     }}
-                    numberOfСards={2}
+                    numberOfCards={2}
                     dataTestId={dataTestId}
                 />,
             );

packages/product-cover/src/components/image-card/Component.tsx

@@ -34,9 +34,15 @@ export type ImageCardProps = {
     height?: number;
 
     /**
-     * Количество карт
+     * (Устаревший) Количество карт
+     * @deprecated Используйте 'numberOfCards'
      */
     numberOfСards?: number;
+
+    /**
+     * Количество карт
+     */
+    numberOfCards?: number;
 };
 
 export const ImageCard: FC<ImageCardProps> = ({
@@ -46,6 +52,7 @@ export const ImageCard: FC<ImageCardProps> = ({
     width,
     height,
     numberOfСards,
+    numberOfCards = numberOfСards,
 }) => {
     const imagePatternId = useId();
 
@@ -106,5 +113,5 @@ export const ImageCard: FC<ImageCardProps> = ({
         return null;
     };
 
-    return height === 16 && numberOfСards ? renderCardMack() : renderImageCard();
+    return height === 16 && numberOfCards ? renderCardMack() : renderImageCard();
 };

packages/product-cover/src/components/text/Component.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import cn from 'classnames';
 
-import { ButtonDesktop } from '@alfalab/core-components-button/desktop';
+import { ButtonMobile } from '@alfalab/core-components-button/mobile';
 import { getDataTestId } from '@alfalab/core-components-shared';
 import { Text as TypographyText } from '@alfalab/core-components-typography';
 import { EyeMIcon } from '@alfalab/icons-glyph/EyeMIcon';
 import { pluralize } from '@alfalab/utils';
 
 import { TYPOGRAPHY_VIEW_FOR_SIZE } from '../../consts';
 import { Size } from '../../typings';
-import { showNumberOfСards } from '../../utils';
+import { showNumberOfCards } from '../../utils';
 
 import styles from './index.module.css';
 
@@ -45,10 +45,16 @@ export type TextProps = {
     cardNumber?: number;
 
     /**
-     * Количество карт
+     * (Устаревший) Количество карт
+     * @deprecated Используйте 'numberOfCards'
      */
     numberOfСards?: number;
 
+    /**
+     * Количество карт
+     */
+    numberOfCards?: number;
+
     /**
      * Управление ориентацией стопки карт компонента
      */
@@ -70,14 +76,15 @@ export const Text: React.FC<TextProps> = ({
     cardholderName,
     cardNumber,
     numberOfСards,
+    numberOfCards = numberOfСards,
     align,
     eyeButton,
     dataTestId,
     size = 164,
     onEyeIconClick,
 }) => {
     const maxSize = size === 164;
-    const visibleNumberOfСards = showNumberOfСards(size, numberOfСards, align);
+    const visibleNumberOfCards = showNumberOfCards(size, numberOfCards, align);
 
     return (
         <div className={cn(styles.component)} data-test-id={dataTestId}>
@@ -93,7 +100,7 @@ export const Text: React.FC<TextProps> = ({
                 </TypographyText>
             ) : null}
 
-            {cardNumber && !visibleNumberOfСards ? (
+            {cardNumber && !visibleNumberOfCards ? (
                 <div className={styles.cardNumber}>
                     <TypographyText
                         view={TYPOGRAPHY_VIEW_FOR_SIZE[size]}
@@ -104,20 +111,20 @@ export const Text: React.FC<TextProps> = ({
                         {String(cardNumber).slice(-4)}
                     </TypographyText>
                     {eyeButton && maxSize && (
-                        <ButtonDesktop
+                        <ButtonMobile
                             view='text'
                             className={cn(styles.buttonEye)}
                             dataTestId={getDataTestId(dataTestId, 'eye-btn')}
                             onClick={onEyeIconClick}
                             colors='inverted'
                         >
                             <EyeMIcon />
-                        </ButtonDesktop>
+                        </ButtonMobile>
                     )}
                 </div>
             ) : null}
 
-            {visibleNumberOfСards && (
+            {visibleNumberOfCards && (
                 <div className={styles.cardNumber}>
                     <TypographyText
                         view={TYPOGRAPHY_VIEW_FOR_SIZE[size]}

packages/product-cover/src/docs/description.mdx

@@ -143,11 +143,11 @@ render(() => {
 
 ```jsx live
 render(() => {
-    const [numberOfСards, setNumberOfСards] = React.useState('2');
+    const [numberOfCards, setNumberOfCards] = React.useState('2');
     const [sizeAndAlignCard, setSizeAndAlignCard] = React.useState('128-default');
 
-    const onChangeNumberOfСards = (_, payload) => {
-        setNumberOfСards(payload.value);
+    const onChangeNumberOfCards = (_, payload) => {
+        setNumberOfCards(payload.value);
     };
 
     const onChangeSizeCard = (_, payload) => {
@@ -185,7 +185,7 @@ render(() => {
     };
 
     const secondCard = {
-        ...(numberOfСards === '2' && {
+        ...(numberOfCards === '2' && {
             baseUrl: 'https://online.alfabank.ru/cards-images/cards/',
             layers: 'BACKGROUND,LOGO,PAYMENT_SYSTEM',
             cardId: 'RM',
@@ -204,7 +204,7 @@ render(() => {
                         align={alignCard}
                         firstCard={firstCard}
                         secondCard={secondCard}
-                        numberOfСards={sizeCard === 16 ? 3 : CARD_COUNT[numberOfСards]}
+                        numberOfCards={sizeCard === 16 ? 3 : CARD_COUNT[numberOfCards]}
                     />
                 </Col>
             </Row>
@@ -240,8 +240,8 @@ render(() => {
                 <RadioGroup
                     label='Количество карт'
                     name='radioGroup'
-                    onChange={onChangeNumberOfСards}
-                    value={numberOfСards}
+                    onChange={onChangeNumberOfCards}
+                    value={numberOfCards}
                 >
                     <Radio label='Две' value='2' size='m' />
                     <Radio label='Больше двух' value='3' size='m' />

packages/product-cover/src/single/Component.tsx

@@ -24,6 +24,7 @@ export const Single: FC<SingleCommonProps> = ({
     cardholderNameUppercase,
     cardholderName,
     numberOfСards,
+    numberOfCards = numberOfСards,
     align,
     cardNumber,
     className,
@@ -32,7 +33,7 @@ export const Single: FC<SingleCommonProps> = ({
     onEyeIconClick,
     dataTestId,
 }) => {
-    const hasContent = Boolean(cardNumber || cardholderName || numberOfСards);
+    const hasContent = Boolean(cardNumber || cardholderName || numberOfCards);
     const showContent = hasContent && size !== 16 && !contentAddons;
 
     return (
@@ -62,7 +63,7 @@ export const Single: FC<SingleCommonProps> = ({
                 cardId={cardId}
                 layers={layers}
                 baseUrl={baseUrl}
-                numberOfСards={numberOfСards}
+                numberOfCards={numberOfCards}
             />
 
             {showContent && (
@@ -71,7 +72,7 @@ export const Single: FC<SingleCommonProps> = ({
                     eyeButton={eyeButton}
                     cardholderNameUppercase={cardholderNameUppercase}
                     cardholderName={cardholderName}
-                    numberOfСards={numberOfСards}
+                    numberOfCards={numberOfCards}
                     align={align}
                     size={size}
                     onEyeIconClick={onEyeIconClick}

packages/product-cover/src/stack/Component.tsx

@@ -14,6 +14,7 @@ export const Stack: FC<StackProps> = ({
     secondCard,
     size = 128,
     numberOfСards,
+    numberOfCards = numberOfСards,
     className,
     align = 'default',
     dataTestId,
@@ -42,7 +43,7 @@ export const Stack: FC<StackProps> = ({
                     {...secondCard}
                     size={secondCardSize}
                     align={align}
-                    numberOfСards={numberOfСards}
+                    numberOfCards={numberOfCards}
                     dataTestId={getDataTestId(dataTestId, 'second-card')}
                 />
             </div>

packages/product-cover/src/stack/component.screenshots.test.tsx

@@ -26,7 +26,7 @@ describe(
                         secondCard: {
                             cardNumber: 1234000000001234,
                         },
-                        numberOfСards: 2,
+                        numberOfCards: 2,
                     },
                 }),
             ],
@@ -42,7 +42,7 @@ describe(
                             cardNumber: 1234000000001234,
                             shadow: '2px 2px 2px 0px rgba(0, 0, 0, 0.20)',
                         },
-                        numberOfСards: 2,
+                        numberOfCards: 2,
                     },
                 }),
             ],
@@ -60,7 +60,7 @@ describe(
                         secondCard: {
                             cardNumber: 1234000000001234,
                         },
-                        numberOfСards: 2,
+                        numberOfCards: 2,
                     },
                 }),
             ],

packages/product-cover/src/typings.ts

@@ -94,10 +94,16 @@ export type SingleCommonProps = {
     cardNumber?: number;
 
     /**
-     * Количество карт
+     * (Устаревший) Количество карт
+     * @deprecated Используйте 'numberOfCards'
      */
     numberOfСards?: number;
 
+    /**
+     * Количество карт
+     */
+    numberOfCards?: number;
+
     /**
      * Управление ориентацией стопки карт компонента
      */
@@ -124,11 +130,11 @@ export type SingleCommonProps = {
     dataTestId?: string;
 };
 
-export type SingleProps = Omit<SingleCommonProps, 'numberOfСards' | 'align'>;
+export type SingleProps = Omit<SingleCommonProps, 'numberOfСards' | 'numberOfCards' | 'align'>;
 
 export type BankCardImageProps = Omit<
     SingleCommonProps,
-    'size' | 'numberOfСards' | 'className' | 'dataTestId' | 'align'
+    'size' | 'numberOfСards' | 'numberOfCards' | 'className' | 'dataTestId' | 'align'
 >;
 
 export type SizeStack = Exclude<Size, 48 | 96 | 164>;
@@ -168,10 +174,16 @@ export type StackProps = ConditionalProps & {
     secondCard?: BankCardImageProps;
 
     /**
-     * Количество карт
+     * (Устаревший) Количество карт
+     * @deprecated Используйте 'numberOfCards'
      */
     numberOfСards?: number;
 
+    /**
+     * Количество карт
+     */
+    numberOfCards?: number;
+
     /**
      * Идентификатор для систем автоматизированного тестирования
      */

packages/product-cover/src/utils/index.ts

@@ -20,9 +20,9 @@ export function getProductCoverStackTestIds(dataTestId: string) {
     };
 }
 
-export const showNumberOfСards = (sizeCard: number, numberOfСards?: number, align?: string) => {
-    if (numberOfСards) {
-        return numberOfСards >= 2 && numberOfСards < 10 && sizeCard === 40 && align === 'default';
+export const showNumberOfCards = (sizeCard: number, numberOfCards?: number, align?: string) => {
+    if (numberOfCards) {
+        return numberOfCards >= 2 && numberOfCards < 10 && sizeCard === 40 && align === 'default';
     }
 
     return false;