@justfixnyc/component-library 0.55.0 → 0.56.1
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, faPaperPlane, 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,19 @@ 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 'paperPlaneLight':
|
|
124
|
+
faIcon = faPaperPlane;
|
|
125
|
+
break;
|
|
126
|
+
case 'mailboxOpenLetter':
|
|
127
|
+
faIcon = faMailboxOpenLetter;
|
|
108
128
|
break;
|
|
109
129
|
case 'bars':
|
|
110
130
|
faIcon = faBars;
|
|
@@ -140,7 +160,10 @@ const Icon = _ref => {
|
|
|
140
160
|
faIcon = faBuildingColumns;
|
|
141
161
|
break;
|
|
142
162
|
case 'download':
|
|
143
|
-
|
|
163
|
+
faIcon = faDownload$1;
|
|
164
|
+
break;
|
|
165
|
+
case 'downloadRegular':
|
|
166
|
+
faIcon = faDownload;
|
|
144
167
|
break;
|
|
145
168
|
case 'xmark':
|
|
146
169
|
faIcon = faXmark;
|
|
@@ -171,13 +194,14 @@ const Icon = _ref => {
|
|
|
171
194
|
};
|
|
172
195
|
Icon.displayName = 'Icon';
|
|
173
196
|
|
|
197
|
+
const _excluded$8 = ["icon", "children", "className"];
|
|
174
198
|
const Link = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
175
199
|
let {
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
200
|
+
icon,
|
|
201
|
+
children,
|
|
202
|
+
className
|
|
203
|
+
} = _ref,
|
|
204
|
+
props = _objectWithoutProperties(_ref, _excluded$8);
|
|
181
205
|
const linkClassNames = classNames('jfcl-link', className);
|
|
182
206
|
const opensInNewTab = props.target === '_blank';
|
|
183
207
|
// When using this component within a react-router-dom <Link />, a navigate function is passed through the props us here.
|
|
@@ -203,17 +227,18 @@ const Link = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
203
227
|
});
|
|
204
228
|
Link.displayName = 'Link';
|
|
205
229
|
|
|
230
|
+
const _excluded$7 = ["type", "variant", "text", "action", "actionHref", "actionLabel", "className"];
|
|
206
231
|
const Alert = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
207
232
|
let {
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
233
|
+
type = 'info',
|
|
234
|
+
variant = 'primary',
|
|
235
|
+
text,
|
|
236
|
+
action,
|
|
237
|
+
actionHref,
|
|
238
|
+
actionLabel,
|
|
239
|
+
className
|
|
240
|
+
} = _ref,
|
|
241
|
+
props = _objectWithoutProperties(_ref, _excluded$7);
|
|
217
242
|
const alertClassNames = classNames('jfcl-alert', "jfcl-variant-".concat(variant), "jfcl-type-".concat(type), className);
|
|
218
243
|
const hasAction = !!action;
|
|
219
244
|
const showButton = hasAction && !actionHref;
|
|
@@ -249,21 +274,22 @@ const Alert = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
249
274
|
});
|
|
250
275
|
Alert.displayName = 'Alert';
|
|
251
276
|
|
|
277
|
+
const _excluded$6 = ["labelText", "variant", "size", "loading", "labelIcon", "iconOnRight", "iconOnly", "className"];
|
|
252
278
|
/**
|
|
253
279
|
* Accepts all `ButtonHTMLAttributes`
|
|
254
280
|
*/
|
|
255
281
|
const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
256
282
|
let {
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
283
|
+
labelText,
|
|
284
|
+
variant = 'primary',
|
|
285
|
+
size = 'large',
|
|
286
|
+
loading,
|
|
287
|
+
labelIcon,
|
|
288
|
+
iconOnRight,
|
|
289
|
+
iconOnly,
|
|
290
|
+
className
|
|
291
|
+
} = _ref,
|
|
292
|
+
props = _objectWithoutProperties(_ref, _excluded$6);
|
|
267
293
|
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
294
|
const iconClassNames = classNames('jfcl-button__icon', "".concat(iconOnRight ? 'jfcl-button__icon_right' : ''));
|
|
269
295
|
const arias = {};
|
|
@@ -347,22 +373,23 @@ const InputHeader = _ref2 => {
|
|
|
347
373
|
}), invalidText)));
|
|
348
374
|
};
|
|
349
375
|
|
|
376
|
+
const _excluded$5 = ["className", "invalidText", "invalidRole", "invalid", "headerText", "helperText", "labelText", "disabled", "id"];
|
|
350
377
|
/**
|
|
351
378
|
* Accepts all `InputHTMLAttributes`
|
|
352
379
|
*/
|
|
353
380
|
const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
354
381
|
let {
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
382
|
+
className,
|
|
383
|
+
invalidText,
|
|
384
|
+
invalidRole,
|
|
385
|
+
invalid,
|
|
386
|
+
headerText,
|
|
387
|
+
helperText,
|
|
388
|
+
labelText,
|
|
389
|
+
disabled,
|
|
390
|
+
id
|
|
391
|
+
} = _ref,
|
|
392
|
+
props = _objectWithoutProperties(_ref, _excluded$5);
|
|
366
393
|
const checkboxClassNames = classNames('jfcl-checkbox', {
|
|
367
394
|
['jfcl-checkbox--is-disabled']: disabled
|
|
368
395
|
}, className);
|
|
@@ -401,6 +428,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
401
428
|
});
|
|
402
429
|
Checkbox.displayName = 'Checkbox';
|
|
403
430
|
|
|
431
|
+
const _excluded$4 = ["className", "helperText", "invalid", "invalidText", "invalidRole", "disabled", "labelText", "onChange", "options"];
|
|
404
432
|
const DropdownIndicator = props => {
|
|
405
433
|
return /*#__PURE__*/React.createElement(components.DropdownIndicator, props, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
406
434
|
icon: faChevronDown
|
|
@@ -408,17 +436,17 @@ const DropdownIndicator = props => {
|
|
|
408
436
|
};
|
|
409
437
|
const Dropdown = _ref => {
|
|
410
438
|
let {
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
439
|
+
className,
|
|
440
|
+
helperText,
|
|
441
|
+
invalid,
|
|
442
|
+
invalidText,
|
|
443
|
+
invalidRole,
|
|
444
|
+
disabled,
|
|
445
|
+
labelText,
|
|
446
|
+
onChange,
|
|
447
|
+
options
|
|
448
|
+
} = _ref,
|
|
449
|
+
props = _objectWithoutProperties(_ref, _excluded$4);
|
|
422
450
|
const hasOnChange = !!onChange;
|
|
423
451
|
|
|
424
452
|
// Randomly generated id
|
|
@@ -455,21 +483,22 @@ const Dropdown = _ref => {
|
|
|
455
483
|
};
|
|
456
484
|
Dropdown.displayName = 'Dropdown';
|
|
457
485
|
|
|
486
|
+
const _excluded$3 = ["className", "children", "invalidText", "invalidRole", "invalid", "helperText", "helperElement", "legendText"];
|
|
458
487
|
/**
|
|
459
488
|
* Accepts all `HTMLFieldSetElement`
|
|
460
489
|
*/
|
|
461
490
|
const FormGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
462
491
|
let {
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
492
|
+
className,
|
|
493
|
+
children,
|
|
494
|
+
invalidText,
|
|
495
|
+
invalidRole,
|
|
496
|
+
invalid,
|
|
497
|
+
helperText,
|
|
498
|
+
helperElement,
|
|
499
|
+
legendText
|
|
500
|
+
} = _ref,
|
|
501
|
+
props = _objectWithoutProperties(_ref, _excluded$3);
|
|
473
502
|
const fieldsetClassNames = classNames('jfcl-form-group', {
|
|
474
503
|
['jfcl-form-group-is-invalid']: invalid
|
|
475
504
|
}, className);
|
|
@@ -489,23 +518,24 @@ const FormGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
489
518
|
});
|
|
490
519
|
FormGroup.displayName = 'FormGroup';
|
|
491
520
|
|
|
521
|
+
const _excluded$2 = ["className", "invalidText", "invalidRole", "invalid", "headerText", "helperText", "labelText", "labelElement", "disabled", "id"];
|
|
492
522
|
/**
|
|
493
523
|
* Accepts all `InputHTMLAttributes`
|
|
494
524
|
*/
|
|
495
525
|
const RadioButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
496
526
|
let {
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
527
|
+
className,
|
|
528
|
+
invalidText,
|
|
529
|
+
invalidRole,
|
|
530
|
+
invalid,
|
|
531
|
+
headerText,
|
|
532
|
+
helperText,
|
|
533
|
+
labelText,
|
|
534
|
+
labelElement,
|
|
535
|
+
disabled,
|
|
536
|
+
id
|
|
537
|
+
} = _ref,
|
|
538
|
+
props = _objectWithoutProperties(_ref, _excluded$2);
|
|
509
539
|
const radioButtonClassNames = classNames('jfcl-radio-button', {
|
|
510
540
|
['jfcl-radio-button--is-invalid']: invalid,
|
|
511
541
|
['jfcl-radio-button--is-disabled']: disabled
|
|
@@ -541,17 +571,18 @@ const RadioButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
541
571
|
});
|
|
542
572
|
RadioButton.displayName = 'RadioButton';
|
|
543
573
|
|
|
574
|
+
const _excluded$1 = ["className", "labelText", "disabled", "id"];
|
|
544
575
|
/**
|
|
545
576
|
* Accepts all `InputHTMLAttributes`
|
|
546
577
|
*/
|
|
547
578
|
const SelectButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
548
579
|
let {
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
580
|
+
className,
|
|
581
|
+
labelText,
|
|
582
|
+
disabled,
|
|
583
|
+
id
|
|
584
|
+
} = _ref,
|
|
585
|
+
props = _objectWithoutProperties(_ref, _excluded$1);
|
|
555
586
|
const SelectButtonClassNames = classNames('jfcl-select-button', {
|
|
556
587
|
['jfcl-select-button--is-disabled']: disabled
|
|
557
588
|
}, className);
|
|
@@ -573,23 +604,24 @@ const SelectButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
573
604
|
});
|
|
574
605
|
SelectButton.displayName = 'SelectButton';
|
|
575
606
|
|
|
607
|
+
const _excluded = ["className", "invalidText", "invalidRole", "invalid", "helperText", "helperElement", "labelText", "size", "id", "type"];
|
|
576
608
|
/**
|
|
577
609
|
* Accepts all `InputHTMLAttributes`
|
|
578
610
|
*/
|
|
579
611
|
const TextInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
580
612
|
let {
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
613
|
+
className,
|
|
614
|
+
invalidText,
|
|
615
|
+
invalidRole,
|
|
616
|
+
invalid,
|
|
617
|
+
helperText,
|
|
618
|
+
helperElement,
|
|
619
|
+
labelText,
|
|
620
|
+
size,
|
|
621
|
+
id,
|
|
622
|
+
type = 'text'
|
|
623
|
+
} = _ref,
|
|
624
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
593
625
|
const inputIsMoney = type === 'money';
|
|
594
626
|
const inputType = inputIsMoney ? 'number' : type;
|
|
595
627
|
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,19 @@ 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 'paperPlaneLight':
|
|
136
|
+
faIcon = light.faPaperPlane;
|
|
137
|
+
break;
|
|
138
|
+
case 'mailboxOpenLetter':
|
|
139
|
+
faIcon = light.faMailboxOpenLetter;
|
|
119
140
|
break;
|
|
120
141
|
case 'bars':
|
|
121
142
|
faIcon = solid.faBars;
|
|
@@ -151,7 +172,10 @@ const Icon = _ref => {
|
|
|
151
172
|
faIcon = solid.faBuildingColumns;
|
|
152
173
|
break;
|
|
153
174
|
case 'download':
|
|
154
|
-
|
|
175
|
+
faIcon = solid.faDownload;
|
|
176
|
+
break;
|
|
177
|
+
case 'downloadRegular':
|
|
178
|
+
faIcon = regular.faDownload;
|
|
155
179
|
break;
|
|
156
180
|
case 'xmark':
|
|
157
181
|
faIcon = solid.faXmark;
|
|
@@ -182,13 +206,14 @@ const Icon = _ref => {
|
|
|
182
206
|
};
|
|
183
207
|
Icon.displayName = 'Icon';
|
|
184
208
|
|
|
209
|
+
const _excluded$8 = ["icon", "children", "className"];
|
|
185
210
|
const Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
186
211
|
let {
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
212
|
+
icon,
|
|
213
|
+
children,
|
|
214
|
+
className
|
|
215
|
+
} = _ref,
|
|
216
|
+
props = _objectWithoutProperties__default["default"](_ref, _excluded$8);
|
|
192
217
|
const linkClassNames = classNames__default["default"]('jfcl-link', className);
|
|
193
218
|
const opensInNewTab = props.target === '_blank';
|
|
194
219
|
// When using this component within a react-router-dom <Link />, a navigate function is passed through the props us here.
|
|
@@ -214,17 +239,18 @@ const Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
214
239
|
});
|
|
215
240
|
Link.displayName = 'Link';
|
|
216
241
|
|
|
242
|
+
const _excluded$7 = ["type", "variant", "text", "action", "actionHref", "actionLabel", "className"];
|
|
217
243
|
const Alert = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
218
244
|
let {
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
245
|
+
type = 'info',
|
|
246
|
+
variant = 'primary',
|
|
247
|
+
text,
|
|
248
|
+
action,
|
|
249
|
+
actionHref,
|
|
250
|
+
actionLabel,
|
|
251
|
+
className
|
|
252
|
+
} = _ref,
|
|
253
|
+
props = _objectWithoutProperties__default["default"](_ref, _excluded$7);
|
|
228
254
|
const alertClassNames = classNames__default["default"]('jfcl-alert', "jfcl-variant-".concat(variant), "jfcl-type-".concat(type), className);
|
|
229
255
|
const hasAction = !!action;
|
|
230
256
|
const showButton = hasAction && !actionHref;
|
|
@@ -260,21 +286,22 @@ const Alert = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
260
286
|
});
|
|
261
287
|
Alert.displayName = 'Alert';
|
|
262
288
|
|
|
289
|
+
const _excluded$6 = ["labelText", "variant", "size", "loading", "labelIcon", "iconOnRight", "iconOnly", "className"];
|
|
263
290
|
/**
|
|
264
291
|
* Accepts all `ButtonHTMLAttributes`
|
|
265
292
|
*/
|
|
266
293
|
const Button = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
|
|
267
294
|
let {
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
295
|
+
labelText,
|
|
296
|
+
variant = 'primary',
|
|
297
|
+
size = 'large',
|
|
298
|
+
loading,
|
|
299
|
+
labelIcon,
|
|
300
|
+
iconOnRight,
|
|
301
|
+
iconOnly,
|
|
302
|
+
className
|
|
303
|
+
} = _ref,
|
|
304
|
+
props = _objectWithoutProperties__default["default"](_ref, _excluded$6);
|
|
278
305
|
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
306
|
const iconClassNames = classNames__default["default"]('jfcl-button__icon', "".concat(iconOnRight ? 'jfcl-button__icon_right' : ''));
|
|
280
307
|
const arias = {};
|
|
@@ -358,22 +385,23 @@ const InputHeader = _ref2 => {
|
|
|
358
385
|
}), invalidText)));
|
|
359
386
|
};
|
|
360
387
|
|
|
388
|
+
const _excluded$5 = ["className", "invalidText", "invalidRole", "invalid", "headerText", "helperText", "labelText", "disabled", "id"];
|
|
361
389
|
/**
|
|
362
390
|
* Accepts all `InputHTMLAttributes`
|
|
363
391
|
*/
|
|
364
392
|
const Checkbox = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
|
|
365
393
|
let {
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
394
|
+
className,
|
|
395
|
+
invalidText,
|
|
396
|
+
invalidRole,
|
|
397
|
+
invalid,
|
|
398
|
+
headerText,
|
|
399
|
+
helperText,
|
|
400
|
+
labelText,
|
|
401
|
+
disabled,
|
|
402
|
+
id
|
|
403
|
+
} = _ref,
|
|
404
|
+
props = _objectWithoutProperties__default["default"](_ref, _excluded$5);
|
|
377
405
|
const checkboxClassNames = classNames__default["default"]('jfcl-checkbox', {
|
|
378
406
|
['jfcl-checkbox--is-disabled']: disabled
|
|
379
407
|
}, className);
|
|
@@ -412,6 +440,7 @@ const Checkbox = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
|
|
|
412
440
|
});
|
|
413
441
|
Checkbox.displayName = 'Checkbox';
|
|
414
442
|
|
|
443
|
+
const _excluded$4 = ["className", "helperText", "invalid", "invalidText", "invalidRole", "disabled", "labelText", "onChange", "options"];
|
|
415
444
|
const DropdownIndicator = props => {
|
|
416
445
|
return /*#__PURE__*/React__default["default"].createElement(Select.components.DropdownIndicator, props, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
|
|
417
446
|
icon: solid.faChevronDown
|
|
@@ -419,17 +448,17 @@ const DropdownIndicator = props => {
|
|
|
419
448
|
};
|
|
420
449
|
const Dropdown = _ref => {
|
|
421
450
|
let {
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
451
|
+
className,
|
|
452
|
+
helperText,
|
|
453
|
+
invalid,
|
|
454
|
+
invalidText,
|
|
455
|
+
invalidRole,
|
|
456
|
+
disabled,
|
|
457
|
+
labelText,
|
|
458
|
+
onChange,
|
|
459
|
+
options
|
|
460
|
+
} = _ref,
|
|
461
|
+
props = _objectWithoutProperties__default["default"](_ref, _excluded$4);
|
|
433
462
|
const hasOnChange = !!onChange;
|
|
434
463
|
|
|
435
464
|
// Randomly generated id
|
|
@@ -466,21 +495,22 @@ const Dropdown = _ref => {
|
|
|
466
495
|
};
|
|
467
496
|
Dropdown.displayName = 'Dropdown';
|
|
468
497
|
|
|
498
|
+
const _excluded$3 = ["className", "children", "invalidText", "invalidRole", "invalid", "helperText", "helperElement", "legendText"];
|
|
469
499
|
/**
|
|
470
500
|
* Accepts all `HTMLFieldSetElement`
|
|
471
501
|
*/
|
|
472
502
|
const FormGroup = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
|
|
473
503
|
let {
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
504
|
+
className,
|
|
505
|
+
children,
|
|
506
|
+
invalidText,
|
|
507
|
+
invalidRole,
|
|
508
|
+
invalid,
|
|
509
|
+
helperText,
|
|
510
|
+
helperElement,
|
|
511
|
+
legendText
|
|
512
|
+
} = _ref,
|
|
513
|
+
props = _objectWithoutProperties__default["default"](_ref, _excluded$3);
|
|
484
514
|
const fieldsetClassNames = classNames__default["default"]('jfcl-form-group', {
|
|
485
515
|
['jfcl-form-group-is-invalid']: invalid
|
|
486
516
|
}, className);
|
|
@@ -500,23 +530,24 @@ const FormGroup = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref)
|
|
|
500
530
|
});
|
|
501
531
|
FormGroup.displayName = 'FormGroup';
|
|
502
532
|
|
|
533
|
+
const _excluded$2 = ["className", "invalidText", "invalidRole", "invalid", "headerText", "helperText", "labelText", "labelElement", "disabled", "id"];
|
|
503
534
|
/**
|
|
504
535
|
* Accepts all `InputHTMLAttributes`
|
|
505
536
|
*/
|
|
506
537
|
const RadioButton = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
|
|
507
538
|
let {
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
539
|
+
className,
|
|
540
|
+
invalidText,
|
|
541
|
+
invalidRole,
|
|
542
|
+
invalid,
|
|
543
|
+
headerText,
|
|
544
|
+
helperText,
|
|
545
|
+
labelText,
|
|
546
|
+
labelElement,
|
|
547
|
+
disabled,
|
|
548
|
+
id
|
|
549
|
+
} = _ref,
|
|
550
|
+
props = _objectWithoutProperties__default["default"](_ref, _excluded$2);
|
|
520
551
|
const radioButtonClassNames = classNames__default["default"]('jfcl-radio-button', {
|
|
521
552
|
['jfcl-radio-button--is-invalid']: invalid,
|
|
522
553
|
['jfcl-radio-button--is-disabled']: disabled
|
|
@@ -552,17 +583,18 @@ const RadioButton = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
|
|
|
552
583
|
});
|
|
553
584
|
RadioButton.displayName = 'RadioButton';
|
|
554
585
|
|
|
586
|
+
const _excluded$1 = ["className", "labelText", "disabled", "id"];
|
|
555
587
|
/**
|
|
556
588
|
* Accepts all `InputHTMLAttributes`
|
|
557
589
|
*/
|
|
558
590
|
const SelectButton = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
|
|
559
591
|
let {
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
592
|
+
className,
|
|
593
|
+
labelText,
|
|
594
|
+
disabled,
|
|
595
|
+
id
|
|
596
|
+
} = _ref,
|
|
597
|
+
props = _objectWithoutProperties__default["default"](_ref, _excluded$1);
|
|
566
598
|
const SelectButtonClassNames = classNames__default["default"]('jfcl-select-button', {
|
|
567
599
|
['jfcl-select-button--is-disabled']: disabled
|
|
568
600
|
}, className);
|
|
@@ -584,23 +616,24 @@ const SelectButton = /*#__PURE__*/React__default["default"].forwardRef((_ref, re
|
|
|
584
616
|
});
|
|
585
617
|
SelectButton.displayName = 'SelectButton';
|
|
586
618
|
|
|
619
|
+
const _excluded = ["className", "invalidText", "invalidRole", "invalid", "helperText", "helperElement", "labelText", "size", "id", "type"];
|
|
587
620
|
/**
|
|
588
621
|
* Accepts all `InputHTMLAttributes`
|
|
589
622
|
*/
|
|
590
623
|
const TextInput = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
|
|
591
624
|
let {
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
625
|
+
className,
|
|
626
|
+
invalidText,
|
|
627
|
+
invalidRole,
|
|
628
|
+
invalid,
|
|
629
|
+
helperText,
|
|
630
|
+
helperElement,
|
|
631
|
+
labelText,
|
|
632
|
+
size,
|
|
633
|
+
id,
|
|
634
|
+
type = 'text'
|
|
635
|
+
} = _ref,
|
|
636
|
+
props = _objectWithoutProperties__default["default"](_ref, _excluded);
|
|
604
637
|
const inputIsMoney = type === 'money';
|
|
605
638
|
const inputType = inputIsMoney ? 'number' : type;
|
|
606
639
|
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' | 'paperPlaneLight' | '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.1",
|
|
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": [
|