@justfixnyc/component-library 0.55.0 → 0.56.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.
package/dist/src/index.es.js
CHANGED
|
@@ -1,19 +1,21 @@
|
|
|
1
1
|
import _extends from '@babel/runtime/helpers/extends';
|
|
2
|
+
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
2
3
|
import classNames from 'classnames';
|
|
3
4
|
import React, { forwardRef, useId } from 'react';
|
|
4
|
-
import { faPlus, faBan, faXmark, faDownload as faDownload$1, faBuildingColumns, faAddressCard, faBuilding, faMapLocationDot, faMemoPad, faLocationDot, faHouse, faGlobe, faUser, faSpinner, faBars, faEnvelope as faEnvelope$1, faCommentSms, faCopy, faCirclePlus, faCircleInfo, faCircleExclamation as faCircleExclamation$1, faChevronRight, faChevronLeft, faChevronDown, faChevronUp, faCheckDouble, faCheck, faCaretDown, faCaretRight, faBookmark as faBookmark$1, faSquareArrowUpRight, faArrowsRotateReverse, faArrowDownWideShort, faArrowUpShortWide, faArrowUpArrowDown, faArrowDownLong, faArrowUpLong, faArrowDown, faArrowUpRight, faArrowUp, faArrowRight, faArrowLeft } from '@awesome.me/kit-
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
5
|
+
import { faPlus, faBan, faXmark, faDownload as faDownload$1, faBuildingColumns, faAddressCard, faBuilding, faMapLocationDot, faMemoPad, faLocationDot, faHouse, faGlobe, faUser, faSpinner, faBars, faEnvelope as faEnvelope$1, faCommentSms, faCopy, faCirclePlus, faCircleInfo, faCircleExclamation as faCircleExclamation$1, faChevronRight, faChevronLeft, faChevronDown, faChevronUp, faCheckDouble, faCheck, faCaretDown, faCaretRight, faBookmark as faBookmark$1, faSquareArrowUpRight, faArrowsRotateReverse, faArrowDownWideShort, faArrowUpShortWide, faArrowUpArrowDown, faArrowDownLong, faArrowUpLong, faArrowDown, faArrowUpRight, faArrowUp, faArrowRight, faArrowLeft } from '@awesome.me/kit-6863e5a21e/icons/classic/solid';
|
|
6
|
+
import { faMailboxOpenLetter, faEnvelopeCircleCheck } from '@awesome.me/kit-6863e5a21e/icons/classic/light';
|
|
7
|
+
import { faPrint, faEyeSlash, faEye, faDownload, faEnvelope, faCircleExclamation, faBookmark } from '@awesome.me/kit-6863e5a21e/icons/classic/regular';
|
|
8
|
+
import { faXTwitter, faTwitter, faFacebookF } from '@awesome.me/kit-6863e5a21e/icons/classic/brands';
|
|
7
9
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
8
10
|
import Select, { components } from 'react-select';
|
|
9
11
|
|
|
12
|
+
const _excluded$9 = ["className", "icon"];
|
|
10
13
|
const Icon = _ref => {
|
|
11
14
|
let {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
} = _ref;
|
|
15
|
+
className,
|
|
16
|
+
icon
|
|
17
|
+
} = _ref,
|
|
18
|
+
props = _objectWithoutProperties(_ref, _excluded$9);
|
|
17
19
|
let faIcon;
|
|
18
20
|
switch (icon) {
|
|
19
21
|
case 'arrowLeft':
|
|
@@ -53,7 +55,10 @@ const Icon = _ref => {
|
|
|
53
55
|
faIcon = faSquareArrowUpRight;
|
|
54
56
|
break;
|
|
55
57
|
case 'bookmark':
|
|
56
|
-
|
|
58
|
+
faIcon = faBookmark$1;
|
|
59
|
+
break;
|
|
60
|
+
case 'bookmarkRegular':
|
|
61
|
+
faIcon = faBookmark;
|
|
57
62
|
break;
|
|
58
63
|
case 'caretRight':
|
|
59
64
|
faIcon = faCaretRight;
|
|
@@ -80,7 +85,10 @@ const Icon = _ref => {
|
|
|
80
85
|
faIcon = faChevronRight;
|
|
81
86
|
break;
|
|
82
87
|
case 'circleExclamation':
|
|
83
|
-
|
|
88
|
+
faIcon = faCircleExclamation$1;
|
|
89
|
+
break;
|
|
90
|
+
case 'circleExclamationRegular':
|
|
91
|
+
faIcon = faCircleExclamation;
|
|
84
92
|
break;
|
|
85
93
|
case 'circleInfo':
|
|
86
94
|
faIcon = faCircleInfo;
|
|
@@ -104,7 +112,16 @@ const Icon = _ref => {
|
|
|
104
112
|
faIcon = faCommentSms;
|
|
105
113
|
break;
|
|
106
114
|
case 'envelope':
|
|
107
|
-
|
|
115
|
+
faIcon = faEnvelope$1;
|
|
116
|
+
break;
|
|
117
|
+
case 'envelopeRegular':
|
|
118
|
+
faIcon = faEnvelope;
|
|
119
|
+
break;
|
|
120
|
+
case 'envelopeCircleCheck':
|
|
121
|
+
faIcon = faEnvelopeCircleCheck;
|
|
122
|
+
break;
|
|
123
|
+
case 'mailboxOpenLetter':
|
|
124
|
+
faIcon = faMailboxOpenLetter;
|
|
108
125
|
break;
|
|
109
126
|
case 'bars':
|
|
110
127
|
faIcon = faBars;
|
|
@@ -140,7 +157,10 @@ const Icon = _ref => {
|
|
|
140
157
|
faIcon = faBuildingColumns;
|
|
141
158
|
break;
|
|
142
159
|
case 'download':
|
|
143
|
-
|
|
160
|
+
faIcon = faDownload$1;
|
|
161
|
+
break;
|
|
162
|
+
case 'downloadRegular':
|
|
163
|
+
faIcon = faDownload;
|
|
144
164
|
break;
|
|
145
165
|
case 'xmark':
|
|
146
166
|
faIcon = faXmark;
|
|
@@ -171,13 +191,14 @@ const Icon = _ref => {
|
|
|
171
191
|
};
|
|
172
192
|
Icon.displayName = 'Icon';
|
|
173
193
|
|
|
194
|
+
const _excluded$8 = ["icon", "children", "className"];
|
|
174
195
|
const Link = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
175
196
|
let {
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
197
|
+
icon,
|
|
198
|
+
children,
|
|
199
|
+
className
|
|
200
|
+
} = _ref,
|
|
201
|
+
props = _objectWithoutProperties(_ref, _excluded$8);
|
|
181
202
|
const linkClassNames = classNames('jfcl-link', className);
|
|
182
203
|
const opensInNewTab = props.target === '_blank';
|
|
183
204
|
// When using this component within a react-router-dom <Link />, a navigate function is passed through the props us here.
|
|
@@ -203,17 +224,18 @@ const Link = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
203
224
|
});
|
|
204
225
|
Link.displayName = 'Link';
|
|
205
226
|
|
|
227
|
+
const _excluded$7 = ["type", "variant", "text", "action", "actionHref", "actionLabel", "className"];
|
|
206
228
|
const Alert = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
207
229
|
let {
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
230
|
+
type = 'info',
|
|
231
|
+
variant = 'primary',
|
|
232
|
+
text,
|
|
233
|
+
action,
|
|
234
|
+
actionHref,
|
|
235
|
+
actionLabel,
|
|
236
|
+
className
|
|
237
|
+
} = _ref,
|
|
238
|
+
props = _objectWithoutProperties(_ref, _excluded$7);
|
|
217
239
|
const alertClassNames = classNames('jfcl-alert', "jfcl-variant-".concat(variant), "jfcl-type-".concat(type), className);
|
|
218
240
|
const hasAction = !!action;
|
|
219
241
|
const showButton = hasAction && !actionHref;
|
|
@@ -249,21 +271,22 @@ const Alert = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
249
271
|
});
|
|
250
272
|
Alert.displayName = 'Alert';
|
|
251
273
|
|
|
274
|
+
const _excluded$6 = ["labelText", "variant", "size", "loading", "labelIcon", "iconOnRight", "iconOnly", "className"];
|
|
252
275
|
/**
|
|
253
276
|
* Accepts all `ButtonHTMLAttributes`
|
|
254
277
|
*/
|
|
255
278
|
const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
256
279
|
let {
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
280
|
+
labelText,
|
|
281
|
+
variant = 'primary',
|
|
282
|
+
size = 'large',
|
|
283
|
+
loading,
|
|
284
|
+
labelIcon,
|
|
285
|
+
iconOnRight,
|
|
286
|
+
iconOnly,
|
|
287
|
+
className
|
|
288
|
+
} = _ref,
|
|
289
|
+
props = _objectWithoutProperties(_ref, _excluded$6);
|
|
267
290
|
const buttonClassNames = classNames('jfcl-button', "jfcl-variant-".concat(variant), "jfcl-size-".concat(size), "".concat(loading ? 'jfcl-is-loading' : ''), "".concat(iconOnly ? 'jfcl-btn-icon-only' : ''), className);
|
|
268
291
|
const iconClassNames = classNames('jfcl-button__icon', "".concat(iconOnRight ? 'jfcl-button__icon_right' : ''));
|
|
269
292
|
const arias = {};
|
|
@@ -347,22 +370,23 @@ const InputHeader = _ref2 => {
|
|
|
347
370
|
}), invalidText)));
|
|
348
371
|
};
|
|
349
372
|
|
|
373
|
+
const _excluded$5 = ["className", "invalidText", "invalidRole", "invalid", "headerText", "helperText", "labelText", "disabled", "id"];
|
|
350
374
|
/**
|
|
351
375
|
* Accepts all `InputHTMLAttributes`
|
|
352
376
|
*/
|
|
353
377
|
const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
354
378
|
let {
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
379
|
+
className,
|
|
380
|
+
invalidText,
|
|
381
|
+
invalidRole,
|
|
382
|
+
invalid,
|
|
383
|
+
headerText,
|
|
384
|
+
helperText,
|
|
385
|
+
labelText,
|
|
386
|
+
disabled,
|
|
387
|
+
id
|
|
388
|
+
} = _ref,
|
|
389
|
+
props = _objectWithoutProperties(_ref, _excluded$5);
|
|
366
390
|
const checkboxClassNames = classNames('jfcl-checkbox', {
|
|
367
391
|
['jfcl-checkbox--is-disabled']: disabled
|
|
368
392
|
}, className);
|
|
@@ -401,6 +425,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
401
425
|
});
|
|
402
426
|
Checkbox.displayName = 'Checkbox';
|
|
403
427
|
|
|
428
|
+
const _excluded$4 = ["className", "helperText", "invalid", "invalidText", "invalidRole", "disabled", "labelText", "onChange", "options"];
|
|
404
429
|
const DropdownIndicator = props => {
|
|
405
430
|
return /*#__PURE__*/React.createElement(components.DropdownIndicator, props, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
406
431
|
icon: faChevronDown
|
|
@@ -408,17 +433,17 @@ const DropdownIndicator = props => {
|
|
|
408
433
|
};
|
|
409
434
|
const Dropdown = _ref => {
|
|
410
435
|
let {
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
436
|
+
className,
|
|
437
|
+
helperText,
|
|
438
|
+
invalid,
|
|
439
|
+
invalidText,
|
|
440
|
+
invalidRole,
|
|
441
|
+
disabled,
|
|
442
|
+
labelText,
|
|
443
|
+
onChange,
|
|
444
|
+
options
|
|
445
|
+
} = _ref,
|
|
446
|
+
props = _objectWithoutProperties(_ref, _excluded$4);
|
|
422
447
|
const hasOnChange = !!onChange;
|
|
423
448
|
|
|
424
449
|
// Randomly generated id
|
|
@@ -455,21 +480,22 @@ const Dropdown = _ref => {
|
|
|
455
480
|
};
|
|
456
481
|
Dropdown.displayName = 'Dropdown';
|
|
457
482
|
|
|
483
|
+
const _excluded$3 = ["className", "children", "invalidText", "invalidRole", "invalid", "helperText", "helperElement", "legendText"];
|
|
458
484
|
/**
|
|
459
485
|
* Accepts all `HTMLFieldSetElement`
|
|
460
486
|
*/
|
|
461
487
|
const FormGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
462
488
|
let {
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
489
|
+
className,
|
|
490
|
+
children,
|
|
491
|
+
invalidText,
|
|
492
|
+
invalidRole,
|
|
493
|
+
invalid,
|
|
494
|
+
helperText,
|
|
495
|
+
helperElement,
|
|
496
|
+
legendText
|
|
497
|
+
} = _ref,
|
|
498
|
+
props = _objectWithoutProperties(_ref, _excluded$3);
|
|
473
499
|
const fieldsetClassNames = classNames('jfcl-form-group', {
|
|
474
500
|
['jfcl-form-group-is-invalid']: invalid
|
|
475
501
|
}, className);
|
|
@@ -489,23 +515,24 @@ const FormGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
489
515
|
});
|
|
490
516
|
FormGroup.displayName = 'FormGroup';
|
|
491
517
|
|
|
518
|
+
const _excluded$2 = ["className", "invalidText", "invalidRole", "invalid", "headerText", "helperText", "labelText", "labelElement", "disabled", "id"];
|
|
492
519
|
/**
|
|
493
520
|
* Accepts all `InputHTMLAttributes`
|
|
494
521
|
*/
|
|
495
522
|
const RadioButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
496
523
|
let {
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
524
|
+
className,
|
|
525
|
+
invalidText,
|
|
526
|
+
invalidRole,
|
|
527
|
+
invalid,
|
|
528
|
+
headerText,
|
|
529
|
+
helperText,
|
|
530
|
+
labelText,
|
|
531
|
+
labelElement,
|
|
532
|
+
disabled,
|
|
533
|
+
id
|
|
534
|
+
} = _ref,
|
|
535
|
+
props = _objectWithoutProperties(_ref, _excluded$2);
|
|
509
536
|
const radioButtonClassNames = classNames('jfcl-radio-button', {
|
|
510
537
|
['jfcl-radio-button--is-invalid']: invalid,
|
|
511
538
|
['jfcl-radio-button--is-disabled']: disabled
|
|
@@ -541,17 +568,18 @@ const RadioButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
541
568
|
});
|
|
542
569
|
RadioButton.displayName = 'RadioButton';
|
|
543
570
|
|
|
571
|
+
const _excluded$1 = ["className", "labelText", "disabled", "id"];
|
|
544
572
|
/**
|
|
545
573
|
* Accepts all `InputHTMLAttributes`
|
|
546
574
|
*/
|
|
547
575
|
const SelectButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
548
576
|
let {
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
577
|
+
className,
|
|
578
|
+
labelText,
|
|
579
|
+
disabled,
|
|
580
|
+
id
|
|
581
|
+
} = _ref,
|
|
582
|
+
props = _objectWithoutProperties(_ref, _excluded$1);
|
|
555
583
|
const SelectButtonClassNames = classNames('jfcl-select-button', {
|
|
556
584
|
['jfcl-select-button--is-disabled']: disabled
|
|
557
585
|
}, className);
|
|
@@ -573,23 +601,24 @@ const SelectButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
573
601
|
});
|
|
574
602
|
SelectButton.displayName = 'SelectButton';
|
|
575
603
|
|
|
604
|
+
const _excluded = ["className", "invalidText", "invalidRole", "invalid", "helperText", "helperElement", "labelText", "size", "id", "type"];
|
|
576
605
|
/**
|
|
577
606
|
* Accepts all `InputHTMLAttributes`
|
|
578
607
|
*/
|
|
579
608
|
const TextInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
580
609
|
let {
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
610
|
+
className,
|
|
611
|
+
invalidText,
|
|
612
|
+
invalidRole,
|
|
613
|
+
invalid,
|
|
614
|
+
helperText,
|
|
615
|
+
helperElement,
|
|
616
|
+
labelText,
|
|
617
|
+
size,
|
|
618
|
+
id,
|
|
619
|
+
type = 'text'
|
|
620
|
+
} = _ref,
|
|
621
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
593
622
|
const inputIsMoney = type === 'money';
|
|
594
623
|
const inputType = inputIsMoney ? 'number' : type;
|
|
595
624
|
const textInputWrapperClassNames = classNames('jfcl-text-input', {
|
package/dist/src/index.js
CHANGED
|
@@ -3,28 +3,31 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var _extends = require('@babel/runtime/helpers/extends');
|
|
6
|
+
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
6
7
|
var classNames = require('classnames');
|
|
7
8
|
var React = require('react');
|
|
8
|
-
var solid = require('@awesome.me/kit-
|
|
9
|
-
var
|
|
10
|
-
var
|
|
9
|
+
var solid = require('@awesome.me/kit-6863e5a21e/icons/classic/solid');
|
|
10
|
+
var light = require('@awesome.me/kit-6863e5a21e/icons/classic/light');
|
|
11
|
+
var regular = require('@awesome.me/kit-6863e5a21e/icons/classic/regular');
|
|
12
|
+
var brands = require('@awesome.me/kit-6863e5a21e/icons/classic/brands');
|
|
11
13
|
var reactFontawesome = require('@fortawesome/react-fontawesome');
|
|
12
14
|
var Select = require('react-select');
|
|
13
15
|
|
|
14
16
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
15
17
|
|
|
16
18
|
var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
|
|
19
|
+
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
|
|
17
20
|
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
|
|
18
21
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
19
22
|
var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
|
|
20
23
|
|
|
24
|
+
const _excluded$9 = ["className", "icon"];
|
|
21
25
|
const Icon = _ref => {
|
|
22
26
|
let {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
} = _ref;
|
|
27
|
+
className,
|
|
28
|
+
icon
|
|
29
|
+
} = _ref,
|
|
30
|
+
props = _objectWithoutProperties__default["default"](_ref, _excluded$9);
|
|
28
31
|
let faIcon;
|
|
29
32
|
switch (icon) {
|
|
30
33
|
case 'arrowLeft':
|
|
@@ -64,7 +67,10 @@ const Icon = _ref => {
|
|
|
64
67
|
faIcon = solid.faSquareArrowUpRight;
|
|
65
68
|
break;
|
|
66
69
|
case 'bookmark':
|
|
67
|
-
|
|
70
|
+
faIcon = solid.faBookmark;
|
|
71
|
+
break;
|
|
72
|
+
case 'bookmarkRegular':
|
|
73
|
+
faIcon = regular.faBookmark;
|
|
68
74
|
break;
|
|
69
75
|
case 'caretRight':
|
|
70
76
|
faIcon = solid.faCaretRight;
|
|
@@ -91,7 +97,10 @@ const Icon = _ref => {
|
|
|
91
97
|
faIcon = solid.faChevronRight;
|
|
92
98
|
break;
|
|
93
99
|
case 'circleExclamation':
|
|
94
|
-
|
|
100
|
+
faIcon = solid.faCircleExclamation;
|
|
101
|
+
break;
|
|
102
|
+
case 'circleExclamationRegular':
|
|
103
|
+
faIcon = regular.faCircleExclamation;
|
|
95
104
|
break;
|
|
96
105
|
case 'circleInfo':
|
|
97
106
|
faIcon = solid.faCircleInfo;
|
|
@@ -115,7 +124,16 @@ const Icon = _ref => {
|
|
|
115
124
|
faIcon = solid.faCommentSms;
|
|
116
125
|
break;
|
|
117
126
|
case 'envelope':
|
|
118
|
-
|
|
127
|
+
faIcon = solid.faEnvelope;
|
|
128
|
+
break;
|
|
129
|
+
case 'envelopeRegular':
|
|
130
|
+
faIcon = regular.faEnvelope;
|
|
131
|
+
break;
|
|
132
|
+
case 'envelopeCircleCheck':
|
|
133
|
+
faIcon = light.faEnvelopeCircleCheck;
|
|
134
|
+
break;
|
|
135
|
+
case 'mailboxOpenLetter':
|
|
136
|
+
faIcon = light.faMailboxOpenLetter;
|
|
119
137
|
break;
|
|
120
138
|
case 'bars':
|
|
121
139
|
faIcon = solid.faBars;
|
|
@@ -151,7 +169,10 @@ const Icon = _ref => {
|
|
|
151
169
|
faIcon = solid.faBuildingColumns;
|
|
152
170
|
break;
|
|
153
171
|
case 'download':
|
|
154
|
-
|
|
172
|
+
faIcon = solid.faDownload;
|
|
173
|
+
break;
|
|
174
|
+
case 'downloadRegular':
|
|
175
|
+
faIcon = regular.faDownload;
|
|
155
176
|
break;
|
|
156
177
|
case 'xmark':
|
|
157
178
|
faIcon = solid.faXmark;
|
|
@@ -182,13 +203,14 @@ const Icon = _ref => {
|
|
|
182
203
|
};
|
|
183
204
|
Icon.displayName = 'Icon';
|
|
184
205
|
|
|
206
|
+
const _excluded$8 = ["icon", "children", "className"];
|
|
185
207
|
const Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
186
208
|
let {
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
209
|
+
icon,
|
|
210
|
+
children,
|
|
211
|
+
className
|
|
212
|
+
} = _ref,
|
|
213
|
+
props = _objectWithoutProperties__default["default"](_ref, _excluded$8);
|
|
192
214
|
const linkClassNames = classNames__default["default"]('jfcl-link', className);
|
|
193
215
|
const opensInNewTab = props.target === '_blank';
|
|
194
216
|
// When using this component within a react-router-dom <Link />, a navigate function is passed through the props us here.
|
|
@@ -214,17 +236,18 @@ const Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
214
236
|
});
|
|
215
237
|
Link.displayName = 'Link';
|
|
216
238
|
|
|
239
|
+
const _excluded$7 = ["type", "variant", "text", "action", "actionHref", "actionLabel", "className"];
|
|
217
240
|
const Alert = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
218
241
|
let {
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
242
|
+
type = 'info',
|
|
243
|
+
variant = 'primary',
|
|
244
|
+
text,
|
|
245
|
+
action,
|
|
246
|
+
actionHref,
|
|
247
|
+
actionLabel,
|
|
248
|
+
className
|
|
249
|
+
} = _ref,
|
|
250
|
+
props = _objectWithoutProperties__default["default"](_ref, _excluded$7);
|
|
228
251
|
const alertClassNames = classNames__default["default"]('jfcl-alert', "jfcl-variant-".concat(variant), "jfcl-type-".concat(type), className);
|
|
229
252
|
const hasAction = !!action;
|
|
230
253
|
const showButton = hasAction && !actionHref;
|
|
@@ -260,21 +283,22 @@ const Alert = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
260
283
|
});
|
|
261
284
|
Alert.displayName = 'Alert';
|
|
262
285
|
|
|
286
|
+
const _excluded$6 = ["labelText", "variant", "size", "loading", "labelIcon", "iconOnRight", "iconOnly", "className"];
|
|
263
287
|
/**
|
|
264
288
|
* Accepts all `ButtonHTMLAttributes`
|
|
265
289
|
*/
|
|
266
290
|
const Button = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
|
|
267
291
|
let {
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
292
|
+
labelText,
|
|
293
|
+
variant = 'primary',
|
|
294
|
+
size = 'large',
|
|
295
|
+
loading,
|
|
296
|
+
labelIcon,
|
|
297
|
+
iconOnRight,
|
|
298
|
+
iconOnly,
|
|
299
|
+
className
|
|
300
|
+
} = _ref,
|
|
301
|
+
props = _objectWithoutProperties__default["default"](_ref, _excluded$6);
|
|
278
302
|
const buttonClassNames = classNames__default["default"]('jfcl-button', "jfcl-variant-".concat(variant), "jfcl-size-".concat(size), "".concat(loading ? 'jfcl-is-loading' : ''), "".concat(iconOnly ? 'jfcl-btn-icon-only' : ''), className);
|
|
279
303
|
const iconClassNames = classNames__default["default"]('jfcl-button__icon', "".concat(iconOnRight ? 'jfcl-button__icon_right' : ''));
|
|
280
304
|
const arias = {};
|
|
@@ -358,22 +382,23 @@ const InputHeader = _ref2 => {
|
|
|
358
382
|
}), invalidText)));
|
|
359
383
|
};
|
|
360
384
|
|
|
385
|
+
const _excluded$5 = ["className", "invalidText", "invalidRole", "invalid", "headerText", "helperText", "labelText", "disabled", "id"];
|
|
361
386
|
/**
|
|
362
387
|
* Accepts all `InputHTMLAttributes`
|
|
363
388
|
*/
|
|
364
389
|
const Checkbox = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
|
|
365
390
|
let {
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
391
|
+
className,
|
|
392
|
+
invalidText,
|
|
393
|
+
invalidRole,
|
|
394
|
+
invalid,
|
|
395
|
+
headerText,
|
|
396
|
+
helperText,
|
|
397
|
+
labelText,
|
|
398
|
+
disabled,
|
|
399
|
+
id
|
|
400
|
+
} = _ref,
|
|
401
|
+
props = _objectWithoutProperties__default["default"](_ref, _excluded$5);
|
|
377
402
|
const checkboxClassNames = classNames__default["default"]('jfcl-checkbox', {
|
|
378
403
|
['jfcl-checkbox--is-disabled']: disabled
|
|
379
404
|
}, className);
|
|
@@ -412,6 +437,7 @@ const Checkbox = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
|
|
|
412
437
|
});
|
|
413
438
|
Checkbox.displayName = 'Checkbox';
|
|
414
439
|
|
|
440
|
+
const _excluded$4 = ["className", "helperText", "invalid", "invalidText", "invalidRole", "disabled", "labelText", "onChange", "options"];
|
|
415
441
|
const DropdownIndicator = props => {
|
|
416
442
|
return /*#__PURE__*/React__default["default"].createElement(Select.components.DropdownIndicator, props, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
|
|
417
443
|
icon: solid.faChevronDown
|
|
@@ -419,17 +445,17 @@ const DropdownIndicator = props => {
|
|
|
419
445
|
};
|
|
420
446
|
const Dropdown = _ref => {
|
|
421
447
|
let {
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
448
|
+
className,
|
|
449
|
+
helperText,
|
|
450
|
+
invalid,
|
|
451
|
+
invalidText,
|
|
452
|
+
invalidRole,
|
|
453
|
+
disabled,
|
|
454
|
+
labelText,
|
|
455
|
+
onChange,
|
|
456
|
+
options
|
|
457
|
+
} = _ref,
|
|
458
|
+
props = _objectWithoutProperties__default["default"](_ref, _excluded$4);
|
|
433
459
|
const hasOnChange = !!onChange;
|
|
434
460
|
|
|
435
461
|
// Randomly generated id
|
|
@@ -466,21 +492,22 @@ const Dropdown = _ref => {
|
|
|
466
492
|
};
|
|
467
493
|
Dropdown.displayName = 'Dropdown';
|
|
468
494
|
|
|
495
|
+
const _excluded$3 = ["className", "children", "invalidText", "invalidRole", "invalid", "helperText", "helperElement", "legendText"];
|
|
469
496
|
/**
|
|
470
497
|
* Accepts all `HTMLFieldSetElement`
|
|
471
498
|
*/
|
|
472
499
|
const FormGroup = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
|
|
473
500
|
let {
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
501
|
+
className,
|
|
502
|
+
children,
|
|
503
|
+
invalidText,
|
|
504
|
+
invalidRole,
|
|
505
|
+
invalid,
|
|
506
|
+
helperText,
|
|
507
|
+
helperElement,
|
|
508
|
+
legendText
|
|
509
|
+
} = _ref,
|
|
510
|
+
props = _objectWithoutProperties__default["default"](_ref, _excluded$3);
|
|
484
511
|
const fieldsetClassNames = classNames__default["default"]('jfcl-form-group', {
|
|
485
512
|
['jfcl-form-group-is-invalid']: invalid
|
|
486
513
|
}, className);
|
|
@@ -500,23 +527,24 @@ const FormGroup = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref)
|
|
|
500
527
|
});
|
|
501
528
|
FormGroup.displayName = 'FormGroup';
|
|
502
529
|
|
|
530
|
+
const _excluded$2 = ["className", "invalidText", "invalidRole", "invalid", "headerText", "helperText", "labelText", "labelElement", "disabled", "id"];
|
|
503
531
|
/**
|
|
504
532
|
* Accepts all `InputHTMLAttributes`
|
|
505
533
|
*/
|
|
506
534
|
const RadioButton = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
|
|
507
535
|
let {
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
536
|
+
className,
|
|
537
|
+
invalidText,
|
|
538
|
+
invalidRole,
|
|
539
|
+
invalid,
|
|
540
|
+
headerText,
|
|
541
|
+
helperText,
|
|
542
|
+
labelText,
|
|
543
|
+
labelElement,
|
|
544
|
+
disabled,
|
|
545
|
+
id
|
|
546
|
+
} = _ref,
|
|
547
|
+
props = _objectWithoutProperties__default["default"](_ref, _excluded$2);
|
|
520
548
|
const radioButtonClassNames = classNames__default["default"]('jfcl-radio-button', {
|
|
521
549
|
['jfcl-radio-button--is-invalid']: invalid,
|
|
522
550
|
['jfcl-radio-button--is-disabled']: disabled
|
|
@@ -552,17 +580,18 @@ const RadioButton = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
|
|
|
552
580
|
});
|
|
553
581
|
RadioButton.displayName = 'RadioButton';
|
|
554
582
|
|
|
583
|
+
const _excluded$1 = ["className", "labelText", "disabled", "id"];
|
|
555
584
|
/**
|
|
556
585
|
* Accepts all `InputHTMLAttributes`
|
|
557
586
|
*/
|
|
558
587
|
const SelectButton = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
|
|
559
588
|
let {
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
589
|
+
className,
|
|
590
|
+
labelText,
|
|
591
|
+
disabled,
|
|
592
|
+
id
|
|
593
|
+
} = _ref,
|
|
594
|
+
props = _objectWithoutProperties__default["default"](_ref, _excluded$1);
|
|
566
595
|
const SelectButtonClassNames = classNames__default["default"]('jfcl-select-button', {
|
|
567
596
|
['jfcl-select-button--is-disabled']: disabled
|
|
568
597
|
}, className);
|
|
@@ -584,23 +613,24 @@ const SelectButton = /*#__PURE__*/React__default["default"].forwardRef((_ref, re
|
|
|
584
613
|
});
|
|
585
614
|
SelectButton.displayName = 'SelectButton';
|
|
586
615
|
|
|
616
|
+
const _excluded = ["className", "invalidText", "invalidRole", "invalid", "helperText", "helperElement", "labelText", "size", "id", "type"];
|
|
587
617
|
/**
|
|
588
618
|
* Accepts all `InputHTMLAttributes`
|
|
589
619
|
*/
|
|
590
620
|
const TextInput = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
|
|
591
621
|
let {
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
622
|
+
className,
|
|
623
|
+
invalidText,
|
|
624
|
+
invalidRole,
|
|
625
|
+
invalid,
|
|
626
|
+
helperText,
|
|
627
|
+
helperElement,
|
|
628
|
+
labelText,
|
|
629
|
+
size,
|
|
630
|
+
id,
|
|
631
|
+
type = 'text'
|
|
632
|
+
} = _ref,
|
|
633
|
+
props = _objectWithoutProperties__default["default"](_ref, _excluded);
|
|
604
634
|
const inputIsMoney = type === 'money';
|
|
605
635
|
const inputType = inputIsMoney ? 'number' : type;
|
|
606
636
|
const textInputWrapperClassNames = classNames__default["default"]('jfcl-text-input', {
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import './styles.scss';
|
|
3
3
|
import { IconNames } from '../Icon/Icon';
|
|
4
|
-
interface
|
|
4
|
+
export interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
|
|
5
|
+
/**
|
|
6
|
+
* Text to label button, or provide to aria-label when iconOnly
|
|
7
|
+
*/
|
|
5
8
|
labelText: string;
|
|
6
9
|
labelIcon?: IconNames;
|
|
7
10
|
variant?: 'primary' | 'secondary' | 'tertiary';
|
|
@@ -11,14 +14,7 @@ interface ButtonPropsLabel extends React.ComponentPropsWithoutRef<'button'> {
|
|
|
11
14
|
iconOnly?: boolean;
|
|
12
15
|
className?: string;
|
|
13
16
|
}
|
|
14
|
-
interface ButtonPropsIconOnly extends Omit<ButtonPropsLabel, 'labelText' | 'labelIcon' | 'iconOnly'> {
|
|
15
|
-
labelIcon: IconNames;
|
|
16
|
-
iconOnly: boolean;
|
|
17
|
-
labelText?: string;
|
|
18
|
-
}
|
|
19
|
-
export type ButtonProps = ButtonPropsLabel | ButtonPropsIconOnly;
|
|
20
17
|
/**
|
|
21
18
|
* Accepts all `ButtonHTMLAttributes`
|
|
22
19
|
*/
|
|
23
20
|
export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
24
|
-
export {};
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
|
|
3
|
-
export type IconNames = 'arrowLeft' | 'arrowRight' | 'arrowUp' | 'arrowUpRight' | 'arrowDown' | 'arrowUpLong' | 'arrowDownLong' | 'arrowUpArrowDown' | 'arrowUpShortWide' | 'arrowDownWideShort' | 'arrowsRotateReverse' | 'squareArrowUpRight' | 'bookmark' | 'caretRight' | 'caretDown' | 'check' | 'checkDouble' | 'chevronUp' | 'chevronDown' | 'chevronLeft' | 'chevronRight' | 'circleExclamation' | 'circleInfo' | 'circlePlus' | 'copy' | 'facebook' | 'twitter' | 'xTwitter' | 'sms' | 'envelope' | 'bars' | 'spinner' | 'user' | 'globe' | 'house' | 'locationDot' | 'memoPad' | 'mapLocationDot' | 'building' | 'addressCard' | 'buildingColumns' | 'download' | 'downloadRegular' | 'xmark' | 'ban' | 'eye' | 'eyeSlash' | 'print' | 'plus';
|
|
3
|
+
export type IconNames = 'arrowLeft' | 'arrowRight' | 'arrowUp' | 'arrowUpRight' | 'arrowDown' | 'arrowUpLong' | 'arrowDownLong' | 'arrowUpArrowDown' | 'arrowUpShortWide' | 'arrowDownWideShort' | 'arrowsRotateReverse' | 'squareArrowUpRight' | 'bookmark' | 'bookmarkRegular' | 'caretRight' | 'caretDown' | 'check' | 'checkDouble' | 'chevronUp' | 'chevronDown' | 'chevronLeft' | 'chevronRight' | 'circleExclamation' | 'circleExclamationRegular' | 'circleInfo' | 'circlePlus' | 'copy' | 'facebook' | 'twitter' | 'xTwitter' | 'sms' | 'envelope' | 'envelopeRegular' | 'envelopeCircleCheck' | 'bars' | 'spinner' | 'user' | 'globe' | 'house' | 'locationDot' | 'memoPad' | 'mapLocationDot' | 'building' | 'addressCard' | 'buildingColumns' | 'download' | 'downloadRegular' | 'xmark' | 'ban' | 'eye' | 'eyeSlash' | 'print' | 'plus' | 'mailboxOpenLetter';
|
|
4
4
|
export interface IconProps extends Omit<FontAwesomeIconProps, 'icon'> {
|
|
5
5
|
className?: string;
|
|
6
6
|
icon?: IconNames;
|
|
7
|
-
type?: 'solid' | 'regular';
|
|
8
7
|
}
|
|
9
8
|
export declare const Icon: React.FC<IconProps>;
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@justfixnyc/component-library",
|
|
3
3
|
"description": "JustFix Component Library",
|
|
4
4
|
"license": "MIT",
|
|
5
|
-
"version": "0.
|
|
5
|
+
"version": "0.56.0",
|
|
6
6
|
"main": "dist/src/index.js",
|
|
7
7
|
"module": "dist/src/index.es.js",
|
|
8
8
|
"files": [
|
|
@@ -24,23 +24,14 @@
|
|
|
24
24
|
"deploy-storybook": "storybook-to-ghpages"
|
|
25
25
|
},
|
|
26
26
|
"types": "dist/typings/index.d.ts",
|
|
27
|
-
"resolutions": {
|
|
28
|
-
"jackspeak": "2.1.1"
|
|
29
|
-
},
|
|
30
27
|
"dependencies": {
|
|
31
|
-
"@awesome.me/kit-
|
|
28
|
+
"@awesome.me/kit-6863e5a21e": "^1.0.3",
|
|
32
29
|
"@babel/runtime": "^7.12.5",
|
|
33
|
-
"@fortawesome/fontawesome-svg-core": "^
|
|
34
|
-
"@fortawesome/react-fontawesome": "
|
|
30
|
+
"@fortawesome/fontawesome-svg-core": "^7.1.0",
|
|
31
|
+
"@fortawesome/react-fontawesome": "^3.1.0",
|
|
35
32
|
"react-select": "^5.7.2"
|
|
36
33
|
},
|
|
37
34
|
"peerDependencies": {
|
|
38
|
-
"@lingui/cli": ">=2.9.1",
|
|
39
|
-
"@lingui/macro": ">=2.9.1",
|
|
40
|
-
"@lingui/react": ">=2.9.1",
|
|
41
|
-
"@types/lingui__core": ">=2.7.0",
|
|
42
|
-
"@types/lingui__macro": ">=2.7.3",
|
|
43
|
-
"@types/lingui__react": ">=2.8.1",
|
|
44
35
|
"react": ">=16.12.0",
|
|
45
36
|
"react-dom": ">=16.12.0"
|
|
46
37
|
},
|
|
@@ -50,10 +41,7 @@
|
|
|
50
41
|
"@babel/preset-env": "^7.17.10",
|
|
51
42
|
"@babel/preset-react": "^7.16.7",
|
|
52
43
|
"@babel/preset-typescript": "^7.16.7",
|
|
53
|
-
"@
|
|
54
|
-
"@lingui/macro": "^2.9.1",
|
|
55
|
-
"@lingui/react": "^2.9.1",
|
|
56
|
-
"@mdx-js/react": "^1.6.22",
|
|
44
|
+
"@mdx-js/react": "^2.3.0",
|
|
57
45
|
"@rollup/plugin-babel": "^5.2.3",
|
|
58
46
|
"@rollup/plugin-commonjs": "^17.1.0",
|
|
59
47
|
"@rollup/plugin-node-resolve": "^11.1.1",
|
|
@@ -71,13 +59,10 @@
|
|
|
71
59
|
"@testing-library/jest-dom": "^5.16.4",
|
|
72
60
|
"@testing-library/react": "^13.3.0",
|
|
73
61
|
"@types/jest": "^26.0.20",
|
|
74
|
-
"@types/lingui__core": "^2.7.0",
|
|
75
|
-
"@types/lingui__macro": "^2.7.3",
|
|
76
|
-
"@types/lingui__react": "^2.8.1",
|
|
77
62
|
"@types/react": "^18.0.14",
|
|
78
63
|
"@types/react-dom": "^18.0.5",
|
|
79
|
-
"@typescript-eslint/eslint-plugin": "^
|
|
80
|
-
"@typescript-eslint/parser": "^
|
|
64
|
+
"@typescript-eslint/eslint-plugin": "^5.62.0",
|
|
65
|
+
"@typescript-eslint/parser": "^5.0.0",
|
|
81
66
|
"babel-loader": "^8.2.2",
|
|
82
67
|
"babel-plugin-inline-react-svg": "^2.0.1",
|
|
83
68
|
"bootstrap": "^4.6.0",
|
|
@@ -105,7 +90,7 @@
|
|
|
105
90
|
"storybook": "^7.6.10",
|
|
106
91
|
"style-loader": "^3.3.4",
|
|
107
92
|
"ts-jest": "^26.5.0",
|
|
108
|
-
"typescript": "^
|
|
93
|
+
"typescript": "^5.5.3"
|
|
109
94
|
},
|
|
110
95
|
"eslintConfig": {
|
|
111
96
|
"extends": [
|