Merge branch 'xola:master' into sb-7

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xola/ui-kit",
-    "version": "2.1.25",
+    "version": "2.1.27",
     "description": "Xola UI Kit",
     "license": "MIT",
     "files": [

src/components/Utilities/Phone.jsx

@@ -1,48 +1,21 @@
-import React from "react";
-import phoneLib from "google-libphonenumber";
-import PropTypes from "prop-types";
 import clsx from "clsx";
-
-const PNF = phoneLib.PhoneNumberFormat;
-const phoneUtil = phoneLib.PhoneNumberUtil.getInstance();
+import PropTypes from "prop-types";
+import React from "react";
+import { formatPhoneNumber, getRegionCode } from "../../helpers/phone";
 
 export const Phone = ({ countryCode = "US", className, children }) => {
     const number = children;
-
-    try {
-        let phoneObject = phoneUtil.parseAndKeepRawInput(number, countryCode);
-
-        const regionCode = phoneUtil.getRegionCodeForNumber(phoneObject);
-        if (regionCode && regionCode !== countryCode) {
-            // If the region code is different than what was passed in, reparse according to that format
-            phoneObject = phoneUtil.parseAndKeepRawInput(number, regionCode);
-        }
-
-        // Parse number for display in the region's format
-        let formattedNumber;
-        if (regionCode) {
-            const format = regionCode === countryCode ? PNF.NATIONAL : PNF.INTERNATIONAL;
-            formattedNumber = phoneUtil.format(phoneObject, format);
-        } else {
-            // If we didn't detect a region, don't guess and return the original thing
-            formattedNumber = number;
-        }
-
-        return (
-            <span
-                className={clsx("ui-phone", className)}
-                data-region-code={regionCode || "N/A"}
-                data-country-code={countryCode}
-                title={number}
-            >
-                {formattedNumber}
-            </span>
-        );
-    } catch {}
+    const formattedNumber = formatPhoneNumber(number, countryCode);
+    const regionCode = getRegionCode(number, countryCode);
 
     return (
-        <span className={clsx("ui-phone", className)} data-country-code={countryCode}>
-            {number}
+        <span
+            className={clsx("ui-phone", className)}
+            data-region-code={regionCode || "N/A"}
+            data-country-code={countryCode}
+            title={number}
+        >
+            {formattedNumber}
         </span>
     );
 };

src/helpers/phone.js

@@ -0,0 +1,49 @@
+import phoneLib from "google-libphonenumber";
+
+const PNF = phoneLib.PhoneNumberFormat;
+const phoneUtil = phoneLib.PhoneNumberUtil.getInstance();
+
+export const getRegionCode = (number, countryCode = "US") => {
+    try {
+        const phoneObject = phoneUtil.parseAndKeepRawInput(number, countryCode);
+
+        return phoneUtil.getRegionCodeForNumber(phoneObject);
+    } catch {
+        return undefined;
+    }
+};
+
+/**
+ * Formats the Phone Number for provided country code
+ *
+ * @param number {string}
+ * @param countryCode {string}
+ *
+ * @return {string}
+ */
+export const formatPhoneNumber = (number, countryCode = "US") => {
+    try {
+        let phoneObject = phoneUtil.parseAndKeepRawInput(number, countryCode);
+
+        const regionCode = phoneUtil.getRegionCodeForNumber(phoneObject);
+        if (regionCode && regionCode !== countryCode) {
+            // If the region code is different than what was passed in, reparse according to that format
+            phoneObject = phoneUtil.parseAndKeepRawInput(number, regionCode);
+        }
+
+        // Parse number for display in the region's format
+        let formattedNumber;
+
+        if (regionCode) {
+            const format = regionCode === countryCode ? PNF.NATIONAL : PNF.INTERNATIONAL;
+            formattedNumber = phoneUtil.format(phoneObject, format);
+        } else {
+            // If we didn't detect a region, don't guess and return the original thing
+            formattedNumber = number;
+        }
+
+        return formattedNumber;
+    } catch {
+        return number;
+    }
+};

src/index.js

@@ -56,6 +56,7 @@ export { XolaLogoSimple } from "./images/XolaLogoSimple";
 export { almostZero, numberFormat, roundNumber } from "./helpers/numbers";
 export { getSymbol, isZeroDecimal } from "./helpers/currency";
 export { formatDate, formatTime, dateFromObjectId } from "./helpers/date";
+export { formatPhoneNumber } from "./helpers/phone";
 export { isOSX } from "./helpers/browser";
 export { flash } from "./helpers/flash";