@thecb/components 9.0.4-beta.1 → 9.0.4-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/index.cjs.js +29 -48
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +29 -48
  4. package/dist/index.esm.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/atoms/alert/Alert.js +7 -3
  7. package/src/components/atoms/form-layouts/FormInput.js +27 -25
  8. package/src/components/molecules/partial-amount-form/PartialAmountForm.js +1 -0
  9. package/src/components/molecules/partial-amount-form/PartialAmountForm.stories.js +146 -0
  10. package/src/components/molecules/payment-form-ach/PaymentFormACH.js +0 -10
  11. package/src/components/molecules/payment-form-card/PaymentFormCard.js +1 -11
  12. package/src/components/molecules/radio-section/RadioSection.js +1 -19
  13. package/src/components/molecules/radio-section/RadioSection.stories.js +6 -420
package/src/components/molecules/radio-section/RadioSection.stories.js CHANGED
@@ -1,9 +1,8 @@
1
1
  import React, { useState } from "react";
2
- import { boolean } from "@storybook/addon-knobs";
3
- import page from "../../../../.storybook/page";
2
+ import { text, boolean } from "@storybook/addon-knobs";
3
+
4
4
  import RadioSection from "./RadioSection";
5
- import PaymentFormACH from "../payment-form-ach/PaymentFormACH";
6
- import PaymentFormCard from "../payment-form-card";
5
+ import page from "../../../../.storybook/page";
7
6
 
