@alfalab/core-components-bank-card 5.1.1 → 5.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 (13) hide show
  1. package/Component.js +4 -4
  2. package/cssm/Component.js +3 -3
  3. package/cssm/index.js +1 -1
  4. package/cssm/index.module.css +1 -1
  5. package/esm/Component.js +4 -4
  6. package/esm/index.css +21 -21
  7. package/esm/index.js +1 -1
  8. package/index.css +21 -21
  9. package/index.js +1 -1
  10. package/modern/Component.js +4 -4
  11. package/modern/index.css +21 -21
  12. package/modern/index.js +1 -1
  13. package/package.json +4 -5
package/Component.js CHANGED
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var React = require('react');
6
6
  var cn = require('classnames');
7
7
  var coreComponentsMaskedInput = require('@alfalab/core-components-masked-input');
8
- var BankAlfaLColorIcon = require('@alfalab/icons-classic/BankAlfaLColorIcon');
8
+ var AlfaBankLIcon = require('@alfalab/icons-logotype/AlfaBankLIcon');
9
9
  var CameraMIcon = require('@alfalab/icons-glyph/CameraMIcon');
10
10
  var VisaXxlIcon = require('@alfalab/icons-logotype/VisaXxlIcon');
11
11
  var MastercardLIcon = require('@alfalab/icons-logotype/MastercardLIcon');
@@ -17,7 +17,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
17
17
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
18
18
  var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
19
19
 
20
- var styles = {"component":"bank-card__component_1vduu","aspectRatioContainer":"bank-card__aspectRatioContainer_1vduu","content":"bank-card__content_1vduu","label":"bank-card__label_1vduu","focused":"bank-card__focused_1vduu","filled":"bank-card__filled_1vduu","input":"bank-card__input_1vduu","bankLogo":"bank-card__bankLogo_1vduu","brandLogo":"bank-card__brandLogo_1vduu","usePhoto":"bank-card__usePhoto_1vduu"};
20
+ var styles = {"component":"bank-card__component_jjf52","aspectRatioContainer":"bank-card__aspectRatioContainer_jjf52","content":"bank-card__content_jjf52","label":"bank-card__label_jjf52","focused":"bank-card__focused_jjf52","filled":"bank-card__filled_jjf52","input":"bank-card__input_jjf52","bankLogo":"bank-card__bankLogo_jjf52","brandLogo":"bank-card__brandLogo_jjf52","usePhoto":"bank-card__usePhoto_jjf52"};
21
21
  require('./index.css')
22
22
 
23
23
  // prettier-ignore
@@ -40,7 +40,7 @@ var getBrandIcon = function (value) {
40
40
  return null;
41
41
  };
42
42
  var BankCard = React__default['default'].forwardRef(function (_a, ref) {
43
- var _b = _a.bankLogo, bankLogo = _b === void 0 ? React__default['default'].createElement(BankAlfaLColorIcon.BankAlfaLColorIcon, null) : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#EF3124' : _c, _d = _a.inputLabel, inputLabel = _d === void 0 ? 'Номер карты или счёта' : _d, value = _a.value, className = _a.className, onUsePhoto = _a.onUsePhoto, onChange = _a.onChange, dataTestId = _a.dataTestId;
43
+ var _b = _a.bankLogo, bankLogo = _b === void 0 ? React__default['default'].createElement(AlfaBankLIcon.AlfaBankLIcon, null) : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#EF3124' : _c, _d = _a.inputLabel, inputLabel = _d === void 0 ? 'Номер карты или счёта' : _d, value = _a.value, className = _a.className, onUsePhoto = _a.onUsePhoto, onChange = _a.onChange, dataTestId = _a.dataTestId;
44
44
  var uncontrolled = value === undefined;
45
45
  var _e = React.useState(getBrandIcon(value)), brandIcon = _e[0], setBrandIcon = _e[1];
46
46
  var getMask = React.useCallback(function (newValue) {
@@ -67,7 +67,7 @@ var BankCard = React__default['default'].forwardRef(function (_a, ref) {
67
67
  brandIcon && React__default['default'].createElement("div", { className: styles.brandLogo }, brandIcon)))));
68
68
  });
