@alfalab/core-components-bank-card 4.1.13 → 4.2.1

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/CHANGELOG.md +27 -0
  2. package/dist/Component.js +8 -6
  3. package/dist/cssm/Component.js +7 -5
  4. package/dist/cssm/index.js +3 -1
  5. package/dist/esm/Component.js +4 -2
  6. package/dist/esm/index.css +20 -20
  7. package/dist/esm/index.js +3 -1
  8. package/dist/index.css +20 -20
  9. package/dist/index.js +3 -1
  10. package/dist/modern/Component.js +4 -2
  11. package/dist/modern/index.css +20 -20
  12. package/dist/modern/index.js +3 -1
  13. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -3,6 +3,33 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [4.2.0](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-bank-card@4.1.14...@alfalab/core-components-bank-card@4.2.0) (2022-03-04)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * update glyph deps ([#1019](https://github.com/alfa-laboratory/core-components/issues/1019)) ([3e910d0](https://github.com/alfa-laboratory/core-components/commit/3e910d0801c4c46bcd399163200c1f7bfaba375e))
12
+
13
+
14
+ ### Features
15
+
16
+ * Исправить импорты в сторях. ([#998](https://github.com/alfa-laboratory/core-components/issues/998)) ([e6a654a](https://github.com/alfa-laboratory/core-components/commit/e6a654a0599451c7d149484cb61d8067eed083b7))
17
+
18
+
19
+
20
+
21
+
22
+ ## [4.1.14](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-bank-card@4.1.13...@alfalab/core-components-bank-card@4.1.14) (2022-02-17)
23
+
24
+
25
+ ### Bug Fixes
26
+
27
+ * imports for glyph icons ([#994](https://github.com/alfa-laboratory/core-components/issues/994)) ([8e807f2](https://github.com/alfa-laboratory/core-components/commit/8e807f26abf0f942fe8eadbd201caecb297b35dc))
28
+
29
+
30
+
31
+
32
+
6
33
  ## [4.1.13](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-bank-card@4.1.12...@alfalab/core-components-bank-card@4.1.13) (2022-02-15)
7
34
 
8
35
  **Note:** Version bump only for package @alfalab/core-components-bank-card
package/dist/Component.js CHANGED
@@ -7,7 +7,9 @@ var cn = require('classnames');
7
7
  var coreComponentsMaskedInput = require('@alfalab/core-components-masked-input');
8
8
  var BankAlfaLColorIcon = require('@alfalab/icons-classic/BankAlfaLColorIcon');
9
9
  var CameraMIcon = require('@alfalab/icons-glyph/CameraMIcon');
10
- var iconsLogotype = require('@alfalab/icons-logotype');
10
+ var VisaXxlIcon = require('@alfalab/icons-logotype/VisaXxlIcon');
11
+ var MastercardLIcon = require('@alfalab/icons-logotype/MastercardLIcon');
12
+ var MirXxlIcon = require('@alfalab/icons-logotype/MirXxlIcon');
11
13
  var utils = require('./utils.js');
12
14
 
13
15
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -15,7 +17,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
15
17
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
16
18
  var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
17
19
 
18
- var styles = {"component":"bank-card__component_7e341","aspectRatioContainer":"bank-card__aspectRatioContainer_7e341","content":"bank-card__content_7e341","label":"bank-card__label_7e341","focused":"bank-card__focused_7e341","filled":"bank-card__filled_7e341","input":"bank-card__input_7e341","bankLogo":"bank-card__bankLogo_7e341","brandLogo":"bank-card__brandLogo_7e341","usePhoto":"bank-card__usePhoto_7e341"};
20
+ var styles = {"component":"bank-card__component_nvf16","aspectRatioContainer":"bank-card__aspectRatioContainer_nvf16","content":"bank-card__content_nvf16","label":"bank-card__label_nvf16","focused":"bank-card__focused_nvf16","filled":"bank-card__filled_nvf16","input":"bank-card__input_nvf16","bankLogo":"bank-card__bankLogo_nvf16","brandLogo":"bank-card__brandLogo_nvf16","usePhoto":"bank-card__usePhoto_nvf16"};
19
21
  require('./index.css')
20
22
 
21
23
  // prettier-ignore
@@ -27,13 +29,13 @@ var getBrandIcon = function (value) {
27
29
  // Показываем логотип только после ввода всех цифр карты
28
30
  if (value.replace(/\s/g, '').length === 16 && utils.validateCardNumber(value)) {
29
31
  if (value.startsWith('2'))
30
- return React__default['default'].createElement(iconsLogotype.MirXxlIcon, null);
32
+ return React__default['default'].createElement(MirXxlIcon.MirXxlIcon, null);
31
33
  if (value.startsWith('4'))
32
- return React__default['default'].createElement(iconsLogotype.VisaXxlIcon, null);
34
+ return React__default['default'].createElement(VisaXxlIcon.VisaXxlIcon, null);
33
35
  if (value.startsWith('5'))
34
- return React__default['default'].createElement(iconsLogotype.MastercardLIcon, null);
36
+ return React__default['default'].createElement(MastercardLIcon.MastercardLIcon, null);
35
37
  if (value.startsWith('6'))
36
- return React__default['default'].createElement(iconsLogotype.MastercardLIcon, null);
38
+ return React__default['default'].createElement(MastercardLIcon.MastercardLIcon, null);
37
39
  }
38
40
  return null;
39
41
  };
package/dist/cssm/Component.js CHANGED
@@ -7,7 +7,9 @@ var cn = require('classnames');
7
7
  var coreComponentsMaskedInput = require('@alfalab/core-components-masked-input/dist/cssm');
8
8
  var BankAlfaLColorIcon = require('@alfalab/icons-classic/BankAlfaLColorIcon');
9
9
  var CameraMIcon = require('@alfalab/icons-glyph/CameraMIcon');
10
- var iconsLogotype = require('@alfalab/icons-logotype');
10
+ var VisaXxlIcon = require('@alfalab/icons-logotype/VisaXxlIcon');
11
+ var MastercardLIcon = require('@alfalab/icons-logotype/MastercardLIcon');
12
+ var MirXxlIcon = require('@alfalab/icons-logotype/MirXxlIcon');
11
13
  var styles = require('./index.module.css');
12
14
  var utils = require('./utils.js');
13
15
 
@@ -26,13 +28,13 @@ var getBrandIcon = function (value) {
26
28
  // Показываем логотип только после ввода всех цифр карты
27
29
  if (value.replace(/\s/g, '').length === 16 && utils.validateCardNumber(value)) {
28
30
  if (value.startsWith('2'))
29
- return React__default['default'].createElement(iconsLogotype.MirXxlIcon, null);
31
+ return React__default['default'].createElement(MirXxlIcon.MirXxlIcon, null);
30
32
  if (value.startsWith('4'))
31
- return React__default['default'].createElement(iconsLogotype.VisaXxlIcon, null);
33
+ return React__default['default'].createElement(VisaXxlIcon.VisaXxlIcon, null);
32
34
  if (value.startsWith('5'))
33
- return React__default['default'].createElement(iconsLogotype.MastercardLIcon, null);
35
+ return React__default['default'].createElement(MastercardLIcon.MastercardLIcon, null);
34
36
  if (value.startsWith('6'))
35
- return React__default['default'].createElement(iconsLogotype.MastercardLIcon, null);
37
+ return React__default['default'].createElement(MastercardLIcon.MastercardLIcon, null);
36
38
  }
37
39
  return null;
38
40
  };
package/dist/cssm/index.js CHANGED
@@ -7,7 +7,9 @@ require('classnames');
7
7
  require('@alfalab/core-components-masked-input/dist/cssm');
8
8
  require('@alfalab/icons-classic/BankAlfaLColorIcon');
9
9
  require('@alfalab/icons-glyph/CameraMIcon');
10
- require('@alfalab/icons-logotype');
10
+ require('@alfalab/icons-logotype/VisaXxlIcon');
11
+ require('@alfalab/icons-logotype/MastercardLIcon');
12
+ require('@alfalab/icons-logotype/MirXxlIcon');
11
13
  require('./index.module.css');
12
14
  require('./utils.js');
13
15
  var Component = require('./Component.js');
package/dist/esm/Component.js CHANGED
@@ -3,10 +3,12 @@ import cn from 'classnames';
3
3
  import { MaskedInput } from '@alfalab/core-components-masked-input/dist/esm';
4
4
  import { BankAlfaLColorIcon } from '@alfalab/icons-classic/BankAlfaLColorIcon';
5
5
  import { CameraMIcon } from '@alfalab/icons-glyph/CameraMIcon';
6
- import { MirXxlIcon, VisaXxlIcon, MastercardLIcon } from '@alfalab/icons-logotype';
6
+ import { VisaXxlIcon } from '@alfalab/icons-logotype/VisaXxlIcon';
7
+ import { MastercardLIcon } from '@alfalab/icons-logotype/MastercardLIcon';
8
+ import { MirXxlIcon } from '@alfalab/icons-logotype/MirXxlIcon';
7
9
  import { validateCardNumber } from './utils.js';
8
10
 
9
- var styles = {"component":"bank-card__component_7e341","aspectRatioContainer":"bank-card__aspectRatioContainer_7e341","content":"bank-card__content_7e341","label":"bank-card__label_7e341","focused":"bank-card__focused_7e341","filled":"bank-card__filled_7e341","input":"bank-card__input_7e341","bankLogo":"bank-card__bankLogo_7e341","brandLogo":"bank-card__brandLogo_7e341","usePhoto":"bank-card__usePhoto_7e341"};
11
+ var styles = {"component":"bank-card__component_nvf16","aspectRatioContainer":"bank-card__aspectRatioContainer_nvf16","content":"bank-card__content_nvf16","label":"bank-card__label_nvf16","focused":"bank-card__focused_nvf16","filled":"bank-card__filled_nvf16","input":"bank-card__input_nvf16","bankLogo":"bank-card__bankLogo_nvf16","brandLogo":"bank-card__brandLogo_nvf16","usePhoto":"bank-card__usePhoto_nvf16"};
10
12
  require('./index.css')
11
13
 
12
14
  // prettier-ignore
package/dist/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: s91cf */
1
+ /* hash: iob18 */
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_7e341 {
26
+ .bank-card__component_nvf16 {
27
27
  /* TODO: как это будет собираться и работать в webView */
28
28
 
29
29
  /* focus */
@@ -35,11 +35,11 @@
35
35
 
36
36
  font-family: var(--font-family-styrene);
37
37
  }
38
- .bank-card__aspectRatioContainer_7e341 {
38
+ .bank-card__aspectRatioContainer_nvf16 {
39
39
  /* Эталонный размер 343x215 */
40
40
  padding-bottom: 62.6%;
41
41
  }
42
- .bank-card__content_7e341 {
42
+ .bank-card__content_nvf16 {
43
43
  position: absolute;
44
44
  top: 0;
45
45
  right: 0;
@@ -52,7 +52,7 @@
52
52
  border-radius: var(--border-radius-l);
53
53
  box-sizing: border-box;
54
54
  }
55
- .bank-card__label_7e341 {
55
+ .bank-card__label_nvf16 {
56
56
  left: 0;
57
57
  transform: translateY(-1px);
58
58
  color: var(--color-black-60);
@@ -60,25 +60,25 @@
60
60
  line-height: 24px
61
61
  }
62
62
  @media (max-width: 360px) {
63
- .bank-card__label_7e341 {
63
+ .bank-card__label_nvf16 {
64
64
  font-size: 16px
65
65
  }
66
66
  }
67
- .bank-card__focused_7e341 .bank-card__label_7e341,
68
- .bank-card__filled_7e341 .bank-card__label_7e341 {
67
+ .bank-card__focused_nvf16 .bank-card__label_nvf16,
68
+ .bank-card__filled_nvf16 .bank-card__label_nvf16 {
69
69
  color: var(--color-black);
70
70
  transform: translateY(-19px) scale(0.6)
71
71
  }
72
72
  @media (max-width: 360px) {
73
- .bank-card__focused_7e341 .bank-card__label_7e341,
74
- .bank-card__filled_7e341 .bank-card__label_7e341 {
73
+ .bank-card__focused_nvf16 .bank-card__label_nvf16,
74
+ .bank-card__filled_nvf16 .bank-card__label_nvf16 {
75
75
  transform: translateY(-22px) scale(0.75)
76
76
  }
77
77
  }
78
- .bank-card__focused_7e341:before {
78
+ .bank-card__focused_nvf16:before {
79
79
  transform: scale(1) !important;
80
80
  }
81
- .bank-card__input_7e341 {
81
+ .bank-card__input_nvf16 {
82
82
  font-size: 20px;
83
83
  line-height: 24px;
84
84
  font-weight: 400;
@@ -92,33 +92,33 @@
92
92
  padding-left: 0 !important
93
93
  }
94
94
  @media (max-width: 360px) {
95
- .bank-card__input_7e341 {
95
+ .bank-card__input_nvf16 {
96
96
  font-size: 16px
97
97
  }
98
98
  }
99
- .bank-card__bankLogo_7e341 {
99
+ .bank-card__bankLogo_nvf16 {
100
100
  position: absolute;
101
101
  top: 20px;
102
102
  left: 20px
103
103
  }
104
- .bank-card__bankLogo_7e341 svg {
104
+ .bank-card__bankLogo_nvf16 svg {
105
105
  max-height: 30px;
106
106
  width: auto;
107
107
  display: block
108
108
  }
109
- .bank-card__bankLogo_7e341 svg g {
109
+ .bank-card__bankLogo_nvf16 svg g {
110
110
  fill: var(--color-black);
111
111
  }
112
- .bank-card__brandLogo_7e341 {
112
+ .bank-card__brandLogo_nvf16 {
113
113
  position: absolute;
114
114
  bottom: 20px;
115
115
  right: 20px
116
116
  }
117
- .bank-card__brandLogo_7e341 svg {
117
+ .bank-card__brandLogo_nvf16 svg {
118
118
  display: block;
119
119
  fill: var(--color-black);
120
120
  }
121
- .bank-card__usePhoto_7e341 {
121
+ .bank-card__usePhoto_nvf16 {
122
122
  display: block;
123
123
  margin: 0;
124
124
  padding: 0;
@@ -136,7 +136,7 @@
136
136
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
137
137
  margin-right: calc(var(--gap-s) * -1)
138
138
  }
139
- .bank-card__usePhoto_7e341 svg {
139
+ .bank-card__usePhoto_nvf16 svg {
140
140
  fill: var(--color-black);
141
141
  display: block;
142
142
  }
package/dist/esm/index.js CHANGED
@@ -3,6 +3,8 @@ import 'classnames';
3
3
  import '@alfalab/core-components-masked-input/dist/esm';
4
4
  import '@alfalab/icons-classic/BankAlfaLColorIcon';
5
5
  import '@alfalab/icons-glyph/CameraMIcon';
6
- import '@alfalab/icons-logotype';
6
+ import '@alfalab/icons-logotype/VisaXxlIcon';
7
+ import '@alfalab/icons-logotype/MastercardLIcon';
8
+ import '@alfalab/icons-logotype/MirXxlIcon';
7
9
  export { BankCard } from './Component.js';
8
10
  import './utils.js';
package/dist/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: s91cf */
1
+ /* hash: iob18 */
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_7e341 {
26
+ .bank-card__component_nvf16 {
27
27
  /* TODO: как это будет собираться и работать в webView */
28
28
 
29
29
  /* focus */
@@ -35,11 +35,11 @@
35
35
 
36
36
  font-family: var(--font-family-styrene);
37
37
  }
38
- .bank-card__aspectRatioContainer_7e341 {
38
+ .bank-card__aspectRatioContainer_nvf16 {
39
39
  /* Эталонный размер 343x215 */
40
40
  padding-bottom: 62.6%;
41
41
  }
42
- .bank-card__content_7e341 {
42
+ .bank-card__content_nvf16 {
43
43
  position: absolute;
44
44
  top: 0;
45
45
  right: 0;
@@ -52,7 +52,7 @@
52
52
  border-radius: var(--border-radius-l);
53
53
  box-sizing: border-box;
54
54
  }
55
- .bank-card__label_7e341 {
55
+ .bank-card__label_nvf16 {
56
56
  left: 0;
57
57
  transform: translateY(-1px);
58
58
  color: var(--color-black-60);
@@ -60,25 +60,25 @@
60
60
  line-height: 24px
61
61
  }
62
62
  @media (max-width: 360px) {
63
- .bank-card__label_7e341 {
63
+ .bank-card__label_nvf16 {
64
64
  font-size: 16px
65
65
  }
66
66
  }
67
- .bank-card__focused_7e341 .bank-card__label_7e341,
68
- .bank-card__filled_7e341 .bank-card__label_7e341 {
67
+ .bank-card__focused_nvf16 .bank-card__label_nvf16,
68
+ .bank-card__filled_nvf16 .bank-card__label_nvf16 {
69
69
  color: var(--color-black);
70
70
  transform: translateY(-19px) scale(0.6)
71
71
  }
72
72
  @media (max-width: 360px) {
73
- .bank-card__focused_7e341 .bank-card__label_7e341,
74
- .bank-card__filled_7e341 .bank-card__label_7e341 {
73
+ .bank-card__focused_nvf16 .bank-card__label_nvf16,
74
+ .bank-card__filled_nvf16 .bank-card__label_nvf16 {
75
75
  transform: translateY(-22px) scale(0.75)
76
76
  }
77
77
  }
78
- .bank-card__focused_7e341:before {
78
+ .bank-card__focused_nvf16:before {
79
79
  transform: scale(1) !important;
80
80
  }
81
- .bank-card__input_7e341 {
81
+ .bank-card__input_nvf16 {
82
82
  font-size: 20px;
83
83
  line-height: 24px;
84
84
  font-weight: 400;
@@ -92,33 +92,33 @@
92
92
  padding-left: 0 !important
93
93
  }
94
94
  @media (max-width: 360px) {
95
- .bank-card__input_7e341 {
95
+ .bank-card__input_nvf16 {
96
96
  font-size: 16px
97
97
  }
98
98
  }
99
- .bank-card__bankLogo_7e341 {
99
+ .bank-card__bankLogo_nvf16 {
100
100
  position: absolute;
101
101
  top: 20px;
102
102
  left: 20px
103
103
  }
104
- .bank-card__bankLogo_7e341 svg {
104
+ .bank-card__bankLogo_nvf16 svg {
105
105
  max-height: 30px;
106
106
  width: auto;
107
107
  display: block
108
108
  }
109
- .bank-card__bankLogo_7e341 svg g {
109
+ .bank-card__bankLogo_nvf16 svg g {
110
110
  fill: var(--color-black);
111
111
  }
112
- .bank-card__brandLogo_7e341 {
112
+ .bank-card__brandLogo_nvf16 {
113
113
  position: absolute;
114
114
  bottom: 20px;
115
115
  right: 20px
116
116
  }
117
- .bank-card__brandLogo_7e341 svg {
117
+ .bank-card__brandLogo_nvf16 svg {
118
118
  display: block;
119
119
  fill: var(--color-black);
120
120
  }
121
- .bank-card__usePhoto_7e341 {
121
+ .bank-card__usePhoto_nvf16 {
122
122
  display: block;
123
123
  margin: 0;
124
124
  padding: 0;
@@ -136,7 +136,7 @@
136
136
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
137
137
  margin-right: calc(var(--gap-s) * -1)
138
138
  }
139
- .bank-card__usePhoto_7e341 svg {
139
+ .bank-card__usePhoto_nvf16 svg {
140
140
  fill: var(--color-black);
141
141
  display: block;
142
142
  }
package/dist/index.js CHANGED
@@ -7,7 +7,9 @@ require('classnames');
7
7
  require('@alfalab/core-components-masked-input');
8
8
  require('@alfalab/icons-classic/BankAlfaLColorIcon');
9
9
  require('@alfalab/icons-glyph/CameraMIcon');
10
- require('@alfalab/icons-logotype');
10
+ require('@alfalab/icons-logotype/VisaXxlIcon');
11
+ require('@alfalab/icons-logotype/MastercardLIcon');
12
+ require('@alfalab/icons-logotype/MirXxlIcon');
11
13
  var Component = require('./Component.js');
12
14
  require('./utils.js');
13
15
 
package/dist/modern/Component.js CHANGED
@@ -3,10 +3,12 @@ import cn from 'classnames';
3
3
  import { MaskedInput } from '@alfalab/core-components-masked-input/dist/modern';
4
4
  import { BankAlfaLColorIcon } from '@alfalab/icons-classic/BankAlfaLColorIcon';
5
5
  import { CameraMIcon } from '@alfalab/icons-glyph/CameraMIcon';
6
- import { MirXxlIcon, VisaXxlIcon, MastercardLIcon } from '@alfalab/icons-logotype';
6
+ import { VisaXxlIcon } from '@alfalab/icons-logotype/VisaXxlIcon';
7
+ import { MastercardLIcon } from '@alfalab/icons-logotype/MastercardLIcon';
8
+ import { MirXxlIcon } from '@alfalab/icons-logotype/MirXxlIcon';
7
9
  import { validateCardNumber } from './utils.js';
8
10
 
9
- var styles = {"component":"bank-card__component_7e341","aspectRatioContainer":"bank-card__aspectRatioContainer_7e341","content":"bank-card__content_7e341","label":"bank-card__label_7e341","focused":"bank-card__focused_7e341","filled":"bank-card__filled_7e341","input":"bank-card__input_7e341","bankLogo":"bank-card__bankLogo_7e341","brandLogo":"bank-card__brandLogo_7e341","usePhoto":"bank-card__usePhoto_7e341"};
11
+ var styles = {"component":"bank-card__component_nvf16","aspectRatioContainer":"bank-card__aspectRatioContainer_nvf16","content":"bank-card__content_nvf16","label":"bank-card__label_nvf16","focused":"bank-card__focused_nvf16","filled":"bank-card__filled_nvf16","input":"bank-card__input_nvf16","bankLogo":"bank-card__bankLogo_nvf16","brandLogo":"bank-card__brandLogo_nvf16","usePhoto":"bank-card__usePhoto_nvf16"};
10
12
  require('./index.css')
11
13
 
12
14
  // prettier-ignore
package/dist/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: s91cf */
1
+ /* hash: iob18 */
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_7e341 {
26
+ .bank-card__component_nvf16 {
27
27
  /* TODO: как это будет собираться и работать в webView */
28
28
 
29
29
  /* focus */
@@ -35,11 +35,11 @@
35
35
 
36
36
  font-family: var(--font-family-styrene);
37
37
  }
38
- .bank-card__aspectRatioContainer_7e341 {
38
+ .bank-card__aspectRatioContainer_nvf16 {
39
39
  /* Эталонный размер 343x215 */
40
40
  padding-bottom: 62.6%;
41
41
  }
42
- .bank-card__content_7e341 {
42
+ .bank-card__content_nvf16 {
43
43
  position: absolute;
44
44
  top: 0;
45
45
  right: 0;
@@ -52,7 +52,7 @@
52
52
  border-radius: var(--border-radius-l);
53
53
  box-sizing: border-box;
54
54
  }
55
- .bank-card__label_7e341 {
55
+ .bank-card__label_nvf16 {
56
56
  left: 0;
57
57
  transform: translateY(-1px);
58
58
  color: var(--color-black-60);
@@ -60,25 +60,25 @@
60
60
  line-height: 24px
61
61
  }
62
62
  @media (max-width: 360px) {
63
- .bank-card__label_7e341 {
63
+ .bank-card__label_nvf16 {
64
64
  font-size: 16px
65
65
  }
66
66
  }
67
- .bank-card__focused_7e341 .bank-card__label_7e341,
68
- .bank-card__filled_7e341 .bank-card__label_7e341 {
67
+ .bank-card__focused_nvf16 .bank-card__label_nvf16,
68
+ .bank-card__filled_nvf16 .bank-card__label_nvf16 {
69
69
  color: var(--color-black);
70
70
  transform: translateY(-19px) scale(0.6)
71
71
  }
72
72
  @media (max-width: 360px) {
73
- .bank-card__focused_7e341 .bank-card__label_7e341,
74
- .bank-card__filled_7e341 .bank-card__label_7e341 {
73
+ .bank-card__focused_nvf16 .bank-card__label_nvf16,
74
+ .bank-card__filled_nvf16 .bank-card__label_nvf16 {
75
75
  transform: translateY(-22px) scale(0.75)
76
76
  }
77
77
  }
78
- .bank-card__focused_7e341:before {
78
+ .bank-card__focused_nvf16:before {
79
79
  transform: scale(1) !important;
80
80
  }
81
- .bank-card__input_7e341 {
81
+ .bank-card__input_nvf16 {
82
82
  font-size: 20px;
83
83
  line-height: 24px;
84
84
  font-weight: 400;
@@ -92,33 +92,33 @@
92
92
  padding-left: 0 !important
93
93
  }
94
94
  @media (max-width: 360px) {
95
- .bank-card__input_7e341 {
95
+ .bank-card__input_nvf16 {
96
96
  font-size: 16px
97
97
  }
98
98
  }
99
- .bank-card__bankLogo_7e341 {
99
+ .bank-card__bankLogo_nvf16 {
100
100
  position: absolute;
101
101
  top: 20px;
102
102
  left: 20px
103
103
  }
104
- .bank-card__bankLogo_7e341 svg {
104
+ .bank-card__bankLogo_nvf16 svg {
105
105
  max-height: 30px;
106
106
  width: auto;
107
107
  display: block
108
108
  }
109
- .bank-card__bankLogo_7e341 svg g {
109
+ .bank-card__bankLogo_nvf16 svg g {
110
110
  fill: var(--color-black);
111
111
  }
112
- .bank-card__brandLogo_7e341 {
112
+ .bank-card__brandLogo_nvf16 {
113
113
  position: absolute;
114
114
  bottom: 20px;
115
115
  right: 20px
116
116
  }
117
- .bank-card__brandLogo_7e341 svg {
117
+ .bank-card__brandLogo_nvf16 svg {
118
118
  display: block;
119
119
  fill: var(--color-black);
120
120
  }
121
- .bank-card__usePhoto_7e341 {
121
+ .bank-card__usePhoto_nvf16 {
122
122
  display: block;
123
123
  margin: 0;
124
124
  padding: 0;
@@ -136,7 +136,7 @@
136
136
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
137
137
  margin-right: calc(var(--gap-s) * -1)
138
138
  }
139
- .bank-card__usePhoto_7e341 svg {
139
+ .bank-card__usePhoto_nvf16 svg {
140
140
  fill: var(--color-black);
141
141
  display: block;
142
142
  }
package/dist/modern/index.js CHANGED
@@ -3,6 +3,8 @@ import 'classnames';
3
3
  import '@alfalab/core-components-masked-input/dist/modern';
4
4
  import '@alfalab/icons-classic/BankAlfaLColorIcon';
5
5
  import '@alfalab/icons-glyph/CameraMIcon';
6
- import '@alfalab/icons-logotype';
6
+ import '@alfalab/icons-logotype/VisaXxlIcon';
7
+ import '@alfalab/icons-logotype/MastercardLIcon';
8
+ import '@alfalab/icons-logotype/MirXxlIcon';
7
9
  export { BankCard } from './Component.js';
8
10
  import './utils.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-bank-card",
3
- "version": "4.1.13",
3
+ "version": "4.2.1",
4
4
  "description": "Bank card component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -20,11 +20,11 @@
20
20
  "react-dom": "^16.9.0 || ^17.0.1"
21
21
  },
22
22
  "dependencies": {
23
- "@alfalab/core-components-masked-input": "^4.2.13",
23
+ "@alfalab/core-components-masked-input": "^4.3.1",
24
24
  "@alfalab/icons-classic": "^1.76.0",
25
- "@alfalab/icons-glyph": "^1.190.0",
25
+ "@alfalab/icons-glyph": "^2.16.0",
26
26
  "@alfalab/icons-logotype": "^1.28.0",
27
- "classnames": "^2.2.6"
27
+ "classnames": "2.2.6"
28
28
  },
29
- "gitHead": "07e0a3991a53623ef78766790ea2c1b06049f31f"
29
+ "gitHead": "0363f194b7d8e6d2949795b8f0570262d7028aff"
30
30
  }