8
7
  const story = page({
9
8
  title: "Components|Molecules/RadioSection",
@@ -37,416 +36,6 @@ const cardIcons = [
37
36
  name: "AMEX"
38
37
  }
39
38
  ];
40
- const paymentFormCardProps = {
41
- showErrors: false,
42
- fields: {
43
- country: {
44
- dirty: false,
45
- rawValue: "US",
46
- validators: [
47
- {
48
- type: "validator/REQUIRED",
49
- args: [],
50
- error: "error/REQUIRED"
51
- }
52
- ],
53
- constraints: [],
54
- errors: [],
55
- hasErrors: false
56
- },
57
- nameOnCard: {
58
- dirty: false,
59
- rawValue: "",
60
- validators: [
61
- {
62
- type: "validator/REQUIRED",
63
- args: [],
64
- error: "error/REQUIRED"
65
- }
66
- ],
67
- constraints: [],
68
- errors: ["error/REQUIRED"],
69
- hasErrors: true
70
- },
71
- creditCardNumber: {
72
- dirty: false,
73
- rawValue: "",
74
- validators: [
75
- {
76
- type: "validator/REQUIRED",
77
- args: [],
78
- error: "error/REQUIRED"
79
- },
80
- {
81
- type: "validator/HAS_LENGTH",
82
- args: [15, 16],
83
- error: "error/HAS_LENGTH"
84
- }
85
- ],
86
- constraints: [
87
- {
88
- type: "validator/ONLY_INTEGERS",
89
- args: [],
90
- error: "error/ONLY_INTEGERS"
91
- },
92
- {
93
- type: "validator/HAS_LENGTH",
94
- args: [0, 16],
95
- error: "error/HAS_LENGTH"
96
- }
97
- ],
98
- errors: ["error/REQUIRED"],
99
- hasErrors: true
100
- },
101
- expirationDate: {
102
- dirty: false,
103
- rawValue: "",
104
- validators: [
105
- {
106
- type: "validator/REQUIRED",
107
- args: [],
108
- error: "error/REQUIRED"
109
- },
110
- {
111
- type: "validator/HAS_LENGTH",
112
- args: [4, 4],
113
- error: "error/HAS_LENGTH"
114
- },
115
- {
116
- type: "validator/IS_VALID_MONTH",
117
- args: [0],
118
- error: "error/IS_VALID_MONTH"
119
- },
120
- {
121
- type: "validator/DATE_AFTER_TODAY",
122
- args: ["MMYY", "month", true],
123
- error: "error/DATE_AFTER_TODAY"
124
- }
125
- ],
126
- constraints: [
127
- {
128
- type: "validator/ONLY_EXPIRATION_DATE",
129
- args: [],
130
- error: "error/ONLY_EXPIRATION_DATE"
131
- },
132
- {
133
- type: "validator/HAS_LENGTH",
134
- args: [0, 4],
135
- error: "error/HAS_LENGTH"
136
- }
137
- ],
138
- errors: ["error/REQUIRED"],
139
- hasErrors: true
140
- },
141
- cvv: {
142
- dirty: false,
143
- rawValue: "",
144
- validators: [
145
- {
146
- type: "validator/REQUIRED",
147
- args: [],
148
- error: "error/REQUIRED"
149
- },
150
- {
151
- type: "validator/HAS_LENGTH",
152
- args: [3, 4],
153
- error: "error/HAS_LENGTH"
154
- }
155
- ],
156
- constraints: [
157
- {
158
- type: "validator/ONLY_INTEGERS",
159
- args: [],
160
- error: "error/ONLY_INTEGERS"
161
- },
162
- {
163
- type: "validator/HAS_LENGTH",
164
- args: [0, 4],
165
- error: "error/HAS_LENGTH"
166
- }
167
- ],
168
- errors: ["error/REQUIRED"],
169
- hasErrors: true
170
- },
171
- zipCode: {
172
- dirty: false,
173
- rawValue: "",
174
- validators: [
175
- {
176
- type: "validator/REQUIRED",
177
- args: [],
178
- error: "error/REQUIRED"
179
- },
180
- {
181
- type: "validator/VALIDATE_WHEN",
182
- args: [
183
- {
184
- type: "validator/VALIDATE_WHEN",
185
- args: [
186
- {
187
- type: "validator/HAS_LENGTH",
188
- args: [5, 5],
189
- error: "error/HAS_LENGTH"
190
- },
191
- {
192
- type: "validator/HAS_LENGTH",
193
- args: [0, 5],
194
- error: "error/HAS_LENGTH"
195
- },
196
- null
197
- ],
198
- error: "error/HAS_LENGTH"
199
- },
200
- {
201
- type: "validator/MATCHES_REGEX",
202
- args: ["US"],
203
- error: "error/MATCHES_REGEX"
204
- },
205
- "country"
206
- ],
207
- error: "error/HAS_LENGTH"
208
- },
209
- {
210
- type: "validator/VALIDATE_WHEN",
211
- args: [
212
- {
213
- type: "validator/VALIDATE_WHEN",
214
- args: [
215
- {
216
- type: "validator/HAS_LENGTH",
217
- args: [9, 9],
218
- error: "error/HAS_LENGTH"
219
- },
220
- {
221
- type: "validator/HAS_LENGTH",
222
- args: [6, 9],
223
- error: "error/HAS_LENGTH"
224
- },
225
- null
226
- ],
227
- error: "error/HAS_LENGTH"
228
- },
229
- {
230
- type: "validator/MATCHES_REGEX",
231
- args: ["US"],
232
- error: "error/MATCHES_REGEX"
233
- },
234
- "country"
235
- ],
236
- error: "error/HAS_LENGTH"
237
- }
238
- ],
239
- constraints: [
240
- {
241
- type: "validator/VALIDATE_WHEN",
242
- args: [
243
- {
244
- type: "validator/ONLY_INTEGERS",
245
- args: [],
246
- error: "error/ONLY_INTEGERS"
247
- },
248
- {
249
- type: "validator/MATCHES_REGEX",
250
- args: ["US"],
251
- error: "error/MATCHES_REGEX"
252
- },
253
- "country"
254
- ],
255
- error: "error/ONLY_INTEGERS"
256
- },
257
- {
258
- type: "validator/VALIDATE_WHEN",
259
- args: [
260
- {
261
- type: "validator/HAS_LENGTH",
262
- args: [0, 9],
263
- error: "error/HAS_LENGTH"
264
- },
265
- {
266
- type: "validator/MATCHES_REGEX",
267
- args: ["US"],
268
- error: "error/MATCHES_REGEX"
269
- },
270
- "country"
271
- ],
272
- error: "error/HAS_LENGTH"
273
- }
274
- ],
275
- errors: ["error/REQUIRED"],
276
- hasErrors: true
277
- }
278
- },
279
- actions: {
280
- fields: {
281
- country: {},
282
- nameOnCard: {},
283
- creditCardNumber: {},
284
- expirationDate: {},
285
- cvv: {},
286
- zipCode: {}
287
- },
288
- form: {}
289
- }
290
- };
291
- const paymentFormACHProps = {
292
- showErrors: false,
293
- fields: {
294
- name: {
295
- dirty: false,
296
- rawValue: "",
297
- validators: [
298
- {
299
- type: "validator/REQUIRED",
300
- args: [],
301
- error: "error/REQUIRED"
302
- }
303
- ],
304
- constraints: [],
305
- errors: ["error/REQUIRED"],
306
- hasErrors: true
307
- },
308
- routingNumber: {
309
- dirty: false,
310
- rawValue: "",
311
- validators: [
312
- {
313
- type: "validator/REQUIRED",
314
- args: [],
315
- error: "error/REQUIRED"
316
- },
317
- {
318
- type: "validator/HAS_LENGTH",
319
- args: [9, 9],
320
- error: "error/HAS_LENGTH"
321
- },
322
- {
323
- type: "validator/IS_ROUTING_NUMBER",
324
- args: [],
325
- error: "error/IS_ROUTING_NUMBER"
326
- }
327
- ],
328
- constraints: [
329
- {
330
- type: "validator/ONLY_INTEGERS",
331
- args: [],
332
- error: "error/ONLY_INTEGERS"
333
- },
334
- {
335
- type: "validator/HAS_LENGTH",
336
- args: [0, 9],
337
- error: "error/HAS_LENGTH"
338
- }
339
- ],
340
- errors: ["error/REQUIRED"],
341
- hasErrors: true
342
- },
343
- confirmRoutingNumber: {
344
- dirty: false,
345
- rawValue: "",
346
- validators: [
347
- {
348
- type: "validator/MATCHES_FIELD",
349
- args: ["routingNumber"],
350
- error: "error/MATCHES_FIELD"
351
- }
352
- ],
353
- constraints: [
354
- {
355
- type: "validator/ONLY_INTEGERS",
356
- args: [],
357
- error: "error/ONLY_INTEGERS"
358
- },
359
- {
360
- type: "validator/HAS_LENGTH",
361
- args: [0, 9],
362
- error: "error/HAS_LENGTH"
363
- }
364
- ],
365
- errors: [],
366
- hasErrors: false
367
- },
368
- accountNumber: {
369
- dirty: false,
370
- rawValue: "",
371
- validators: [
372
- {
373
- type: "validator/REQUIRED",
374
- args: [],
375
- error: "error/REQUIRED"
376
- },
377
- {
378
- type: "validator/HAS_LENGTH",
379
- args: [5, 17],
380
- error: "error/HAS_LENGTH"
381
- }
382
- ],
383
- constraints: [
384
- {
385
- type: "validator/ONLY_INTEGERS",
386
- args: [],
387
- error: "error/ONLY_INTEGERS"
388
- },
389
- {
390
- type: "validator/HAS_LENGTH",
391
- args: [0, 17],
392
- error: "error/HAS_LENGTH"
393
- }
394
- ],
395
- errors: ["error/REQUIRED"],
396
- hasErrors: true
397
- },
398
- confirmAccountNumber: {
399
- dirty: false,
400
- rawValue: "",
401
- validators: [
402
- {
403
- type: "validator/MATCHES_FIELD",
404
- args: ["accountNumber"],
405
- error: "error/MATCHES_FIELD"
406
- }
407
- ],
408
- constraints: [
409
- {
410
- type: "validator/ONLY_INTEGERS",
411
- args: [],
412
- error: "error/ONLY_INTEGERS"
413
- },
414
- {
415
- type: "validator/HAS_LENGTH",
416
- args: [0, 17],
417
- error: "error/HAS_LENGTH"
418
- }
419
- ],
420
- errors: [],
421
- hasErrors: false
422
- },
423
- accountType: {
424
- dirty: false,
425
- rawValue: "CHECKING",
426
- validators: [
427
- {
428
- type: "validator/REQUIRED",
429
- args: [],
430
- error: "error/REQUIRED"
431
- }
432
- ],
433
- constraints: [],
434
- errors: [],
435
- hasErrors: false
436
- }
437
- },
438
- actions: {
439
- fields: {
440
- name: {},
441
- routingNumber: {},
442
- confirmRoutingNumber: {},
443
- accountNumber: {},
444
- confirmAccountNumber: {},
445
- accountType: {}
446
- },
447
- form: {}
448
- }
449
- };
450
39
  const cardIconsLabel = `Accepting ${cardIcons
451
40
  .filter(ci => ci.enabled)
452
41
  ?.map((cardIcon, index) =>
@@ -458,17 +47,14 @@ const sections = [
458
47
  {
459
48
  id: "new-card-section",
460
49
  title: "New Card",
461
- content: <PaymentFormCard {...paymentFormCardProps} />,
50
+ content: <p>The form to add a credit card would go here.</p>,
462
51
  rightIconsLabel: cardIconsLabel,
463
52
  rightIcons: cardIcons
464
53
  },
465
- {
466
- id: "new-bank-account-section",
467
- title: "New bank account",
468
- content: <PaymentFormACH {...paymentFormACHProps} />
469
- },
54
+ { id: "bar", title: "Bar", content: <div>Content 1</div> },
470
55
  { id: "baz", title: "Baz", content: <div>Content 2</div> }
471
56
  ];
57
+
472
58
  export const radioSection = () => {
473
59
  const [openSection, setOpenSection] = useState("");
474
60
  return (