69
69
  BankCard.defaultProps = {
70
- bankLogo: React__default['default'].createElement(BankAlfaLColorIcon.BankAlfaLColorIcon, null),
70
+ bankLogo: React__default['default'].createElement(AlfaBankLIcon.AlfaBankLIcon, null),
71
71
  backgroundColor: '#EF3124',
72
72
  inputLabel: 'Номер карты или счёта',
73
73
  };
package/cssm/Component.js CHANGED
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var React = require('react');
6
6
  var cn = require('classnames');
7
7
  var coreComponentsMaskedInput = require('@alfalab/core-components-masked-input/cssm');
8
- var BankAlfaLColorIcon = require('@alfalab/icons-classic/BankAlfaLColorIcon');
8
+ var AlfaBankLIcon = require('@alfalab/icons-logotype/AlfaBankLIcon');
9
9
  var CameraMIcon = require('@alfalab/icons-glyph/CameraMIcon');
10
10
  var VisaXxlIcon = require('@alfalab/icons-logotype/VisaXxlIcon');
11
11
  var MastercardLIcon = require('@alfalab/icons-logotype/MastercardLIcon');
@@ -39,7 +39,7 @@ var getBrandIcon = function (value) {
39
39
  return null;
40
40
  };
41
41
  var BankCard = React__default['default'].forwardRef(function (_a, ref) {
42
- var _b = _a.bankLogo, bankLogo = _b === void 0 ? React__default['default'].createElement(BankAlfaLColorIcon.BankAlfaLColorIcon, null) : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#EF3124' : _c, _d = _a.inputLabel, inputLabel = _d === void 0 ? 'Номер карты или счёта' : _d, value = _a.value, className = _a.className, onUsePhoto = _a.onUsePhoto, onChange = _a.onChange, dataTestId = _a.dataTestId;
42
+ var _b = _a.bankLogo, bankLogo = _b === void 0 ? React__default['default'].createElement(AlfaBankLIcon.AlfaBankLIcon, null) : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#EF3124' : _c, _d = _a.inputLabel, inputLabel = _d === void 0 ? 'Номер карты или счёта' : _d, value = _a.value, className = _a.className, onUsePhoto = _a.onUsePhoto, onChange = _a.onChange, dataTestId = _a.dataTestId;
43
43
  var uncontrolled = value === undefined;
44
44
  var _e = React.useState(getBrandIcon(value)), brandIcon = _e[0], setBrandIcon = _e[1];
45
45
  var getMask = React.useCallback(function (newValue) {
@@ -66,7 +66,7 @@ var BankCard = React__default['default'].forwardRef(function (_a, ref) {
66
66
  brandIcon && React__default['default'].createElement("div", { className: styles__default['default'].brandLogo }, brandIcon)))));
67
67
  });
68
68
  BankCard.defaultProps = {
69
- bankLogo: React__default['default'].createElement(BankAlfaLColorIcon.BankAlfaLColorIcon, null),
69
+ bankLogo: React__default['default'].createElement(AlfaBankLIcon.AlfaBankLIcon, null),
70
70
  backgroundColor: '#EF3124',
71
71
  inputLabel: 'Номер карты или счёта',
72
72
  };
package/cssm/index.js CHANGED
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  require('react');
6
6
  require('classnames');
7
7
  require('@alfalab/core-components-masked-input/cssm');
8
- require('@alfalab/icons-classic/BankAlfaLColorIcon');
8
+ require('@alfalab/icons-logotype/AlfaBankLIcon');
9
9
  require('@alfalab/icons-glyph/CameraMIcon');
10
10
  require('@alfalab/icons-logotype/VisaXxlIcon');
11
11
  require('@alfalab/icons-logotype/MastercardLIcon');
package/cssm/index.module.css CHANGED
@@ -108,7 +108,7 @@
108
108
  left: 20px
109
109
  }
110
110
  .bankLogo svg {
111
- max-height: 30px;
111
+ max-height: 32px;
112
112
  width: auto;
113
113
  display: block
114
114
  }
