@justfixnyc/component-library 0.54.0 → 0.54.2

package/dist/src/assets/index.css

@@ -661,6 +661,7 @@
 
 .jfcl-select-button__input:checked + .jfcl-select-button__label {
   background-color: #c6d8ff;
+  border-color: #242323;
 }
 
 .jfcl-select-button__input:focus-visible + .jfcl-select-button__label {

package/dist/src/assets/index.es.css

@@ -661,6 +661,7 @@
 
 .jfcl-select-button__input:checked + .jfcl-select-button__label {
   background-color: #c6d8ff;
+  border-color: #242323;
 }
 
 .jfcl-select-button__input:focus-visible + .jfcl-select-button__label {

package/dist/src/index.es.js

@@ -1,6 +1,6 @@
 import _extends from '@babel/runtime/helpers/extends';
 import classNames from 'classnames';
-import React, { forwardRef, useId, useState } from 'react';
+import React, { forwardRef, useId } from 'react';
 import { 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, faArrowUp, faArrowRight, faArrowLeft } from '@awesome.me/kit-dd32553919/icons/classic/solid';
 import { faPrint, faEyeSlash, faEye, faDownload, faEnvelope, faCircleExclamation, faBookmark } from '@awesome.me/kit-dd32553919/icons/classic/regular';
 import { faXTwitter, faTwitter, faFacebookF } from '@awesome.me/kit-dd32553919/icons/classic/brands';
@@ -319,7 +319,8 @@ const InputHeader = _ref2 => {
     helperText,
     helperElement,
     invalid,
-    invalidText
+    invalidText,
+    invalidRole
   } = _ref2;
   const showHeader = headerText || helperText || invalid && invalidText;
   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 => {
     "data-testid": "helper-text"
   }, helperText), helperElement, invalid && invalidText && /*#__PURE__*/React.createElement("div", {
     className: "jfcl-input-header__invalid_text",
-    "data-testid": "error"
+    "data-testid": "error",
+    role: invalidRole
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: "circleExclamation",
     className: "jfcl-input-header__invalid_icon"
@@ -346,6 +348,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     className,
     invalidText,
+    invalidRole,
     invalid,
     headerText,
     helperText,
@@ -367,7 +370,8 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     headerText: headerText,
     helperText: helperText,
     invalid: invalid,
-    invalidText: invalidText
+    invalidText: invalidText,
+    invalidRole: invalidRole
   }), /*#__PURE__*/React.createElement("div", {
     className: "jfcl-checkbox__checkmark-label-wrapper"
   }, /*#__PURE__*/React.createElement("input", _extends({
@@ -402,6 +406,7 @@ const Dropdown = _ref => {
     helperText,
     invalid,
     invalidText,
+    invalidRole,
     disabled,
     labelText,
     onChange,
@@ -424,7 +429,8 @@ const Dropdown = _ref => {
     labelFor: inputId,
     helperText: helperText,
     invalid: invalid,
-    invalidText: invalidText
+    invalidText: invalidText,
+    invalidRole: invalidRole
   }), /*#__PURE__*/React.createElement(Select, _extends({
     placeholder: null
   }, props, {
@@ -451,6 +457,7 @@ const FormGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     className,
     children,
     invalidText,
+    invalidRole,
     invalid,
     helperText,
     helperElement,
@@ -470,6 +477,7 @@ const FormGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     helperElement: helperElement,
     invalid: invalid,
     invalidText: invalidText,
+    invalidRole: invalidRole,
     isLegend: true
   }), children);
 });
@@ -482,6 +490,7 @@ const RadioButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     className,
     invalidText,
+    invalidRole,
     invalid,
     headerText,
     helperText,
@@ -504,7 +513,8 @@ const RadioButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     headerText: headerText,
     helperText: helperText,
     invalid: invalid,
-    invalidText: invalidText
+    invalidText: invalidText,
+    invalidRole: invalidRole
   }), /*#__PURE__*/React.createElement("input", _extends({
     ref: ref
   }, props, {
@@ -563,6 +573,7 @@ const TextInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     className,
     invalidText,
+    invalidRole,
     invalid,
     helperText,
     helperElement,
@@ -581,32 +592,6 @@ const TextInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const textInputClassNames = classNames('jfcl-text-input__input', {
     ["jfcl-text-input--size-".concat(size)]: size
   });
-  const formatPhoneNumber = value => {
-    // remove all non-digit characters
-    const cleaned = value.replace(/\D/g, '');
-    // limit to 10 characters
-    const limited = cleaned.slice(0, 10);
-
-    // format with parentheses and dashes e.g. (555) 666-7777
-    const match = limited.match(/^(\d{0,3})(\d{0,3})(\d{0,4})$/);
-    if (match) {
-      const [, part1, part2, part3] = match;
-      const formatted = [part1 ? "(".concat(part1) : '', part2 ? ") ".concat(part2) : '', part3 ? "-".concat(part3) : ''].join('').trim();
-      return formatted;
-    }
-    return value;
-  };
-  const [inputValue, setInputValue] = useState('');
-  const handleChange = e => {
-    let formattedValue = e.target.value;
-    if (type === 'tel') {
-      formattedValue = formatPhoneNumber(e.target.value);
-    }
-    setInputValue(formattedValue);
-    if (props.onChange) {
-      props.onChange(e); // call original onChange if provided
-    }
-  };
   return /*#__PURE__*/React.createElement("div", {
     className: textInputWrapperClassNames,
     "data-testid": "jfcl-text-input"
@@ -615,6 +600,7 @@ const TextInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     helperText: helperText,
     helperElement: helperElement,
     invalidText: invalidText,
+    invalidRole: invalidRole,
     invalid: invalid,
     labelFor: id
   }), /*#__PURE__*/React.createElement("div", {
@@ -626,9 +612,7 @@ const TextInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   }, props, {
     id: id,
     className: textInputClassNames,
-    type: inputType,
-    value: inputValue,
-    onChange: handleChange
+    type: inputType
   }))));
 });
 TextInput.displayName = 'TextInput';

