@alfalab/core-components-bank-card 5.7.12 → 5.8.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 (22) hide show
  1. package/Component.js +1 -1
  2. package/cssm/index.module.css +8 -5
  3. package/esm/Component.js +1 -1
  4. package/esm/index.css +28 -25
  5. package/index.css +28 -25
  6. package/modern/Component.js +1 -1
  7. package/modern/index.css +28 -25
  8. package/moderncssm/Component.d.ts +47 -0
  9. package/moderncssm/Component.js +68 -0
  10. package/moderncssm/enums.d.ts +6 -0
  11. package/moderncssm/enums.js +8 -0
  12. package/moderncssm/helpers/getDefaultInputLabel.d.ts +3 -0
  13. package/moderncssm/helpers/getDefaultInputLabel.js +15 -0
  14. package/moderncssm/index.d.ts +1 -0
  15. package/moderncssm/index.js +1 -0
  16. package/moderncssm/index.module.css +147 -0
  17. package/moderncssm/types.d.ts +2 -0
  18. package/moderncssm/types.js +1 -0
  19. package/moderncssm/utils.d.ts +8 -0
  20. package/moderncssm/utils.js +25 -0
  21. package/package.json +4 -4
  22. package/src/index.module.css +6 -6
package/Component.js CHANGED
@@ -19,7 +19,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
19
19
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
20
20
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
21
21
 
22
- var styles = {"component":"bank-card__component_1nnz2","aspectRatioContainer":"bank-card__aspectRatioContainer_1nnz2","content":"bank-card__content_1nnz2","label":"bank-card__label_1nnz2","focused":"bank-card__focused_1nnz2","filled":"bank-card__filled_1nnz2","input":"bank-card__input_1nnz2","bankLogo":"bank-card__bankLogo_1nnz2","brandLogo":"bank-card__brandLogo_1nnz2","usePhoto":"bank-card__usePhoto_1nnz2"};
22
+ var styles = {"component":"bank-card__component_ra9zm","aspectRatioContainer":"bank-card__aspectRatioContainer_ra9zm","content":"bank-card__content_ra9zm","label":"bank-card__label_ra9zm","focused":"bank-card__focused_ra9zm","filled":"bank-card__filled_ra9zm","input":"bank-card__input_ra9zm","bankLogo":"bank-card__bankLogo_ra9zm","brandLogo":"bank-card__brandLogo_ra9zm","usePhoto":"bank-card__usePhoto_ra9zm"};
23
23
  require('./index.css')
24
24
 
25
25
  // prettier-ignore
package/cssm/index.module.css CHANGED
@@ -21,6 +21,9 @@
21
21
  --gap-l: 20px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
22
22
 
23
23
  /* новые значения, используйте их */
