@mirai/core 0.3.255 → 0.3.256

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 (10) hide show
  1. package/build/components/__shared__/ButtonPayment/components/FormCheckout/FormCheckout.module.css +3 -2
  2. package/build/components/__shared__/ButtonPayment/components/FormCheckout/__tests__/__snapshots__/FormCheckout.test.js.snap +141 -93
  3. package/build/components/__shared__/ButtonPayment/components/FormPaycomet/__tests__/__snapshots__/FormPaycomet.test.js.snap +66 -50
  4. package/build/components/__shared__/ButtonPayment/components/InputField/InputField.js +4 -1
  5. package/build/components/__shared__/ButtonPayment/components/InputField/InputField.js.map +1 -1
  6. package/build/components/__shared__/ButtonPayment/components/InputField/InputField.module.css +9 -6
  7. package/build/components/__shared__/ButtonPayment/components/InputField/__tests__/__snapshots__/InputField.test.js.snap +100 -76
  8. package/build/components/__shared__/Payment/components/PCI/PCI.module.css +1 -1
  9. package/build/components/__shared__/Payment/components/PCI/__tests__/__snapshots__/PCI.test.js.snap +243 -183
  10. package/package.json +1 -1
package/build/components/__shared__/ButtonPayment/components/FormCheckout/FormCheckout.module.css CHANGED
@@ -14,9 +14,10 @@
14
14
  .frame {
15
15
  color: var(--mirai-ui-input-color);
16
16
  direction: var(--mirai-ui-text-direction);
17
- padding-top: var(--mirai-ui-space-S) !important;
17
+ padding-bottom: 0 !important;
18
+ padding-top: var(--mirai-ui-space-M) !important;
18
19
  outline: 0;
19
- height: calc(var(--mirai-ui-space-XS) + var(--mirai-ui-space-L));
20
+ height: var(--mirai-ui-space-L);
20
21
  }
21
22
 
