@alfalab/core-components-bank-card 5.2.1 → 5.2.3

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 (17) hide show
  1. package/Component.d.ts +1 -1
  2. package/Component.js +4 -4
  3. package/cssm/Component.d.ts +1 -1
  4. package/cssm/Component.js +4 -4
  5. package/cssm/index.js +3 -3
  6. package/cssm/index.module.css +5 -3
  7. package/esm/Component.d.ts +1 -1
  8. package/esm/Component.js +4 -4
  9. package/esm/index.css +25 -23
  10. package/esm/index.js +3 -3
  11. package/index.css +25 -23
  12. package/index.js +3 -3
  13. package/modern/Component.d.ts +1 -1
  14. package/modern/Component.js +4 -4
  15. package/modern/index.css +25 -23
  16. package/modern/index.js +3 -3
  17. package/package.json +2 -2
package/Component.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { MouseEvent, ReactNode, ChangeEvent } from "react";
3
+ import { ChangeEvent, MouseEvent, ReactNode } from "react";
4
4
  type BankCardProps = {
5
5
  /**
6
6
  * Дополнительный класс
package/Component.js CHANGED
@@ -5,11 +5,11 @@ 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 AlfaBankLIcon = require('@alfalab/icons-logotype/AlfaBankLIcon');
9
8
  var CameraMIcon = require('@alfalab/icons-glyph/CameraMIcon');
10
- var VisaXxlIcon = require('@alfalab/icons-logotype/VisaXxlIcon');
9
+ var AlfaBankLIcon = require('@alfalab/icons-logotype/AlfaBankLIcon');
11
10
  var MastercardLIcon = require('@alfalab/icons-logotype/MastercardLIcon');
12
11
  var MirXxlIcon = require('@alfalab/icons-logotype/MirXxlIcon');
12
+ var VisaXxlIcon = require('@alfalab/icons-logotype/VisaXxlIcon');
13
13
  var utils = require('./utils.js');
14
14
 
15
15
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -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_1520p","aspectRatioContainer":"bank-card__aspectRatioContainer_1520p","content":"bank-card__content_1520p","label":"bank-card__label_1520p","focused":"bank-card__focused_1520p","filled":"bank-card__filled_1520p","input":"bank-card__input_1520p","bankLogo":"bank-card__bankLogo_1520p","brandLogo":"bank-card__brandLogo_1520p","usePhoto":"bank-card__usePhoto_1520p"};
20
+ var styles = {"component":"bank-card__component_1tym0","aspectRatioContainer":"bank-card__aspectRatioContainer_1tym0","content":"bank-card__content_1tym0","label":"bank-card__label_1tym0","focused":"bank-card__focused_1tym0","filled":"bank-card__filled_1tym0","input":"bank-card__input_1tym0","bankLogo":"bank-card__bankLogo_1tym0","brandLogo":"bank-card__brandLogo_1tym0","usePhoto":"bank-card__usePhoto_1tym0"};
21
21
  require('./index.css')
22
22
 
23
23
  // prettier-ignore
@@ -63,7 +63,7 @@ var BankCard = React__default['default'].forwardRef(function (_a, ref) {
63
63
  React__default['default'].createElement("div", { className: styles.aspectRatioContainer },
64
64
  React__default['default'].createElement("div", { className: styles.content, style: { backgroundColor: backgroundColor } },
65
65
  React__default['default'].createElement("div", { className: styles.bankLogo }, bankLogo),
66
- React__default['default'].createElement(coreComponentsMaskedInput.MaskedInput, { ref: ref, value: value, mask: getMask, block: true, label: inputLabel, rightAddons: renderRightAddons(), inputClassName: styles.input, labelClassName: styles.label, filledClassName: styles.filled, focusedClassName: styles.focused, onChange: handleInputChange, dataTestId: dataTestId, inputMode: 'numeric', pattern: '[0-9]*' }),
66
+ React__default['default'].createElement(coreComponentsMaskedInput.MaskedInput, { ref: ref, value: value, mask: getMask, block: true, label: inputLabel, size: 'm', rightAddons: renderRightAddons(), inputClassName: styles.input, labelClassName: styles.label, filledClassName: styles.filled, focusedClassName: styles.focused, onChange: handleInputChange, dataTestId: dataTestId, inputMode: 'numeric', pattern: '[0-9]*' }),
67
67
  brandIcon && React__default['default'].createElement("div", { className: styles.brandLogo }, brandIcon)))));
68
68
  });
69
69
  BankCard.defaultProps = {
package/cssm/Component.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { MouseEvent, ReactNode, ChangeEvent } from "react";
3
+ import { ChangeEvent, MouseEvent, ReactNode } from "react";
4
4
  type BankCardProps = {
5
5
  /**
6
6
  * Дополнительный класс
package/cssm/Component.js CHANGED
@@ -5,13 +5,13 @@ 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 AlfaBankLIcon = require('@alfalab/icons-logotype/AlfaBankLIcon');
9
8
  var CameraMIcon = require('@alfalab/icons-glyph/CameraMIcon');
10
- var VisaXxlIcon = require('@alfalab/icons-logotype/VisaXxlIcon');
9
+ var AlfaBankLIcon = require('@alfalab/icons-logotype/AlfaBankLIcon');
11
10
  var MastercardLIcon = require('@alfalab/icons-logotype/MastercardLIcon');
12
11
  var MirXxlIcon = require('@alfalab/icons-logotype/MirXxlIcon');
13
- var styles = require('./index.module.css');
12
+ var VisaXxlIcon = require('@alfalab/icons-logotype/VisaXxlIcon');
14
13
  var utils = require('./utils.js');
14
+ var styles = require('./index.module.css');
15
15
 
16
16
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
17
17
 
@@ -62,7 +62,7 @@ var BankCard = React__default['default'].forwardRef(function (_a, ref) {
62
62
  React__default['default'].createElement("div", { className: styles__default['default'].aspectRatioContainer },
63
63
  React__default['default'].createElement("div", { className: styles__default['default'].content, style: { backgroundColor: backgroundColor } },
64
64
  React__default['default'].createElement("div", { className: styles__default['default'].bankLogo }, bankLogo),
65
- React__default['default'].createElement(coreComponentsMaskedInput.MaskedInput, { ref: ref, value: value, mask: getMask, block: true, label: inputLabel, rightAddons: renderRightAddons(), inputClassName: styles__default['default'].input, labelClassName: styles__default['default'].label, filledClassName: styles__default['default'].filled, focusedClassName: styles__default['default'].focused, onChange: handleInputChange, dataTestId: dataTestId, inputMode: 'numeric', pattern: '[0-9]*' }),
65
+ React__default['default'].createElement(coreComponentsMaskedInput.MaskedInput, { ref: ref, value: value, mask: getMask, block: true, label: inputLabel, size: 'm', rightAddons: renderRightAddons(), inputClassName: styles__default['default'].input, labelClassName: styles__default['default'].label, filledClassName: styles__default['default'].filled, focusedClassName: styles__default['default'].focused, onChange: handleInputChange, dataTestId: dataTestId, inputMode: 'numeric', pattern: '[0-9]*' }),
66
66
  brandIcon && React__default['default'].createElement("div", { className: styles__default['default'].brandLogo }, brandIcon)))));
67
67
  });
68
68
  BankCard.defaultProps = {
package/cssm/index.js CHANGED
@@ -5,13 +5,13 @@ 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-logotype/AlfaBankLIcon');
9
8
  require('@alfalab/icons-glyph/CameraMIcon');
10
- require('@alfalab/icons-logotype/VisaXxlIcon');
9
+ require('@alfalab/icons-logotype/AlfaBankLIcon');
11
10
  require('@alfalab/icons-logotype/MastercardLIcon');
12
11
  require('@alfalab/icons-logotype/MirXxlIcon');
13
- require('./index.module.css');
12
+ require('@alfalab/icons-logotype/VisaXxlIcon');
14
13
  require('./utils.js');
14
+ require('./index.module.css');
15
15
  var Component = require('./Component.js');
16
16
 
17
17
 
package/cssm/index.module.css CHANGED
@@ -30,6 +30,7 @@
30
30
 
31
31
  /* focus */
32
32
  --form-control-focus-border-bottom: 1px solid var(--color-black);
33
+ --form-control-focus-shadow: transparent;
33
34
 
34
35
  /* hover */
35
36
  --form-control-hover-bg-color: transparent;
@@ -42,8 +43,8 @@
42
43
  font-family: var(--font-family-styrene);
43
44
  }