24
+ --gap-4: var(--gap-2xs);
25
+ --gap-12: var(--gap-s);
26
+ --gap-20: var(--gap-l);
24
27
  } :root {
25
28
  --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
26
29
  'Helvetica Neue', Helvetica, sans-serif;
@@ -55,8 +58,8 @@
55
58
  left: 0;
56
59
  display: flex;
57
60
  align-items: center;
58
- padding-left: var(--gap-l);
59
- padding-right: var(--gap-l);
61
+ padding-left: var(--gap-20);
62
+ padding-right: var(--gap-20);
60
63
  border-radius: var(--border-radius-l);
61
64
  box-sizing: border-box;
62
65
  } .label {
@@ -90,7 +93,7 @@
90
93
 
91
94
  /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
92
95
  padding-left: 0 !important;
93
- padding-bottom: var(--gap-2xs) !important
96
+ padding-bottom: var(--gap-4) !important
94
97
  } @media (max-width: 360px) { .input {
95
98
  font-size: 16px
96
99
  }
@@ -123,11 +126,11 @@
123
126
  user-select: none;
124
127
  cursor: pointer;
125
128
  outline: none;
126
- margin-bottom: var(--gap-2xs);
129
+ margin-bottom: var(--gap-4);
127
130
  align-self: flex-end;
128
131
 
129
132
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
130
- margin-right: calc(var(--gap-s) * -1)
133
+ margin-right: calc(var(--gap-12) * -1)
131
134
  } .usePhoto svg {
132
135
  fill: var(--color-light-neutral-translucent-1300);
133
136
  display: block;
package/esm/Component.js CHANGED
@@ -10,7 +10,7 @@ import { getDefaultInputLabel } from './helpers/getDefaultInputLabel.js';
10
10
  import { MaskTypeEnum } from './enums.js';
11
11
  import { validateCardNumber } from './utils.js';
12
12
 
13
- var styles = {"component":"bank-card__component_1nnz2","aspectRatioContainer":"bank-card__aspectRatioContainer_1nnz2","content":"bank-card__content_1nnz2","label":"bank-card__label_1nnz2","focused":"bank-card__focused_1nnz2","filled":"bank-card__filled_1nnz2","input":"bank-card__input_1nnz2","bankLogo":"bank-card__bankLogo_1nnz2","brandLogo":"bank-card__brandLogo_1nnz2","usePhoto":"bank-card__usePhoto_1nnz2"};
13
+ var styles = {"component":"bank-card__component_ra9zm","aspectRatioContainer":"bank-card__aspectRatioContainer_ra9zm","content":"bank-card__content_ra9zm","label":"bank-card__label_ra9zm","focused":"bank-card__focused_ra9zm","filled":"bank-card__filled_ra9zm","input":"bank-card__input_ra9zm","bankLogo":"bank-card__bankLogo_ra9zm","brandLogo":"bank-card__brandLogo_ra9zm","usePhoto":"bank-card__usePhoto_ra9zm"};
14
14
  require('./index.css')
15
15
 
16
16
  // prettier-ignore
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: mna6l */
1
+ /* hash: 1t4vq */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
@@ -22,11 +22,14 @@
22
22
  --gap-l: 20px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
23
23
 
24
24
  /* новые значения, используйте их */
25
+ --gap-4: var(--gap-2xs);
26
+ --gap-12: var(--gap-s);
27
+ --gap-20: var(--gap-l);
25
28
  } :root {
26
29
  --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
27
30
  'Helvetica Neue', Helvetica, sans-serif;
28
31
  } :root {
29
- } .bank-card__component_1nnz2 {
32
+ } .bank-card__component_ra9zm {
30
33
  /* TODO: как это будет собираться и работать в webView */
31
34
  --form-control-border-radius: 0;
32
35
  --form-control-border-bottom: 1px solid var(--color-light-neutral-translucent-700);
@@ -45,10 +48,10 @@
45
48
  max-width: 343px;
46
49
 
47
50
  font-family: var(--font-family-styrene);
48
- } .bank-card__aspectRatioContainer_1nnz2 {
51
+ } .bank-card__aspectRatioContainer_ra9zm {
49
52
  /* Эталонный размер 343x216 */
50
53
  padding-bottom: 63%;
51
- } .bank-card__content_1nnz2 {
54
+ } .bank-card__content_ra9zm {
52
55
  position: absolute;
53
56
  top: 0;
54
57
  right: 0;
@@ -56,30 +59,30 @@
56
59
  left: 0;
57
60
  display: flex;
58
61
  align-items: center;
59
- padding-left: var(--gap-l);
60
- padding-right: var(--gap-l);
62
+ padding-left: var(--gap-20);
63
+ padding-right: var(--gap-20);
61
64
  border-radius: var(--border-radius-l);
62
65
  box-sizing: border-box;
63
- } .bank-card__label_1nnz2 {
66
+ } .bank-card__label_ra9zm {
64
67
  left: 0;
65
68
  transform: translateY(-1px);
66
69
  color: var(--color-light-text-secondary);
67
70
  font-size: 20px;
68
71
  line-height: 24px
69
- } @media (max-width: 360px) { .bank-card__label_1nnz2 {
72
+ } @media (max-width: 360px) { .bank-card__label_ra9zm {
70
73
  font-size: 16px
71
74
  }
72
- } .bank-card__focused_1nnz2 .bank-card__label_1nnz2,
73
- .bank-card__filled_1nnz2 .bank-card__label_1nnz2 {
75
+ } .bank-card__focused_ra9zm .bank-card__label_ra9zm,
76
+ .bank-card__filled_ra9zm .bank-card__label_ra9zm {
74
77
  color: var(--color-light-neutral-translucent-1300);
75
78
  transform: translateY(-19px) scale(0.6)
76
- } @media (max-width: 360px) { .bank-card__focused_1nnz2 .bank-card__label_1nnz2,
77
- .bank-card__filled_1nnz2 .bank-card__label_1nnz2 {
79
+ } @media (max-width: 360px) { .bank-card__focused_ra9zm .bank-card__label_ra9zm,
80
+ .bank-card__filled_ra9zm .bank-card__label_ra9zm {
78
81
  transform: translateY(-22px) scale(0.75)
79
82
  }
80
- } .bank-card__focused_1nnz2:before {
83
+ } .bank-card__focused_ra9zm:before {
81
84
  transform: scale(1) !important;
82
- } .bank-card__input_1nnz2 {
85
+ } .bank-card__input_ra9zm {
83
86
  font-size: 20px;
84
87
  line-height: 24px;
85
88
  font-weight: 400;
@@ -91,28 +94,28 @@
91
94
 
92
95
  /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
93
96
  padding-left: 0 !important;
94
- padding-bottom: var(--gap-2xs) !important
95
- } @media (max-width: 360px) { .bank-card__input_1nnz2 {
97
+ padding-bottom: var(--gap-4) !important
98
+ } @media (max-width: 360px) { .bank-card__input_ra9zm {
96
99
  font-size: 16px
97
100
  }
98
- } .bank-card__bankLogo_1nnz2 {
101
+ } .bank-card__bankLogo_ra9zm {
99
102
  position: absolute;
100
103
  top: 20px;
101
104
  left: 20px
102
- } .bank-card__bankLogo_1nnz2 svg {
105
+ } .bank-card__bankLogo_ra9zm svg {
103
106
  max-height: 32px;
104
107
  width: auto;
105
108
  display: block
106
- } .bank-card__bankLogo_1nnz2 svg g {
109
+ } .bank-card__bankLogo_ra9zm svg g {
107
110
  fill: var(--color-light-neutral-translucent-1300);
108
- } .bank-card__brandLogo_1nnz2 {
111
+ } .bank-card__brandLogo_ra9zm {
109
112
  position: absolute;
110
113
  bottom: 20px;
111
114
  right: 20px
112
- } .bank-card__brandLogo_1nnz2 svg {
115
+ } .bank-card__brandLogo_ra9zm svg {
113
116
  display: block;
114
117
  fill: var(--color-light-neutral-translucent-1300);
115
- } .bank-card__usePhoto_1nnz2 {
118
+ } .bank-card__usePhoto_ra9zm {
116
119
  display: block;
117
120
  margin: 0;
118
121
  padding: 0;
@@ -124,12 +127,12 @@
124
127
  user-select: none;
125
128
  cursor: pointer;
126
129
  outline: none;
127
- margin-bottom: var(--gap-2xs);
130
+ margin-bottom: var(--gap-4);
128
131
  align-self: flex-end;
129
132
 
130
133
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
131
- margin-right: calc(var(--gap-s) * -1)
132
- } .bank-card__usePhoto_1nnz2 svg {
134
+ margin-right: calc(var(--gap-12) * -1)
135
+ } .bank-card__usePhoto_ra9zm svg {
133
136
  fill: var(--color-light-neutral-translucent-1300);
134
137
  display: block;
135
138
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: mna6l */
1
+ /* hash: 1t4vq */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
@@ -22,11 +22,14 @@
22
22
  --gap-l: 20px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
23
23
 
24
24
  /* новые значения, используйте их */
25
+ --gap-4: var(--gap-2xs);
26
+ --gap-12: var(--gap-s);
27
+ --gap-20: var(--gap-l);
25
28
  } :root {
26
29
  --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
27
30
  'Helvetica Neue', Helvetica, sans-serif;
28
31
  } :root {
29
- } .bank-card__component_1nnz2 {
32
+ } .bank-card__component_ra9zm {
30
33
  /* TODO: как это будет собираться и работать в webView */
31
34
  --form-control-border-radius: 0;
32
35
  --form-control-border-bottom: 1px solid var(--color-light-neutral-translucent-700);
@@ -45,10 +48,10 @@
45
48
  max-width: 343px;
46
49
 
47
50
  font-family: var(--font-family-styrene);
48
- } .bank-card__aspectRatioContainer_1nnz2 {
51
+ } .bank-card__aspectRatioContainer_ra9zm {
49
52
  /* Эталонный размер 343x216 */
50
53
  padding-bottom: 63%;
51
- } .bank-card__content_1nnz2 {
54
+ } .bank-card__content_ra9zm {
52
55
  position: absolute;
53
56
  top: 0;
54
57
  right: 0;
@@ -56,30 +59,30 @@
56
59
  left: 0;
57
60
  display: flex;
58
61
  align-items: center;
59
- padding-left: var(--gap-l);
60
- padding-right: var(--gap-l);
62
+ padding-left: var(--gap-20);
63
+ padding-right: var(--gap-20);
61
64
  border-radius: var(--border-radius-l);
62
65
  box-sizing: border-box;
63
- } .bank-card__label_1nnz2 {
66
+ } .bank-card__label_ra9zm {
64
67
  left: 0;
65
68
  transform: translateY(-1px);
66
69
  color: var(--color-light-text-secondary);
67
70
  font-size: 20px;
68
71
  line-height: 24px
69
- } @media (max-width: 360px) { .bank-card__label_1nnz2 {
72
+ } @media (max-width: 360px) { .bank-card__label_ra9zm {
70
73
  font-size: 16px
71
74
  }
72
- } .bank-card__focused_1nnz2 .bank-card__label_1nnz2,
73
- .bank-card__filled_1nnz2 .bank-card__label_1nnz2 {
75
+ } .bank-card__focused_ra9zm .bank-card__label_ra9zm,
76
+ .bank-card__filled_ra9zm .bank-card__label_ra9zm {
74
77
  color: var(--color-light-neutral-translucent-1300);
75
78
  transform: translateY(-19px) scale(0.6)
76
- } @media (max-width: 360px) { .bank-card__focused_1nnz2 .bank-card__label_1nnz2,
77
- .bank-card__filled_1nnz2 .bank-card__label_1nnz2 {
79
+ } @media (max-width: 360px) { .bank-card__focused_ra9zm .bank-card__label_ra9zm,
80
+ .bank-card__filled_ra9zm .bank-card__label_ra9zm {
78
81
  transform: translateY(-22px) scale(0.75)
79
82
  }
80
- } .bank-card__focused_1nnz2:before {
83
+ } .bank-card__focused_ra9zm:before {
81
84
  transform: scale(1) !important;
82
- } .bank-card__input_1nnz2 {
85
+ } .bank-card__input_ra9zm {
83
86
  font-size: 20px;
84
87
  line-height: 24px;
85
88
  font-weight: 400;
@@ -91,28 +94,28 @@
91
94
 
92
95
  /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
93
96
  padding-left: 0 !important;
94
- padding-bottom: var(--gap-2xs) !important
95
- } @media (max-width: 360px) { .bank-card__input_1nnz2 {
97
+ padding-bottom: var(--gap-4) !important
98
+ } @media (max-width: 360px) { .bank-card__input_ra9zm {
96
99
  font-size: 16px
97
100
  }
98
- } .bank-card__bankLogo_1nnz2 {
101
+ } .bank-card__bankLogo_ra9zm {
99
102
  position: absolute;
100
103
  top: 20px;
101
104
  left: 20px
102
- } .bank-card__bankLogo_1nnz2 svg {
105
+ } .bank-card__bankLogo_ra9zm svg {
103
106
  max-height: 32px;
104
107
  width: auto;
105
108
  display: block
106
- } .bank-card__bankLogo_1nnz2 svg g {
109
+ } .bank-card__bankLogo_ra9zm svg g {
107
110
  fill: var(--color-light-neutral-translucent-1300);
108
- } .bank-card__brandLogo_1nnz2 {
111
+ } .bank-card__brandLogo_ra9zm {
109
112
  position: absolute;
110
113
  bottom: 20px;
111
114
  right: 20px
112
- } .bank-card__brandLogo_1nnz2 svg {
115
+ } .bank-card__brandLogo_ra9zm svg {
113
116
  display: block;
114
117
  fill: var(--color-light-neutral-translucent-1300);
115
- } .bank-card__usePhoto_1nnz2 {
118
+ } .bank-card__usePhoto_ra9zm {
116
119
  display: block;
117
120
  margin: 0;
118
121
  padding: 0;
@@ -124,12 +127,12 @@
124
127
  user-select: none;
125
128
  cursor: pointer;
126
129
  outline: none;
127
- margin-bottom: var(--gap-2xs);
130
+ margin-bottom: var(--gap-4);
128
131
  align-self: flex-end;
129
132
 
130
133
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
131
- margin-right: calc(var(--gap-s) * -1)
132
- } .bank-card__usePhoto_1nnz2 svg {
134
+ margin-right: calc(var(--gap-12) * -1)
135
+ } .bank-card__usePhoto_ra9zm svg {
133
136
  fill: var(--color-light-neutral-translucent-1300);
134
137
  display: block;
135
138
  }
package/modern/Component.js CHANGED
@@ -10,7 +10,7 @@ import { getDefaultInputLabel } from './helpers/getDefaultInputLabel.js';
10
10
  import { MaskTypeEnum } from './enums.js';
11
11
  import { validateCardNumber } from './utils.js';
12
12
 
13
- const styles = {"component":"bank-card__component_1nnz2","aspectRatioContainer":"bank-card__aspectRatioContainer_1nnz2","content":"bank-card__content_1nnz2","label":"bank-card__label_1nnz2","focused":"bank-card__focused_1nnz2","filled":"bank-card__filled_1nnz2","input":"bank-card__input_1nnz2","bankLogo":"bank-card__bankLogo_1nnz2","brandLogo":"bank-card__brandLogo_1nnz2","usePhoto":"bank-card__usePhoto_1nnz2"};
13
+ const styles = {"component":"bank-card__component_ra9zm","aspectRatioContainer":"bank-card__aspectRatioContainer_ra9zm","content":"bank-card__content_ra9zm","label":"bank-card__label_ra9zm","focused":"bank-card__focused_ra9zm","filled":"bank-card__filled_ra9zm","input":"bank-card__input_ra9zm","bankLogo":"bank-card__bankLogo_ra9zm","brandLogo":"bank-card__brandLogo_ra9zm","usePhoto":"bank-card__usePhoto_ra9zm"};
14
14
  require('./index.css')
15
15
 
16
16
  // prettier-ignore
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: mna6l */
1
+ /* hash: 1t4vq */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
@@ -22,11 +22,14 @@
22
22
  --gap-l: 20px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
23
23
 
24
24
  /* новые значения, используйте их */
25
+ --gap-4: var(--gap-2xs);
26
+ --gap-12: var(--gap-s);
27
+ --gap-20: var(--gap-l);
25
28
  } :root {
26
29
  --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
27
30
  'Helvetica Neue', Helvetica, sans-serif;
28
31
  } :root {
29
- } .bank-card__component_1nnz2 {
32
+ } .bank-card__component_ra9zm {
30
33
  /* TODO: как это будет собираться и работать в webView */
31
34
  --form-control-border-radius: 0;
32
35
  --form-control-border-bottom: 1px solid var(--color-light-neutral-translucent-700);
@@ -45,10 +48,10 @@
45
48
  max-width: 343px;
46
49
 
47
50
  font-family: var(--font-family-styrene);
48
- } .bank-card__aspectRatioContainer_1nnz2 {
51
+ } .bank-card__aspectRatioContainer_ra9zm {
49
52
  /* Эталонный размер 343x216 */
50
53
  padding-bottom: 63%;
51
- } .bank-card__content_1nnz2 {
54
+ } .bank-card__content_ra9zm {
52
55
  position: absolute;
53
56
  top: 0;
54
57
  right: 0;
@@ -56,30 +59,30 @@
56
59
  left: 0;
57
60
  display: flex;
58
61
  align-items: center;
59
- padding-left: var(--gap-l);
60
- padding-right: var(--gap-l);
62
+ padding-left: var(--gap-20);
63
+ padding-right: var(--gap-20);
61
64
  border-radius: var(--border-radius-l);
62
65
  box-sizing: border-box;
63
- } .bank-card__label_1nnz2 {
66
+ } .bank-card__label_ra9zm {
64
67
  left: 0;
65
68
  transform: translateY(-1px);
66
69
  color: var(--color-light-text-secondary);
67
70
  font-size: 20px;
68
71
  line-height: 24px
69
- } @media (max-width: 360px) { .bank-card__label_1nnz2 {
72
+ } @media (max-width: 360px) { .bank-card__label_ra9zm {
70
73
  font-size: 16px
71
74
  }
72
- } .bank-card__focused_1nnz2 .bank-card__label_1nnz2,
73
- .bank-card__filled_1nnz2 .bank-card__label_1nnz2 {
75
+ } .bank-card__focused_ra9zm .bank-card__label_ra9zm,
76
+ .bank-card__filled_ra9zm .bank-card__label_ra9zm {
74
77
  color: var(--color-light-neutral-translucent-1300);
75
78
  transform: translateY(-19px) scale(0.6)
76
- } @media (max-width: 360px) { .bank-card__focused_1nnz2 .bank-card__label_1nnz2,
77
- .bank-card__filled_1nnz2 .bank-card__label_1nnz2 {
79
+ } @media (max-width: 360px) { .bank-card__focused_ra9zm .bank-card__label_ra9zm,
80
+ .bank-card__filled_ra9zm .bank-card__label_ra9zm {
78
81
  transform: translateY(-22px) scale(0.75)
79
82
  }
80
- } .bank-card__focused_1nnz2:before {
83
+ } .bank-card__focused_ra9zm:before {
81
84
  transform: scale(1) !important;
82
- } .bank-card__input_1nnz2 {
85
+ } .bank-card__input_ra9zm {
83
86
  font-size: 20px;
84
87
  line-height: 24px;
85
88
  font-weight: 400;
@@ -91,28 +94,28 @@
91
94
 
92
95
  /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
93
96
  padding-left: 0 !important;
94
- padding-bottom: var(--gap-2xs) !important
95
- } @media (max-width: 360px) { .bank-card__input_1nnz2 {
97
+ padding-bottom: var(--gap-4) !important
98
+ } @media (max-width: 360px) { .bank-card__input_ra9zm {
96
99
  font-size: 16px
97
100
  }
98
- } .bank-card__bankLogo_1nnz2 {
101
+ } .bank-card__bankLogo_ra9zm {
99
102
  position: absolute;
100
103
  top: 20px;
101
104
  left: 20px
102
- } .bank-card__bankLogo_1nnz2 svg {
105
+ } .bank-card__bankLogo_ra9zm svg {
103
106
  max-height: 32px;
104
107
  width: auto;
105
108
  display: block
106
- } .bank-card__bankLogo_1nnz2 svg g {
109
+ } .bank-card__bankLogo_ra9zm svg g {
107
110
  fill: var(--color-light-neutral-translucent-1300);
108
- } .bank-card__brandLogo_1nnz2 {
111
+ } .bank-card__brandLogo_ra9zm {
109
112
  position: absolute;
110
113
  bottom: 20px;
111
114
  right: 20px
112
- } .bank-card__brandLogo_1nnz2 svg {
115
+ } .bank-card__brandLogo_ra9zm svg {
113
116
  display: block;
114
117
  fill: var(--color-light-neutral-translucent-1300);
115
- } .bank-card__usePhoto_1nnz2 {
118
+ } .bank-card__usePhoto_ra9zm {
116
119
  display: block;
117
120
  margin: 0;
118
121
  padding: 0;
@@ -124,12 +127,12 @@
124
127
  user-select: none;
125
128
  cursor: pointer;
126
129
  outline: none;
127
- margin-bottom: var(--gap-2xs);
130
+ margin-bottom: var(--gap-4);
128
131
  align-self: flex-end;
129
132
 
130
133
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
131
- margin-right: calc(var(--gap-s) * -1)
132
- } .bank-card__usePhoto_1nnz2 svg {
134
+ margin-right: calc(var(--gap-12) * -1)
135
+ } .bank-card__usePhoto_ra9zm svg {
133
136
  fill: var(--color-light-neutral-translucent-1300);
134
137
  display: block;
135
138
  }
package/moderncssm/Component.d.ts ADDED
@@ -0,0 +1,47 @@
1
+ /// <reference types="react" />
2
+ import React from 'react';
3
+ import { ChangeEvent, MouseEvent, ReactNode } from "react";
4
+ import { MaskType } from "./types";
5
+ type BankCardProps = {
6
+ /**
7
+ * Дополнительный класс
8
+ */
9
+ className?: string;
10
+ /**
11
+ * Цвет фона карты
12
+ */
13
+ backgroundColor?: string;
14
+ /**
15
+ * Иконка логотипа банка (размер L)
16
+ */
17
+ bankLogo?: ReactNode;
18
+ /**
19
+ * Лэйбл поля ввода
20
+ */
21
+ inputLabel?: string;
22
+ /**
23
+ * Значение поля ввода
24
+ */
25
+ value?: string;
26
+ /**
27
+ * Обработчик ввода
28
+ */
29
+ onChange?: (event: ChangeEvent<HTMLInputElement>, payload: {
30
+ value: string;
31
+ }) => void;
32
+ /**
33
+ * Обработчик вызова камеры
34
+ */
35
+ onUsePhoto?: (event: MouseEvent<HTMLButtonElement>) => void;
36
+ /**
37
+ * Идентификатор для систем автоматизированного тестирования
38
+ */
39
+ dataTestId?: string;
40
+ /**
41
+ * Тип вводимой маски. Позволяет устанавливать необходимый тип номера (номер карты или номер счёта)
42
+ * Если параметр не передавать - работает с обоими типами номеров
43
+ */
44
+ maskType?: MaskType;
45
+ };
46
+ declare const BankCard: React.ForwardRefExoticComponent<BankCardProps & React.RefAttributes<HTMLInputElement>>;
47
+ export { BankCardProps, BankCard };
package/moderncssm/Component.js ADDED
@@ -0,0 +1,68 @@
1
+ import React, { useState, useCallback, useEffect } from 'react';
2
+ import cn from 'classnames';
3
+ import { MaskedInput } from '@alfalab/core-components-masked-input/moderncssm';
4
+ import { CameraMIcon } from '@alfalab/icons-glyph/CameraMIcon';
5
+ import { AlfaBankLIcon } from '@alfalab/icons-logotype/AlfaBankLIcon';
6
+ import { MastercardLIcon } from '@alfalab/icons-logotype/MastercardLIcon';
7
+ import { MirXxlIcon } from '@alfalab/icons-logotype/MirXxlIcon';
8
+ import { VisaXxlIcon } from '@alfalab/icons-logotype/VisaXxlIcon';
9
+ import { getDefaultInputLabel } from './helpers/getDefaultInputLabel.js';
10
+ import { MaskTypeEnum } from './enums.js';
11
+ import { validateCardNumber } from './utils.js';
12
+ import styles from './index.module.css';
13
+
14
+ // prettier-ignore
15
+ const cardMask = [/\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/];
16
+ // prettier-ignore
17
+ const accountNumberMask = [/\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/];
18
+ const getBrandIcon = (value = '') => {
19
+ // Показываем логотип только после ввода всех цифр карты
20
+ if (value.replace(/\s/g, '').length === 16 && validateCardNumber(value)) {
21
+ if (value.startsWith('2'))
22
+ return React.createElement(MirXxlIcon, null);
23
+ if (value.startsWith('4'))
24
+ return React.createElement(VisaXxlIcon, null);
25
+ if (value.startsWith('5'))
26
+ return React.createElement(MastercardLIcon, null);
27
+ if (value.startsWith('6'))
28
+ return React.createElement(MastercardLIcon, null);
29
+ }
30
+ return null;
31
+ };
32
+ const BankCard = React.forwardRef(({ bankLogo = React.createElement(AlfaBankLIcon, null), backgroundColor = '#EF3124', value, className, onUsePhoto, onChange, dataTestId, maskType = MaskTypeEnum.Default, inputLabel = getDefaultInputLabel(maskType), }, ref) => {
33
+ const uncontrolled = value === undefined;
34
+ const [brandIcon, setBrandIcon] = useState(getBrandIcon(value));
35
+ const getMask = useCallback((newValue) => {
36
+ switch (maskType) {
37
+ case MaskTypeEnum.Card:
38
+ return cardMask;
39
+ case MaskTypeEnum.AccountNumber:
40
+ return accountNumberMask;
41
+ case MaskTypeEnum.Default:
42
+ default:
43
+ return newValue.length <= cardMask.length ? cardMask : accountNumberMask;
44
+ }
45
+ }, [maskType]);
46
+ const handleInputChange = useCallback((event, payload) => {
47
+ if (uncontrolled) {
48
+ setBrandIcon(getBrandIcon(event.target.value));
49
+ }
50
+ if (onChange) {
51
+ onChange(event, payload);
52
+ }
53
+ }, [onChange, uncontrolled]);
54
+ const renderRightAddons = useCallback(() => (React.createElement("button", { type: 'button', className: styles.usePhoto, onClick: onUsePhoto },
55
+ React.createElement(CameraMIcon, null))), [onUsePhoto]);
56
+ useEffect(() => {
57
+ setBrandIcon(getBrandIcon(value));
58
+ }, [value]);
59
+ return (React.createElement("div", { className: cn(styles.component, className) },
60
+ React.createElement("div", { className: styles.aspectRatioContainer },
61
+ React.createElement("div", { className: styles.content, style: { backgroundColor } },
62
+ React.createElement("div", { className: styles.bankLogo }, bankLogo),
63
+ 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]*', breakpoint: 1 }),
64
+ brandIcon && React.createElement("div", { className: styles.brandLogo }, brandIcon)))));
65
+ });
66
+ BankCard.displayName = 'BankCard';
67
+
68
+ export { BankCard };
package/moderncssm/enums.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ declare enum MaskTypeEnum {
2
+ Card = "card",
3
+ AccountNumber = "account-number",
4
+ Default = "default"
5
+ }
6
+ export { MaskTypeEnum };
package/moderncssm/enums.js ADDED
@@ -0,0 +1,8 @@
1
+ var MaskTypeEnum;
2
+ (function (MaskTypeEnum) {
3
+ MaskTypeEnum["Card"] = "card";
4
+ MaskTypeEnum["AccountNumber"] = "account-number";
5
+ MaskTypeEnum["Default"] = "default";
6
+ })(MaskTypeEnum || (MaskTypeEnum = {}));
7
+
8
+ export { MaskTypeEnum };
package/moderncssm/helpers/getDefaultInputLabel.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { MaskType } from "../types";
2
+ declare const getDefaultInputLabel: (maskType: MaskType) => "Номер карты" | "Номер счёта" | "Номер карты или счёта";
3
+ export { getDefaultInputLabel };
package/moderncssm/helpers/getDefaultInputLabel.js ADDED
@@ -0,0 +1,15 @@
1
+ import { MaskTypeEnum } from '../enums.js';
2
+
3
+ const getDefaultInputLabel = (maskType) => {
4
+ switch (maskType) {
5
+ case MaskTypeEnum.Card:
6
+ return 'Номер карты';
7
+ case MaskTypeEnum.AccountNumber:
8
+ return 'Номер счёта';
9
+ case MaskTypeEnum.Default:
10
+ default:
11
+ return 'Номер карты или счёта';
12
+ }
13
+ };
14
+
15
+ export { getDefaultInputLabel };
package/moderncssm/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from "./Component";
package/moderncssm/index.js ADDED
@@ -0,0 +1 @@
1
+ export { BankCard } from './Component.js';
package/moderncssm/index.module.css ADDED
@@ -0,0 +1,147 @@
1
+ /* */
2
+
3
+ .component {
4
+ /* TODO: как это будет собираться и работать в webView */
5
+ --form-control-border-radius: 0;
6
+ --form-control-border-bottom: 1px solid var(--color-light-neutral-translucent-700);
7
+ --form-control-bg-color: transparent;
8
+
9
+ /* focus */
10
+ --form-control-focus-border-bottom: 1px solid var(--color-light-neutral-translucent-1300);
11
+ --form-control-focus-shadow: transparent;
12
+
13
+ /* hover */
14
+ --form-control-hover-bg-color: transparent;
15
+ --form-control-focus-bg-color: transparent;
16
+ --form-control-font-family: var(--font-family-styrene);
17
+
18
+ position: relative;
19
+ max-width: 343px;
20
+
21
+ font-family: var(--font-family-styrene);
22
+ }
23
+
24
+ .aspectRatioContainer {
25
+ /* Эталонный размер 343x216 */
26
+ padding-bottom: 63%;
27
+ }
28
+
29
+ .content {
30
+ position: absolute;
31
+ top: 0;
32
+ right: 0;
33
+ bottom: 0;
34
+ left: 0;
35
+ display: flex;
36
+ align-items: center;
37
+ padding-left: var(--gap-20);
38
+ padding-right: var(--gap-20);
39
+ border-radius: var(--border-radius-l);
40
+ box-sizing: border-box;
41
+ }
42
+
43
+ .label {
44
+ left: 0;
45
+ transform: translateY(-1px);
46
+ color: var(--color-light-text-secondary);
47
+ font-size: 20px;
48
+ line-height: 24px
49
+ }
50
+
51
+ @media (max-width: 360px) {
52
+
53
+ .label {
54
+ font-size: 16px
55
+ }
56
+ }
57
+
58
+ .focused .label,
59
+ .filled .label {
60
+ color: var(--color-light-neutral-translucent-1300);
61
+ transform: translateY(-19px) scale(0.6)
62
+ }
63
+
64
+ @media (max-width: 360px) {
65
+
66
+ .focused .label,
67
+ .filled .label {
68
+ transform: translateY(-22px) scale(0.75)
69
+ }
70
+ }
71
+
72
+ .focused:before {
73
+ transform: scale(1) !important;
74
+ }
75
+
76
+ .input {
77
+ font-size: 20px;
78
+ line-height: 24px;
79
+ font-weight: 400;
80
+ font-feature-settings: 'ss01';
81
+ font-family: var(--font-family-styrene);
82
+
83
+ color: var(--color-light-neutral-translucent-1300);
84
+ caret-color: var(--color-light-neutral-translucent-1300);
85
+
86
+ /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
87
+ padding-left: 0 !important;
88
+ padding-bottom: var(--gap-4) !important
89
+ }
90
+
91
+ @media (max-width: 360px) {
92
+
93
+ .input {
94
+ font-size: 16px
95
+ }
96
+ }
97
+
98
+ .bankLogo {
99
+ position: absolute;
100
+ top: 20px;
101
+ left: 20px
102
+ }
103
+
104
+ .bankLogo svg {
105
+ max-height: 32px;
106
+ width: auto;
107
+ display: block
108
+ }
109
+
110
+ .bankLogo svg g {
111
+ fill: var(--color-light-neutral-translucent-1300);
112
+ }
113
+
114
+ .brandLogo {
115
+ position: absolute;
116
+ bottom: 20px;
117
+ right: 20px
118
+ }
119
+
120
+ .brandLogo svg {
121
+ display: block;
122
+ fill: var(--color-light-neutral-translucent-1300);
123
+ }
124
+
125
+ .usePhoto {
126
+ display: block;
127
+ margin: 0;
128
+ padding: 0;
129
+ text-decoration: none;
130
+ background-color: transparent;
131
+ border: 0;
132
+ box-shadow: none;
133
+ -webkit-user-select: none;
134
+ user-select: none;
135
+ cursor: pointer;
136
+ outline: none;
137
+ margin-bottom: var(--gap-4);
138
+ align-self: flex-end;
139
+
140
+ /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
141
+ margin-right: calc(var(--gap-12) * -1)
142
+ }
143
+
144
+ .usePhoto svg {
145
+ fill: var(--color-light-neutral-translucent-1300);
146
+ display: block;
147
+ }
package/moderncssm/types.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ type MaskType = 'default' | 'card' | 'account-number';
2
+ export { MaskType };
package/moderncssm/types.js ADDED
@@ -0,0 +1 @@
1
+
package/moderncssm/utils.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ /**
2
+ * Проверяет номер карты по алгоритму Луна
3
+ *
4
+ * @param cardNumber - номер карты
5
+ *
6
+ */
7
+ declare function validateCardNumber(cardNumber: string): boolean;
8
+ export { validateCardNumber };
package/moderncssm/utils.js ADDED
@@ -0,0 +1,25 @@
1
+ /**
2
+ * Проверяет номер карты по алгоритму Луна
3
+ *
4
+ * @param cardNumber - номер карты
5
+ *
6
+ */
7
+ function validateCardNumber(cardNumber) {
8
+ const digits = cardNumber.replace(/\s+/g, '');
9
+ let sum = 0;
10
+ for (let i = 0; i < digits.length; i++) {
11
+ let cardNum = parseInt(digits[i], 10);
12
+ if (cardNum > 9)
13
+ return false;
14
+ if ((digits.length - i) % 2 === 0) {
15
+ cardNum *= 2;
16
+ if (cardNum > 9) {
17
+ cardNum -= 9;
18
+ }
19
+ }
20
+ sum += cardNum;
21
+ }
22
+ return sum % 10 === 0;
23
+ }
24
+
25
+ export { validateCardNumber };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-bank-card",
3
- "version": "5.7.12",
3
+ "version": "5.8.0",
4
4
  "description": "Bank card component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -15,12 +15,12 @@
15
15
  "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
16
16
  },
17
17
  "dependencies": {
18
- "@alfalab/core-components-masked-input": "^6.3.17",
18
+ "@alfalab/core-components-masked-input": "^6.3.19",
19
19
  "@alfalab/icons-glyph": "^2.139.0",
20
20
  "@alfalab/icons-logotype": "^2.27.0",
21
21
  "classnames": "^2.3.1",
22
22
  "tslib": "^2.4.0"
23
23
  },
24
- "themesVersion": "13.0.1",
25
- "varsVersion": "9.11.1"
24
+ "themesVersion": "13.1.0",
25
+ "varsVersion": "9.12.0"
26
26
  }
package/src/index.module.css CHANGED
@@ -1,4 +1,4 @@
1
- @import '@alfalab/core-components-themes/src/default.css';
1
+ @import '@alfalab/core-components-vars/src/index.css';
2
2
 
3
3
  /* purgecss ignore */
4
4
  .component {
@@ -35,8 +35,8 @@
35
35
  left: 0;
36
36
  display: flex;
37
37
  align-items: center;
38
- padding-left: var(--gap-l);
39
- padding-right: var(--gap-l);
38
+ padding-left: var(--gap-20);
39
+ padding-right: var(--gap-20);
40
40
  border-radius: var(--border-radius-l);
41
41
  box-sizing: border-box;
42
42
  }
@@ -75,7 +75,7 @@
75
75
 
76
76
  /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
77
77
  padding-left: 0 !important;
78
- padding-bottom: var(--gap-2xs) !important;
78
+ padding-bottom: var(--gap-4) !important;
79
79
 
80
80
  @media (max-width: 360px) {
81
81
  font-size: 16px;
@@ -120,11 +120,11 @@
120
120
  user-select: none;
121
121
  cursor: pointer;
122
122
  outline: none;
123
- margin-bottom: var(--gap-2xs);
123
+ margin-bottom: var(--gap-4);
124
124
  align-self: flex-end;
125
125
 
126
126
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
127
- margin-right: calc(var(--gap-s) * -1);
127
+ margin-right: calc(var(--gap-12) * -1);
128
128
 
129
129
  & svg {
130
130
  fill: var(--color-light-neutral-translucent-1300);