22
23
  .frame::placeholder {
package/build/components/__shared__/ButtonPayment/components/FormCheckout/__tests__/__snapshots__/FormCheckout.test.js.snap CHANGED
@@ -16,17 +16,21 @@ exports[`component:<FormCheckout> inherit:className 1`] = `
16
16
  <div
17
17
  class="view"
18
18
  >
19
- <span
20
- class="text small"
19
+ <div
20
+ class="view wide"
21
21
  >
22
- payments.label.card_name
23
- </span>
24
- <input
25
- class="input"
26
- name="name"
27
- type="text"
28
- value=""
29
- />
22
+ <span
23
+ class="text small"
24
+ >
25
+ payments.label.card_name
26
+ </span>
27
+ <input
28
+ class="input"
29
+ name="name"
30
+ type="text"
31
+ value=""
32
+ />
33
+ </div>
30
34
  </div>
31
35
  </div>
32
36
  <div
@@ -35,14 +39,18 @@ exports[`component:<FormCheckout> inherit:className 1`] = `
35
39
  <div
36
40
  class="view"
37
41
  >
38
- <span
39
- class="text small"
40
- >
41
- payments.label.card_number
42
- </span>
43
42
  <div
44
- class="card-number-frame"
45
- />
43
+ class="view wide"
44
+ >
45
+ <span
46
+ class="text small"
47
+ >
48
+ payments.label.card_number
49
+ </span>
50
+ <div
51
+ class="card-number-frame"
52
+ />
53
+ </div>
46
54
  </div>
47
55
  </div>
48
56
  <div
@@ -54,14 +62,18 @@ exports[`component:<FormCheckout> inherit:className 1`] = `
54
62
  <div
55
63
  class="view"
56
64
  >
57
- <span
58
- class="text small"
59
- >
60
- payments.label.expiration
61
- </span>
62
65
  <div
63
- class="expiry-date-frame"
64
- />
66
+ class="view wide"
67
+ >
68
+ <span
69
+ class="text small"
70
+ >
71
+ payments.label.expiration
72
+ </span>
73
+ <div
74
+ class="expiry-date-frame"
75
+ />
76
+ </div>
65
77
  </div>
66
78
  </div>
67
79
  <div
@@ -70,14 +82,18 @@ exports[`component:<FormCheckout> inherit:className 1`] = `
70
82
  <div
71
83
  class="view"
72
84
  >
73
- <span
74
- class="text small"
75
- >
76
- payments.label.cvv
77
- </span>
78
85
  <div
79
- class="cvv-frame"
80
- />
86
+ class="view wide"
87
+ >
88
+ <span
89
+ class="text small"
90
+ >
91
+ payments.label.cvv
92
+ </span>
93
+ <div
94
+ class="cvv-frame"
95
+ />
96
+ </div>
81
97
  </div>
82
98
  </div>
83
99
  </div>
@@ -118,17 +134,21 @@ exports[`component:<FormCheckout> renders 1`] = `
118
134
  <div
119
135
  class="view"
120
136
  >
121
- <span
122
- class="text small"
137
+ <div
138
+ class="view wide"
123
139
  >
124
- payments.label.card_name
125
- </span>
126
- <input
127
- class="input"
128
- name="name"
129
- type="text"
130
- value=""
131
- />
140
+ <span
141
+ class="text small"
142
+ >
143
+ payments.label.card_name
144
+ </span>
145
+ <input
146
+ class="input"
147
+ name="name"
148
+ type="text"
149
+ value=""
150
+ />
151
+ </div>
132
152
  </div>
133
153
  </div>
134
154
  <div
@@ -137,14 +157,18 @@ exports[`component:<FormCheckout> renders 1`] = `
137
157
  <div
138
158
  class="view"
139
159
  >
140
- <span
141
- class="text small"
142
- >
143
- payments.label.card_number
144
- </span>
145
160
  <div
146
- class="card-number-frame"
147
- />
161
+ class="view wide"
162
+ >
163
+ <span
164
+ class="text small"
165
+ >
166
+ payments.label.card_number
167
+ </span>
168
+ <div
169
+ class="card-number-frame"
170
+ />
171
+ </div>
148
172
  </div>
149
173
  </div>
150
174
  <div
@@ -156,14 +180,18 @@ exports[`component:<FormCheckout> renders 1`] = `
156
180
  <div
157
181
  class="view"
158
182
  >
159
- <span
160
- class="text small"
161
- >
162
- payments.label.expiration
163
- </span>
164
183
  <div
165
- class="expiry-date-frame"
166
- />
184
+ class="view wide"
185
+ >
186
+ <span
187
+ class="text small"
188
+ >
189
+ payments.label.expiration
190
+ </span>
191
+ <div
192
+ class="expiry-date-frame"
193
+ />
194
+ </div>
167
195
  </div>
168
196
  </div>
169
197
  <div
@@ -172,14 +200,18 @@ exports[`component:<FormCheckout> renders 1`] = `
172
200
  <div
173
201
  class="view"
174
202
  >
175
- <span
176
- class="text small"
177
- >
178
- payments.label.cvv
179
- </span>
180
203
  <div
181
- class="cvv-frame"
182
- />
204
+ class="view wide"
205
+ >
206
+ <span
207
+ class="text small"
208
+ >
209
+ payments.label.cvv
210
+ </span>
211
+ <div
212
+ class="cvv-frame"
213
+ />
214
+ </div>
183
215
  </div>
184
216
  </div>
185
217
  </div>
@@ -221,17 +253,21 @@ exports[`component:<FormCheckout> testID 1`] = `
221
253
  <div
222
254
  class="view"
223
255
  >
224
- <span
225
- class="text small"
256
+ <div
257
+ class="view wide"
226
258
  >
227
- payments.label.card_name
228
- </span>
229
- <input
230
- class="input"
231
- name="name"
232
- type="text"
233
- value=""
234
- />
259
+ <span
260
+ class="text small"
261
+ >
262
+ payments.label.card_name
263
+ </span>
264
+ <input
265
+ class="input"
266
+ name="name"
267
+ type="text"
268
+ value=""
269
+ />
270
+ </div>
235
271
  </div>
236
272
  </div>
237
273
  <div
@@ -240,14 +276,18 @@ exports[`component:<FormCheckout> testID 1`] = `
240
276
  <div
241
277
  class="view"
242
278
  >
243
- <span
244
- class="text small"
245
- >
246
- payments.label.card_number
247
- </span>
248
279
  <div
249
- class="card-number-frame"
250
- />
280
+ class="view wide"
281
+ >
282
+ <span
283
+ class="text small"
284
+ >
285
+ payments.label.card_number
286
+ </span>
287
+ <div
288
+ class="card-number-frame"
289
+ />
290
+ </div>
251
291
  </div>
252
292
  </div>
253
293
  <div
@@ -259,14 +299,18 @@ exports[`component:<FormCheckout> testID 1`] = `
259
299
  <div
260
300
  class="view"
261
301
  >
262
- <span
263
- class="text small"
264
- >
265
- payments.label.expiration
266
- </span>
267
302
  <div
268
- class="expiry-date-frame"
269
- />
303
+ class="view wide"
304
+ >
305
+ <span
306
+ class="text small"
307
+ >
308
+ payments.label.expiration
309
+ </span>
310
+ <div
311
+ class="expiry-date-frame"
312
+ />
313
+ </div>
270
314
  </div>
271
315
  </div>
272
316
  <div
@@ -275,14 +319,18 @@ exports[`component:<FormCheckout> testID 1`] = `
275
319
  <div
276
320
  class="view"
277
321
  >
278
- <span
279
- class="text small"
280
- >
281
- payments.label.cvv
282
- </span>
283
322
  <div
284
- class="cvv-frame"
285
- />
323
+ class="view wide"
324
+ >
325
+ <span
326
+ class="text small"
327
+ >
328
+ payments.label.cvv
329
+ </span>
330
+ <div
331
+ class="cvv-frame"
332
+ />
333
+ </div>
286
334
  </div>
287
335
  </div>
288
336
  </div>
package/build/components/__shared__/ButtonPayment/components/FormPaycomet/__tests__/__snapshots__/FormPaycomet.test.js.snap CHANGED
@@ -36,14 +36,18 @@ exports[`component:<FormCheckout> renders 1`] = `
36
36
  <div
37
37
  class="view"
38
38
  >
39
- <span
40
- class="text small"
39
+ <div
40
+ class="view wide"
41
41
  >
42
- payments.label.card_name
43
- </span>
44
- <input
45
- data-paycomet="cardHolderName"
46
- />
42
+ <span
43
+ class="text small"
44
+ >
45
+ payments.label.card_name
46
+ </span>
47
+ <input
48
+ data-paycomet="cardHolderName"
49
+ />
50
+ </div>
47
51
  </div>
48
52
  </div>
49
53
  <div
@@ -52,19 +56,23 @@ exports[`component:<FormCheckout> renders 1`] = `
52
56
  <div
53
57
  class="view"
54
58
  >
55
- <span
56
- class="text small"
57
- >
58
- payments.label.card_number
59
- </span>
60
59
  <div
61
- id="paycomet-pan"
62
- />
63
- <input
64
- paycomet-name="pan"
65
- paycomet-placeholder="payments.label.card_number_placeholder"
66
- paycomet-style="border:0px;background-image:none;color:undefined;font-family:undefined;font-size:undefined;outline: 0;padding:0!important;"
67
- />
60
+ class="view wide"
61
+ >
62
+ <span
63
+ class="text small"
64
+ >
65
+ payments.label.card_number
66
+ </span>
67
+ <div
68
+ id="paycomet-pan"
69
+ />
70
+ <input
71
+ paycomet-name="pan"
72
+ paycomet-placeholder="payments.label.card_number_placeholder"
73
+ paycomet-style="border:0px;background-image:none;color:undefined;font-family:undefined;font-size:undefined;outline: 0;padding:0!important;"
74
+ />
75
+ </div>
68
76
  </div>
69
77
  </div>
70
78
  <div
@@ -76,27 +84,31 @@ exports[`component:<FormCheckout> renders 1`] = `
76
84
  <div
77
85
  class="view"
78
86
  >
79
- <span
80
- class="text small"
81
- >
82
- payments.label.expiration
83
- </span>
84
87
  <div
85
- class="view row"
88
+ class="view wide"
86
89
  >
87
- <input
88
- data-paycomet="dateMonth"
89
- maxlength="2"
90
- name="month"
91
- value=""
92
- />
93
- /
94
- <input
95
- data-paycomet="dateYear"
96
- maxlength="2"
97
- name="year"
98
- value=""
99
- />
90
+ <span
91
+ class="text small"
92
+ >
93
+ payments.label.expiration
94
+ </span>
95
+ <div
96
+ class="view row"
97
+ >
98
+ <input
99
+ data-paycomet="dateMonth"
100
+ maxlength="2"
101
+ name="month"
102
+ value=""
103
+ />
104
+ /
105
+ <input
106
+ data-paycomet="dateYear"
107
+ maxlength="2"
108
+ name="year"
109
+ value=""
110
+ />
111
+ </div>
100
112
  </div>
101
113
  </div>
102
114
  </div>
@@ -106,19 +118,23 @@ exports[`component:<FormCheckout> renders 1`] = `
106
118
  <div
107
119
  class="view"
108
120
  >
109
- <span
110
- class="text small"
111
- >
112
- payments.label.cvv
113
- </span>
114
121
  <div
115
- data-paycomet="cvc2"
116
- id="paycomet-cvc2"
117
- />
118
- <input
119
- paycomet-name="cvc2"
120
- paycomet-style="border:0px;color:undefined;font-family:undefined;font-size:undefined;padding:0!important;"
121
- />
122
+ class="view wide"
123
+ >
124
+ <span
125
+ class="text small"
126
+ >
127
+ payments.label.cvv
128
+ </span>
129
+ <div
130
+ data-paycomet="cvc2"
131
+ id="paycomet-cvc2"
132
+ />
133
+ <input
134
+ paycomet-name="cvc2"
135
+ paycomet-style="border:0px;color:undefined;font-family:undefined;font-size:undefined;padding:0!important;"
136
+ />
137
+ </div>
122
138
  </div>
123
139
  </div>
124
140
  </div>
package/build/components/__shared__/ButtonPayment/components/InputField/InputField.js CHANGED
@@ -28,6 +28,9 @@ const InputField = _ref => {
28
28
  className: (0, _ui.styles)(style.container, others.className)
29
29
  }), /*#__PURE__*/_react.default.createElement(_ui.View, {
30
30
  className: (0, _ui.styles)(style.border, error && style.error, focus && style.focus)
31
+ }, /*#__PURE__*/_react.default.createElement(_ui.View, {
32
+ wide: true,
33
+ className: style.content
31
34
  }, label && /*#__PURE__*/_react.default.createElement(_ui.Text, {
32
35
  small: true,
33
36
  className: (0, _ui.styles)(style.label, (focus || error || value !== undefined && ((value === null || value === void 0 ? void 0 : value.length) > 0 || typeof value === 'number')) && style.withValue)
@@ -36,7 +39,7 @@ const InputField = _ref => {
36
39
  }, " *")), children, (error || success) && /*#__PURE__*/_react.default.createElement(_ui.Icon, {
37
40
  value: error ? _ui.ICON.ERROR : _ui.ICON.SUCCESS,
38
41
  className: (0, _ui.styles)(style.icon, error && style.error, success && style.success)
39
- })), hint && /*#__PURE__*/_react.default.createElement(_ui.Text, {
42
+ }))), hint && /*#__PURE__*/_react.default.createElement(_ui.Text, {
40
43
  small: true,
41
44
  className: style.hint
42
45
  }, hint));
