@rebilly/instruments 3.13.2-beta.0 → 3.13.4-beta.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 (84) hide show
  1. package/README.md +1 -1
  2. package/dist/index.js +66 -43
  3. package/dist/index.min.js +66 -43
  4. package/package.json +6 -3
  5. package/src/functions/destroy.js +2 -8
  6. package/src/functions/mount/fetch-data.js +2 -9
  7. package/src/functions/mount/index.js +10 -15
  8. package/src/functions/mount/mount.spec.js +11 -10
  9. package/src/functions/mount/setup-framepay-theme.js +72 -30
  10. package/src/functions/mount/setup-options.js +2 -2
  11. package/src/functions/mount/{setup-styles-vars.js → setup-styles.js} +7 -9
  12. package/src/functions/purchase.js +5 -2
  13. package/src/functions/setup.js +6 -3
  14. package/src/functions/show.js +2 -2
  15. package/src/functions/show.spec.js +4 -4
  16. package/src/functions/update.spec.js +3 -4
  17. package/src/instance.js +1 -4
  18. package/src/loader/index.js +33 -57
  19. package/src/storefront/index.js +5 -2
  20. package/src/storefront/payment-instruments.js +0 -7
  21. package/src/style/base/__snapshots__/theme.spec.js.snap +220 -136
  22. package/src/style/base/default-theme.js +14 -187
  23. package/src/style/base/index.js +79 -487
  24. package/src/style/base/theme.js +4 -3
  25. package/src/style/base/theme.spec.js +3 -2
  26. package/src/style/browserslist.js +1 -0
  27. package/src/style/components/accordion.js +140 -0
  28. package/src/style/components/address.js +55 -0
  29. package/src/style/components/button.js +117 -0
  30. package/src/style/components/divider.js +39 -0
  31. package/src/style/components/forms/checkbox.js +75 -0
  32. package/src/style/components/forms/field.js +56 -0
  33. package/src/style/components/forms/form.js +18 -0
  34. package/src/style/components/forms/input.js +77 -0
  35. package/src/style/components/forms/label.js +55 -0
  36. package/src/style/components/forms/radio.js +80 -0
  37. package/src/style/components/forms/select.js +86 -0
  38. package/src/style/components/forms/validation.js +72 -0
  39. package/src/style/components/icons.js +13 -0
  40. package/src/style/components/index.js +39 -0
  41. package/src/style/components/loader.js +41 -0
  42. package/src/style/components/methods.js +97 -0
  43. package/src/style/components/overlay.js +24 -0
  44. package/src/style/helpers/index.js +54 -0
  45. package/src/style/index.js +24 -4
  46. package/src/style/payment-instruments/content.js +8 -0
  47. package/src/style/payment-instruments/index.js +14 -0
  48. package/src/style/payment-instruments/payment-card.js +27 -0
  49. package/src/style/payment-instruments/payment-instrument-list.js +44 -0
  50. package/src/style/payment-instruments/payment-instrument.js +55 -0
  51. package/src/style/utils/color-values.js +1 -1
  52. package/src/style/utils/remove-empty-null.js +10 -0
  53. package/src/style/vendor/framepay.js +28 -0
  54. package/src/style/vendor/postmate.js +18 -0
  55. package/src/style/views/confirmation.js +26 -0
  56. package/src/style/views/index.js +16 -0
  57. package/src/style/views/method-selector.js +11 -0
  58. package/src/style/views/modal.js +91 -0
  59. package/src/style/views/result.js +52 -0
  60. package/src/style/views/summary.js +118 -0
  61. package/src/views/__snapshots__/summary.spec.js.snap +246 -0
  62. package/src/views/common/iframe/base-iframe.js +2 -3
  63. package/src/views/common/iframe/event-listeners.js +9 -12
  64. package/src/views/common/iframe/method-iframe.js +1 -3
  65. package/src/views/common/iframe/modal-iframe.js +2 -4
  66. package/src/views/common/iframe/view-iframe.js +1 -3
  67. package/src/views/confirmation.js +7 -12
  68. package/src/views/method-selector/express-methods/apple-pay.js +92 -0
  69. package/src/views/method-selector/express-methods/index.js +25 -0
  70. package/src/views/method-selector/get-payment-methods.js +1 -0
  71. package/src/views/method-selector/index.js +58 -45
  72. package/src/views/method-selector/method-selector.spec.js +1 -1
  73. package/src/views/method-selector/mount-express-methods.js +26 -66
  74. package/src/views/method-selector/mount-methods.js +178 -0
  75. package/src/views/modal.js +1 -1
  76. package/src/views/result.js +3 -3
  77. package/src/views/summary.js +190 -24
  78. package/src/views/summary.spec.js +145 -0
  79. package/tests/mocks/storefront-api-mock.js +27 -48
  80. package/src/style/utils/minifyCss.js +0 -14
  81. package/src/views/errors.js +0 -95
  82. package/src/views/method-selector/express-methods.js +0 -51
  83. package/src/views/method-selector/generate-framepay-config.js +0 -54
  84. package/src/views/method-selector/generate-framepay-config.spec.js +0 -195