package/dist/src/index.js

@@ -330,7 +330,8 @@ const InputHeader = _ref2 => {
     helperText,
     helperElement,
     invalid,
-    invalidText
+    invalidText,
+    invalidRole
   } = _ref2;
   const showHeader = headerText || helperText || invalid && invalidText;
   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 => {
     "data-testid": "helper-text"
   }, helperText), helperElement, invalid && invalidText && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "jfcl-input-header__invalid_text",
-    "data-testid": "error"
+    "data-testid": "error",
+    role: invalidRole
   }, /*#__PURE__*/React__default["default"].createElement(Icon, {
     icon: "circleExclamation",
     className: "jfcl-input-header__invalid_icon"
@@ -357,6 +359,7 @@ const Checkbox = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
   let {
     className,
     invalidText,
+    invalidRole,
     invalid,
     headerText,
     helperText,
@@ -378,7 +381,8 @@ const Checkbox = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     headerText: headerText,
     helperText: helperText,
     invalid: invalid,
-    invalidText: invalidText
+    invalidText: invalidText,
+    invalidRole: invalidRole
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "jfcl-checkbox__checkmark-label-wrapper"
   }, /*#__PURE__*/React__default["default"].createElement("input", _extends__default["default"]({
@@ -413,6 +417,7 @@ const Dropdown = _ref => {
     helperText,
     invalid,
     invalidText,
+    invalidRole,
     disabled,
     labelText,
     onChange,
@@ -435,7 +440,8 @@ const Dropdown = _ref => {
     labelFor: inputId,
     helperText: helperText,
     invalid: invalid,
-    invalidText: invalidText
+    invalidText: invalidText,
+    invalidRole: invalidRole
   }), /*#__PURE__*/React__default["default"].createElement(Select__default["default"], _extends__default["default"]({
     placeholder: null
   }, props, {
@@ -462,6 +468,7 @@ const FormGroup = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref)
     className,
     children,
     invalidText,
+    invalidRole,
     invalid,
     helperText,
     helperElement,
@@ -481,6 +488,7 @@ const FormGroup = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref)
     helperElement: helperElement,
     invalid: invalid,
     invalidText: invalidText,
+    invalidRole: invalidRole,
     isLegend: true
   }), children);
 });
@@ -493,6 +501,7 @@ const RadioButton = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
   let {
     className,
     invalidText,
+    invalidRole,
     invalid,
     headerText,
     helperText,
@@ -515,7 +524,8 @@ const RadioButton = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
     headerText: headerText,
     helperText: helperText,
     invalid: invalid,
-    invalidText: invalidText
+    invalidText: invalidText,
+    invalidRole: invalidRole
   }), /*#__PURE__*/React__default["default"].createElement("input", _extends__default["default"]({
     ref: ref
   }, props, {
@@ -574,6 +584,7 @@ const TextInput = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref)
   let {
     className,
     invalidText,
+    invalidRole,
     invalid,
     helperText,
     helperElement,
@@ -592,32 +603,6 @@ const TextInput = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref)
   const textInputClassNames = classNames__default["default"]('jfcl-text-input__input', {
     ["jfcl-text-input--size-".concat(size)]: size
   });
-  const formatPhoneNumber = value => {
-    // remove all non-digit characters
-    const cleaned = value.replace(/\D/g, '');
-    // limit to 10 characters
-    const limited = cleaned.slice(0, 10);
-
-    // format with parentheses and dashes e.g. (555) 666-7777
-    const match = limited.match(/^(\d{0,3})(\d{0,3})(\d{0,4})$/);
-    if (match) {
-      const [, part1, part2, part3] = match;
-      const formatted = [part1 ? "(".concat(part1) : '', part2 ? ") ".concat(part2) : '', part3 ? "-".concat(part3) : ''].join('').trim();
-      return formatted;
-    }
-    return value;
-  };
-  const [inputValue, setInputValue] = React.useState('');
-  const handleChange = e => {
-    let formattedValue = e.target.value;
-    if (type === 'tel') {
-      formattedValue = formatPhoneNumber(e.target.value);
-    }
-    setInputValue(formattedValue);
-    if (props.onChange) {
-      props.onChange(e); // call original onChange if provided
-    }
-  };
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: textInputWrapperClassNames,
     "data-testid": "jfcl-text-input"
@@ -626,6 +611,7 @@ const TextInput = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref)
     helperText: helperText,
     helperElement: helperElement,
     invalidText: invalidText,
+    invalidRole: invalidRole,
     invalid: invalid,
     labelFor: id
   }), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -637,9 +623,7 @@ const TextInput = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref)
   }, props, {
     id: id,
     className: textInputClassNames,
-    type: inputType,
-    value: inputValue,
-    onChange: handleChange
+    type: inputType
   }))));
 });
 TextInput.displayName = 'TextInput';