package/esm/Component.js CHANGED
@@ -1,14 +1,14 @@
1
1
  import React, { useState, useCallback, useEffect } from 'react';
2
2
  import cn from 'classnames';
3
3
  import { MaskedInput } from '@alfalab/core-components-masked-input/esm';
4
- import { BankAlfaLColorIcon } from '@alfalab/icons-classic/BankAlfaLColorIcon';
4
+ import { AlfaBankLIcon } from '@alfalab/icons-logotype/AlfaBankLIcon';
5
5
  import { CameraMIcon } from '@alfalab/icons-glyph/CameraMIcon';
6
6
  import { VisaXxlIcon } from '@alfalab/icons-logotype/VisaXxlIcon';
7
7
  import { MastercardLIcon } from '@alfalab/icons-logotype/MastercardLIcon';
8
8
  import { MirXxlIcon } from '@alfalab/icons-logotype/MirXxlIcon';
9
9
  import { validateCardNumber } from './utils.js';
10
10
 
11
- var styles = {"component":"bank-card__component_1vduu","aspectRatioContainer":"bank-card__aspectRatioContainer_1vduu","content":"bank-card__content_1vduu","label":"bank-card__label_1vduu","focused":"bank-card__focused_1vduu","filled":"bank-card__filled_1vduu","input":"bank-card__input_1vduu","bankLogo":"bank-card__bankLogo_1vduu","brandLogo":"bank-card__brandLogo_1vduu","usePhoto":"bank-card__usePhoto_1vduu"};
11
+ var styles = {"component":"bank-card__component_jjf52","aspectRatioContainer":"bank-card__aspectRatioContainer_jjf52","content":"bank-card__content_jjf52","label":"bank-card__label_jjf52","focused":"bank-card__focused_jjf52","filled":"bank-card__filled_jjf52","input":"bank-card__input_jjf52","bankLogo":"bank-card__bankLogo_jjf52","brandLogo":"bank-card__brandLogo_jjf52","usePhoto":"bank-card__usePhoto_jjf52"};
12
12
  require('./index.css')
13
13
 
14
14
  // prettier-ignore
@@ -31,7 +31,7 @@ var getBrandIcon = function (value) {
31
31
  return null;
32
32
  };
33
33
  var BankCard = React.forwardRef(function (_a, ref) {
34
- var _b = _a.bankLogo, bankLogo = _b === void 0 ? React.createElement(BankAlfaLColorIcon, null) : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#EF3124' : _c, _d = _a.inputLabel, inputLabel = _d === void 0 ? 'Номер карты или счёта' : _d, value = _a.value, className = _a.className, onUsePhoto = _a.onUsePhoto, onChange = _a.onChange, dataTestId = _a.dataTestId;
34
+ var _b = _a.bankLogo, bankLogo = _b === void 0 ? React.createElement(AlfaBankLIcon, null) : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#EF3124' : _c, _d = _a.inputLabel, inputLabel = _d === void 0 ? 'Номер карты или счёта' : _d, value = _a.value, className = _a.className, onUsePhoto = _a.onUsePhoto, onChange = _a.onChange, dataTestId = _a.dataTestId;
35
35
  var uncontrolled = value === undefined;
36
36
  var _e = useState(getBrandIcon(value)), brandIcon = _e[0], setBrandIcon = _e[1];
37
37
  var getMask = useCallback(function (newValue) {
@@ -58,7 +58,7 @@ var BankCard = React.forwardRef(function (_a, ref) {
58
58
  brandIcon && React.createElement("div", { className: styles.brandLogo }, brandIcon)))));
59
59
  });
