@justfixnyc/component-library 0.54.1 → 0.54.4

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.
@@ -649,20 +649,32 @@
649
649
  flex-grow: 1;
650
650
  white-space: nowrap;
651
651
  border-radius: 6px;
652
- border: 1px solid #9a9898;
652
+ border: 1px solid #c5ccd1;
653
653
  background: #faf8f4;
654
654
  padding: 0.75rem;
655
655
  cursor: pointer;
656
656
  }
657
- .jfcl-select-button__label:hover {
657
+ .jfcl-select-button__label:hover, .jfcl-select-button__label:active {
658
658
  border: 2px solid #242323;
659
659
  padding: 0.6875rem;
660
660
  }
661
+ .jfcl-select-button__label:hover {
662
+ background-color: #ffffff;
663
+ }
664
+ .jfcl-select-button__label:active {
665
+ background-color: #ebece8;
666
+ }
661
667
 
662
668
  .jfcl-select-button__input:checked + .jfcl-select-button__label {
663
669
  background-color: #c6d8ff;
664
670
  border-color: #242323;
665
671
  }
672
+ .jfcl-select-button__input:checked + .jfcl-select-button__label:hover {
673
+ background-color: #9fbdff;
674
+ }
675
+ .jfcl-select-button__input:checked + .jfcl-select-button__label:active {
676
+ background-color: #edf3ff;
677
+ }
666
678
 
667
679
  .jfcl-select-button__input:focus-visible + .jfcl-select-button__label {
668
680
  outline: 2px solid #5188ff;
@@ -649,20 +649,32 @@
649
649
  flex-grow: 1;
650
650
  white-space: nowrap;
651
651
  border-radius: 6px;
652
- border: 1px solid #9a9898;
652
+ border: 1px solid #c5ccd1;
653
653
  background: #faf8f4;
654
654
  padding: 0.75rem;
655
655
  cursor: pointer;
656
656
  }
657
- .jfcl-select-button__label:hover {
657
+ .jfcl-select-button__label:hover, .jfcl-select-button__label:active {
658
658
  border: 2px solid #242323;
659
659
  padding: 0.6875rem;
660
660
  }
661
+ .jfcl-select-button__label:hover {
662
+ background-color: #ffffff;
663
+ }
664
+ .jfcl-select-button__label:active {
665
+ background-color: #ebece8;
666
+ }
661
667
 
662
668
  .jfcl-select-button__input:checked + .jfcl-select-button__label {
663
669
  background-color: #c6d8ff;
664
670
  border-color: #242323;
665
671
  }
672
+ .jfcl-select-button__input:checked + .jfcl-select-button__label:hover {
673
+ background-color: #9fbdff;
674
+ }
675
+ .jfcl-select-button__input:checked + .jfcl-select-button__label:active {
676
+ background-color: #edf3ff;
677
+ }
666
678
 
667
679
  .jfcl-select-button__input:focus-visible + .jfcl-select-button__label {
668
680
  outline: 2px solid #5188ff;
@@ -319,7 +319,8 @@ const InputHeader = _ref2 => {
319
319
  helperText,
320
320
  helperElement,
321
321
  invalid,
322
- invalidText
322
+ invalidText,
323
+ invalidRole
323
324
  } = _ref2;
324
325
  const showHeader = headerText || helperText || invalid && invalidText;
325
326
  return /*#__PURE__*/React.createElement(React.Fragment, null, showHeader && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HeaderLabel, {
@@ -332,7 +333,8 @@ const InputHeader = _ref2 => {
332
333
  "data-testid": "helper-text"
333
334
  }, helperText), helperElement, invalid && invalidText && /*#__PURE__*/React.createElement("div", {
334
335
  className: "jfcl-input-header__invalid_text",
335
- "data-testid": "error"
336
+ "data-testid": "error",
337
+ role: invalidRole
336
338
  }, /*#__PURE__*/React.createElement(Icon, {
337
339
  icon: "circleExclamation",
338
340
  className: "jfcl-input-header__invalid_icon"
@@ -346,6 +348,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
346
348
  let {
347
349
  className,
348
350
  invalidText,
351
+ invalidRole,
349
352
  invalid,
350
353
  headerText,
351
354
  helperText,
@@ -367,7 +370,8 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
367
370
  headerText: headerText,
368
371
  helperText: helperText,
369
372
  invalid: invalid,
370
- invalidText: invalidText
373
+ invalidText: invalidText,
374
+ invalidRole: invalidRole
371
375
  }), /*#__PURE__*/React.createElement("div", {
372
376
  className: "jfcl-checkbox__checkmark-label-wrapper"
373
377
  }, /*#__PURE__*/React.createElement("input", _extends({
@@ -402,6 +406,7 @@ const Dropdown = _ref => {
402
406
  helperText,
403
407
  invalid,
404
408
  invalidText,
409
+ invalidRole,
405
410
  disabled,
406
411
  labelText,
407
412
  onChange,
@@ -424,7 +429,8 @@ const Dropdown = _ref => {
424
429
  labelFor: inputId,
425
430
  helperText: helperText,
426
431
  invalid: invalid,
427
- invalidText: invalidText
432
+ invalidText: invalidText,
433
+ invalidRole: invalidRole
428
434
  }), /*#__PURE__*/React.createElement(Select, _extends({
429
435
  placeholder: null
430
436
  }, props, {
@@ -451,6 +457,7 @@ const FormGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
451
457
  className,
452
458
  children,
453
459
  invalidText,
460
+ invalidRole,
454
461
  invalid,
455
462
  helperText,
456
463
  helperElement,
@@ -470,6 +477,7 @@ const FormGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
470
477
  helperElement: helperElement,
471
478
  invalid: invalid,
472
479
  invalidText: invalidText,
480
+ invalidRole: invalidRole,
473
481
  isLegend: true
474
482
  }), children);
475
483
  });
@@ -482,6 +490,7 @@ const RadioButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
482
490
  let {
483
491
  className,
484
492
  invalidText,
493
+ invalidRole,
485
494
  invalid,
486
495
  headerText,
487
496
  helperText,
@@ -504,7 +513,8 @@ const RadioButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
504
513
  headerText: headerText,
505
514
  helperText: helperText,
506
515
  invalid: invalid,
507
- invalidText: invalidText
516
+ invalidText: invalidText,
517
+ invalidRole: invalidRole
508
518
  }), /*#__PURE__*/React.createElement("input", _extends({
509
519
  ref: ref
510
520
  }, props, {
@@ -563,6 +573,7 @@ const TextInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
563
573
  let {
564
574
  className,
565
575
  invalidText,
576
+ invalidRole,
566
577
  invalid,
567
578
  helperText,
568
579
  helperElement,
@@ -589,6 +600,7 @@ const TextInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
589
600
  helperText: helperText,
590
601
  helperElement: helperElement,
591
602
  invalidText: invalidText,
603
+ invalidRole: invalidRole,
592
604
  invalid: invalid,
593
605
  labelFor: id
594
606
  }), /*#__PURE__*/React.createElement("div", {
package/dist/src/index.js CHANGED
@@ -330,7 +330,8 @@ const InputHeader = _ref2 => {
330
330
  helperText,
331
331
  helperElement,
332
332
  invalid,
333
- invalidText
333
+ invalidText,
334
+ invalidRole
334
335
  } = _ref2;
335
336
  const showHeader = headerText || helperText || invalid && invalidText;
336
337
  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, showHeader && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(HeaderLabel, {
@@ -343,7 +344,8 @@ const InputHeader = _ref2 => {
343
344
  "data-testid": "helper-text"
344
345
  }, helperText), helperElement, invalid && invalidText && /*#__PURE__*/React__default["default"].createElement("div", {
345
346
  className: "jfcl-input-header__invalid_text",
346
- "data-testid": "error"
347
+ "data-testid": "error",
348
+ role: invalidRole
347
349
  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
348
350
  icon: "circleExclamation",
349
351
  className: "jfcl-input-header__invalid_icon"
@@ -357,6 +359,7 @@ const Checkbox = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
357
359
  let {
358
360
  className,
359
361
  invalidText,
362
+ invalidRole,
360
363
  invalid,
361
364
  headerText,
362
365
  helperText,
@@ -378,7 +381,8 @@ const Checkbox = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
378
381
  headerText: headerText,
379
382
  helperText: helperText,
380
383
  invalid: invalid,
381
- invalidText: invalidText
384
+ invalidText: invalidText,
385
+ invalidRole: invalidRole
382
386
  }), /*#__PURE__*/React__default["default"].createElement("div", {
383
387
  className: "jfcl-checkbox__checkmark-label-wrapper"
384
388
  }, /*#__PURE__*/React__default["default"].createElement("input", _extends__default["default"]({
@@ -413,6 +417,7 @@ const Dropdown = _ref => {
413
417
  helperText,
414
418
  invalid,
415
419
  invalidText,
420
+ invalidRole,
416
421
  disabled,
417
422
  labelText,
418
423
  onChange,
@@ -435,7 +440,8 @@ const Dropdown = _ref => {
435
440
  labelFor: inputId,
436
441
  helperText: helperText,
437
442
  invalid: invalid,
438
- invalidText: invalidText
443
+ invalidText: invalidText,
444
+ invalidRole: invalidRole
439
445
  }), /*#__PURE__*/React__default["default"].createElement(Select__default["default"], _extends__default["default"]({
440
446
  placeholder: null
441
447
  }, props, {
@@ -462,6 +468,7 @@ const FormGroup = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref)
462
468
  className,
463
469
  children,
464
470
  invalidText,
471
+ invalidRole,
465
472
  invalid,
466
473
  helperText,
467
474
  helperElement,
@@ -481,6 +488,7 @@ const FormGroup = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref)
481
488
  helperElement: helperElement,
482
489
  invalid: invalid,
483
490
  invalidText: invalidText,
491
+ invalidRole: invalidRole,
484
492
  isLegend: true
485
493
  }), children);
486
494
  });
@@ -493,6 +501,7 @@ const RadioButton = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
493
501
  let {
494
502
  className,
495
503
  invalidText,
504
+ invalidRole,
496
505
  invalid,
497
506
  headerText,
498
507
  helperText,
@@ -515,7 +524,8 @@ const RadioButton = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
515
524
  headerText: headerText,
516
525
  helperText: helperText,
517
526
  invalid: invalid,
518
- invalidText: invalidText
527
+ invalidText: invalidText,
528
+ invalidRole: invalidRole
519
529
  }), /*#__PURE__*/React__default["default"].createElement("input", _extends__default["default"]({
520
530
  ref: ref
521
531
  }, props, {
@@ -574,6 +584,7 @@ const TextInput = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref)
574
584
  let {
575
585
  className,
576
586
  invalidText,
587
+ invalidRole,
577
588
  invalid,
578
589
  helperText,
579
590
  helperElement,
@@ -600,6 +611,7 @@ const TextInput = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref)
600
611
  helperText: helperText,
601
612
  helperElement: helperElement,
602
613
  invalidText: invalidText,
614
+ invalidRole: invalidRole,
603
615
  invalid: invalid,
604
616
  labelFor: id
605
617
  }), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -6,6 +6,7 @@ export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElemen
6
6
  helperText?: string;
7
7
  invalid?: boolean;
8
8
  invalidText?: string;
9
+ invalidRole?: string;
9
10
  className?: string;
10
11
  disabled?: boolean;
11
12
  id: string;
@@ -11,6 +11,7 @@ export interface DropdownProps {
11
11
  labelText: string;
12
12
  helperText?: string;
13
13
  invalidText?: string;
14
+ invalidRole?: string;
14
15
  invalid?: boolean;
15
16
  disabled?: boolean;
16
17
  }
@@ -6,6 +6,7 @@ export interface FormGroupProps extends React.FieldsetHTMLAttributes<HTMLFieldSe
6
6
  helperElement?: React.ReactNode;
7
7
  invalid?: boolean;
8
8
  invalidText?: string;
9
+ invalidRole?: string;
9
10
  className?: string;
10
11
  }
11
12
  /**
@@ -9,5 +9,6 @@ export interface InputHeaderProps {
9
9
  helperElement?: React.ReactNode;
10
10
  invalidText?: string;
11
11
  invalid?: boolean;
12
+ invalidRole?: string;
12
13
  }
13
14
  export declare const InputHeader: React.FC<InputHeaderProps>;
@@ -6,6 +6,7 @@ export interface RadioButtonProps extends React.InputHTMLAttributes<HTMLInputEle
6
6
  helperText?: string;
7
7
  invalid?: boolean;
8
8
  invalidText?: string;
9
+ invalidRole?: string;
9
10
  className?: string;
10
11
  disabled?: boolean;
11
12
  id: string;
@@ -8,6 +8,7 @@ export interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInput
8
8
  helperElement?: React.ReactNode;
9
9
  invalid?: boolean;
10
10
  invalidText?: string;
11
+ invalidRole?: string;
11
12
  className?: string;
12
13
  type?: string;
13
14
  }
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.54.1",
5
+ "version": "0.54.4",
6
6
  "main": "dist/src/index.js",
7
7
  "module": "dist/src/index.es.js",
8
8
  "files": [