package/dist/typings/Components/Checkbox/Checkbox.d.ts

@@ -6,6 +6,7 @@ export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElemen
     helperText?: string;
     invalid?: boolean;
     invalidText?: string;
+    invalidRole?: string;
     className?: string;
     disabled?: boolean;
     id: string;

package/dist/typings/Components/Dropdown/Dropdown.d.ts

@@ -11,6 +11,7 @@ export interface DropdownProps {
     labelText: string;
     helperText?: string;
     invalidText?: string;
+    invalidRole?: string;
     invalid?: boolean;
     disabled?: boolean;
 }

package/dist/typings/Components/FormGroup/FormGroup.d.ts

@@ -6,6 +6,7 @@ export interface FormGroupProps extends React.FieldsetHTMLAttributes<HTMLFieldSe
     helperElement?: React.ReactNode;
     invalid?: boolean;
     invalidText?: string;
+    invalidRole?: string;
     className?: string;
 }
 /**

package/dist/typings/Components/InputHeader/InputHeader.d.ts

@@ -9,5 +9,6 @@ export interface InputHeaderProps {
     helperElement?: React.ReactNode;
     invalidText?: string;
     invalid?: boolean;
+    invalidRole?: string;
 }
 export declare const InputHeader: React.FC<InputHeaderProps>;

package/dist/typings/Components/RadioButton/RadioButton.d.ts

@@ -6,6 +6,7 @@ export interface RadioButtonProps extends React.InputHTMLAttributes<HTMLInputEle
     helperText?: string;
     invalid?: boolean;
     invalidText?: string;
+    invalidRole?: string;
     className?: string;
     disabled?: boolean;
     id: string;

package/dist/typings/Components/TextInput/TextInput.d.ts

@@ -8,6 +8,7 @@ export interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInput
     helperElement?: React.ReactNode;
     invalid?: boolean;
     invalidText?: string;
+    invalidRole?: string;
     className?: string;
     type?: string;
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@justfixnyc/component-library",
   "description": "JustFix Component Library",
   "license": "MIT",
-  "version": "0.54.0",
+  "version": "0.54.2",
   "main": "dist/src/index.js",
   "module": "dist/src/index.es.js",
   "files": [