@alfalab/core-components-product-cover 3.1.8 → 3.2.0

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.
Files changed (54) hide show
  1. package/components/image-card/index.css +2 -2
  2. package/components/image-card/index.module.css.js +1 -1
  3. package/components/overlay/index.css +4 -4
  4. package/components/overlay/index.module.css.js +1 -1
  5. package/components/text/index.css +7 -7
  6. package/components/text/index.module.css.js +1 -1
  7. package/cssm/single/Component.js +5 -3
  8. package/cssm/single/Component.js.map +1 -1
  9. package/cssm/single/index.module.css +69 -0
  10. package/cssm/typings.d.ts +6 -0
  11. package/esm/components/image-card/index.css +2 -2
  12. package/esm/components/image-card/index.module.css.js +1 -1
  13. package/esm/components/overlay/index.css +4 -4
  14. package/esm/components/overlay/index.module.css.js +1 -1
  15. package/esm/components/text/index.css +7 -7
  16. package/esm/components/text/index.module.css.js +1 -1
  17. package/esm/single/Component.js +5 -3
  18. package/esm/single/Component.js.map +1 -1
  19. package/esm/single/index.css +80 -11
  20. package/esm/single/index.module.css.js +1 -1
  21. package/esm/single/index.module.css.js.map +1 -1
  22. package/esm/stack/index.css +16 -16
  23. package/esm/stack/index.module.css.js +1 -1
  24. package/esm/typings.d.ts +6 -0
  25. package/modern/components/image-card/index.css +2 -2
  26. package/modern/components/image-card/index.module.css.js +1 -1
  27. package/modern/components/overlay/index.css +4 -4
  28. package/modern/components/overlay/index.module.css.js +1 -1
  29. package/modern/components/text/index.css +7 -7
  30. package/modern/components/text/index.module.css.js +1 -1
  31. package/modern/single/Component.js +5 -3
  32. package/modern/single/Component.js.map +1 -1
  33. package/modern/single/index.css +80 -11
  34. package/modern/single/index.module.css.js +1 -1
  35. package/modern/single/index.module.css.js.map +1 -1
  36. package/modern/stack/index.css +16 -16
  37. package/modern/stack/index.module.css.js +1 -1
  38. package/modern/typings.d.ts +6 -0
  39. package/moderncssm/single/Component.js +5 -3
  40. package/moderncssm/single/Component.js.map +1 -1
  41. package/moderncssm/single/index.module.css +82 -0
  42. package/moderncssm/typings.d.ts +6 -0
  43. package/package.json +1 -1
  44. package/single/Component.js +5 -3
  45. package/single/Component.js.map +1 -1
  46. package/single/index.css +80 -11
  47. package/single/index.module.css.js +1 -1
  48. package/single/index.module.css.js.map +1 -1
  49. package/src/single/Component.tsx +9 -1
  50. package/src/single/index.module.css +36 -0
  51. package/src/typings.ts +7 -0
  52. package/stack/index.css +16 -16
  53. package/stack/index.module.css.js +1 -1
  54. package/typings.d.ts +6 -0
package/esm/stack/index.css CHANGED
@@ -10,66 +10,66 @@
10
10
  --gap-16: var(--gap-m);
11
11
  --gap-20-neg: var(--gap-l-neg);
12
12
  }