package/build/components/__shared__/ButtonPayment/components/InputField/InputField.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"InputField.js","names":["_ui","require","_propTypes","_interopRequireDefault","_react","style","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","obj","_extends","assign","bind","target","arguments","length","source","key","apply","InputField","_ref","children","error","focus","hint","label","showRequired","success","value","others","createElement","View","className","styles","container","border","Text","small","undefined","withValue","required","Icon","ICON","ERROR","SUCCESS","icon","exports","displayName","propTypes","PropTypes","node","isRequired","bool","string"],"sources":["../../../../../../src/components/__shared__/ButtonPayment/components/InputField/InputField.jsx"],"sourcesContent":["import { Icon, ICON, styles, Text, View } from '@mirai/ui';\nimport PropTypes from 'prop-types';\nimport React from 'react';\n\nimport * as style from './InputField.module.css';\n\nconst InputField = ({ children, error, focus, hint, label, showRequired = false, success, value, ...others }) => (\n <View {...others} className={styles(style.container, others.className)}>\n <View className={styles(style.border, error && style.error, focus && style.focus)}>\n {label && (\n <Text\n small\n className={styles(\n style.label,\n (focus || error || (value !== undefined && (value?.length > 0 || typeof value === 'number'))) &&\n style.withValue,\n )}\n >\n {label}\n {showRequired && <span className={style.required}> *</span>}\n </Text>\n )}\n {children}\n {(error || success) && (\n <Icon\n value={error ? ICON.ERROR : ICON.SUCCESS}\n className={styles(style.icon, error && style.error, success && style.success)}\n />\n )}\n </View>\n {hint && (\n <Text small className={style.hint}>\n {hint}\n </Text>\n )}\n </View>\n);\n\nInputField.displayName = 'Mirai:Payments:InputField';\n\nInputField.propTypes = {\n children: PropTypes.node.isRequired,\n error: PropTypes.bool,\n focus: PropTypes.bool,\n hint: PropTypes.string,\n label: PropTypes.string.isRequired,\n showRequired: PropTypes.bool,\n success: PropTypes.bool,\n value: PropTypes.string,\n};\n\nexport { InputField };\n"],"mappings":"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"}
1
+ {"version":3,"file":"InputField.js","names":["_ui","require","_propTypes","_interopRequireDefault","_react","style","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","obj","_extends","assign","bind","target","arguments","length","source","key","apply","InputField","_ref","children","error","focus","hint","label","showRequired","success","value","others","createElement","View","className","styles","container","border","wide","content","Text","small","undefined","withValue","required","Icon","ICON","ERROR","SUCCESS","icon","exports","displayName","propTypes","PropTypes","node","isRequired","bool","string"],"sources":["../../../../../../src/components/__shared__/ButtonPayment/components/InputField/InputField.jsx"],"sourcesContent":["import { Icon, ICON, styles, Text, View } from '@mirai/ui';\nimport PropTypes from 'prop-types';\nimport React from 'react';\n\nimport * as style from './InputField.module.css';\n\nconst InputField = ({ children, error, focus, hint, label, showRequired = false, success, value, ...others }) => (\n <View {...others} className={styles(style.container, others.className)}>\n <View className={styles(style.border, error && style.error, focus && style.focus)}>\n <View wide className={style.content}>\n {label && (\n <Text\n small\n className={styles(\n style.label,\n (focus || error || (value !== undefined && (value?.length > 0 || typeof value === 'number'))) &&\n style.withValue,\n )}\n >\n {label}\n {showRequired && <span className={style.required}> *</span>}\n </Text>\n )}\n {children}\n {(error || success) && (\n <Icon\n value={error ? ICON.ERROR : ICON.SUCCESS}\n className={styles(style.icon, error && style.error, success && style.success)}\n />\n )}\n </View>\n </View>\n {hint && (\n <Text small className={style.hint}>\n {hint}\n </Text>\n )}\n </View>\n);\n\nInputField.displayName = 'Mirai:Payments:InputField';\n\nInputField.propTypes = {\n children: PropTypes.node.isRequired,\n error: PropTypes.bool,\n focus: PropTypes.bool,\n hint: PropTypes.string,\n label: PropTypes.string.isRequired,\n showRequired: PropTypes.bool,\n success: PropTypes.bool,\n value: PropTypes.string,\n};\n\nexport { InputField };\n"],"mappings":"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"}
package/build/components/__shared__/ButtonPayment/components/InputField/InputField.module.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .container {
2
- margin-bottom: var(--mirai-ui-space-M);
3
- width: 100%;
4
- min-height: var(--mirai-ui-input-min-height);
2
+ margin-bottom: var(--mirai-ui-input-text-gap);
3
+ flex: 1;
4
+ position: relative;
5
5
  }
6
6
 
7
7
  .border {
@@ -10,7 +10,6 @@
10
10
  padding-left: calc(var(--mirai-ui-input-text-padding-x) / 2);
11
11
  padding-right: calc(var(--mirai-ui-input-text-padding-x) / 2);
12
12
  transition: box-shadow var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing);
13
- position: relative;
14
13
  }
15
14
 
16
15
  .border.error {
@@ -26,7 +25,11 @@
26
25
  box-shadow: var(--mirai-ui-focus-shadow-error);
27
26
  }
28
27
 
29
- .border > *:not(.label):not(.icon) {
28
+ .content {
29
+ min-height: var(--mirai-ui-input-min-height);
30
+ }
31
+
32
+ .content > *:not(.label):not(.icon) {
30
33
  padding: calc(var(--mirai-ui-input-text-padding-y) + var(--mirai-ui-space-S))
31
34
  calc(var(--mirai-ui-input-text-padding-x) / 2) calc(var(--mirai-ui-input-text-padding-x) / 2)
32
35
  calc(var(--mirai-ui-input-text-padding-x) / 2);
@@ -92,4 +95,4 @@
92
95
 
93
96
  .label .required {
94
97
  color: var(--mirai-ui-error);
95
- }
98
+ }