package/src/style/base/default-theme.js CHANGED
@@ -1,4 +1,4 @@
1
- import { mutedTextColor, darken, mutedBorderColor } from '../utils/color-values';
1
+ import { mutedTextColor, mutedBorderColor, darken } from '../utils/color-values';
2
2
  import Border from '../utils/border';
3
3
 
4
4
  const properties = {
@@ -24,18 +24,13 @@ const properties = {
24
24
  colorMutedText: {
25
25
  fallback: {
26
26
  type: 'func',
27
- value: theme => mutedTextColor(theme.colorText, 60)
27
+ value: theme => mutedTextColor(theme.colorText)
28
28
  }
29
29
  },
30
30
  colorMutedBorder: {
31
31
  fallback: {
32
32
  type: 'func',
33
- value: theme => {
34
- if(theme.colorTextProvided) {
35
- return mutedBorderColor(theme.colorText);
36
- }
37
- return '#DCE3EA';
38
- }
33
+ value: theme => mutedBorderColor(theme.colorText)
39
34
  }
40
35
  },
41
36
  colorDanger: {
@@ -61,13 +56,13 @@ const properties = {
61
56
  fontWeightBase: {
62
57
  fallback: {
63
58
  type: 'static',
64
- value: '500',
59
+ value: '400',
65
60
  }
66
61
  },
67
62
  fontLineHeightBase: {
68
63
  fallback: {
69
- type: 'func',
70
- value: theme => `calc(${theme.fontSizeBase} * 1.5)`,
64
+ type: 'static',
65
+ value: 'initial',
71
66
  }
72
67
  },
73
68
  fontSmooth: {
@@ -81,7 +76,7 @@ const properties = {
81
76
  borderRadius: {
82
77
  fallback: {
83
78
  type: 'static',
84
- value: '6px',
79
+ value: '4px',
85
80
  }
86
81
  },
87
82
 
@@ -95,7 +90,7 @@ const properties = {
95
90
  headingFontWeight: {
96
91
  fallback: {
97
92
  type: 'static',
98
- value: '600',
93
+ value: '500',
99
94
  }
100
95
  },
101
96
  headingColorText: {
@@ -132,8 +127,8 @@ const properties = {
132
127
  },
133
128
  buttonFontLineHeight: {
134
129
  fallback: {
135
- type: 'variable',
136
- value: 'fontLineHeightBase',
130
+ type: 'static',
131
+ value: '1.5',
137
132
  }
138
133
  },
139
134
  buttonFontWeight: {
@@ -161,62 +156,6 @@ const properties = {
161
156
  }
162
157
  },
163
158
 
164
- /** Buttons Secondary */
165
- buttonSecondaryColorBackground: {
166
- fallback: {
167
- type: 'variable',
168
- value: 'colorBackground',
169
- }
170
- },
171
- buttonSecondaryColorText: {
172
- fallback: {
173
- type: 'variable',
174
- value: 'colorPrimary',
175
- }
176
- },
177
- buttonSecondaryFontFamily: {
178
- fallback: {
179
- type: 'variable',
180
- value: 'fontFamily',
181
- }
182
- },
183
- buttonSecondaryFontSize: {
184
- fallback: {
185
- type: 'variable',
186
- value: 'fontSizeBase',
187
- }
188
- },
189
- buttonSecondaryFontLineHeight: {
190
- fallback: {
191
- type: 'variable',
192
- value: 'fontLineHeightBase',
193
- }
194
- },
195
- buttonSecondaryFontWeight: {
196
- fallback: {
197
- type: 'variable',
198
- value: 'fontWeightBase',
199
- }
200
- },
201
- buttonSecondaryBorder: {
202
- fallback: {
203
- type: 'func',
204
- value: theme => `1px solid ${theme.colorPrimary}`,
205
- }
206
- },
207
- buttonSecondaryBorderRadius: {
208
- fallback: {
209
- type: 'variable',
210
- value: 'borderRadius',
211
- }
212
- },
213
- buttonSecondaryBoxShadow: {
214
- fallback: {
215
- type: 'static',
216
- value: 'none',
217
- }
218
- },
219
-
220
159
  /** Buttons: Hover */
221
160
  buttonHoverColorBackground: {
222
161
  fallback: {
@@ -283,62 +222,6 @@ const properties = {
283
222
  value: 'buttonBoxShadow',
284
223
  }
285
224
  },
286
-
287
- /** Buttons Secondary: Hover */
288
- buttonSecondaryHoverColorBackground: {
289
- fallback: {
290
- type: 'variable',
291
- value: 'colorBackground'
292
- }
293
- },
294
- buttonSecondaryHoverColorText: {
295
- fallback: {
296
- type: 'variable',
297
- value: 'buttonSecondaryColorText',
298
- }
299
- },
300
- buttonSecondaryHoverFontFamily: {
301
- fallback: {
302
- type: 'variable',
303
- value: 'buttonSecondaryFontFamily',
304
- }
305
- },
306
- buttonSecondaryHoverFontSize: {
307
- fallback: {
308
- type: 'variable',
309
- value: 'buttonSecondaryFontSize',
310
- }
311
- },
312
- buttonSecondaryHoverFontLineHeight: {
313
- fallback: {
314
- type: 'variable',
315
- value: 'buttonSecondaryFontLineHeight',
316
- }
317
- },
318
- buttonSecondaryHoverFontWeight: {
319
- fallback: {
320
- type: 'variable',
321
- value: 'buttonSecondaryFontWeight',
322
- }
323
- },
324
- buttonSecondaryHoverBorder: {
325
- fallback: {
326
- type: 'variable',
327
- value: 'buttonSecondaryBorder',
328
- }
329
- },
330
- buttonSecondaryHoverBorderRadius: {
331
- fallback: {
332
- type: 'variable',
333
- value: 'buttonSecondaryBorderRadius',
334
- }
335
- },
336
- buttonSecondaryHoverBoxShadow: {
337
- fallback: {
338
- type: 'variable',
339
- value: 'buttonSecondaryBoxShadow',
340
- }
341
- },
342
225
 
343
226
  /** Buttons: Active */
344
227
  buttonActiveColorBackground: {
@@ -396,62 +279,6 @@ const properties = {
396
279
  }
397
280
  },
398
281
 
399
- /** Buttons Secondary: Active */
400
- buttonSecondaryActiveColorBackground: {
401
- fallback: {
402
- type: 'variable',
403
- value: 'buttonSecondaryHoverColorBackground',
404
- }
405
- },
406
- buttonSecondaryActiveColorText: {
407
- fallback: {
408
- type: 'variable',
409
- value: 'buttonSecondaryHoverColorText',
410
- }
411
- },
412
- buttonSecondaryActiveFontFamily: {
413
- fallback: {
414
- type: 'variable',
415
- value: 'buttonSecondaryHoverFontFamily',
416
- }
417
- },
418
- buttonSecondaryActiveFontSize: {
419
- fallback: {
420
- type: 'variable',
421
- value: 'buttonSecondaryHoverFontSize',
422
- }
423
- },
424
- buttonSecondaryActiveFontLineHeight: {
425
- fallback: {
426
- type: 'variable',
427
- value: 'buttonSecondaryHoverFontLineHeight',
428
- }
429
- },
430
- buttonSecondaryActiveFontWeight: {
431
- fallback: {
432
- type: 'variable',
433
- value: 'buttonSecondaryHoverFontWeight',
434
- }
435
- },
436
- buttonSecondaryActiveBorder: {
437
- fallback: {
438
- type: 'variable',
439
- value: 'buttonSecondaryHoverBorder'
440
- }
441
- },
442
- buttonSecondaryActiveBorderRadius: {
443
- fallback: {
444
- type: 'variable',
445
- value: 'buttonSecondaryHoverBorderRadius',
446
- }
447
- },
448
- buttonSecondaryActiveBoxShadow: {
449
- fallback: {
450
- type: 'variable',
451
- value: 'buttonSecondaryHoverBoxShadow',
452
- }
453
- },
454
-
455
282
  /** Inputs: Base */
456
283
  inputColorBackground: {
457
284
  fallback: {
@@ -479,8 +306,8 @@ const properties = {
479
306
  },
480
307
  inputFontLineHeight: {
481
308
  fallback: {
482
- type: 'variable',
483
- value: 'fontLineHeightBase',
309
+ type: 'static',
310
+ value: '1.5',
484
311
  }
485
312
  },
486
313
  inputFontWeight: {
@@ -492,7 +319,7 @@ const properties = {
492
319
  inputBorder: {
493
320
  fallback: {
494
321
  type: 'func',
495
- value: theme => `1px solid ${darken(theme.colorMutedBorder, 4)}`
322
+ value: theme => `1px solid ${mutedBorderColor(theme.colorText)}`
496
323
  }
497
324
  },
498
325
  inputBorderRadius: {
@@ -634,7 +461,7 @@ const properties = {
634
461
  if(theme.inputColorTextProvided) {
635
462
  return mutedTextColor(theme.inputColorText);
636
463
  }
637
- return theme.colorMutedText;
464
+ return mutedTextColor(theme.colorText);
638
465
  }
639
466
  }
640
467
  },