13
- .product-cover__wrapper_1dq1z {
13
+ .product-cover__wrapper_vbqzd {
14
14
  display: flex;
15
15
  justify-content: center;
16
16
  box-sizing: border-box;
17
17
  }
18
- .product-cover__wrapper_1dq1z.product-cover__size-128_1dq1z {
18
+ .product-cover__wrapper_vbqzd.product-cover__size-128_vbqzd {
19
19
  width: 213px;
20
20
  height: 128px;
21
21
  }
22
- .product-cover__wrapper_1dq1z.product-cover__size-40_1dq1z {
22
+ .product-cover__wrapper_vbqzd.product-cover__size-40_vbqzd {
23
23
  width: 76px;
24
24
  height: 56px;
25
25
  }
26
- .product-cover__wrapper_1dq1z.product-cover__size-32_1dq1z {
26
+ .product-cover__wrapper_vbqzd.product-cover__size-32_vbqzd {
27
27
  width: 55px;
28
28
  height: 48px;
29
29
  }
30
- .product-cover__wrapper_1dq1z.product-cover__size-16_1dq1z {
30
+ .product-cover__wrapper_vbqzd.product-cover__size-16_vbqzd {
31
31
  width: 28px;
32
32
  height: 20px;
33
33
  }
34
- .product-cover__wrapper_1dq1z.product-cover__size-40_1dq1z.product-cover__bottom_1dq1z {
34
+ .product-cover__wrapper_vbqzd.product-cover__size-40_vbqzd.product-cover__bottom_vbqzd {
35
35
  width: 65px;
36
36
  height: 48px;
37
37
  }
38
- .product-cover__componentImage_1dq1z {
38
+ .product-cover__componentImage_vbqzd {
39
39
  align-items: center;
40
40
  }
41
- .product-cover__componentStack_1dq1z.product-cover__size-128_1dq1z {
41
+ .product-cover__componentStack_vbqzd.product-cover__size-128_vbqzd {
42
42
  padding-left: var(--gap-8);
43
43
  }
44
- .product-cover__firstCard_1dq1z {
44
+ .product-cover__firstCard_vbqzd {
45
45
  z-index: 4;
46
46
  }
47
- .product-cover__firstCard_1dq1z.product-cover__size-32_1dq1z {
47
+ .product-cover__firstCard_vbqzd.product-cover__size-32_vbqzd {
48
48
  margin-top: var(--gap-4);
49
49
  }
50
- .product-cover__firstCard_1dq1z.product-cover__size-40_1dq1z.product-cover__bottom_1dq1z {
50
+ .product-cover__firstCard_vbqzd.product-cover__size-40_vbqzd.product-cover__bottom_vbqzd {
51
51
  margin-left: -7px;
52
52
  margin-top: var(--gap-4);
53
53
  }
54
- .product-cover__wrapperSecondCard_1dq1z.product-cover__size-128_1dq1z {
54
+ .product-cover__wrapperSecondCard_vbqzd.product-cover__size-128_vbqzd {
55
55
  width: 213px;
56
56
  padding-left: var(--gap-8);
57
57
  margin-top: 18px;
58
58
  margin-left: -221px;
59
59
  }
60
- .product-cover__wrapperSecondCard_1dq1z.product-cover__size-40_1dq1z {
60
+ .product-cover__wrapperSecondCard_vbqzd.product-cover__size-40_vbqzd {
61
61
  margin-top: var(--gap-16);
62
62
  margin-left: -54px;
63
63
  }
64
- .product-cover__wrapperSecondCard_1dq1z.product-cover__size-32_1dq1z {
64
+ .product-cover__wrapperSecondCard_vbqzd.product-cover__size-32_vbqzd {
65
65
  margin-top: var(--gap-12);
66
66
  margin-left: -47px;
67
67
  }
68
- .product-cover__wrapperSecondCard_1dq1z.product-cover__size-16_1dq1z {
68
+ .product-cover__wrapperSecondCard_vbqzd.product-cover__size-16_vbqzd {
69
69
  margin-top: var(--gap-4);
70
70
  margin-left: var(--gap-20-neg);
71
71
  }
72
- .product-cover__wrapperSecondCard_1dq1z.product-cover__size-40_1dq1z.product-cover__bottom_1dq1z {
72
+ .product-cover__wrapperSecondCard_vbqzd.product-cover__size-40_vbqzd.product-cover__bottom_vbqzd {
73
73
  margin-top: var(--gap-16);
74
74
  margin-left: -58px;
75
75
  }
package/esm/stack/index.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- var styles = {"wrapper":"product-cover__wrapper_1dq1z","size-128":"product-cover__size-128_1dq1z","size-40":"product-cover__size-40_1dq1z","size-32":"product-cover__size-32_1dq1z","size-16":"product-cover__size-16_1dq1z","bottom":"product-cover__bottom_1dq1z","componentImage":"product-cover__componentImage_1dq1z","componentStack":"product-cover__componentStack_1dq1z","firstCard":"product-cover__firstCard_1dq1z","wrapperSecondCard":"product-cover__wrapperSecondCard_1dq1z"};
3
+ var styles = {"wrapper":"product-cover__wrapper_vbqzd","size-128":"product-cover__size-128_vbqzd","size-40":"product-cover__size-40_vbqzd","size-32":"product-cover__size-32_vbqzd","size-16":"product-cover__size-16_vbqzd","bottom":"product-cover__bottom_vbqzd","componentImage":"product-cover__componentImage_vbqzd","componentStack":"product-cover__componentStack_vbqzd","firstCard":"product-cover__firstCard_vbqzd","wrapperSecondCard":"product-cover__wrapperSecondCard_vbqzd"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
package/esm/typings.d.ts CHANGED
@@ -107,6 +107,12 @@ export type SingleCommonProps = {
107
107
  * Идентификатор для систем автоматизированного тестирования
108
108
  */
109
109
  dataTestId?: string;
110
+ /**
111
+ * Задает различные эффекты при наведении на компонент (затемнение, осветление)
112
+ *
113
+ * @default false
114
+ */
115
+ stateType?: 'darkening' | 'lightening' | 'static-darkening' | 'static-lightening' | false;
110
116
  };
111
117
  export type SingleProps = Omit<SingleCommonProps, 'numberOfСards' | 'numberOfCards' | 'align'>;
112
118
  export type BankCardImageProps = Omit<SingleCommonProps, 'size' | 'numberOfСards' | 'numberOfCards' | 'className' | 'dataTestId' | 'align'>;
package/modern/components/image-card/index.css CHANGED
@@ -8,11 +8,11 @@
8
8
  :root {
9
9
  --gap-0: 0px;
10
10
  }
11
- .product-cover__cardMack_gqnpg {
11
+ .product-cover__cardMack_1ynsa {
12
12
  background-color: var(--color-light-neutral-translucent-1300-inverted);
13
13
  border-radius: var(--border-radius-2);
14
14
  }
15
- .product-cover__cardImage_gqnpg {
15
+ .product-cover__cardImage_1ynsa {
16
16
  position: absolute;
17
17
  top: var(--gap-0);
18
18
  left: var(--gap-0);
package/modern/components/image-card/index.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- const styles = {"cardMack":"product-cover__cardMack_gqnpg","cardImage":"product-cover__cardImage_gqnpg"};
3
+ const styles = {"cardMack":"product-cover__cardMack_1ynsa","cardImage":"product-cover__cardImage_1ynsa"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
package/modern/components/overlay/index.css CHANGED
@@ -5,7 +5,7 @@
5
5
  :root {
6
6
  --gap-0: 0px;
7
7
  }
8
- .product-cover__overlay_1l56h {
8
+ .product-cover__overlay_17q9t {
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-cover__visible_1l56h {
19
+ .product-cover__visible_17q9t {
20
20
  opacity: 1;
21
21
  }
22
- .product-cover__default_1l56h {
22
+ .product-cover__default_17q9t {
23
23
  background: var(--color-static-neutral-translucent-700-inverted);
24
24
  }
25
- .product-cover__inverted_1l56h {
25
+ .product-cover__inverted_17q9t {
26
26
  background: var(--color-static-neutral-translucent-700);
27
27
  }
package/modern/components/overlay/index.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- const styles = {"overlay":"product-cover__overlay_1l56h","visible":"product-cover__visible_1l56h","default":"product-cover__default_1l56h","inverted":"product-cover__inverted_1l56h"};
3
+ const styles = {"overlay":"product-cover__overlay_17q9t","visible":"product-cover__visible_17q9t","default":"product-cover__default_17q9t","inverted":"product-cover__inverted_17q9t"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
package/modern/components/text/index.css CHANGED
@@ -5,37 +5,37 @@
5
5
  --gap-3xs: 2px;
6
6
  --gap-2: var(--gap-3xs);
7
7
  }
8
- .product-cover__component_1bslm {
8
+ .product-cover__component_1ufps {
9
9
  display: flex;
10
10
  flex-direction: column;
11
11
  z-index: 2;
12
12
  gap: var(--gap-2);
13
13
  }
14
- .product-cover__cardholderName_1bslm {
14
+ .product-cover__cardholderName_1ufps {
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-cover__cardNumber_1bslm {
21
+ .product-cover__cardNumber_1ufps {
22
22
  display: flex;
23
23
  align-items: center;
24
24
  }
25
- .product-cover__buttonEye_1bslm.product-cover__buttonEye_1bslm {
25
+ .product-cover__buttonEye_1ufps.product-cover__buttonEye_1ufps {
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-cover__buttonEye_1bslm.product-cover__buttonEye_1bslm:hover {
32
+ .product-cover__buttonEye_1ufps.product-cover__buttonEye_1ufps:hover {
33
33
  color: var(--color-static-text-primary-light);
34
34
  }
35
- .product-cover__buttonEye_1bslm.product-cover__buttonEye_1bslm:active {
35
+ .product-cover__buttonEye_1ufps.product-cover__buttonEye_1ufps:active {
36
36
  color: var(--color-static-text-primary-light);
37
37
  }
38
- .product-cover__buttonEye_1bslm.product-cover__buttonEye_1bslm > span {
38
+ .product-cover__buttonEye_1ufps.product-cover__buttonEye_1ufps > span {
39
39
  display: flex;
40
40
  align-items: center;
41
41
  }
package/modern/components/text/index.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- const styles = {"component":"product-cover__component_1bslm","cardholderName":"product-cover__cardholderName_1bslm","cardNumber":"product-cover__cardNumber_1bslm","buttonEye":"product-cover__buttonEye_1bslm"};
3
+ const styles = {"component":"product-cover__component_1ufps","cardholderName":"product-cover__cardholderName_1ufps","cardNumber":"product-cover__cardNumber_1ufps","buttonEye":"product-cover__buttonEye_1ufps"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
package/modern/single/Component.js CHANGED
@@ -7,10 +7,10 @@ import { ImageCard } from '../components/image-card/Component.js';
7
7
  import { WIDTH_TO_SIZE } from '../consts.js';
8
8
  import styles from './index.module.css.js';
9
9
 
10
- const Single = ({ size = 164, icon: Icon, cardId, layers, baseUrl, shadow, iconColor, backgroundColor, borderColor, textColor, overlayProps = { colors: 'default', visible: false }, eyeButton, cardholderNameUppercase, cardholderName, numberOfСards, numberOfCards = numberOfСards, align, cardNumber, className, contentAddons, contentAddonsProps, onEyeIconClick, dataTestId, }) => {
10
+ const Single = ({ size = 164, icon: Icon, cardId, layers, baseUrl, shadow, iconColor, backgroundColor, borderColor, textColor, overlayProps = { colors: 'default', visible: false }, eyeButton, cardholderNameUppercase, cardholderName, numberOfСards, numberOfCards = numberOfСards, align, cardNumber, className, contentAddons, contentAddonsProps, onEyeIconClick, dataTestId, stateType = false, }) => {
11
11
  const hasContent = Boolean(cardNumber || cardholderName || numberOfCards);
12
12
  const showContent = hasContent && size !== 16 && !contentAddons;
13
- return (React.createElement("div", { className: cn(styles.component, styles[`size-${size}`], className), style: {
13
+ return (React.createElement("div", { className: cn(styles.component, styles[`size-${size}`], stateType && styles[stateType], className), style: {
14
14
  width: WIDTH_TO_SIZE[size],
15
15
  height: size,
16
16
  boxShadow: shadow,
@@ -21,7 +21,9 @@ const Single = ({ size = 164, icon: Icon, cardId, layers, baseUrl, shadow, iconC
21
21
  borderColor && (React.createElement("div", { className: cn(styles.border), style: { boxShadow: `inset 0 0 0 1px ${borderColor}` } })),
22
22
  React.createElement(ImageCard, { width: WIDTH_TO_SIZE[size], height: size, cardId: cardId, layers: layers, baseUrl: baseUrl, numberOfCards: numberOfCards }),
23
23
  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 })),
24
- contentAddons && (React.createElement("div", { ...contentAddonsProps, className: cn(styles.contentAddons, contentAddonsProps?.className) }, contentAddons))));
24
+ contentAddons && (React.createElement("div", { ...contentAddonsProps, className: cn(styles.contentAddons, contentAddonsProps?.className) }, contentAddons)),
25
+ stateType && React.createElement("div", { className: cn(styles.state, styles.hover) }),
26
+ stateType && React.createElement("div", { className: cn(styles.state, styles.active) })));
25
27
  };
26
28
 
27
29
  export { Single };
package/modern/single/Component.js.map CHANGED
@@ -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 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":[],"mappings":";;;;;;;;;AAWO,MAAM,MAAM,GAA0B,CAAC,EAC1C,IAAI,GAAG,GAAG,EACV,IAAI,EAAE,IAAI,EACV,MAAM,EACN,MAAM,EACN,OAAO,EACP,MAAM,EACN,SAAS,EACT,eAAe,EACf,WAAW,EACX,SAAS,EACT,YAAY,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,EACpD,SAAS,EACT,uBAAuB,EACvB,cAAc,EACd,aAAa,EACb,aAAa,GAAG,aAAa,EAC7B,KAAK,EACL,UAAU,EACV,SAAS,EACT,aAAa,EACb,kBAAkB,EAClB,cAAc,EACd,UAAU,GACb,KAAI;IACD,MAAM,UAAU,GAAG,OAAO,CAAC,UAAU,IAAI,cAAc,IAAI,aAAa,CAAC;IACzE,MAAM,WAAW,GAAG,UAAU,IAAI,IAAI,KAAK,EAAE,IAAI,CAAC,aAAa;IAE/D,QACI,6BACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA,KAAA,EAAQ,IAAI,CAAE,CAAA,CAAC,EAAE,SAAS,CAAC,EAClE,KAAK,EAAE;AACH,YAAA,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC;AAC1B,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,SAAS,EAAE,MAAM;YACjB,eAAe;AAClB,SAAA,EAAA,cAAA,EACa,UAAU,EAAA;AAEvB,QAAA,IAAI,IAAI,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,EAAI,CAAA;AAC3D,QAAA,KAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,MAAM,EAAE,YAAY,CAAC,MAAM,EAAE,OAAO,EAAE,YAAY,CAAC,OAAO,EAAI,CAAA;QAEtE,WAAW,KACR,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,EAC5B,KAAK,EAAE,EAAE,SAAS,EAAE,mBAAmB,WAAW,CAAA,CAAE,EAAE,EAAA,CACxD,CACL;AAED,QAAA,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACN,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,EAC1B,MAAM,EAAE,IAAI,EACZ,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,aAAa,EAC9B,CAAA;QAED,WAAW,KACR,KAAC,CAAA,aAAA,CAAA,IAAI,IACD,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,uBAAuB,EAAE,uBAAuB,EAChD,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,aAAa,CAAC,UAAU,EAAE,WAAW,CAAC,EAClD,SAAS,EAAE,SAAS,EAAA,CACtB,CACL;QAEA,aAAa,KACV,KACQ,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAA,kBAAkB,EACtB,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,kBAAkB,EAAE,SAAS,CAAC,EAAA,EAEjE,aAAa,CACZ,CACT,CACC;AAEd;;;;"}
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 stateType = false,\n}) => {\n const hasContent = Boolean(cardNumber || cardholderName || numberOfCards);\n const showContent = hasContent && size !== 16 && !contentAddons;\n\n return (\n <div\n className={cn(\n styles.component,\n styles[`size-${size}`],\n stateType && styles[stateType],\n className,\n )}\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 {stateType && <div className={cn(styles.state, styles.hover)} />}\n {stateType && <div className={cn(styles.state, styles.active)} />}\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
package/modern/single/index.css CHANGED
@@ -1,5 +1,9 @@
1
1
  :root {
2
2
  --color-light-neutral-500: #babbc2;
3
+ --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
4
+ --color-light-neutral-translucent-200-inverted: rgba(225, 225, 248, 0.09);
5
+ --color-light-neutral-translucent-400: rgba(5, 11, 44, 0.18);
6
+ --color-light-neutral-translucent-400-inverted: rgba(231, 231, 248, 0.18);
3
7
  }
4
8
  :root {
5
9
  --border-radius-xs: 2px;
@@ -28,45 +32,110 @@
28
32
  --gap-12: var(--gap-s);
29
33
  --gap-16: var(--gap-m);
30
34
  }
31
- .product-cover__component_ut4z3 {
35
+ .product-cover__component_14a7f {
32
36
  display: flex;
33
37
  align-items: flex-end;
34
38
  position: relative;
35
39
  background-color: var(--color-light-neutral-500);
36
40
  box-sizing: border-box;
37
41
  }
38
- .product-cover__component_ut4z3.product-cover__size-164_ut4z3 {
42
+ .product-cover__component_14a7f.product-cover__size-164_14a7f {
39
43
  border-radius: var(--border-radius-20);
40
44
  padding: var(--gap-12) var(--gap-16);
41
45
  }
42
- .product-cover__component_ut4z3.product-cover__size-128_ut4z3 {
46
+ .product-cover__component_14a7f.product-cover__size-128_14a7f {
43
47
  border-radius: var(--border-radius-16);
44
48
  padding: var(--gap-8) var(--gap-12);
45
49
  }
46
- .product-cover__component_ut4z3.product-cover__size-96_ut4z3 {
50
+ .product-cover__component_14a7f.product-cover__size-96_14a7f {
47
51
  border-radius: var(--border-radius-12);
48
52
  padding: var(--gap-6) var(--gap-12);
49
53
  }
50
- .product-cover__component_ut4z3.product-cover__size-48_ut4z3,
51
- .product-cover__component_ut4z3.product-cover__size-40_ut4z3 {
54
+ .product-cover__component_14a7f.product-cover__size-48_14a7f,
55
+ .product-cover__component_14a7f.product-cover__size-40_14a7f {
52
56
  border-radius: var(--border-radius-6);
53
57
  padding: var(--gap-2) var(--gap-4);
54
58
  }
55
- .product-cover__component_ut4z3.product-cover__size-32_ut4z3 {
59
+ .product-cover__component_14a7f.product-cover__size-32_14a7f {
56
60
  border-radius: var(--border-radius-4);
57
61
  padding: var(--gap-0) var(--gap-2);
58
62
  }
59
- .product-cover__component_ut4z3.product-cover__size-16_ut4z3 {
63
+ .product-cover__component_14a7f.product-cover__size-16_14a7f {
60
64
  border-radius: var(--border-radius-2);
61
65
  }
62
- .product-cover__icon_ut4z3 {
66
+ .product-cover__component_14a7f .product-cover__state_14a7f {
67
+ position: absolute;
68
+ inset: var(--gap-0);
69
+ z-index: 2;
70
+ border-radius: inherit;
71
+ opacity: 0;
72
+ transition: opacity 0.2s;
73
+ will-change: opacity;
74
+ }
75
+ .product-cover__component_14a7f.product-cover__darkening_14a7f .product-cover__hover_14a7f {
76
+ background-color: var(--color-light-neutral-translucent-200);
77
+ }
78
+ .product-cover__component_14a7f.product-cover__darkening_14a7f .product-cover__active_14a7f {
79
+ background-color: var(--color-light-neutral-translucent-400);
80
+ }
81
+ @media (hover: hover) {
82
+ .product-cover__component_14a7f.product-cover__darkening_14a7f:hover:not(:active) .product-cover__hover_14a7f {
83
+ opacity: 1;
84
+ }
85
+ }
86
+ .product-cover__component_14a7f.product-cover__darkening_14a7f:active .product-cover__active_14a7f {
87
+ opacity: 1;
88
+ }
89
+ .product-cover__component_14a7f.product-cover__lightening_14a7f .product-cover__hover_14a7f {
90
+ background-color: var(--color-light-neutral-translucent-200-inverted);
91
+ }
92
+ .product-cover__component_14a7f.product-cover__lightening_14a7f .product-cover__active_14a7f {
93
+ background-color: var(--color-light-neutral-translucent-400-inverted);
94
+ }
95
+ @media (hover: hover) {
96
+ .product-cover__component_14a7f.product-cover__lightening_14a7f:hover:not(:active) .product-cover__hover_14a7f {
97
+ opacity: 1;
98
+ }
99
+ }
100
+ .product-cover__component_14a7f.product-cover__lightening_14a7f:active .product-cover__active_14a7f {
101
+ opacity: 1;
102
+ }
103
+ .product-cover__component_14a7f.product-cover__static-darkening_14a7f .product-cover__hover_14a7f {
104
+ background-color: rgba(0, 0, 0, 0.07);
105
+ }
106
+ .product-cover__component_14a7f.product-cover__static-darkening_14a7f .product-cover__active_14a7f {
107
+ background-color: rgba(0, 0, 0, 0.15);
108
+ }
109
+ @media (hover: hover) {
110
+ .product-cover__component_14a7f.product-cover__static-darkening_14a7f:hover:not(:active) .product-cover__hover_14a7f {
111
+ opacity: 1;
112
+ }
113
+ }
114
+ .product-cover__component_14a7f.product-cover__static-darkening_14a7f:active .product-cover__active_14a7f {
115
+ opacity: 1;
116
+ }
117
+ .product-cover__component_14a7f.product-cover__static-lightening_14a7f .product-cover__hover_14a7f {
118
+ background-color: rgba(255, 255, 255, 0.07);
119
+ }
120
+ .product-cover__component_14a7f.product-cover__static-lightening_14a7f .product-cover__active_14a7f {
121
+ background-color: rgba(255, 255, 255, 0.15);
122
+ }
123
+ @media (hover: hover) {
124
+ .product-cover__component_14a7f.product-cover__static-lightening_14a7f:hover:not(:active) .product-cover__hover_14a7f {
125
+ opacity: 1;
126
+ }
127
+ }
128
+ .product-cover__component_14a7f.product-cover__static-lightening_14a7f:active .product-cover__active_14a7f {
129
+ opacity: 1;
130
+ }
131
+ .product-cover__icon_14a7f {
63
132
  position: absolute;
64
133
  top: 50%;
65
134
  left: 50%;
66
135
  transform: translate(-50%, -50%);
67
136
  z-index: 4;
68
137
  }
69
- .product-cover__border_ut4z3 {
138
+ .product-cover__border_14a7f {
70
139
  position: absolute;
71
140
  top: var(--gap-0);
72
141
  bottom: var(--gap-0);
@@ -76,7 +145,7 @@
76
145
  pointer-events: none;
77
146
  z-index: 3;
78
147
  }
79
- .product-cover__contentAddons_ut4z3 {
148
+ .product-cover__contentAddons_14a7f {
80
149
  width: 100%;
81
150
  height: 100%;
82
151
  z-index: 2;
package/modern/single/index.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- const styles = {"component":"product-cover__component_ut4z3","size-164":"product-cover__size-164_ut4z3","size-128":"product-cover__size-128_ut4z3","size-96":"product-cover__size-96_ut4z3","size-48":"product-cover__size-48_ut4z3","size-40":"product-cover__size-40_ut4z3","size-32":"product-cover__size-32_ut4z3","size-16":"product-cover__size-16_ut4z3","icon":"product-cover__icon_ut4z3","border":"product-cover__border_ut4z3","contentAddons":"product-cover__contentAddons_ut4z3"};
3
+ const styles = {"component":"product-cover__component_14a7f","size-164":"product-cover__size-164_14a7f","size-128":"product-cover__size-128_14a7f","size-96":"product-cover__size-96_14a7f","size-48":"product-cover__size-48_14a7f","size-40":"product-cover__size-40_14a7f","size-32":"product-cover__size-32_14a7f","size-16":"product-cover__size-16_14a7f","state":"product-cover__state_14a7f","darkening":"product-cover__darkening_14a7f","hover":"product-cover__hover_14a7f","active":"product-cover__active_14a7f","lightening":"product-cover__lightening_14a7f","static-darkening":"product-cover__static-darkening_14a7f","static-lightening":"product-cover__static-lightening_14a7f","icon":"product-cover__icon_14a7f","border":"product-cover__border_14a7f","contentAddons":"product-cover__contentAddons_14a7f"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
package/modern/single/index.module.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.module.css.js","sources":["../src/single/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n display: flex;\n align-items: flex-end;\n position: relative;\n background-color: var(--color-light-neutral-500);\n box-sizing: border-box;\n\n &.size-164 {\n border-radius: var(--border-radius-20);\n padding: var(--gap-12) var(--gap-16);\n }\n &.size-128 {\n border-radius: var(--border-radius-16);\n padding: var(--gap-8) var(--gap-12);\n }\n &.size-96 {\n border-radius: var(--border-radius-12);\n padding: var(--gap-6) var(--gap-12);\n }\n &.size-48,\n &.size-40 {\n border-radius: var(--border-radius-6);\n padding: var(--gap-2) var(--gap-4);\n }\n &.size-32 {\n border-radius: var(--border-radius-4);\n padding: var(--gap-0) var(--gap-2);\n }\n &.size-16 {\n border-radius: var(--border-radius-2);\n }\n}\n\n.icon {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 4;\n}\n\n.border {\n position: absolute;\n top: var(--gap-0);\n bottom: var(--gap-0);\n left: var(--gap-0);\n right: var(--gap-0);\n border-radius: inherit;\n pointer-events: none;\n z-index: 3;\n}\n\n.contentAddons {\n width: 100%;\n height: 100%;\n z-index: 2;\n overflow: hidden;\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,gCAAgC,CAAC,UAAU,CAAC,+BAA+B,CAAC,UAAU,CAAC,+BAA+B,CAAC,SAAS,CAAC,8BAA8B,CAAC,SAAS,CAAC,8BAA8B,CAAC,SAAS,CAAC,8BAA8B,CAAC,SAAS,CAAC,8BAA8B,CAAC,SAAS,CAAC,8BAA8B,CAAC,MAAM,CAAC,2BAA2B,CAAC,QAAQ,CAAC,6BAA6B,CAAC,eAAe,CAAC,oCAAoC,CAAC;;;;"}
1
+ {"version":3,"file":"index.module.css.js","sources":["../src/single/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n display: flex;\n align-items: flex-end;\n position: relative;\n background-color: var(--color-light-neutral-500);\n box-sizing: border-box;\n\n &.size-164 {\n border-radius: var(--border-radius-20);\n padding: var(--gap-12) var(--gap-16);\n }\n &.size-128 {\n border-radius: var(--border-radius-16);\n padding: var(--gap-8) var(--gap-12);\n }\n &.size-96 {\n border-radius: var(--border-radius-12);\n padding: var(--gap-6) var(--gap-12);\n }\n &.size-48,\n &.size-40 {\n border-radius: var(--border-radius-6);\n padding: var(--gap-2) var(--gap-4);\n }\n &.size-32 {\n border-radius: var(--border-radius-4);\n padding: var(--gap-0) var(--gap-2);\n }\n &.size-16 {\n border-radius: var(--border-radius-2);\n }\n\n & .state {\n position: absolute;\n inset: var(--gap-0);\n z-index: 2;\n border-radius: inherit;\n opacity: 0;\n transition: opacity 0.2s;\n will-change: opacity;\n }\n\n /* prettier-ignore */\n @each $state, $hover, $active in\n (darkening, var(--color-light-neutral-translucent-200), var(--color-light-neutral-translucent-400)),\n (lightening, var(--color-light-neutral-translucent-200-inverted), var(--color-light-neutral-translucent-400-inverted)),\n (static-darkening, rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.15)),\n (static-lightening, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.15)) {\n &.$(state) {\n & .hover {\n background-color: $hover;\n }\n & .active {\n background-color: $active;\n }\n @mixin hover {\n &:not(:active) .hover {\n opacity: 1;\n }\n }\n &:active {\n & .active {\n opacity: 1;\n }\n }\n }\n }\n}\n\n.icon {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 4;\n}\n\n.border {\n position: absolute;\n top: var(--gap-0);\n bottom: var(--gap-0);\n left: var(--gap-0);\n right: var(--gap-0);\n border-radius: inherit;\n pointer-events: none;\n z-index: 3;\n}\n\n.contentAddons {\n width: 100%;\n height: 100%;\n z-index: 2;\n overflow: hidden;\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,gCAAgC,CAAC,UAAU,CAAC,+BAA+B,CAAC,UAAU,CAAC,+BAA+B,CAAC,SAAS,CAAC,8BAA8B,CAAC,SAAS,CAAC,8BAA8B,CAAC,SAAS,CAAC,8BAA8B,CAAC,SAAS,CAAC,8BAA8B,CAAC,SAAS,CAAC,8BAA8B,CAAC,OAAO,CAAC,4BAA4B,CAAC,WAAW,CAAC,gCAAgC,CAAC,OAAO,CAAC,4BAA4B,CAAC,QAAQ,CAAC,6BAA6B,CAAC,YAAY,CAAC,iCAAiC,CAAC,kBAAkB,CAAC,uCAAuC,CAAC,mBAAmB,CAAC,wCAAwC,CAAC,MAAM,CAAC,2BAA2B,CAAC,QAAQ,CAAC,6BAA6B,CAAC,eAAe,CAAC,oCAAoC,CAAC;;;;"}
package/modern/stack/index.css CHANGED
@@ -10,66 +10,66 @@
10
10
  --gap-16: var(--gap-m);
11
11
  --gap-20-neg: var(--gap-l-neg);
12
12
  }
13
- .product-cover__wrapper_1dq1z {
13
+ .product-cover__wrapper_vbqzd {
14
14
  display: flex;
15
15
  justify-content: center;
16
16
  box-sizing: border-box;
17
17
  }
18
- .product-cover__wrapper_1dq1z.product-cover__size-128_1dq1z {
18
+ .product-cover__wrapper_vbqzd.product-cover__size-128_vbqzd {
19
19
  width: 213px;
20
20
  height: 128px;
21
21
  }
22
- .product-cover__wrapper_1dq1z.product-cover__size-40_1dq1z {
22
+ .product-cover__wrapper_vbqzd.product-cover__size-40_vbqzd {
23
23
  width: 76px;
24
24
  height: 56px;
25
25
  }
26
- .product-cover__wrapper_1dq1z.product-cover__size-32_1dq1z {
26
+ .product-cover__wrapper_vbqzd.product-cover__size-32_vbqzd {
27
27
  width: 55px;
28
28
  height: 48px;
29
29
  }
30
- .product-cover__wrapper_1dq1z.product-cover__size-16_1dq1z {
30
+ .product-cover__wrapper_vbqzd.product-cover__size-16_vbqzd {
31
31
  width: 28px;
32
32
  height: 20px;
33
33
  }
34
- .product-cover__wrapper_1dq1z.product-cover__size-40_1dq1z.product-cover__bottom_1dq1z {
34
+ .product-cover__wrapper_vbqzd.product-cover__size-40_vbqzd.product-cover__bottom_vbqzd {
35
35
  width: 65px;
36
36
  height: 48px;
37
37
  }
38
- .product-cover__componentImage_1dq1z {
38
+ .product-cover__componentImage_vbqzd {
39
39
  align-items: center;
40
40
  }
41
- .product-cover__componentStack_1dq1z.product-cover__size-128_1dq1z {
41
+ .product-cover__componentStack_vbqzd.product-cover__size-128_vbqzd {
42
42
  padding-left: var(--gap-8);
43
43
  }
44
- .product-cover__firstCard_1dq1z {
44
+ .product-cover__firstCard_vbqzd {
45
45
  z-index: 4;
46
46
  }
47
- .product-cover__firstCard_1dq1z.product-cover__size-32_1dq1z {
47
+ .product-cover__firstCard_vbqzd.product-cover__size-32_vbqzd {
48
48
  margin-top: var(--gap-4);
49
49
  }
50
- .product-cover__firstCard_1dq1z.product-cover__size-40_1dq1z.product-cover__bottom_1dq1z {
50
+ .product-cover__firstCard_vbqzd.product-cover__size-40_vbqzd.product-cover__bottom_vbqzd {
51
51
  margin-left: -7px;
52
52
  margin-top: var(--gap-4);
53
53
  }
54
- .product-cover__wrapperSecondCard_1dq1z.product-cover__size-128_1dq1z {
54
+ .product-cover__wrapperSecondCard_vbqzd.product-cover__size-128_vbqzd {
55
55
  width: 213px;
56
56
  padding-left: var(--gap-8);
57
57
  margin-top: 18px;
58
58
  margin-left: -221px;
59
59
  }
60
- .product-cover__wrapperSecondCard_1dq1z.product-cover__size-40_1dq1z {
60
+ .product-cover__wrapperSecondCard_vbqzd.product-cover__size-40_vbqzd {
61
61
  margin-top: var(--gap-16);
62
62
  margin-left: -54px;
63
63
  }
64
- .product-cover__wrapperSecondCard_1dq1z.product-cover__size-32_1dq1z {
64
+ .product-cover__wrapperSecondCard_vbqzd.product-cover__size-32_vbqzd {
65
65
  margin-top: var(--gap-12);
66
66
  margin-left: -47px;
67
67
  }
68
- .product-cover__wrapperSecondCard_1dq1z.product-cover__size-16_1dq1z {
68
+ .product-cover__wrapperSecondCard_vbqzd.product-cover__size-16_vbqzd {
69
69
  margin-top: var(--gap-4);
70
70
  margin-left: var(--gap-20-neg);
71
71
  }
72
- .product-cover__wrapperSecondCard_1dq1z.product-cover__size-40_1dq1z.product-cover__bottom_1dq1z {
72
+ .product-cover__wrapperSecondCard_vbqzd.product-cover__size-40_vbqzd.product-cover__bottom_vbqzd {
73
73
  margin-top: var(--gap-16);
74
74
  margin-left: -58px;
75
75
  }
package/modern/stack/index.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- const styles = {"wrapper":"product-cover__wrapper_1dq1z","size-128":"product-cover__size-128_1dq1z","size-40":"product-cover__size-40_1dq1z","size-32":"product-cover__size-32_1dq1z","size-16":"product-cover__size-16_1dq1z","bottom":"product-cover__bottom_1dq1z","componentImage":"product-cover__componentImage_1dq1z","componentStack":"product-cover__componentStack_1dq1z","firstCard":"product-cover__firstCard_1dq1z","wrapperSecondCard":"product-cover__wrapperSecondCard_1dq1z"};
3
+ const styles = {"wrapper":"product-cover__wrapper_vbqzd","size-128":"product-cover__size-128_vbqzd","size-40":"product-cover__size-40_vbqzd","size-32":"product-cover__size-32_vbqzd","size-16":"product-cover__size-16_vbqzd","bottom":"product-cover__bottom_vbqzd","componentImage":"product-cover__componentImage_vbqzd","componentStack":"product-cover__componentStack_vbqzd","firstCard":"product-cover__firstCard_vbqzd","wrapperSecondCard":"product-cover__wrapperSecondCard_vbqzd"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
package/modern/typings.d.ts CHANGED
@@ -107,6 +107,12 @@ export type SingleCommonProps = {
107
107
  * Идентификатор для систем автоматизированного тестирования
108
108
  */
109
109
  dataTestId?: string;
110
+ /**
111
+ * Задает различные эффекты при наведении на компонент (затемнение, осветление)
112
+ *
113
+ * @default false
114
+ */
115
+ stateType?: 'darkening' | 'lightening' | 'static-darkening' | 'static-lightening' | false;
110
116
  };
111
117
  export type SingleProps = Omit<SingleCommonProps, 'numberOfСards' | 'numberOfCards' | 'align'>;
112
118
  export type BankCardImageProps = Omit<SingleCommonProps, 'size' | 'numberOfСards' | 'numberOfCards' | 'className' | 'dataTestId' | 'align'>;
package/moderncssm/single/Component.js CHANGED
@@ -7,10 +7,10 @@ import { ImageCard } from '../components/image-card/Component.js';
7
7
  import { WIDTH_TO_SIZE } from '../consts.js';
8
8
  import styles from './index.module.css';
9
9
 
10
- const Single = ({ size = 164, icon: Icon, cardId, layers, baseUrl, shadow, iconColor, backgroundColor, borderColor, textColor, overlayProps = { colors: 'default', visible: false }, eyeButton, cardholderNameUppercase, cardholderName, numberOfСards, numberOfCards = numberOfСards, align, cardNumber, className, contentAddons, contentAddonsProps, onEyeIconClick, dataTestId, }) => {
10
+ const Single = ({ size = 164, icon: Icon, cardId, layers, baseUrl, shadow, iconColor, backgroundColor, borderColor, textColor, overlayProps = { colors: 'default', visible: false }, eyeButton, cardholderNameUppercase, cardholderName, numberOfСards, numberOfCards = numberOfСards, align, cardNumber, className, contentAddons, contentAddonsProps, onEyeIconClick, dataTestId, stateType = false, }) => {
11
11
  const hasContent = Boolean(cardNumber || cardholderName || numberOfCards);
12
12
  const showContent = hasContent && size !== 16 && !contentAddons;
13
- return (React.createElement("div", { className: cn(styles.component, styles[`size-${size}`], className), style: {
13
+ return (React.createElement("div", { className: cn(styles.component, styles[`size-${size}`], stateType && styles[stateType], className), style: {
14
14
  width: WIDTH_TO_SIZE[size],
15
15
  height: size,
16
16
  boxShadow: shadow,
@@ -21,7 +21,9 @@ const Single = ({ size = 164, icon: Icon, cardId, layers, baseUrl, shadow, iconC
21
21
  borderColor && (React.createElement("div", { className: cn(styles.border), style: { boxShadow: `inset 0 0 0 1px ${borderColor}` } })),
22
22
  React.createElement(ImageCard, { width: WIDTH_TO_SIZE[size], height: size, cardId: cardId, layers: layers, baseUrl: baseUrl, numberOfCards: numberOfCards }),
23
23
  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 })),
24
- contentAddons && (React.createElement("div", { ...contentAddonsProps, className: cn(styles.contentAddons, contentAddonsProps?.className) }, contentAddons))));
24
+ contentAddons && (React.createElement("div", { ...contentAddonsProps, className: cn(styles.contentAddons, contentAddonsProps?.className) }, contentAddons)),
25
+ stateType && React.createElement("div", { className: cn(styles.state, styles.hover) }),
26
+ stateType && React.createElement("div", { className: cn(styles.state, styles.active) })));
25
27
  };
26
28
 
27
29
  export { Single };
package/moderncssm/single/Component.js.map CHANGED
@@ -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 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":[],"mappings":";;;;;;;;;AAWO,MAAM,MAAM,GAA0B,CAAC,EAC1C,IAAI,GAAG,GAAG,EACV,IAAI,EAAE,IAAI,EACV,MAAM,EACN,MAAM,EACN,OAAO,EACP,MAAM,EACN,SAAS,EACT,eAAe,EACf,WAAW,EACX,SAAS,EACT,YAAY,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,EACpD,SAAS,EACT,uBAAuB,EACvB,cAAc,EACd,aAAa,EACb,aAAa,GAAG,aAAa,EAC7B,KAAK,EACL,UAAU,EACV,SAAS,EACT,aAAa,EACb,kBAAkB,EAClB,cAAc,EACd,UAAU,GACb,KAAI;IACD,MAAM,UAAU,GAAG,OAAO,CAAC,UAAU,IAAI,cAAc,IAAI,aAAa,CAAC;IACzE,MAAM,WAAW,GAAG,UAAU,IAAI,IAAI,KAAK,EAAE,IAAI,CAAC,aAAa;IAE/D,QACI,6BACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA,KAAA,EAAQ,IAAI,CAAE,CAAA,CAAC,EAAE,SAAS,CAAC,EAClE,KAAK,EAAE;AACH,YAAA,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC;AAC1B,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,SAAS,EAAE,MAAM;YACjB,eAAe;AAClB,SAAA,EAAA,cAAA,EACa,UAAU,EAAA;AAEvB,QAAA,IAAI,IAAI,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,EAAI,CAAA;AAC3D,QAAA,KAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,MAAM,EAAE,YAAY,CAAC,MAAM,EAAE,OAAO,EAAE,YAAY,CAAC,OAAO,EAAI,CAAA;QAEtE,WAAW,KACR,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,EAC5B,KAAK,EAAE,EAAE,SAAS,EAAE,mBAAmB,WAAW,CAAA,CAAE,EAAE,EAAA,CACxD,CACL;AAED,QAAA,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACN,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,EAC1B,MAAM,EAAE,IAAI,EACZ,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,aAAa,EAC9B,CAAA;QAED,WAAW,KACR,KAAC,CAAA,aAAA,CAAA,IAAI,IACD,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,uBAAuB,EAAE,uBAAuB,EAChD,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,aAAa,CAAC,UAAU,EAAE,WAAW,CAAC,EAClD,SAAS,EAAE,SAAS,EAAA,CACtB,CACL;QAEA,aAAa,KACV,KACQ,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAA,kBAAkB,EACtB,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,kBAAkB,EAAE,SAAS,CAAC,EAAA,EAEjE,aAAa,CACZ,CACT,CACC;AAEd;;;;"}
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 stateType = false,\n}) => {\n const hasContent = Boolean(cardNumber || cardholderName || numberOfCards);\n const showContent = hasContent && size !== 16 && !contentAddons;\n\n return (\n <div\n className={cn(\n styles.component,\n styles[`size-${size}`],\n stateType && styles[stateType],\n className,\n )}\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 {stateType && <div className={cn(styles.state, styles.hover)} />}\n {stateType && <div className={cn(styles.state, styles.active)} />}\n </div>\n );\n};\n"],"names":[],"mappings":"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"}