44
45
  .aspectRatioContainer {
45
- /* Эталонный размер 343x215 */
46
- padding-bottom: 62.6%;
46
+ /* Эталонный размер 343x216 */
47
+ padding-bottom: 63%;
47
48
  }
48
49
  .content {
49
50
  position: absolute;
@@ -95,7 +96,8 @@
95
96
  caret-color: var(--color-black);
96
97
 
97
98
  /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
98
- padding-left: 0 !important
99
+ padding-left: 0 !important;
100
+ padding-bottom: 4px !important
99
101
  }
100
102
  @media (max-width: 360px) {
101
103
  .input {
package/esm/Component.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { MouseEvent, ReactNode, ChangeEvent } from "react";
3
+ import { ChangeEvent, MouseEvent, ReactNode } from "react";
4
4
  type BankCardProps = {
5
5
  /**
6
6
  * Дополнительный класс
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 { AlfaBankLIcon } from '@alfalab/icons-logotype/AlfaBankLIcon';
5
4
  import { CameraMIcon } from '@alfalab/icons-glyph/CameraMIcon';
6
- import { VisaXxlIcon } from '@alfalab/icons-logotype/VisaXxlIcon';
5
+ import { AlfaBankLIcon } from '@alfalab/icons-logotype/AlfaBankLIcon';
7
6
  import { MastercardLIcon } from '@alfalab/icons-logotype/MastercardLIcon';
8
7
  import { MirXxlIcon } from '@alfalab/icons-logotype/MirXxlIcon';
8
+ import { VisaXxlIcon } from '@alfalab/icons-logotype/VisaXxlIcon';
9
9
  import { validateCardNumber } from './utils.js';
10
10
 
11
- var styles = {"component":"bank-card__component_1520p","aspectRatioContainer":"bank-card__aspectRatioContainer_1520p","content":"bank-card__content_1520p","label":"bank-card__label_1520p","focused":"bank-card__focused_1520p","filled":"bank-card__filled_1520p","input":"bank-card__input_1520p","bankLogo":"bank-card__bankLogo_1520p","brandLogo":"bank-card__brandLogo_1520p","usePhoto":"bank-card__usePhoto_1520p"};
11
+ var styles = {"component":"bank-card__component_1tym0","aspectRatioContainer":"bank-card__aspectRatioContainer_1tym0","content":"bank-card__content_1tym0","label":"bank-card__label_1tym0","focused":"bank-card__focused_1tym0","filled":"bank-card__filled_1tym0","input":"bank-card__input_1tym0","bankLogo":"bank-card__bankLogo_1tym0","brandLogo":"bank-card__brandLogo_1tym0","usePhoto":"bank-card__usePhoto_1tym0"};
12
12
  require('./index.css')
13
13
 
14
14
  // prettier-ignore
@@ -54,7 +54,7 @@ var BankCard = React.forwardRef(function (_a, ref) {
54
54
  React.createElement("div", { className: styles.aspectRatioContainer },
55
55
  React.createElement("div", { className: styles.content, style: { backgroundColor: backgroundColor } },
56
56
  React.createElement("div", { className: styles.bankLogo }, bankLogo),
57
- React.createElement(MaskedInput, { ref: ref, value: value, mask: getMask, block: true, label: inputLabel, rightAddons: renderRightAddons(), inputClassName: styles.input, labelClassName: styles.label, filledClassName: styles.filled, focusedClassName: styles.focused, onChange: handleInputChange, dataTestId: dataTestId, inputMode: 'numeric', pattern: '[0-9]*' }),
57
+ React.createElement(MaskedInput, { ref: ref, value: value, mask: getMask, block: true, label: inputLabel, size: 'm', rightAddons: renderRightAddons(), inputClassName: styles.input, labelClassName: styles.label, filledClassName: styles.filled, focusedClassName: styles.focused, onChange: handleInputChange, dataTestId: dataTestId, inputMode: 'numeric', pattern: '[0-9]*' }),
58
58
  brandIcon && React.createElement("div", { className: styles.brandLogo }, brandIcon)))));
59
59
  });
60
60
  BankCard.defaultProps = {
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1pp0w */
1
+ /* hash: xs6do */
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_1520p {
26
+ .bank-card__component_1tym0 {
27
27
  /* TODO: как это будет собираться и работать в webView */
28
28
  --form-control-border-radius: 0;
29
29
  --form-control-border-bottom: 1px solid var(--color-black-60);
@@ -31,6 +31,7 @@
31
31
 
32
32
  /* focus */
33
33
  --form-control-focus-border-bottom: 1px solid var(--color-black);
34
+ --form-control-focus-shadow: transparent;
34
35
 
35
36
  /* hover */
36
37
  --form-control-hover-bg-color: transparent;
@@ -42,11 +43,11 @@
42
43
 
43
44
  font-family: var(--font-family-styrene);
44
45
  }
45
- .bank-card__aspectRatioContainer_1520p {
46
- /* Эталонный размер 343x215 */
47
- padding-bottom: 62.6%;
46
+ .bank-card__aspectRatioContainer_1tym0 {
47
+ /* Эталонный размер 343x216 */
48
+ padding-bottom: 63%;
48
49
  }
49
- .bank-card__content_1520p {
50
+ .bank-card__content_1tym0 {
50
51
  position: absolute;
51
52
  top: 0;
52
53
  right: 0;
@@ -59,7 +60,7 @@
59
60
  border-radius: var(--border-radius-l);
60
61
  box-sizing: border-box;
61
62
  }
62
- .bank-card__label_1520p {
63
+ .bank-card__label_1tym0 {
63
64
  left: 0;
64
65
  transform: translateY(-1px);
65
66
  color: var(--color-black-60);
@@ -67,25 +68,25 @@
67
68
  line-height: 24px
68
69
  }
69
70
  @media (max-width: 360px) {
70
- .bank-card__label_1520p {
71
+ .bank-card__label_1tym0 {
71
72
  font-size: 16px
72
73
  }
73
74
  }
74
- .bank-card__focused_1520p .bank-card__label_1520p,
75
- .bank-card__filled_1520p .bank-card__label_1520p {
75
+ .bank-card__focused_1tym0 .bank-card__label_1tym0,
76
+ .bank-card__filled_1tym0 .bank-card__label_1tym0 {
76
77
  color: var(--color-black);
77
78
  transform: translateY(-19px) scale(0.6)
78
79
  }
79
80
  @media (max-width: 360px) {
80
- .bank-card__focused_1520p .bank-card__label_1520p,
81
- .bank-card__filled_1520p .bank-card__label_1520p {
81
+ .bank-card__focused_1tym0 .bank-card__label_1tym0,
82
+ .bank-card__filled_1tym0 .bank-card__label_1tym0 {
82
83
  transform: translateY(-22px) scale(0.75)
83
84
  }
84
85
  }
85
- .bank-card__focused_1520p:before {
86
+ .bank-card__focused_1tym0:before {
86
87
  transform: scale(1) !important;
87
88
  }
88
- .bank-card__input_1520p {
89
+ .bank-card__input_1tym0 {
89
90
  font-size: 20px;
90
91
  line-height: 24px;
91
92
  font-weight: 400;
@@ -96,36 +97,37 @@
96
97
  caret-color: var(--color-black);
97
98
 
98
99
  /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
99
- padding-left: 0 !important
100
+ padding-left: 0 !important;
101
+ padding-bottom: 4px !important
100
102
  }
101
103
  @media (max-width: 360px) {
102
- .bank-card__input_1520p {
104
+ .bank-card__input_1tym0 {
103
105
  font-size: 16px
104
106
  }
105
107
  }
106
- .bank-card__bankLogo_1520p {
108
+ .bank-card__bankLogo_1tym0 {
107
109
  position: absolute;
108
110
  top: 20px;
109
111
  left: 20px
110
112
  }
111
- .bank-card__bankLogo_1520p svg {
113
+ .bank-card__bankLogo_1tym0 svg {
112
114
  max-height: 32px;
113
115
  width: auto;
114
116
  display: block
115
117
  }
116
- .bank-card__bankLogo_1520p svg g {
118
+ .bank-card__bankLogo_1tym0 svg g {
117
119
  fill: var(--color-black);
118
120
  }
119
- .bank-card__brandLogo_1520p {
121
+ .bank-card__brandLogo_1tym0 {
120
122
  position: absolute;
121
123
  bottom: 20px;
122
124
  right: 20px
123
125
  }
124
- .bank-card__brandLogo_1520p svg {
126
+ .bank-card__brandLogo_1tym0 svg {
125
127
  display: block;
126
128
  fill: var(--color-black);
127
129
  }
128
- .bank-card__usePhoto_1520p {
130
+ .bank-card__usePhoto_1tym0 {
129
131
  display: block;
130
132
  margin: 0;
131
133
  padding: 0;
@@ -143,7 +145,7 @@
143
145
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
144
146
  margin-right: calc(var(--gap-s) * -1)
145
147
  }
146
- .bank-card__usePhoto_1520p svg {
148
+ .bank-card__usePhoto_1tym0 svg {
147
149
  fill: var(--color-black);
148
150
  display: block;
149
151
  }
package/esm/index.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import 'react';
2
2
  import 'classnames';
3
3
  import '@alfalab/core-components-masked-input/esm';
4
- import '@alfalab/icons-logotype/AlfaBankLIcon';
5
4
  import '@alfalab/icons-glyph/CameraMIcon';
6
- import '@alfalab/icons-logotype/VisaXxlIcon';
5
+ import '@alfalab/icons-logotype/AlfaBankLIcon';
7
6
  import '@alfalab/icons-logotype/MastercardLIcon';
8
7
  import '@alfalab/icons-logotype/MirXxlIcon';
9
- export { BankCard } from './Component.js';
8
+ import '@alfalab/icons-logotype/VisaXxlIcon';
10
9
  import './utils.js';
10
+ export { BankCard } from './Component.js';
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1pp0w */
1
+ /* hash: xs6do */
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_1520p {
26
+ .bank-card__component_1tym0 {
27
27
  /* TODO: как это будет собираться и работать в webView */
28
28
  --form-control-border-radius: 0;
29
29
  --form-control-border-bottom: 1px solid var(--color-black-60);
@@ -31,6 +31,7 @@
31
31
 
32
32
  /* focus */
33
33
  --form-control-focus-border-bottom: 1px solid var(--color-black);
34
+ --form-control-focus-shadow: transparent;
34
35
 
35
36
  /* hover */
36
37
  --form-control-hover-bg-color: transparent;
@@ -42,11 +43,11 @@
42
43
 
43
44
  font-family: var(--font-family-styrene);
44
45
  }
45
- .bank-card__aspectRatioContainer_1520p {
46
- /* Эталонный размер 343x215 */
47
- padding-bottom: 62.6%;
46
+ .bank-card__aspectRatioContainer_1tym0 {
47
+ /* Эталонный размер 343x216 */
48
+ padding-bottom: 63%;
48
49
  }
49
- .bank-card__content_1520p {
50
+ .bank-card__content_1tym0 {
50
51
  position: absolute;
51
52
  top: 0;
52
53
  right: 0;
@@ -59,7 +60,7 @@
59
60
  border-radius: var(--border-radius-l);
60
61
  box-sizing: border-box;
61
62
  }
62
- .bank-card__label_1520p {
63
+ .bank-card__label_1tym0 {
63
64
  left: 0;
64
65
  transform: translateY(-1px);
65
66
  color: var(--color-black-60);
@@ -67,25 +68,25 @@
67
68
  line-height: 24px
68
69
  }
69
70
  @media (max-width: 360px) {
70
- .bank-card__label_1520p {
71
+ .bank-card__label_1tym0 {
71
72
  font-size: 16px
72
73
  }
73
74
  }
74
- .bank-card__focused_1520p .bank-card__label_1520p,
75
- .bank-card__filled_1520p .bank-card__label_1520p {
75
+ .bank-card__focused_1tym0 .bank-card__label_1tym0,
76
+ .bank-card__filled_1tym0 .bank-card__label_1tym0 {
76
77
  color: var(--color-black);
77
78
  transform: translateY(-19px) scale(0.6)
78
79
  }
79
80
  @media (max-width: 360px) {
80
- .bank-card__focused_1520p .bank-card__label_1520p,
81
- .bank-card__filled_1520p .bank-card__label_1520p {
81
+ .bank-card__focused_1tym0 .bank-card__label_1tym0,
82
+ .bank-card__filled_1tym0 .bank-card__label_1tym0 {
82
83
  transform: translateY(-22px) scale(0.75)
83
84
  }
84
85
  }
85
- .bank-card__focused_1520p:before {
86
+ .bank-card__focused_1tym0:before {
86
87
  transform: scale(1) !important;
87
88
  }
88
- .bank-card__input_1520p {
89
+ .bank-card__input_1tym0 {
89
90
  font-size: 20px;
90
91
  line-height: 24px;
91
92
  font-weight: 400;
@@ -96,36 +97,37 @@
96
97
  caret-color: var(--color-black);
97
98
 
98
99
  /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
99
- padding-left: 0 !important
100
+ padding-left: 0 !important;
101
+ padding-bottom: 4px !important
100
102
  }
101
103
  @media (max-width: 360px) {
102
- .bank-card__input_1520p {
104
+ .bank-card__input_1tym0 {
103
105
  font-size: 16px
104
106
  }
105
107
  }
106
- .bank-card__bankLogo_1520p {
108
+ .bank-card__bankLogo_1tym0 {
107
109
  position: absolute;
108
110
  top: 20px;
109
111
  left: 20px
110
112
  }
111
- .bank-card__bankLogo_1520p svg {
113
+ .bank-card__bankLogo_1tym0 svg {
112
114
  max-height: 32px;
113
115
  width: auto;
114
116
  display: block
115
117
  }
116
- .bank-card__bankLogo_1520p svg g {
118
+ .bank-card__bankLogo_1tym0 svg g {
117
119
  fill: var(--color-black);
118
120
  }
119
- .bank-card__brandLogo_1520p {
121
+ .bank-card__brandLogo_1tym0 {
120
122
  position: absolute;
121
123
  bottom: 20px;
122
124
  right: 20px
123
125
  }
124
- .bank-card__brandLogo_1520p svg {
126
+ .bank-card__brandLogo_1tym0 svg {
125
127
  display: block;
126
128
  fill: var(--color-black);
127
129
  }
128
- .bank-card__usePhoto_1520p {
130
+ .bank-card__usePhoto_1tym0 {
129
131
  display: block;
130
132
  margin: 0;
131
133
  padding: 0;
@@ -143,7 +145,7 @@
143
145
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
144
146
  margin-right: calc(var(--gap-s) * -1)
145
147
  }
146
- .bank-card__usePhoto_1520p svg {
148
+ .bank-card__usePhoto_1tym0 svg {
147
149
  fill: var(--color-black);
148
150
  display: block;
149
151
  }
package/index.js CHANGED
@@ -5,13 +5,13 @@ 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-logotype/AlfaBankLIcon');
9
8
  require('@alfalab/icons-glyph/CameraMIcon');
10
- require('@alfalab/icons-logotype/VisaXxlIcon');
9
+ require('@alfalab/icons-logotype/AlfaBankLIcon');
11
10
  require('@alfalab/icons-logotype/MastercardLIcon');
12
11
  require('@alfalab/icons-logotype/MirXxlIcon');
13
- var Component = require('./Component.js');
12
+ require('@alfalab/icons-logotype/VisaXxlIcon');
14
13
  require('./utils.js');
14
+ var Component = require('./Component.js');
15
15
 
16
16
 
17
17
 
package/modern/Component.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { MouseEvent, ReactNode, ChangeEvent } from "react";
3
+ import { ChangeEvent, MouseEvent, ReactNode } from "react";
4
4
  type BankCardProps = {
5
5
  /**
6
6
  * Дополнительный класс
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 { AlfaBankLIcon } from '@alfalab/icons-logotype/AlfaBankLIcon';
5
4
  import { CameraMIcon } from '@alfalab/icons-glyph/CameraMIcon';
6
- import { VisaXxlIcon } from '@alfalab/icons-logotype/VisaXxlIcon';
5
+ import { AlfaBankLIcon } from '@alfalab/icons-logotype/AlfaBankLIcon';
7
6
  import { MastercardLIcon } from '@alfalab/icons-logotype/MastercardLIcon';
8
7
  import { MirXxlIcon } from '@alfalab/icons-logotype/MirXxlIcon';
8
+ import { VisaXxlIcon } from '@alfalab/icons-logotype/VisaXxlIcon';
9
9
  import { validateCardNumber } from './utils.js';
10
10
 
11
- var styles = {"component":"bank-card__component_1520p","aspectRatioContainer":"bank-card__aspectRatioContainer_1520p","content":"bank-card__content_1520p","label":"bank-card__label_1520p","focused":"bank-card__focused_1520p","filled":"bank-card__filled_1520p","input":"bank-card__input_1520p","bankLogo":"bank-card__bankLogo_1520p","brandLogo":"bank-card__brandLogo_1520p","usePhoto":"bank-card__usePhoto_1520p"};
11
+ var styles = {"component":"bank-card__component_1tym0","aspectRatioContainer":"bank-card__aspectRatioContainer_1tym0","content":"bank-card__content_1tym0","label":"bank-card__label_1tym0","focused":"bank-card__focused_1tym0","filled":"bank-card__filled_1tym0","input":"bank-card__input_1tym0","bankLogo":"bank-card__bankLogo_1tym0","brandLogo":"bank-card__brandLogo_1tym0","usePhoto":"bank-card__usePhoto_1tym0"};
12
12
  require('./index.css')
13
13
 
14
14
  // prettier-ignore
@@ -50,7 +50,7 @@ const BankCard = React.forwardRef(({ bankLogo = React.createElement(AlfaBankLIco
50
50
  React.createElement("div", { className: styles.aspectRatioContainer },
51
51
  React.createElement("div", { className: styles.content, style: { backgroundColor } },
52
52
  React.createElement("div", { className: styles.bankLogo }, bankLogo),
53
- React.createElement(MaskedInput, { ref: ref, value: value, mask: getMask, block: true, label: inputLabel, rightAddons: renderRightAddons(), inputClassName: styles.input, labelClassName: styles.label, filledClassName: styles.filled, focusedClassName: styles.focused, onChange: handleInputChange, dataTestId: dataTestId, inputMode: 'numeric', pattern: '[0-9]*' }),
53
+ React.createElement(MaskedInput, { ref: ref, value: value, mask: getMask, block: true, label: inputLabel, size: 'm', rightAddons: renderRightAddons(), inputClassName: styles.input, labelClassName: styles.label, filledClassName: styles.filled, focusedClassName: styles.focused, onChange: handleInputChange, dataTestId: dataTestId, inputMode: 'numeric', pattern: '[0-9]*' }),
54
54
  brandIcon && React.createElement("div", { className: styles.brandLogo }, brandIcon)))));
55
55
  });
56
56
  BankCard.defaultProps = {
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1pp0w */
1
+ /* hash: xs6do */
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_1520p {
26
+ .bank-card__component_1tym0 {
27
27
  /* TODO: как это будет собираться и работать в webView */
28
28
  --form-control-border-radius: 0;
29
29
  --form-control-border-bottom: 1px solid var(--color-black-60);
@@ -31,6 +31,7 @@
31
31
 
32
32
  /* focus */
33
33
  --form-control-focus-border-bottom: 1px solid var(--color-black);
34
+ --form-control-focus-shadow: transparent;
34
35
 
35
36
  /* hover */
36
37
  --form-control-hover-bg-color: transparent;
@@ -42,11 +43,11 @@
42
43
 
43
44
  font-family: var(--font-family-styrene);
44
45
  }
45
- .bank-card__aspectRatioContainer_1520p {
46
- /* Эталонный размер 343x215 */
47
- padding-bottom: 62.6%;
46
+ .bank-card__aspectRatioContainer_1tym0 {
47
+ /* Эталонный размер 343x216 */
48
+ padding-bottom: 63%;
48
49
  }
49
- .bank-card__content_1520p {
50
+ .bank-card__content_1tym0 {
50
51
  position: absolute;
51
52
  top: 0;
52
53
  right: 0;
@@ -59,7 +60,7 @@
59
60
  border-radius: var(--border-radius-l);
60
61
  box-sizing: border-box;
61
62
  }
62
- .bank-card__label_1520p {
63
+ .bank-card__label_1tym0 {
63
64
  left: 0;
64
65
  transform: translateY(-1px);
65
66
  color: var(--color-black-60);
@@ -67,25 +68,25 @@
67
68
  line-height: 24px
68
69
  }
69
70
  @media (max-width: 360px) {
70
- .bank-card__label_1520p {
71
+ .bank-card__label_1tym0 {
71
72
  font-size: 16px
72
73
  }
73
74
  }
74
- .bank-card__focused_1520p .bank-card__label_1520p,
75
- .bank-card__filled_1520p .bank-card__label_1520p {
75
+ .bank-card__focused_1tym0 .bank-card__label_1tym0,
76
+ .bank-card__filled_1tym0 .bank-card__label_1tym0 {
76
77
  color: var(--color-black);
77
78
  transform: translateY(-19px) scale(0.6)
78
79
  }
79
80
  @media (max-width: 360px) {
80
- .bank-card__focused_1520p .bank-card__label_1520p,
81
- .bank-card__filled_1520p .bank-card__label_1520p {
81
+ .bank-card__focused_1tym0 .bank-card__label_1tym0,
82
+ .bank-card__filled_1tym0 .bank-card__label_1tym0 {
82
83
  transform: translateY(-22px) scale(0.75)
83
84
  }
84
85
  }
85
- .bank-card__focused_1520p:before {
86
+ .bank-card__focused_1tym0:before {
86
87
  transform: scale(1) !important;
87
88
  }
88
- .bank-card__input_1520p {
89
+ .bank-card__input_1tym0 {
89
90
  font-size: 20px;
90
91
  line-height: 24px;
91
92
  font-weight: 400;
@@ -96,36 +97,37 @@
96
97
  caret-color: var(--color-black);
97
98
 
98
99
  /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
99
- padding-left: 0 !important
100
+ padding-left: 0 !important;
101
+ padding-bottom: 4px !important
100
102
  }
101
103
  @media (max-width: 360px) {
102
- .bank-card__input_1520p {
104
+ .bank-card__input_1tym0 {
103
105
  font-size: 16px
104
106
  }
105
107
  }
106
- .bank-card__bankLogo_1520p {
108
+ .bank-card__bankLogo_1tym0 {
107
109
  position: absolute;
108
110
  top: 20px;
109
111
  left: 20px
110
112
  }
111
- .bank-card__bankLogo_1520p svg {
113
+ .bank-card__bankLogo_1tym0 svg {
112
114
  max-height: 32px;
113
115
  width: auto;
114
116
  display: block
115
117
  }
116
- .bank-card__bankLogo_1520p svg g {
118
+ .bank-card__bankLogo_1tym0 svg g {
117
119
  fill: var(--color-black);
118
120
  }
119
- .bank-card__brandLogo_1520p {
121
+ .bank-card__brandLogo_1tym0 {
120
122
  position: absolute;
121
123
  bottom: 20px;
122
124
  right: 20px
123
125
  }
124
- .bank-card__brandLogo_1520p svg {
126
+ .bank-card__brandLogo_1tym0 svg {
125
127
  display: block;
126
128
  fill: var(--color-black);
127
129
  }
128
- .bank-card__usePhoto_1520p {
130
+ .bank-card__usePhoto_1tym0 {
129
131
  display: block;
130
132
  margin: 0;
131
133
  padding: 0;
@@ -143,7 +145,7 @@
143
145
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
144
146
  margin-right: calc(var(--gap-s) * -1)
145
147
  }
146
- .bank-card__usePhoto_1520p svg {
148
+ .bank-card__usePhoto_1tym0 svg {
147
149
  fill: var(--color-black);
148
150
  display: block;
149
151
  }
package/modern/index.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import 'react';
2
2
  import 'classnames';
3
3
  import '@alfalab/core-components-masked-input/modern';
4
- import '@alfalab/icons-logotype/AlfaBankLIcon';
5
4
  import '@alfalab/icons-glyph/CameraMIcon';
6
- import '@alfalab/icons-logotype/VisaXxlIcon';
5
+ import '@alfalab/icons-logotype/AlfaBankLIcon';
7
6
  import '@alfalab/icons-logotype/MastercardLIcon';
8
7
  import '@alfalab/icons-logotype/MirXxlIcon';
9
- export { BankCard } from './Component.js';
8
+ import '@alfalab/icons-logotype/VisaXxlIcon';
10
9
  import './utils.js';
10
+ export { BankCard } from './Component.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-bank-card",
3
- "version": "5.2.1",
3
+ "version": "5.2.3",
4
4
  "description": "Bank card component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -18,7 +18,7 @@
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.9",
21
+ "@alfalab/core-components-masked-input": "^6.0.0",
22
22
  "@alfalab/icons-glyph": "^2.71.0",
23
23
  "@alfalab/icons-logotype": "^2.19.0",
24
24
  "classnames": "^2.3.1"