playbook_ui 12.24.0.pre.alpha.play824733 → 12.24.0.pre.alpha.play824751

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8231bb3fbf02190e76cf2763a3d70ee166e665ea67ab0456fb61e90aba95e933
-  data.tar.gz: 71ef01fbd0bb7e37c38958c8b0409d577a682283713c3c7a50aec203b6870423
+  metadata.gz: f5503eadd4386d152eb7752caba4840d365949ca4c5d09c43baf70cc8db2891f
+  data.tar.gz: e9ed9534523628eb3e10521351693c0059e0f8c76cd8191637fb3d2186ffae80
 SHA512:
-  metadata.gz: 5ec035a7462706717a83e63a232d4e2cbf761eeb8e89b17466630e1921f01c1aeecd79b6e21f3b2d930a112edab0cf39cbd649ea9ddd3320a8ca9b942a4322ac
-  data.tar.gz: e1966ede2224963aa2c903d23765dae5cb24c0317d3d7bff6f0fd9d211ae1453f48d70ab94cffdf3d04d760274234a61b5fd2d2c1cf838d652bea6e635f059d8
+  metadata.gz: 051e744be441f6bd044f4e0a839f476ca6f5dadd5257ec09a85cd38976997c2fab5097cb64466ed3fb98168c686ad63e6626f05882a4dc3e6d74feeb209361e9
+  data.tar.gz: d46b69dd2c251c613f2665d9181446e7e92e7a024a80a218cab9e28f1aff2613c2da65be6bc83dba06c0da6c719186bec6d3da958095b511f008e91cf1964b4d

data/app/pb_kits/playbook/pb_docs/kit_example.rb

@@ -5,8 +5,6 @@
 module Playbook
   module PbDocs
     class KitExample < Playbook::KitBase
-      include Playbook::Markdown::Helper
-
       prop :kit, type: Playbook::Props::String, required: true
       prop :example_title, type: Playbook::Props::String, required: true
       prop :example_key, type: Playbook::Props::String, required: true

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -41,6 +41,8 @@ type PhoneNumberInputProps = {
 enum ValidationError {
   TooShort = 2,
   TooLong = 3,
+  MissingAreaCode = 4,
+  SomethingWentWrong = -99
 }
 
 const formatToGlobalCountryName = (countryName: string) => {
@@ -109,35 +111,68 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
     }
   }, [error, onValidate])
 
+  if (itiInit) isValid(itiInit.isValidNumber())
+
+  const showFormattedError = (reason = '') => {
+    const countryName = itiInit.getSelectedCountryData().name
+    const reasonText = reason.length > 0 ? ` (${reason})` : ''
+    setError(`Invalid ${countryName} phone number${reasonText}`)
+    return true
+  }
+
   const validateTooLongNumber = (itiInit: any) => {
-    const error = itiInit.getValidationError()
+    if (!itiInit) return
+    if (itiInit.getValidationError() === ValidationError.TooLong) {
+      return showFormattedError('too long')
+    } else {
+      setError('')
+    }
+  }
 
-    if (error === ValidationError.TooLong) {
-      const countryName = itiInit.getSelectedCountryData().name
-      setError(`Invalid ${countryName} phone number (too long)`)
+  const validateTooShortNumber = (itiInit: any) => {
+    if (!itiInit) return
+    if (itiInit.getValidationError() === ValidationError.TooShort) {
+      return showFormattedError('too short')
     } else {
-      setError("")
+      setError('')
     }
   }
 
-  const validateTooShortNumber = () => {
-    const error = itiInit.getValidationError()
+  const validateOnlyNumbers = (itiInit: any) => {
+    if (!itiInit) return
+    if (inputValue && !containOnlyNumbers(inputValue)) {
+      return showFormattedError('enter numbers only')
+    }
+  }
 
-    if (error === ValidationError.TooShort) {
-      const countryName = itiInit.getSelectedCountryData().name
-      setError(`Invalid ${countryName} phone number (too short)`)
+  const validateUnhandledError = (itiInit: any) => {
+    if (!required || !itiInit) return
+    if (itiInit.getValidationError() === ValidationError.SomethingWentWrong) {
+      if (inputValue.length === 1) {
+        return showFormattedError('too short')
+      } else if (inputValue.length === 0) {
+        setError('Missing phone number')
+        return true
+      } else {
+        return showFormattedError()
+      }
     }
   }
 
-  const validateOnlyNumbers = () => {
-    if (inputValue && !containOnlyNumbers(inputValue)) {
-      setError("Invalid phone number. Enter numbers only.")
+  const validateMissingAreaCode = (itiInit: any) => {
+    if (!required || !itiInit) return
+    if (itiInit.getValidationError() === ValidationError.MissingAreaCode) {
+      showFormattedError('missing area code')
+      return true
     }
   }
 
   const validateErrors = () => {
-    validateTooShortNumber()
-    validateOnlyNumbers()
+    if (validateOnlyNumbers(itiInit)) return
+    if (validateTooLongNumber(itiInit)) return
+    if (validateTooShortNumber(itiInit)) return
+    if (validateUnhandledError(itiInit)) return
+    if (validateMissingAreaCode(itiInit)) return
   }
 
   const getCurrentSelectedData = (itiInit: any, inputValue: string) => {
@@ -146,11 +181,9 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
 
   const handleOnChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(evt.target.value)
-    validateTooLongNumber(itiInit)
     const phoneNumberData = getCurrentSelectedData(itiInit, evt.target.value)
     setSelectedData(phoneNumberData)
     onChange(phoneNumberData)
-    isValid(itiInit.isValidNumber())
   }
 
   // Separating Concerns as React Docs Recommend
@@ -158,20 +191,21 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
   useEffect(formatAllCountries, [])
 
   useEffect(() => {
-    const telInputInit = new intlTelInput(inputRef.current, {
+    const telInputInit = intlTelInput(inputRef.current, {
       separateDialCode: true,
       preferredCountries,
       allowDropdown: !disabled,
+      autoInsertDialCode: false,
       initialCountry,
       onlyCountries,
+      utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.1.6/js/utils.min.js"
     })
 
     inputRef.current.addEventListener("countrychange", (evt: Event) => {
-      validateTooLongNumber(telInputInit)
       const phoneNumberData = getCurrentSelectedData(telInputInit, (evt.target as HTMLInputElement).value)
       setSelectedData(phoneNumberData)
       onChange(phoneNumberData)
-      isValid(telInputInit.isValidNumber())
+      validateErrors()
     })
 
     inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
@@ -186,6 +220,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
     "data-phone-number": JSON.stringify(selectedData),
     disabled,
     error,
+    type: 'tel',
     id,
     label,
     name,

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx

@@ -34,7 +34,6 @@ const PhoneNumberInputValidation = (props) => {
         >
             {showFormErrors && (
                 <FixedConfirmationToast
-                    closeable
                     marginBottom="md"
                     status="error"
                     text={formErrors}

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb

@@ -17,7 +17,8 @@ module Playbook
                             default: []
       prop :preferred_countries, type: Playbook::Props::Array,
                                  default: []
-      prop :error, type: Playbook::Props::String
+      prop :error, type: Playbook::Props::String,
+                   default: ""
       prop :value, type: Playbook::Props::String,
                    default: ""