@justfixnyc/component-library 0.53.8 → 0.53.10

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,7 +1,7 @@
 import _extends from '@babel/runtime/helpers/extends';
 import classNames from 'classnames';
-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, 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 React, { forwardRef, useId, useState } 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';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -61,6 +61,9 @@ const Icon = _ref => {
     case 'check':
       faIcon = faCheck;
       break;
+    case 'checkDouble':
+      faIcon = faCheckDouble;
+      break;
     case 'chevronUp':
       faIcon = faChevronUp;
       break;
@@ -578,6 +581,32 @@ 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"
@@ -597,7 +626,9 @@ const TextInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   }, props, {
     id: id,
     className: textInputClassNames,
-    type: inputType
+    type: inputType,
+    value: inputValue,
+    onChange: handleChange
   }))));
 });
 TextInput.displayName = 'TextInput';

package/dist/src/index.js

@@ -72,6 +72,9 @@ const Icon = _ref => {
     case 'check':
       faIcon = solid.faCheck;
       break;
+    case 'checkDouble':
+      faIcon = solid.faCheckDouble;
+      break;
     case 'chevronUp':
       faIcon = solid.faChevronUp;
       break;
@@ -589,6 +592,32 @@ 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"
@@ -608,7 +637,9 @@ const TextInput = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref)
   }, props, {
     id: id,
     className: textInputClassNames,
-    type: inputType
+    type: inputType,
+    value: inputValue,
+    onChange: handleChange
   }))));
 });
 TextInput.displayName = 'TextInput';

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
-export type IconNames = 'arrowLeft' | 'arrowRight' | 'arrowUp' | 'arrowDown' | 'arrowUpLong' | 'arrowDownLong' | 'arrowUpArrowDown' | 'arrowUpShortWide' | 'arrowDownWideShort' | 'arrowsRotateReverse' | 'squareArrowUpRight' | 'bookmark' | 'caretRight' | 'caretDown' | 'check' | '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';
+export type IconNames = 'arrowLeft' | 'arrowRight' | 'arrowUp' | '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';
 export interface IconProps extends Omit<FontAwesomeIconProps, 'icon'> {
     className?: string;
     icon?: IconNames;

package/package.json

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