@alfalab/core-components-product-cover 3.0.1 → 3.1.0-alfasans
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/image-card/index.css +2 -2
- package/components/image-card/index.module.css.js +1 -1
- package/components/overlay/index.css +4 -4
- package/components/overlay/index.module.css.js +1 -1
- package/components/text/Component.d.ts +3 -3
- package/components/text/Component.js +4 -4
- package/components/text/Component.js.map +1 -1
- package/components/text/index.css +7 -7
- package/components/text/index.module.css.js +1 -1
- package/cssm/components/text/Component.d.ts +3 -3
- package/cssm/components/text/Component.js +4 -4
- package/cssm/components/text/Component.js.map +1 -1
- package/cssm/single/Component.js +2 -2
- package/cssm/single/Component.js.map +1 -1
- package/cssm/typings.d.ts +6 -2
- package/esm/components/image-card/index.css +2 -2
- package/esm/components/image-card/index.module.css.js +1 -1
- package/esm/components/overlay/index.css +4 -4
- package/esm/components/overlay/index.module.css.js +1 -1
- package/esm/components/text/Component.d.ts +3 -3
- package/esm/components/text/Component.js +4 -4
- package/esm/components/text/Component.js.map +1 -1
- package/esm/components/text/index.css +7 -7
- package/esm/components/text/index.module.css.js +1 -1
- package/esm/single/Component.js +2 -2
- package/esm/single/Component.js.map +1 -1
- package/esm/single/index.css +11 -11
- package/esm/single/index.module.css.js +1 -1
- package/esm/stack/index.css +16 -16
- package/esm/stack/index.module.css.js +1 -1
- package/esm/typings.d.ts +6 -2
- package/modern/components/image-card/index.css +2 -2
- package/modern/components/image-card/index.module.css.js +1 -1
- package/modern/components/overlay/index.css +4 -4
- package/modern/components/overlay/index.module.css.js +1 -1
- package/modern/components/text/Component.d.ts +3 -3
- package/modern/components/text/Component.js +4 -4
- package/modern/components/text/Component.js.map +1 -1
- package/modern/components/text/index.css +7 -7
- package/modern/components/text/index.module.css.js +1 -1
- package/modern/single/Component.js +2 -2
- package/modern/single/Component.js.map +1 -1
- package/modern/single/index.css +11 -11
- package/modern/single/index.module.css.js +1 -1
- package/modern/stack/index.css +16 -16
- package/modern/stack/index.module.css.js +1 -1
- package/modern/typings.d.ts +6 -2
- package/moderncssm/components/text/Component.d.ts +3 -3
- package/moderncssm/components/text/Component.js +4 -4
- package/moderncssm/components/text/Component.js.map +1 -1
- package/moderncssm/single/Component.js +2 -2
- package/moderncssm/single/Component.js.map +1 -1
- package/moderncssm/typings.d.ts +6 -2
- package/package.json +6 -6
- package/single/Component.js +2 -2
- package/single/Component.js.map +1 -1
- package/single/index.css +11 -11
- package/single/index.module.css.js +1 -1
- package/src/components/text/Component.tsx +7 -3
- package/src/single/Component.tsx +2 -0
- package/src/typings.ts +40 -33
- package/stack/index.css +16 -16
- package/stack/index.module.css.js +1 -1
- package/typings.d.ts +6 -2
|
@@ -8,11 +8,11 @@
|
|
|
8
8
|
:root {
|
|
9
9
|
--gap-0: 0px;
|
|
10
10
|
}
|
|
11
|
-
.product-
|
|
11
|
+
.product-cover__cardMack_1ylc8 {
|
|
12
12
|
background-color: var(--color-light-neutral-translucent-1300-inverted);
|
|
13
13
|
border-radius: var(--border-radius-2);
|
|
14
14
|
}
|
|
15
|
-
.product-
|
|
15
|
+
.product-cover__cardImage_1ylc8 {
|
|
16
16
|
position: absolute;
|
|
17
17
|
top: var(--gap-0);
|
|
18
18
|
left: var(--gap-0);
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./index.css');
|
|
4
4
|
|
|
5
|
-
var styles = {"cardMack":"product-
|
|
5
|
+
var styles = {"cardMack":"product-cover__cardMack_1ylc8","cardImage":"product-cover__cardImage_1ylc8"};
|
|
6
6
|
|
|
7
7
|
module.exports = styles;
|
|
8
8
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
:root {
|
|
6
6
|
--gap-0: 0px;
|
|
7
7
|
}
|
|
8
|
-
.product-
|
|
8
|
+
.product-cover__overlay_pyjil {
|
|
9
9
|
position: absolute;
|
|
10
10
|
top: var(--gap-0);
|
|
11
11
|
bottom: var(--gap-0);
|
|
@@ -16,12 +16,12 @@
|
|
|
16
16
|
z-index: 3;
|
|
17
17
|
opacity: 0;
|
|
18
18
|
}
|
|
19
|
-
.product-
|
|
19
|
+
.product-cover__visible_pyjil {
|
|
20
20
|
opacity: 1;
|
|
21
21
|
}
|
|
22
|
-
.product-
|
|
22
|
+
.product-cover__default_pyjil {
|
|
23
23
|
background: var(--color-static-neutral-translucent-700-inverted);
|
|
24
24
|
}
|
|
25
|
-
.product-
|
|
25
|
+
.product-cover__inverted_pyjil {
|
|
26
26
|
background: var(--color-static-neutral-translucent-700);
|
|
27
27
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./index.css');
|
|
4
4
|
|
|
5
|
-
var styles = {"overlay":"product-
|
|
5
|
+
var styles = {"overlay":"product-cover__overlay_pyjil","visible":"product-cover__visible_pyjil","default":"product-cover__default_pyjil","inverted":"product-cover__inverted_pyjil"};
|
|
6
6
|
|
|
7
7
|
module.exports = styles;
|
|
8
8
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { type Size } from '../../typings';
|
|
3
|
-
export
|
|
2
|
+
import { type SingleCommonProps, type Size } from '../../typings';
|
|
3
|
+
export interface TextProps extends Pick<SingleCommonProps, 'textColor'> {
|
|
4
4
|
/**
|
|
5
5
|
* Кнопка показать номер карты
|
|
6
6
|
*/
|
|
@@ -46,5 +46,5 @@ export declare type TextProps = {
|
|
|
46
46
|
* Идентификатор для систем автоматизированного тестирования.
|
|
47
47
|
*/
|
|
48
48
|
dataTestId?: string;
|
|
49
|
-
}
|
|
49
|
+
}
|
|
50
50
|
export declare const Text: React.FC<TextProps>;
|
|
@@ -19,19 +19,19 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
|
19
19
|
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
20
20
|
|
|
21
21
|
var Text = function (_a) {
|
|
22
|
-
var cardholderNameUppercase = _a.cardholderNameUppercase, cardholderName = _a.cardholderName, cardNumber = _a.cardNumber, numberOfСards = _a.numberOfСards, _b = _a.numberOfCards, numberOfCards = _b === void 0 ? numberOfСards : _b, align = _a.align, eyeButton = _a.eyeButton, dataTestId = _a.dataTestId, _c = _a.size, size = _c === void 0 ? 164 : _c, onEyeIconClick = _a.onEyeIconClick;
|
|
22
|
+
var cardholderNameUppercase = _a.cardholderNameUppercase, cardholderName = _a.cardholderName, cardNumber = _a.cardNumber, numberOfСards = _a.numberOfСards, _b = _a.numberOfCards, numberOfCards = _b === void 0 ? numberOfСards : _b, align = _a.align, eyeButton = _a.eyeButton, dataTestId = _a.dataTestId, _c = _a.size, size = _c === void 0 ? 164 : _c, onEyeIconClick = _a.onEyeIconClick, textColor = _a.textColor;
|
|
23
23
|
var maxSize = size === 164;
|
|
24
24
|
var visibleNumberOfCards = index.showNumberOfCards(size, numberOfCards, align);
|
|
25
25
|
return (React__default.default.createElement("div", { className: cn__default.default(index_module.component), "data-test-id": dataTestId },
|
|
26
|
-
maxSize && cardholderName ? (React__default.default.createElement(coreComponentsTypography.TypographyText, { tag: 'div', view: 'secondary-medium', weight: 'medium', color: 'static-primary-light', className: index_module.cardholderName }, cardholderNameUppercase ? cardholderName === null || cardholderName === void 0 ? void 0 : cardholderName.toUpperCase() : cardholderName)) : null,
|
|
26
|
+
maxSize && cardholderName ? (React__default.default.createElement(coreComponentsTypography.TypographyText, { tag: 'div', view: 'secondary-medium', weight: 'medium', color: 'static-primary-light', className: index_module.cardholderName, style: { color: textColor } }, cardholderNameUppercase ? cardholderName === null || cardholderName === void 0 ? void 0 : cardholderName.toUpperCase() : cardholderName)) : null,
|
|
27
27
|
cardNumber && !visibleNumberOfCards ? (React__default.default.createElement("div", { className: index_module.cardNumber },
|
|
28
|
-
React__default.default.createElement(coreComponentsTypography.TypographyText, { view: consts.TYPOGRAPHY_VIEW_FOR_SIZE[size], weight: 'medium', color: 'static-primary-light' },
|
|
28
|
+
React__default.default.createElement(coreComponentsTypography.TypographyText, { view: consts.TYPOGRAPHY_VIEW_FOR_SIZE[size], weight: 'medium', color: 'static-primary-light', style: { color: textColor } },
|
|
29
29
|
[164, 128].includes(size) && '··\u2009',
|
|
30
30
|
String(cardNumber).slice(-4)),
|
|
31
31
|
eyeButton && maxSize && (React__default.default.createElement(desktop.ButtonDesktop, { view: 'text', className: cn__default.default(index_module.buttonEye), dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'eye-btn'), onClick: onEyeIconClick, colors: 'inverted' },
|
|
32
32
|
React__default.default.createElement(EyeMIcon.EyeMIcon, null))))) : null,
|
|
33
33
|
visibleNumberOfCards && (React__default.default.createElement("div", { className: index_module.cardNumber },
|
|
34
|
-
React__default.default.createElement(coreComponentsTypography.TypographyText, { view: consts.TYPOGRAPHY_VIEW_FOR_SIZE[size], weight: 'medium', color: 'static-primary-dark' }, "+".concat(numberOfCards, "\u00A0"),
|
|
34
|
+
React__default.default.createElement(coreComponentsTypography.TypographyText, { view: consts.TYPOGRAPHY_VIEW_FOR_SIZE[size], weight: 'medium', color: 'static-primary-dark', style: { color: textColor } }, "+".concat(numberOfCards, "\u00A0"),
|
|
35
35
|
utils.pluralize(numberOfCards || 0, 'карта', 'карты', 'карт'))))));
|
|
36
36
|
};
|
|
37
37
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../../src/components/text/Component.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { ButtonDesktop } from '@alfalab/core-components-button/desktop';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { TypographyText } from '@alfalab/core-components-typography';\nimport { EyeMIcon } from '@alfalab/icons-glyph/EyeMIcon';\nimport { pluralize } from '@alfalab/utils';\n\nimport { TYPOGRAPHY_VIEW_FOR_SIZE } from '../../consts';\nimport { type Size } from '../../typings';\nimport { showNumberOfCards } from '../../utils';\n\nimport styles from './index.module.css';\n\nexport
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../src/components/text/Component.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { ButtonDesktop } from '@alfalab/core-components-button/desktop';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { TypographyText } from '@alfalab/core-components-typography';\nimport { EyeMIcon } from '@alfalab/icons-glyph/EyeMIcon';\nimport { pluralize } from '@alfalab/utils';\n\nimport { TYPOGRAPHY_VIEW_FOR_SIZE } from '../../consts';\nimport { type SingleCommonProps, type Size } from '../../typings';\nimport { showNumberOfCards } from '../../utils';\n\nimport styles from './index.module.css';\n\nexport interface TextProps extends Pick<SingleCommonProps, 'textColor'> {\n /**\n * Кнопка показать номер карты\n */\n eyeButton?: boolean;\n\n /**\n * Размер\n */\n size?: Size;\n\n /**\n * Дополнительный класс\n */\n className?: string;\n\n /**\n * Имя владельца карты в верхнем регистре\n */\n cardholderNameUppercase?: boolean;\n\n /**\n * Имя владельца карты\n */\n cardholderName?: string;\n\n /**\n * Номер карты\n */\n cardNumber?: number;\n\n /**\n * (Устаревший) Количество карт\n * @deprecated Используйте 'numberOfCards'\n */\n numberOfСards?: number;\n\n /**\n * Количество карт\n */\n numberOfCards?: number;\n\n /**\n * Управление ориентацией стопки карт компонента\n */\n align?: 'bottom' | 'default';\n\n /**\n * Обработчик клика по иконке 'показать номер карты'\n */\n onEyeIconClick?: () => void;\n\n /**\n * Идентификатор для систем автоматизированного тестирования.\n */\n dataTestId?: string;\n}\n\nexport const Text: React.FC<TextProps> = ({\n cardholderNameUppercase,\n cardholderName,\n cardNumber,\n numberOfСards,\n numberOfCards = numberOfСards,\n align,\n eyeButton,\n dataTestId,\n size = 164,\n onEyeIconClick,\n textColor,\n}) => {\n const maxSize = size === 164;\n const visibleNumberOfCards = showNumberOfCards(size, numberOfCards, align);\n\n return (\n <div className={cn(styles.component)} data-test-id={dataTestId}>\n {maxSize && cardholderName ? (\n <TypographyText\n tag='div'\n view='secondary-medium'\n weight='medium'\n color='static-primary-light'\n className={styles.cardholderName}\n style={{ color: textColor }}\n >\n {cardholderNameUppercase ? cardholderName?.toUpperCase() : cardholderName}\n </TypographyText>\n ) : null}\n\n {cardNumber && !visibleNumberOfCards ? (\n <div className={styles.cardNumber}>\n <TypographyText\n view={TYPOGRAPHY_VIEW_FOR_SIZE[size]}\n weight='medium'\n color='static-primary-light'\n style={{ color: textColor }}\n >\n {[164, 128].includes(size) && '··\\u2009'}\n {String(cardNumber).slice(-4)}\n </TypographyText>\n {eyeButton && maxSize && (\n <ButtonDesktop\n view='text'\n className={cn(styles.buttonEye)}\n dataTestId={getDataTestId(dataTestId, 'eye-btn')}\n onClick={onEyeIconClick}\n colors='inverted'\n >\n <EyeMIcon />\n </ButtonDesktop>\n )}\n </div>\n ) : null}\n\n {visibleNumberOfCards && (\n <div className={styles.cardNumber}>\n <TypographyText\n view={TYPOGRAPHY_VIEW_FOR_SIZE[size]}\n weight='medium'\n color='static-primary-dark'\n style={{ color: textColor }}\n >\n {`+${numberOfCards}\\u00A0`}\n {pluralize(numberOfCards || 0, 'карта', 'карты', 'карт')}\n </TypographyText>\n </div>\n )}\n </div>\n );\n};\n"],"names":["showNumberOfCards","React","cn","styles","TypographyText","TYPOGRAPHY_VIEW_FOR_SIZE","ButtonDesktop","getDataTestId","EyeMIcon","pluralize"],"mappings":"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"}
|
|
@@ -5,37 +5,37 @@
|
|
|
5
5
|
--gap-3xs: 2px;
|
|
6
6
|
--gap-2: var(--gap-3xs);
|
|
7
7
|
}
|
|
8
|
-
.product-
|
|
8
|
+
.product-cover__component_1ubp4 {
|
|
9
9
|
display: flex;
|
|
10
10
|
flex-direction: column;
|
|
11
11
|
z-index: 2;
|
|
12
12
|
gap: var(--gap-2);
|
|
13
13
|
}
|
|
14
|
-
.product-
|
|
14
|
+
.product-cover__cardholderName_1ubp4 {
|
|
15
15
|
-webkit-line-clamp: 1;
|
|
16
16
|
display: -webkit-box;
|
|
17
17
|
-webkit-box-orient: vertical;
|
|
18
18
|
overflow: hidden;
|
|
19
19
|
word-break: break-all;
|
|
20
20
|
}
|
|
21
|
-
.product-
|
|
21
|
+
.product-cover__cardNumber_1ubp4 {
|
|
22
22
|
display: flex;
|
|
23
23
|
align-items: center;
|
|
24
24
|
}
|
|
25
|
-
.product-
|
|
25
|
+
.product-cover__buttonEye_1ubp4.product-cover__buttonEye_1ubp4 {
|
|
26
26
|
margin-left: 5px;
|
|
27
27
|
width: 24px;
|
|
28
28
|
height: 24px;
|
|
29
29
|
cursor: pointer;
|
|
30
30
|
color: var(--color-static-text-primary-light);
|
|
31
31
|
}
|
|
32
|
-
.product-
|
|
32
|
+
.product-cover__buttonEye_1ubp4.product-cover__buttonEye_1ubp4:hover {
|
|
33
33
|
color: var(--color-static-text-primary-light);
|
|
34
34
|
}
|
|
35
|
-
.product-
|
|
35
|
+
.product-cover__buttonEye_1ubp4.product-cover__buttonEye_1ubp4:active {
|
|
36
36
|
color: var(--color-static-text-primary-light);
|
|
37
37
|
}
|
|
38
|
-
.product-
|
|
38
|
+
.product-cover__buttonEye_1ubp4.product-cover__buttonEye_1ubp4 > span {
|
|
39
39
|
display: flex;
|
|
40
40
|
align-items: center;
|
|
41
41
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./index.css');
|
|
4
4
|
|
|
5
|
-
var styles = {"component":"product-
|
|
5
|
+
var styles = {"component":"product-cover__component_1ubp4","cardholderName":"product-cover__cardholderName_1ubp4","cardNumber":"product-cover__cardNumber_1ubp4","buttonEye":"product-cover__buttonEye_1ubp4"};
|
|
6
6
|
|
|
7
7
|
module.exports = styles;
|
|
8
8
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { type Size } from '../../typings';
|
|
3
|
-
export
|
|
2
|
+
import { type SingleCommonProps, type Size } from '../../typings';
|
|
3
|
+
export interface TextProps extends Pick<SingleCommonProps, 'textColor'> {
|
|
4
4
|
/**
|
|
5
5
|
* Кнопка показать номер карты
|
|
6
6
|
*/
|
|
@@ -46,5 +46,5 @@ export declare type TextProps = {
|
|
|
46
46
|
* Идентификатор для систем автоматизированного тестирования.
|
|
47
47
|
*/
|
|
48
48
|
dataTestId?: string;
|
|
49
|
-
}
|
|
49
|
+
}
|
|
50
50
|
export declare const Text: React.FC<TextProps>;
|
|
@@ -20,19 +20,19 @@ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
|
20
20
|
var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
|
|
21
21
|
|
|
22
22
|
var Text = function (_a) {
|
|
23
|
-
var cardholderNameUppercase = _a.cardholderNameUppercase, cardholderName = _a.cardholderName, cardNumber = _a.cardNumber, numberOfСards = _a.numberOfСards, _b = _a.numberOfCards, numberOfCards = _b === void 0 ? numberOfСards : _b, align = _a.align, eyeButton = _a.eyeButton, dataTestId = _a.dataTestId, _c = _a.size, size = _c === void 0 ? 164 : _c, onEyeIconClick = _a.onEyeIconClick;
|
|
23
|
+
var cardholderNameUppercase = _a.cardholderNameUppercase, cardholderName = _a.cardholderName, cardNumber = _a.cardNumber, numberOfСards = _a.numberOfСards, _b = _a.numberOfCards, numberOfCards = _b === void 0 ? numberOfСards : _b, align = _a.align, eyeButton = _a.eyeButton, dataTestId = _a.dataTestId, _c = _a.size, size = _c === void 0 ? 164 : _c, onEyeIconClick = _a.onEyeIconClick, textColor = _a.textColor;
|
|
24
24
|
var maxSize = size === 164;
|
|
25
25
|
var visibleNumberOfCards = index.showNumberOfCards(size, numberOfCards, align);
|
|
26
26
|
return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component), "data-test-id": dataTestId },
|
|
27
|
-
maxSize && cardholderName ? (React__default.default.createElement(cssm.TypographyText, { tag: 'div', view: 'secondary-medium', weight: 'medium', color: 'static-primary-light', className: styles__default.default.cardholderName }, cardholderNameUppercase ? cardholderName === null || cardholderName === void 0 ? void 0 : cardholderName.toUpperCase() : cardholderName)) : null,
|
|
27
|
+
maxSize && cardholderName ? (React__default.default.createElement(cssm.TypographyText, { tag: 'div', view: 'secondary-medium', weight: 'medium', color: 'static-primary-light', className: styles__default.default.cardholderName, style: { color: textColor } }, cardholderNameUppercase ? cardholderName === null || cardholderName === void 0 ? void 0 : cardholderName.toUpperCase() : cardholderName)) : null,
|
|
28
28
|
cardNumber && !visibleNumberOfCards ? (React__default.default.createElement("div", { className: styles__default.default.cardNumber },
|
|
29
|
-
React__default.default.createElement(cssm.TypographyText, { view: consts.TYPOGRAPHY_VIEW_FOR_SIZE[size], weight: 'medium', color: 'static-primary-light' },
|
|
29
|
+
React__default.default.createElement(cssm.TypographyText, { view: consts.TYPOGRAPHY_VIEW_FOR_SIZE[size], weight: 'medium', color: 'static-primary-light', style: { color: textColor } },
|
|
30
30
|
[164, 128].includes(size) && '··\u2009',
|
|
31
31
|
String(cardNumber).slice(-4)),
|
|
32
32
|
eyeButton && maxSize && (React__default.default.createElement(desktop.ButtonDesktop, { view: 'text', className: cn__default.default(styles__default.default.buttonEye), dataTestId: cssm$1.getDataTestId(dataTestId, 'eye-btn'), onClick: onEyeIconClick, colors: 'inverted' },
|
|
33
33
|
React__default.default.createElement(EyeMIcon.EyeMIcon, null))))) : null,
|
|
34
34
|
visibleNumberOfCards && (React__default.default.createElement("div", { className: styles__default.default.cardNumber },
|
|
35
|
-
React__default.default.createElement(cssm.TypographyText, { view: consts.TYPOGRAPHY_VIEW_FOR_SIZE[size], weight: 'medium', color: 'static-primary-dark' }, "+".concat(numberOfCards, "\u00A0"),
|
|
35
|
+
React__default.default.createElement(cssm.TypographyText, { view: consts.TYPOGRAPHY_VIEW_FOR_SIZE[size], weight: 'medium', color: 'static-primary-dark', style: { color: textColor } }, "+".concat(numberOfCards, "\u00A0"),
|
|
36
36
|
utils.pluralize(numberOfCards || 0, 'карта', 'карты', 'карт'))))));
|
|
37
37
|
};
|
|
38
38
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../../../src/components/text/Component.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { ButtonDesktop } from '@alfalab/core-components-button/desktop';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { TypographyText } from '@alfalab/core-components-typography';\nimport { EyeMIcon } from '@alfalab/icons-glyph/EyeMIcon';\nimport { pluralize } from '@alfalab/utils';\n\nimport { TYPOGRAPHY_VIEW_FOR_SIZE } from '../../consts';\nimport { type Size } from '../../typings';\nimport { showNumberOfCards } from '../../utils';\n\nimport styles from './index.module.css';\n\nexport
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../../src/components/text/Component.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { ButtonDesktop } from '@alfalab/core-components-button/desktop';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { TypographyText } from '@alfalab/core-components-typography';\nimport { EyeMIcon } from '@alfalab/icons-glyph/EyeMIcon';\nimport { pluralize } from '@alfalab/utils';\n\nimport { TYPOGRAPHY_VIEW_FOR_SIZE } from '../../consts';\nimport { type SingleCommonProps, type Size } from '../../typings';\nimport { showNumberOfCards } from '../../utils';\n\nimport styles from './index.module.css';\n\nexport interface TextProps extends Pick<SingleCommonProps, 'textColor'> {\n /**\n * Кнопка показать номер карты\n */\n eyeButton?: boolean;\n\n /**\n * Размер\n */\n size?: Size;\n\n /**\n * Дополнительный класс\n */\n className?: string;\n\n /**\n * Имя владельца карты в верхнем регистре\n */\n cardholderNameUppercase?: boolean;\n\n /**\n * Имя владельца карты\n */\n cardholderName?: string;\n\n /**\n * Номер карты\n */\n cardNumber?: number;\n\n /**\n * (Устаревший) Количество карт\n * @deprecated Используйте 'numberOfCards'\n */\n numberOfСards?: number;\n\n /**\n * Количество карт\n */\n numberOfCards?: number;\n\n /**\n * Управление ориентацией стопки карт компонента\n */\n align?: 'bottom' | 'default';\n\n /**\n * Обработчик клика по иконке 'показать номер карты'\n */\n onEyeIconClick?: () => void;\n\n /**\n * Идентификатор для систем автоматизированного тестирования.\n */\n dataTestId?: string;\n}\n\nexport const Text: React.FC<TextProps> = ({\n cardholderNameUppercase,\n cardholderName,\n cardNumber,\n numberOfСards,\n numberOfCards = numberOfСards,\n align,\n eyeButton,\n dataTestId,\n size = 164,\n onEyeIconClick,\n textColor,\n}) => {\n const maxSize = size === 164;\n const visibleNumberOfCards = showNumberOfCards(size, numberOfCards, align);\n\n return (\n <div className={cn(styles.component)} data-test-id={dataTestId}>\n {maxSize && cardholderName ? (\n <TypographyText\n tag='div'\n view='secondary-medium'\n weight='medium'\n color='static-primary-light'\n className={styles.cardholderName}\n style={{ color: textColor }}\n >\n {cardholderNameUppercase ? cardholderName?.toUpperCase() : cardholderName}\n </TypographyText>\n ) : null}\n\n {cardNumber && !visibleNumberOfCards ? (\n <div className={styles.cardNumber}>\n <TypographyText\n view={TYPOGRAPHY_VIEW_FOR_SIZE[size]}\n weight='medium'\n color='static-primary-light'\n style={{ color: textColor }}\n >\n {[164, 128].includes(size) && '··\\u2009'}\n {String(cardNumber).slice(-4)}\n </TypographyText>\n {eyeButton && maxSize && (\n <ButtonDesktop\n view='text'\n className={cn(styles.buttonEye)}\n dataTestId={getDataTestId(dataTestId, 'eye-btn')}\n onClick={onEyeIconClick}\n colors='inverted'\n >\n <EyeMIcon />\n </ButtonDesktop>\n )}\n </div>\n ) : null}\n\n {visibleNumberOfCards && (\n <div className={styles.cardNumber}>\n <TypographyText\n view={TYPOGRAPHY_VIEW_FOR_SIZE[size]}\n weight='medium'\n color='static-primary-dark'\n style={{ color: textColor }}\n >\n {`+${numberOfCards}\\u00A0`}\n {pluralize(numberOfCards || 0, 'карта', 'карты', 'карт')}\n </TypographyText>\n </div>\n )}\n </div>\n );\n};\n"],"names":["showNumberOfCards","React","cn","styles","TypographyText","TYPOGRAPHY_VIEW_FOR_SIZE","ButtonDesktop","getDataTestId","EyeMIcon","pluralize"],"mappings":"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"}
|
package/cssm/single/Component.js
CHANGED
|
@@ -19,7 +19,7 @@ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
|
19
19
|
var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
|
|
20
20
|
|
|
21
21
|
var Single = function (_a) {
|
|
22
|
-
var _b = _a.size, size = _b === void 0 ? 164 : _b, Icon = _a.icon, cardId = _a.cardId, layers = _a.layers, baseUrl = _a.baseUrl, shadow = _a.shadow, iconColor = _a.iconColor, backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, _c = _a.overlayProps, overlayProps = _c === void 0 ? { colors: 'default', visible: false } : _c, eyeButton = _a.eyeButton, cardholderNameUppercase = _a.cardholderNameUppercase, cardholderName = _a.cardholderName, numberOfСards = _a.numberOfСards, _d = _a.numberOfCards, numberOfCards = _d === void 0 ? numberOfСards : _d, align = _a.align, cardNumber = _a.cardNumber, className = _a.className, contentAddons = _a.contentAddons, contentAddonsProps = _a.contentAddonsProps, onEyeIconClick = _a.onEyeIconClick, dataTestId = _a.dataTestId;
|
|
22
|
+
var _b = _a.size, size = _b === void 0 ? 164 : _b, Icon = _a.icon, cardId = _a.cardId, layers = _a.layers, baseUrl = _a.baseUrl, shadow = _a.shadow, iconColor = _a.iconColor, backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, textColor = _a.textColor, _c = _a.overlayProps, overlayProps = _c === void 0 ? { colors: 'default', visible: false } : _c, eyeButton = _a.eyeButton, cardholderNameUppercase = _a.cardholderNameUppercase, cardholderName = _a.cardholderName, numberOfСards = _a.numberOfСards, _d = _a.numberOfCards, numberOfCards = _d === void 0 ? numberOfСards : _d, align = _a.align, cardNumber = _a.cardNumber, className = _a.className, contentAddons = _a.contentAddons, contentAddonsProps = _a.contentAddonsProps, onEyeIconClick = _a.onEyeIconClick, dataTestId = _a.dataTestId;
|
|
23
23
|
var hasContent = Boolean(cardNumber || cardholderName || numberOfCards);
|
|
24
24
|
var showContent = hasContent && size !== 16 && !contentAddons;
|
|
25
25
|
return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, styles__default.default["size-".concat(size)], className), style: {
|
|
@@ -32,7 +32,7 @@ var Single = function (_a) {
|
|
|
32
32
|
React__default.default.createElement(Component.Overlay, { colors: overlayProps.colors, visible: overlayProps.visible }),
|
|
33
33
|
borderColor && (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.border), style: { boxShadow: "inset 0 0 0 1px ".concat(borderColor) } })),
|
|
34
34
|
React__default.default.createElement(Component$1.ImageCard, { width: consts.WIDTH_TO_SIZE[size], height: size, cardId: cardId, layers: layers, baseUrl: baseUrl, numberOfCards: numberOfCards }),
|
|
35
|
-
showContent && (React__default.default.createElement(Component$2.Text, { cardNumber: cardNumber, eyeButton: eyeButton, cardholderNameUppercase: cardholderNameUppercase, cardholderName: cardholderName, numberOfCards: numberOfCards, align: align, size: size, onEyeIconClick: onEyeIconClick, dataTestId: cssm.getDataTestId(dataTestId, 'user-info') })),
|
|
35
|
+
showContent && (React__default.default.createElement(Component$2.Text, { cardNumber: cardNumber, eyeButton: eyeButton, cardholderNameUppercase: cardholderNameUppercase, cardholderName: cardholderName, numberOfCards: numberOfCards, align: align, size: size, onEyeIconClick: onEyeIconClick, dataTestId: cssm.getDataTestId(dataTestId, 'user-info'), textColor: textColor })),
|
|
36
36
|
contentAddons && (React__default.default.createElement("div", tslib.__assign({}, contentAddonsProps, { className: cn__default.default(styles__default.default.contentAddons, contentAddonsProps === null || contentAddonsProps === void 0 ? void 0 : contentAddonsProps.className) }), contentAddons))));
|
|
37
37
|
};
|
|
38
38
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../../src/single/Component.tsx"],"sourcesContent":["import React, { type FC } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { ImageCard, Overlay, Text } from '../components';\nimport { WIDTH_TO_SIZE } from '../consts';\nimport { type SingleCommonProps } from '../typings';\n\nimport styles from './index.module.css';\n\nexport const Single: FC<SingleCommonProps> = ({\n size = 164,\n icon: Icon,\n cardId,\n layers,\n baseUrl,\n shadow,\n iconColor,\n backgroundColor,\n borderColor,\n overlayProps = { colors: 'default', visible: false },\n eyeButton,\n cardholderNameUppercase,\n cardholderName,\n numberOfСards,\n numberOfCards = numberOfСards,\n align,\n cardNumber,\n className,\n contentAddons,\n contentAddonsProps,\n onEyeIconClick,\n dataTestId,\n}) => {\n const hasContent = Boolean(cardNumber || cardholderName || numberOfCards);\n const showContent = hasContent && size !== 16 && !contentAddons;\n\n return (\n <div\n className={cn(styles.component, styles[`size-${size}`], className)}\n style={{\n width: WIDTH_TO_SIZE[size],\n height: size,\n boxShadow: shadow,\n backgroundColor,\n }}\n data-test-id={dataTestId}\n >\n {Icon && <Icon color={iconColor} className={styles.icon} />}\n <Overlay colors={overlayProps.colors} visible={overlayProps.visible} />\n\n {borderColor && (\n <div\n className={cn(styles.border)}\n style={{ boxShadow: `inset 0 0 0 1px ${borderColor}` }}\n />\n )}\n\n <ImageCard\n width={WIDTH_TO_SIZE[size]}\n height={size}\n cardId={cardId}\n layers={layers}\n baseUrl={baseUrl}\n numberOfCards={numberOfCards}\n />\n\n {showContent && (\n <Text\n cardNumber={cardNumber}\n eyeButton={eyeButton}\n cardholderNameUppercase={cardholderNameUppercase}\n cardholderName={cardholderName}\n numberOfCards={numberOfCards}\n align={align}\n size={size}\n onEyeIconClick={onEyeIconClick}\n dataTestId={getDataTestId(dataTestId, 'user-info')}\n />\n )}\n\n {contentAddons && (\n <div\n {...contentAddonsProps}\n className={cn(styles.contentAddons, contentAddonsProps?.className)}\n >\n {contentAddons}\n </div>\n )}\n </div>\n );\n};\n"],"names":["React","cn","styles","WIDTH_TO_SIZE","Overlay","ImageCard","Text","getDataTestId","__assign"],"mappings":";;;;;;;;;;;;;;;;;;;;AAWO,IAAM,MAAM,GAA0B,UAAC,
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../src/single/Component.tsx"],"sourcesContent":["import React, { type FC } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { ImageCard, Overlay, Text } from '../components';\nimport { WIDTH_TO_SIZE } from '../consts';\nimport { type SingleCommonProps } from '../typings';\n\nimport styles from './index.module.css';\n\nexport const Single: FC<SingleCommonProps> = ({\n size = 164,\n icon: Icon,\n cardId,\n layers,\n baseUrl,\n shadow,\n iconColor,\n backgroundColor,\n borderColor,\n textColor,\n overlayProps = { colors: 'default', visible: false },\n eyeButton,\n cardholderNameUppercase,\n cardholderName,\n numberOfСards,\n numberOfCards = numberOfСards,\n align,\n cardNumber,\n className,\n contentAddons,\n contentAddonsProps,\n onEyeIconClick,\n dataTestId,\n}) => {\n const hasContent = Boolean(cardNumber || cardholderName || numberOfCards);\n const showContent = hasContent && size !== 16 && !contentAddons;\n\n return (\n <div\n className={cn(styles.component, styles[`size-${size}`], className)}\n style={{\n width: WIDTH_TO_SIZE[size],\n height: size,\n boxShadow: shadow,\n backgroundColor,\n }}\n data-test-id={dataTestId}\n >\n {Icon && <Icon color={iconColor} className={styles.icon} />}\n <Overlay colors={overlayProps.colors} visible={overlayProps.visible} />\n\n {borderColor && (\n <div\n className={cn(styles.border)}\n style={{ boxShadow: `inset 0 0 0 1px ${borderColor}` }}\n />\n )}\n\n <ImageCard\n width={WIDTH_TO_SIZE[size]}\n height={size}\n cardId={cardId}\n layers={layers}\n baseUrl={baseUrl}\n numberOfCards={numberOfCards}\n />\n\n {showContent && (\n <Text\n cardNumber={cardNumber}\n eyeButton={eyeButton}\n cardholderNameUppercase={cardholderNameUppercase}\n cardholderName={cardholderName}\n numberOfCards={numberOfCards}\n align={align}\n size={size}\n onEyeIconClick={onEyeIconClick}\n dataTestId={getDataTestId(dataTestId, 'user-info')}\n textColor={textColor}\n />\n )}\n\n {contentAddons && (\n <div\n {...contentAddonsProps}\n className={cn(styles.contentAddons, contentAddonsProps?.className)}\n >\n {contentAddons}\n </div>\n )}\n </div>\n );\n};\n"],"names":["React","cn","styles","WIDTH_TO_SIZE","Overlay","ImageCard","Text","getDataTestId","__assign"],"mappings":"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"}
|
package/cssm/typings.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type ElementType, type HTMLAttributes, type ReactNode } from 'react';
|
|
1
|
+
import { type CSSProperties, type ElementType, type HTMLAttributes, type ReactNode } from 'react';
|
|
2
2
|
export declare type Size = 16 | 32 | 40 | 48 | 96 | 128 | 164;
|
|
3
3
|
export declare type OverlayProps = {
|
|
4
4
|
/**
|
|
@@ -50,6 +50,10 @@ export declare type SingleCommonProps = {
|
|
|
50
50
|
* Бордер для компонента
|
|
51
51
|
*/
|
|
52
52
|
borderColor?: string;
|
|
53
|
+
/**
|
|
54
|
+
* Цвет текстового контента
|
|
55
|
+
*/
|
|
56
|
+
textColor?: CSSProperties['color'];
|
|
53
57
|
/**
|
|
54
58
|
* Настройки оверлея
|
|
55
59
|
*/
|
|
@@ -124,7 +128,7 @@ export declare type ConditionalProps = {
|
|
|
124
128
|
size?: 40;
|
|
125
129
|
align?: 'bottom' | 'default';
|
|
126
130
|
};
|
|
127
|
-
export declare type StackProps = ConditionalProps & {
|
|
131
|
+
export declare type StackProps = ConditionalProps & Pick<SingleCommonProps, 'textColor'> & {
|
|
128
132
|
/**
|
|
129
133
|
* Дополнительный класс
|
|
130
134
|
*/
|
|
@@ -8,11 +8,11 @@
|
|
|
8
8
|
:root {
|
|
9
9
|
--gap-0: 0px;
|
|
10
10
|
}
|
|
11
|
-
.product-
|
|
11
|
+
.product-cover__cardMack_1ylc8 {
|
|
12
12
|
background-color: var(--color-light-neutral-translucent-1300-inverted);
|
|
13
13
|
border-radius: var(--border-radius-2);
|
|
14
14
|
}
|
|
15
|
-
.product-
|
|
15
|
+
.product-cover__cardImage_1ylc8 {
|
|
16
16
|
position: absolute;
|
|
17
17
|
top: var(--gap-0);
|
|
18
18
|
left: var(--gap-0);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
var styles = {"cardMack":"product-
|
|
3
|
+
var styles = {"cardMack":"product-cover__cardMack_1ylc8","cardImage":"product-cover__cardImage_1ylc8"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
:root {
|
|
6
6
|
--gap-0: 0px;
|
|
7
7
|
}
|
|
8
|
-
.product-
|
|
8
|
+
.product-cover__overlay_pyjil {
|
|
9
9
|
position: absolute;
|
|
10
10
|
top: var(--gap-0);
|
|
11
11
|
bottom: var(--gap-0);
|
|
@@ -16,12 +16,12 @@
|
|
|
16
16
|
z-index: 3;
|
|
17
17
|
opacity: 0;
|
|
18
18
|
}
|
|
19
|
-
.product-
|
|
19
|
+
.product-cover__visible_pyjil {
|
|
20
20
|
opacity: 1;
|
|
21
21
|
}
|
|
22
|
-
.product-
|
|
22
|
+
.product-cover__default_pyjil {
|
|
23
23
|
background: var(--color-static-neutral-translucent-700-inverted);
|
|
24
24
|
}
|
|
25
|
-
.product-
|
|
25
|
+
.product-cover__inverted_pyjil {
|
|
26
26
|
background: var(--color-static-neutral-translucent-700);
|
|
27
27
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
var styles = {"overlay":"product-
|
|
3
|
+
var styles = {"overlay":"product-cover__overlay_pyjil","visible":"product-cover__visible_pyjil","default":"product-cover__default_pyjil","inverted":"product-cover__inverted_pyjil"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { type Size } from '../../typings';
|
|
3
|
-
export
|
|
2
|
+
import { type SingleCommonProps, type Size } from '../../typings';
|
|
3
|
+
export interface TextProps extends Pick<SingleCommonProps, 'textColor'> {
|
|
4
4
|
/**
|
|
5
5
|
* Кнопка показать номер карты
|
|
6
6
|
*/
|
|
@@ -46,5 +46,5 @@ export declare type TextProps = {
|
|
|
46
46
|
* Идентификатор для систем автоматизированного тестирования.
|
|
47
47
|
*/
|
|
48
48
|
dataTestId?: string;
|
|
49
|
-
}
|
|
49
|
+
}
|
|
50
50
|
export declare const Text: React.FC<TextProps>;
|
|
@@ -10,19 +10,19 @@ import { showNumberOfCards } from '../../utils/index.js';
|
|
|
10
10
|
import styles from './index.module.css.js';
|
|
11
11
|
|
|
12
12
|
var Text = function (_a) {
|
|
13
|
-
var cardholderNameUppercase = _a.cardholderNameUppercase, cardholderName = _a.cardholderName, cardNumber = _a.cardNumber, numberOfСards = _a.numberOfСards, _b = _a.numberOfCards, numberOfCards = _b === void 0 ? numberOfСards : _b, align = _a.align, eyeButton = _a.eyeButton, dataTestId = _a.dataTestId, _c = _a.size, size = _c === void 0 ? 164 : _c, onEyeIconClick = _a.onEyeIconClick;
|
|
13
|
+
var cardholderNameUppercase = _a.cardholderNameUppercase, cardholderName = _a.cardholderName, cardNumber = _a.cardNumber, numberOfСards = _a.numberOfСards, _b = _a.numberOfCards, numberOfCards = _b === void 0 ? numberOfСards : _b, align = _a.align, eyeButton = _a.eyeButton, dataTestId = _a.dataTestId, _c = _a.size, size = _c === void 0 ? 164 : _c, onEyeIconClick = _a.onEyeIconClick, textColor = _a.textColor;
|
|
14
14
|
var maxSize = size === 164;
|
|
15
15
|
var visibleNumberOfCards = showNumberOfCards(size, numberOfCards, align);
|
|
16
16
|
return (React.createElement("div", { className: cn(styles.component), "data-test-id": dataTestId },
|
|
17
|
-
maxSize && cardholderName ? (React.createElement(TypographyText, { tag: 'div', view: 'secondary-medium', weight: 'medium', color: 'static-primary-light', className: styles.cardholderName }, cardholderNameUppercase ? cardholderName === null || cardholderName === void 0 ? void 0 : cardholderName.toUpperCase() : cardholderName)) : null,
|
|
17
|
+
maxSize && cardholderName ? (React.createElement(TypographyText, { tag: 'div', view: 'secondary-medium', weight: 'medium', color: 'static-primary-light', className: styles.cardholderName, style: { color: textColor } }, cardholderNameUppercase ? cardholderName === null || cardholderName === void 0 ? void 0 : cardholderName.toUpperCase() : cardholderName)) : null,
|
|
18
18
|
cardNumber && !visibleNumberOfCards ? (React.createElement("div", { className: styles.cardNumber },
|
|
19
|
-
React.createElement(TypographyText, { view: TYPOGRAPHY_VIEW_FOR_SIZE[size], weight: 'medium', color: 'static-primary-light' },
|
|
19
|
+
React.createElement(TypographyText, { view: TYPOGRAPHY_VIEW_FOR_SIZE[size], weight: 'medium', color: 'static-primary-light', style: { color: textColor } },
|
|
20
20
|
[164, 128].includes(size) && '··\u2009',
|
|
21
21
|
String(cardNumber).slice(-4)),
|
|
22
22
|
eyeButton && maxSize && (React.createElement(ButtonDesktop, { view: 'text', className: cn(styles.buttonEye), dataTestId: getDataTestId(dataTestId, 'eye-btn'), onClick: onEyeIconClick, colors: 'inverted' },
|
|
23
23
|
React.createElement(EyeMIcon, null))))) : null,
|
|
24
24
|
visibleNumberOfCards && (React.createElement("div", { className: styles.cardNumber },
|
|
25
|
-
React.createElement(TypographyText, { view: TYPOGRAPHY_VIEW_FOR_SIZE[size], weight: 'medium', color: 'static-primary-dark' }, "+".concat(numberOfCards, "\u00A0"),
|
|
25
|
+
React.createElement(TypographyText, { view: TYPOGRAPHY_VIEW_FOR_SIZE[size], weight: 'medium', color: 'static-primary-dark', style: { color: textColor } }, "+".concat(numberOfCards, "\u00A0"),
|
|
26
26
|
pluralize(numberOfCards || 0, 'карта', 'карты', 'карт'))))));
|
|
27
27
|
};
|
|
28
28
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../../../src/components/text/Component.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { ButtonDesktop } from '@alfalab/core-components-button/desktop';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { TypographyText } from '@alfalab/core-components-typography';\nimport { EyeMIcon } from '@alfalab/icons-glyph/EyeMIcon';\nimport { pluralize } from '@alfalab/utils';\n\nimport { TYPOGRAPHY_VIEW_FOR_SIZE } from '../../consts';\nimport { type Size } from '../../typings';\nimport { showNumberOfCards } from '../../utils';\n\nimport styles from './index.module.css';\n\nexport
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../../src/components/text/Component.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { ButtonDesktop } from '@alfalab/core-components-button/desktop';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { TypographyText } from '@alfalab/core-components-typography';\nimport { EyeMIcon } from '@alfalab/icons-glyph/EyeMIcon';\nimport { pluralize } from '@alfalab/utils';\n\nimport { TYPOGRAPHY_VIEW_FOR_SIZE } from '../../consts';\nimport { type SingleCommonProps, type Size } from '../../typings';\nimport { showNumberOfCards } from '../../utils';\n\nimport styles from './index.module.css';\n\nexport interface TextProps extends Pick<SingleCommonProps, 'textColor'> {\n /**\n * Кнопка показать номер карты\n */\n eyeButton?: boolean;\n\n /**\n * Размер\n */\n size?: Size;\n\n /**\n * Дополнительный класс\n */\n className?: string;\n\n /**\n * Имя владельца карты в верхнем регистре\n */\n cardholderNameUppercase?: boolean;\n\n /**\n * Имя владельца карты\n */\n cardholderName?: string;\n\n /**\n * Номер карты\n */\n cardNumber?: number;\n\n /**\n * (Устаревший) Количество карт\n * @deprecated Используйте 'numberOfCards'\n */\n numberOfСards?: number;\n\n /**\n * Количество карт\n */\n numberOfCards?: number;\n\n /**\n * Управление ориентацией стопки карт компонента\n */\n align?: 'bottom' | 'default';\n\n /**\n * Обработчик клика по иконке 'показать номер карты'\n */\n onEyeIconClick?: () => void;\n\n /**\n * Идентификатор для систем автоматизированного тестирования.\n */\n dataTestId?: string;\n}\n\nexport const Text: React.FC<TextProps> = ({\n cardholderNameUppercase,\n cardholderName,\n cardNumber,\n numberOfСards,\n numberOfCards = numberOfСards,\n align,\n eyeButton,\n dataTestId,\n size = 164,\n onEyeIconClick,\n textColor,\n}) => {\n const maxSize = size === 164;\n const visibleNumberOfCards = showNumberOfCards(size, numberOfCards, align);\n\n return (\n <div className={cn(styles.component)} data-test-id={dataTestId}>\n {maxSize && cardholderName ? (\n <TypographyText\n tag='div'\n view='secondary-medium'\n weight='medium'\n color='static-primary-light'\n className={styles.cardholderName}\n style={{ color: textColor }}\n >\n {cardholderNameUppercase ? cardholderName?.toUpperCase() : cardholderName}\n </TypographyText>\n ) : null}\n\n {cardNumber && !visibleNumberOfCards ? (\n <div className={styles.cardNumber}>\n <TypographyText\n view={TYPOGRAPHY_VIEW_FOR_SIZE[size]}\n weight='medium'\n color='static-primary-light'\n style={{ color: textColor }}\n >\n {[164, 128].includes(size) && '··\\u2009'}\n {String(cardNumber).slice(-4)}\n </TypographyText>\n {eyeButton && maxSize && (\n <ButtonDesktop\n view='text'\n className={cn(styles.buttonEye)}\n dataTestId={getDataTestId(dataTestId, 'eye-btn')}\n onClick={onEyeIconClick}\n colors='inverted'\n >\n <EyeMIcon />\n </ButtonDesktop>\n )}\n </div>\n ) : null}\n\n {visibleNumberOfCards && (\n <div className={styles.cardNumber}>\n <TypographyText\n view={TYPOGRAPHY_VIEW_FOR_SIZE[size]}\n weight='medium'\n color='static-primary-dark'\n style={{ color: textColor }}\n >\n {`+${numberOfCards}\\u00A0`}\n {pluralize(numberOfCards || 0, 'карта', 'карты', 'карт')}\n </TypographyText>\n </div>\n )}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAyEO,IAAM,IAAI,GAAwB,UAAC,EAYzC,EAAA;AAXG,IAAA,IAAA,uBAAuB,6BAAA,EACvB,cAAc,GAAA,EAAA,CAAA,cAAA,EACd,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,EAA6B,GAAA,EAAA,CAAA,aAAA,EAA7B,aAAa,GAAG,EAAA,KAAA,MAAA,GAAA,aAAa,KAAA,EAC7B,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,EAAU,GAAA,EAAA,CAAA,IAAA,EAAV,IAAI,GAAA,EAAA,KAAA,MAAA,GAAG,GAAG,GAAA,EAAA,EACV,cAAc,GAAA,EAAA,CAAA,cAAA,EACd,SAAS,GAAA,EAAA,CAAA,SAAA;AAET,IAAA,IAAM,OAAO,GAAG,IAAI,KAAK,GAAG;IAC5B,IAAM,oBAAoB,GAAG,iBAAiB,CAAC,IAAI,EAAE,aAAa,EAAE,KAAK,CAAC;IAE1E,QACI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAA,cAAA,EAAgB,UAAU,EAAA;AACzD,QAAA,OAAO,IAAI,cAAc,IACtB,KAAC,CAAA,aAAA,CAAA,cAAc,EACX,EAAA,GAAG,EAAC,KAAK,EACT,IAAI,EAAC,kBAAkB,EACvB,MAAM,EAAC,QAAQ,EACf,KAAK,EAAC,sBAAsB,EAC5B,SAAS,EAAE,MAAM,CAAC,cAAc,EAChC,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAE1B,EAAA,uBAAuB,GAAG,cAAc,KAAd,IAAA,IAAA,cAAc,KAAd,MAAA,GAAA,MAAA,GAAA,cAAc,CAAE,WAAW,EAAE,GAAG,cAAc,CAC5D,IACjB,IAAI;AAEP,QAAA,UAAU,IAAI,CAAC,oBAAoB,IAChC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,UAAU,EAAA;YAC7B,KAAC,CAAA,aAAA,CAAA,cAAc,IACX,IAAI,EAAE,wBAAwB,CAAC,IAAI,CAAC,EACpC,MAAM,EAAC,QAAQ,EACf,KAAK,EAAC,sBAAsB,EAC5B,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAA;gBAE1B,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,UAAU;gBACvC,MAAM,CAAC,UAAU,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAChB;AAChB,YAAA,SAAS,IAAI,OAAO,KACjB,oBAAC,aAAa,EAAA,EACV,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAC/B,UAAU,EAAE,aAAa,CAAC,UAAU,EAAE,SAAS,CAAC,EAChD,OAAO,EAAE,cAAc,EACvB,MAAM,EAAC,UAAU,EAAA;gBAEjB,KAAC,CAAA,aAAA,CAAA,QAAQ,OAAG,CACA,CACnB,CACC,IACN,IAAI;AAEP,QAAA,oBAAoB,KACjB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,UAAU,EAAA;YAC7B,KAAC,CAAA,aAAA,CAAA,cAAc,EACX,EAAA,IAAI,EAAE,wBAAwB,CAAC,IAAI,CAAC,EACpC,MAAM,EAAC,QAAQ,EACf,KAAK,EAAC,qBAAqB,EAC3B,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAA,EAE1B,GAAI,CAAA,MAAA,CAAA,aAAa,EAAQ,QAAA,CAAA;AACzB,gBAAA,SAAS,CAAC,aAAa,IAAI,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,CAC3C,CACf,CACT,CACC;AAEd;;;;"}
|
|
@@ -5,37 +5,37 @@
|
|
|
5
5
|
--gap-3xs: 2px;
|
|
6
6
|
--gap-2: var(--gap-3xs);
|
|
7
7
|
}
|
|
8
|
-
.product-
|
|
8
|
+
.product-cover__component_1ubp4 {
|
|
9
9
|
display: flex;
|
|
10
10
|
flex-direction: column;
|
|
11
11
|
z-index: 2;
|
|
12
12
|
gap: var(--gap-2);
|
|
13
13
|
}
|
|
14
|
-
.product-
|
|
14
|
+
.product-cover__cardholderName_1ubp4 {
|
|
15
15
|
-webkit-line-clamp: 1;
|
|
16
16
|
display: -webkit-box;
|
|
17
17
|
-webkit-box-orient: vertical;
|
|
18
18
|
overflow: hidden;
|
|
19
19
|
word-break: break-all;
|
|
20
20
|
}
|
|
21
|
-
.product-
|
|
21
|
+
.product-cover__cardNumber_1ubp4 {
|
|
22
22
|
display: flex;
|
|
23
23
|
align-items: center;
|
|
24
24
|
}
|
|
25
|
-
.product-
|
|
25
|
+
.product-cover__buttonEye_1ubp4.product-cover__buttonEye_1ubp4 {
|
|
26
26
|
margin-left: 5px;
|
|
27
27
|
width: 24px;
|
|
28
28
|
height: 24px;
|
|
29
29
|
cursor: pointer;
|
|
30
30
|
color: var(--color-static-text-primary-light);
|
|
31
31
|
}
|
|
32
|
-
.product-
|
|
32
|
+
.product-cover__buttonEye_1ubp4.product-cover__buttonEye_1ubp4:hover {
|
|
33
33
|
color: var(--color-static-text-primary-light);
|
|
34
34
|
}
|
|
35
|
-
.product-
|
|
35
|
+
.product-cover__buttonEye_1ubp4.product-cover__buttonEye_1ubp4:active {
|
|
36
36
|
color: var(--color-static-text-primary-light);
|
|
37
37
|
}
|
|
38
|
-
.product-
|
|
38
|
+
.product-cover__buttonEye_1ubp4.product-cover__buttonEye_1ubp4 > span {
|
|
39
39
|
display: flex;
|
|
40
40
|
align-items: center;
|
|
41
41
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
var styles = {"component":"product-
|
|
3
|
+
var styles = {"component":"product-cover__component_1ubp4","cardholderName":"product-cover__cardholderName_1ubp4","cardNumber":"product-cover__cardNumber_1ubp4","buttonEye":"product-cover__buttonEye_1ubp4"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
package/esm/single/Component.js
CHANGED
|
@@ -9,7 +9,7 @@ import { WIDTH_TO_SIZE } from '../consts.js';
|
|
|
9
9
|
import styles from './index.module.css.js';
|
|
10
10
|
|
|
11
11
|
var Single = function (_a) {
|
|
12
|
-
var _b = _a.size, size = _b === void 0 ? 164 : _b, Icon = _a.icon, cardId = _a.cardId, layers = _a.layers, baseUrl = _a.baseUrl, shadow = _a.shadow, iconColor = _a.iconColor, backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, _c = _a.overlayProps, overlayProps = _c === void 0 ? { colors: 'default', visible: false } : _c, eyeButton = _a.eyeButton, cardholderNameUppercase = _a.cardholderNameUppercase, cardholderName = _a.cardholderName, numberOfСards = _a.numberOfСards, _d = _a.numberOfCards, numberOfCards = _d === void 0 ? numberOfСards : _d, align = _a.align, cardNumber = _a.cardNumber, className = _a.className, contentAddons = _a.contentAddons, contentAddonsProps = _a.contentAddonsProps, onEyeIconClick = _a.onEyeIconClick, dataTestId = _a.dataTestId;
|
|
12
|
+
var _b = _a.size, size = _b === void 0 ? 164 : _b, Icon = _a.icon, cardId = _a.cardId, layers = _a.layers, baseUrl = _a.baseUrl, shadow = _a.shadow, iconColor = _a.iconColor, backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, textColor = _a.textColor, _c = _a.overlayProps, overlayProps = _c === void 0 ? { colors: 'default', visible: false } : _c, eyeButton = _a.eyeButton, cardholderNameUppercase = _a.cardholderNameUppercase, cardholderName = _a.cardholderName, numberOfСards = _a.numberOfСards, _d = _a.numberOfCards, numberOfCards = _d === void 0 ? numberOfСards : _d, align = _a.align, cardNumber = _a.cardNumber, className = _a.className, contentAddons = _a.contentAddons, contentAddonsProps = _a.contentAddonsProps, onEyeIconClick = _a.onEyeIconClick, dataTestId = _a.dataTestId;
|
|
13
13
|
var hasContent = Boolean(cardNumber || cardholderName || numberOfCards);
|
|
14
14
|
var showContent = hasContent && size !== 16 && !contentAddons;
|
|
15
15
|
return (React.createElement("div", { className: cn(styles.component, styles["size-".concat(size)], className), style: {
|
|
@@ -22,7 +22,7 @@ var Single = function (_a) {
|
|
|
22
22
|
React.createElement(Overlay, { colors: overlayProps.colors, visible: overlayProps.visible }),
|
|
23
23
|
borderColor && (React.createElement("div", { className: cn(styles.border), style: { boxShadow: "inset 0 0 0 1px ".concat(borderColor) } })),
|
|
24
24
|
React.createElement(ImageCard, { width: WIDTH_TO_SIZE[size], height: size, cardId: cardId, layers: layers, baseUrl: baseUrl, numberOfCards: numberOfCards }),
|
|
25
|
-
showContent && (React.createElement(Text, { cardNumber: cardNumber, eyeButton: eyeButton, cardholderNameUppercase: cardholderNameUppercase, cardholderName: cardholderName, numberOfCards: numberOfCards, align: align, size: size, onEyeIconClick: onEyeIconClick, dataTestId: getDataTestId(dataTestId, 'user-info') })),
|
|
25
|
+
showContent && (React.createElement(Text, { cardNumber: cardNumber, eyeButton: eyeButton, cardholderNameUppercase: cardholderNameUppercase, cardholderName: cardholderName, numberOfCards: numberOfCards, align: align, size: size, onEyeIconClick: onEyeIconClick, dataTestId: getDataTestId(dataTestId, 'user-info'), textColor: textColor })),
|
|
26
26
|
contentAddons && (React.createElement("div", __assign({}, contentAddonsProps, { className: cn(styles.contentAddons, contentAddonsProps === null || contentAddonsProps === void 0 ? void 0 : contentAddonsProps.className) }), contentAddons))));
|
|
27
27
|
};
|
|
28
28
|
|