60
60
  BankCard.defaultProps = {
61
- bankLogo: React.createElement(BankAlfaLColorIcon, null),
61
+ bankLogo: React.createElement(AlfaBankLIcon, null),
62
62
  backgroundColor: '#EF3124',
63
63
  inputLabel: 'Номер карты или счёта',
64
64
  };
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1tljo */
1
+ /* hash: 1ojua */
2
2
  :root {
3
3
  --color-black: #000;
4
4
  --color-black-60: rgba(0, 0, 0, 0.6);
@@ -23,7 +23,7 @@
23
23
  :root {
24
24
  --border-radius-l: 12px;
25
25
  }
26
- .bank-card__component_1vduu {
26
+ .bank-card__component_jjf52 {
27
27
  /* TODO: как это будет собираться и работать в webView */
28
28
  --form-control-border-radius: 0;
29
29
  --form-control-border-bottom: 1px solid var(--color-black-60);
@@ -42,11 +42,11 @@
42
42
 
43
43
  font-family: var(--font-family-styrene);
44
44
  }
45
- .bank-card__aspectRatioContainer_1vduu {
45
+ .bank-card__aspectRatioContainer_jjf52 {
46
46
  /* Эталонный размер 343x215 */
47
47
  padding-bottom: 62.6%;
48
48
  }
49
- .bank-card__content_1vduu {
49
+ .bank-card__content_jjf52 {
50
50
  position: absolute;
51
51
  top: 0;
52
52
  right: 0;
@@ -59,7 +59,7 @@
59
59
  border-radius: var(--border-radius-l);
60
60
  box-sizing: border-box;
61
61
  }
62
- .bank-card__label_1vduu {
62
+ .bank-card__label_jjf52 {
63
63
  left: 0;
64
64
  transform: translateY(-1px);
65
65
  color: var(--color-black-60);
@@ -67,25 +67,25 @@
67
67
  line-height: 24px
68
68
  }
69
69
  @media (max-width: 360px) {
70
- .bank-card__label_1vduu {
70
+ .bank-card__label_jjf52 {
71
71
  font-size: 16px
72
72
  }
73
73
  }
74
- .bank-card__focused_1vduu .bank-card__label_1vduu,
75
- .bank-card__filled_1vduu .bank-card__label_1vduu {
74
+ .bank-card__focused_jjf52 .bank-card__label_jjf52,
75
+ .bank-card__filled_jjf52 .bank-card__label_jjf52 {
76
76
  color: var(--color-black);
77
77
  transform: translateY(-19px) scale(0.6)
78
78
  }
79
79
  @media (max-width: 360px) {
80
- .bank-card__focused_1vduu .bank-card__label_1vduu,
81
- .bank-card__filled_1vduu .bank-card__label_1vduu {
80
+ .bank-card__focused_jjf52 .bank-card__label_jjf52,
81
+ .bank-card__filled_jjf52 .bank-card__label_jjf52 {
82
82
  transform: translateY(-22px) scale(0.75)
83
83
  }
84
84
  }
85
- .bank-card__focused_1vduu:before {
85
+ .bank-card__focused_jjf52:before {
86
86
  transform: scale(1) !important;
87
87
  }
88
- .bank-card__input_1vduu {
88
+ .bank-card__input_jjf52 {
89
89
  font-size: 20px;
90
90
  line-height: 24px;
91
91
  font-weight: 400;
@@ -99,33 +99,33 @@
99
99
  padding-left: 0 !important
100
100
  }
101
101
  @media (max-width: 360px) {
102
- .bank-card__input_1vduu {
102
+ .bank-card__input_jjf52 {
103
103
  font-size: 16px
104
104
  }
105
105
  }
106
- .bank-card__bankLogo_1vduu {
106
+ .bank-card__bankLogo_jjf52 {
107
107
  position: absolute;
108
108
  top: 20px;
109
109
  left: 20px
110
110
  }
111
- .bank-card__bankLogo_1vduu svg {
112
- max-height: 30px;
111
+ .bank-card__bankLogo_jjf52 svg {
112
+ max-height: 32px;
113
113
  width: auto;
114
114
  display: block
115
115
  }
116
- .bank-card__bankLogo_1vduu svg g {
116
+ .bank-card__bankLogo_jjf52 svg g {
117
117
  fill: var(--color-black);
118
118
  }
119
- .bank-card__brandLogo_1vduu {
119
+ .bank-card__brandLogo_jjf52 {
120
120
  position: absolute;
121
121
  bottom: 20px;
122
122
  right: 20px
123
123
  }
124
- .bank-card__brandLogo_1vduu svg {
124
+ .bank-card__brandLogo_jjf52 svg {
125
125
  display: block;
126
126
  fill: var(--color-black);
127
127
  }
128
- .bank-card__usePhoto_1vduu {
128
+ .bank-card__usePhoto_jjf52 {
129
129
  display: block;
130
130
  margin: 0;
131
131
  padding: 0;
@@ -143,7 +143,7 @@
143
143
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
144
144
  margin-right: calc(var(--gap-s) * -1)
145
145
  }
146
- .bank-card__usePhoto_1vduu svg {
146
+ .bank-card__usePhoto_jjf52 svg {
147
147
  fill: var(--color-black);
148
148
  display: block;
149
149
  }
package/esm/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import 'react';
2
2
  import 'classnames';
3
3
  import '@alfalab/core-components-masked-input/esm';
4
- import '@alfalab/icons-classic/BankAlfaLColorIcon';
4
+ import '@alfalab/icons-logotype/AlfaBankLIcon';
5
5
  import '@alfalab/icons-glyph/CameraMIcon';
6
6
  import '@alfalab/icons-logotype/VisaXxlIcon';
7
7
  import '@alfalab/icons-logotype/MastercardLIcon';
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1tljo */
1
+ /* hash: 1ojua */
2
2
  :root {
3
3
  --color-black: #000;
4
4
  --color-black-60: rgba(0, 0, 0, 0.6);
@@ -23,7 +23,7 @@
23
23
  :root {
24
24
  --border-radius-l: 12px;
25
25
  }
26
- .bank-card__component_1vduu {
26
+ .bank-card__component_jjf52 {
27
27
  /* TODO: как это будет собираться и работать в webView */
28
28
  --form-control-border-radius: 0;
29
29
  --form-control-border-bottom: 1px solid var(--color-black-60);
@@ -42,11 +42,11 @@
42
42
 
43
43
  font-family: var(--font-family-styrene);
44
44
  }
45
- .bank-card__aspectRatioContainer_1vduu {
45
+ .bank-card__aspectRatioContainer_jjf52 {
46
46
  /* Эталонный размер 343x215 */
47
47
  padding-bottom: 62.6%;
48
48
  }
49
- .bank-card__content_1vduu {
49
+ .bank-card__content_jjf52 {
50
50
  position: absolute;
51
51
  top: 0;
52
52
  right: 0;
@@ -59,7 +59,7 @@
59
59
  border-radius: var(--border-radius-l);
60
60
  box-sizing: border-box;
61
61
  }
62
- .bank-card__label_1vduu {
62
+ .bank-card__label_jjf52 {
63
63
  left: 0;
64
64
  transform: translateY(-1px);
65
65
  color: var(--color-black-60);
@@ -67,25 +67,25 @@
67
67
  line-height: 24px
68
68
  }
69
69
  @media (max-width: 360px) {
70
- .bank-card__label_1vduu {
70
+ .bank-card__label_jjf52 {
71
71
  font-size: 16px
72
72
  }
73
73
  }
74
- .bank-card__focused_1vduu .bank-card__label_1vduu,
75
- .bank-card__filled_1vduu .bank-card__label_1vduu {
74
+ .bank-card__focused_jjf52 .bank-card__label_jjf52,
75
+ .bank-card__filled_jjf52 .bank-card__label_jjf52 {
76
76
  color: var(--color-black);
77
77
  transform: translateY(-19px) scale(0.6)
78
78
  }
79
79
  @media (max-width: 360px) {
80
- .bank-card__focused_1vduu .bank-card__label_1vduu,
81
- .bank-card__filled_1vduu .bank-card__label_1vduu {
80
+ .bank-card__focused_jjf52 .bank-card__label_jjf52,
81
+ .bank-card__filled_jjf52 .bank-card__label_jjf52 {
82
82
  transform: translateY(-22px) scale(0.75)
83
83
  }
84
84
  }
85
- .bank-card__focused_1vduu:before {
85
+ .bank-card__focused_jjf52:before {
86
86
  transform: scale(1) !important;
87
87
  }
88
- .bank-card__input_1vduu {
88
+ .bank-card__input_jjf52 {
89
89
  font-size: 20px;
90
90
  line-height: 24px;
91
91
  font-weight: 400;
@@ -99,33 +99,33 @@
99
99
  padding-left: 0 !important
100
100
  }
101
101
  @media (max-width: 360px) {
102
- .bank-card__input_1vduu {
102
+ .bank-card__input_jjf52 {
103
103
  font-size: 16px
104
104
  }
105
105
  }
106
- .bank-card__bankLogo_1vduu {
106
+ .bank-card__bankLogo_jjf52 {
107
107
  position: absolute;
108
108
  top: 20px;
109
109
  left: 20px
110
110
  }
111
- .bank-card__bankLogo_1vduu svg {
112
- max-height: 30px;
111
+ .bank-card__bankLogo_jjf52 svg {
112
+ max-height: 32px;
113
113
  width: auto;
114
114
  display: block
115
115
  }
116
- .bank-card__bankLogo_1vduu svg g {
116
+ .bank-card__bankLogo_jjf52 svg g {
117
117
  fill: var(--color-black);
118
118
  }
119
- .bank-card__brandLogo_1vduu {
119
+ .bank-card__brandLogo_jjf52 {
120
120
  position: absolute;
121
121
  bottom: 20px;
122
122
  right: 20px
123
123
  }
124
- .bank-card__brandLogo_1vduu svg {
124
+ .bank-card__brandLogo_jjf52 svg {
125
125
  display: block;
126
126
  fill: var(--color-black);
127
127
  }
128
- .bank-card__usePhoto_1vduu {
128
+ .bank-card__usePhoto_jjf52 {
129
129
  display: block;
130
130
  margin: 0;
131
131
  padding: 0;
@@ -143,7 +143,7 @@
143
143
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
144
144
  margin-right: calc(var(--gap-s) * -1)
145
145
  }
146
- .bank-card__usePhoto_1vduu svg {
146
+ .bank-card__usePhoto_jjf52 svg {
147
147
  fill: var(--color-black);
148
148
  display: block;
149
149
  }
package/index.js CHANGED
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  require('react');
6
6
  require('classnames');
7
7
  require('@alfalab/core-components-masked-input');
8
- require('@alfalab/icons-classic/BankAlfaLColorIcon');
8
+ require('@alfalab/icons-logotype/AlfaBankLIcon');
9
9
  require('@alfalab/icons-glyph/CameraMIcon');
10
10
  require('@alfalab/icons-logotype/VisaXxlIcon');
11
11
  require('@alfalab/icons-logotype/MastercardLIcon');
package/modern/Component.js CHANGED
@@ -1,14 +1,14 @@
1
1
  import React, { useState, useCallback, useEffect } from 'react';
2
2
  import cn from 'classnames';
3
3
  import { MaskedInput } from '@alfalab/core-components-masked-input/modern';
4
- import { BankAlfaLColorIcon } from '@alfalab/icons-classic/BankAlfaLColorIcon';
4
+ import { AlfaBankLIcon } from '@alfalab/icons-logotype/AlfaBankLIcon';
5
5
  import { CameraMIcon } from '@alfalab/icons-glyph/CameraMIcon';
6
6
  import { VisaXxlIcon } from '@alfalab/icons-logotype/VisaXxlIcon';
7
7
  import { MastercardLIcon } from '@alfalab/icons-logotype/MastercardLIcon';
8
8
  import { MirXxlIcon } from '@alfalab/icons-logotype/MirXxlIcon';
9
9
  import { validateCardNumber } from './utils.js';
10
10
 
11
- var styles = {"component":"bank-card__component_1vduu","aspectRatioContainer":"bank-card__aspectRatioContainer_1vduu","content":"bank-card__content_1vduu","label":"bank-card__label_1vduu","focused":"bank-card__focused_1vduu","filled":"bank-card__filled_1vduu","input":"bank-card__input_1vduu","bankLogo":"bank-card__bankLogo_1vduu","brandLogo":"bank-card__brandLogo_1vduu","usePhoto":"bank-card__usePhoto_1vduu"};
11
+ var styles = {"component":"bank-card__component_jjf52","aspectRatioContainer":"bank-card__aspectRatioContainer_jjf52","content":"bank-card__content_jjf52","label":"bank-card__label_jjf52","focused":"bank-card__focused_jjf52","filled":"bank-card__filled_jjf52","input":"bank-card__input_jjf52","bankLogo":"bank-card__bankLogo_jjf52","brandLogo":"bank-card__brandLogo_jjf52","usePhoto":"bank-card__usePhoto_jjf52"};
12
12
  require('./index.css')
13
13
 
14
14
  // prettier-ignore
@@ -29,7 +29,7 @@ const getBrandIcon = (value = '') => {
29
29
  }
30
30
  return null;
31
31
  };
32
- const BankCard = React.forwardRef(({ bankLogo = React.createElement(BankAlfaLColorIcon, null), backgroundColor = '#EF3124', inputLabel = 'Номер карты или счёта', value, className, onUsePhoto, onChange, dataTestId, }, ref) => {
32
+ const BankCard = React.forwardRef(({ bankLogo = React.createElement(AlfaBankLIcon, null), backgroundColor = '#EF3124', inputLabel = 'Номер карты или счёта', value, className, onUsePhoto, onChange, dataTestId, }, ref) => {
33
33
  const uncontrolled = value === undefined;
34
34
  const [brandIcon, setBrandIcon] = useState(getBrandIcon(value));
35
35
  const getMask = useCallback((newValue) => newValue.length <= cardMask.length ? cardMask : accountNumberMask, []);
@@ -54,7 +54,7 @@ const BankCard = React.forwardRef(({ bankLogo = React.createElement(BankAlfaLCol
54
54
  brandIcon && React.createElement("div", { className: styles.brandLogo }, brandIcon)))));
55
55
  });
56
56
  BankCard.defaultProps = {
57
- bankLogo: React.createElement(BankAlfaLColorIcon, null),
57
+ bankLogo: React.createElement(AlfaBankLIcon, null),
58
58
  backgroundColor: '#EF3124',
59
59
  inputLabel: 'Номер карты или счёта',
60
60
  };
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1tljo */
1
+ /* hash: 1ojua */
2
2
  :root {
3
3
  --color-black: #000;
4
4
  --color-black-60: rgba(0, 0, 0, 0.6);
@@ -23,7 +23,7 @@
23
23
  :root {
24
24
  --border-radius-l: 12px;
25
25
  }
26
- .bank-card__component_1vduu {
26
+ .bank-card__component_jjf52 {
27
27
  /* TODO: как это будет собираться и работать в webView */
28
28
  --form-control-border-radius: 0;
29
29
  --form-control-border-bottom: 1px solid var(--color-black-60);
@@ -42,11 +42,11 @@
42
42
 
43
43
  font-family: var(--font-family-styrene);
44
44
  }
45
- .bank-card__aspectRatioContainer_1vduu {
45
+ .bank-card__aspectRatioContainer_jjf52 {
46
46
  /* Эталонный размер 343x215 */
47
47
  padding-bottom: 62.6%;
48
48
  }
49
- .bank-card__content_1vduu {
49
+ .bank-card__content_jjf52 {
50
50
  position: absolute;
51
51
  top: 0;
52
52
  right: 0;
@@ -59,7 +59,7 @@
59
59
  border-radius: var(--border-radius-l);
60
60
  box-sizing: border-box;
61
61
  }
62
- .bank-card__label_1vduu {
62
+ .bank-card__label_jjf52 {
63
63
  left: 0;
64
64
  transform: translateY(-1px);
65
65
  color: var(--color-black-60);
@@ -67,25 +67,25 @@
67
67
  line-height: 24px
68
68
  }
69
69
  @media (max-width: 360px) {
70
- .bank-card__label_1vduu {
70
+ .bank-card__label_jjf52 {
71
71
  font-size: 16px
72
72
  }
73
73
  }
74
- .bank-card__focused_1vduu .bank-card__label_1vduu,
75
- .bank-card__filled_1vduu .bank-card__label_1vduu {
74
+ .bank-card__focused_jjf52 .bank-card__label_jjf52,
75
+ .bank-card__filled_jjf52 .bank-card__label_jjf52 {
76
76
  color: var(--color-black);
77
77
  transform: translateY(-19px) scale(0.6)
78
78
  }
79
79
  @media (max-width: 360px) {
80
- .bank-card__focused_1vduu .bank-card__label_1vduu,
81
- .bank-card__filled_1vduu .bank-card__label_1vduu {
80
+ .bank-card__focused_jjf52 .bank-card__label_jjf52,
81
+ .bank-card__filled_jjf52 .bank-card__label_jjf52 {
82
82
  transform: translateY(-22px) scale(0.75)
83
83
  }
84
84
  }
85
- .bank-card__focused_1vduu:before {
85
+ .bank-card__focused_jjf52:before {
86
86
  transform: scale(1) !important;
87
87
  }
88
- .bank-card__input_1vduu {
88
+ .bank-card__input_jjf52 {
89
89
  font-size: 20px;
90
90
  line-height: 24px;
91
91
  font-weight: 400;
@@ -99,33 +99,33 @@
99
99
  padding-left: 0 !important
100
100
  }
101
101
  @media (max-width: 360px) {
102
- .bank-card__input_1vduu {
102
+ .bank-card__input_jjf52 {
103
103
  font-size: 16px
104
104
  }
105
105
  }
106
- .bank-card__bankLogo_1vduu {
106
+ .bank-card__bankLogo_jjf52 {
107
107
  position: absolute;
108
108
  top: 20px;
109
109
  left: 20px
110
110
  }
111
- .bank-card__bankLogo_1vduu svg {
112
- max-height: 30px;
111
+ .bank-card__bankLogo_jjf52 svg {
112
+ max-height: 32px;
113
113
  width: auto;
114
114
  display: block
115
115
  }
116
- .bank-card__bankLogo_1vduu svg g {
116
+ .bank-card__bankLogo_jjf52 svg g {
117
117
  fill: var(--color-black);
118
118
  }
119
- .bank-card__brandLogo_1vduu {
119
+ .bank-card__brandLogo_jjf52 {
120
120
  position: absolute;
121
121
  bottom: 20px;
122
122
  right: 20px
123
123
  }
124
- .bank-card__brandLogo_1vduu svg {
124
+ .bank-card__brandLogo_jjf52 svg {
125
125
  display: block;
126
126
  fill: var(--color-black);
127
127
  }
128
- .bank-card__usePhoto_1vduu {
128
+ .bank-card__usePhoto_jjf52 {
129
129
  display: block;
130
130
  margin: 0;
131
131
  padding: 0;
@@ -143,7 +143,7 @@
143
143
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
144
144
  margin-right: calc(var(--gap-s) * -1)
145
145
  }
146
- .bank-card__usePhoto_1vduu svg {
146
+ .bank-card__usePhoto_jjf52 svg {
147
147
  fill: var(--color-black);
148
148
  display: block;
149
149
  }
package/modern/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import 'react';
2
2
  import 'classnames';
3
3
  import '@alfalab/core-components-masked-input/modern';
4
- import '@alfalab/icons-classic/BankAlfaLColorIcon';
4
+ import '@alfalab/icons-logotype/AlfaBankLIcon';
5
5
  import '@alfalab/icons-glyph/CameraMIcon';
6
6
  import '@alfalab/icons-logotype/VisaXxlIcon';
7
7
  import '@alfalab/icons-logotype/MastercardLIcon';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-bank-card",
3
- "version": "5.1.1",
3
+ "version": "5.2.0",
4
4
  "description": "Bank card component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -18,10 +18,9 @@
18
18
  "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
19
19
  },
20
20
  "dependencies": {
21
- "@alfalab/core-components-masked-input": "^5.0.6",
22
- "@alfalab/icons-classic": "^1.76.0",
23
- "@alfalab/icons-glyph": "^2.16.0",
24
- "@alfalab/icons-logotype": "^1.28.0",
21
+ "@alfalab/core-components-masked-input": "^5.0.8",
22
+ "@alfalab/icons-glyph": "^2.71.0",
23
+ "@alfalab/icons-logotype": "^2.19.0",
25
24
  "classnames": "^2.3.1"
26
25
  }
27
26
  }