@jobber/components 4.11.1 → 4.12.1

package/dist/DescriptionList/index.js

@@ -11,7 +11,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var css_248z = ".EQDmgmJchDA- {\n  margin: 0;\n}\n\n.DkzfClUGQlc- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n  border-bottom: calc(16px / 16) solid rgb(225, 225, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n}\n\n.DkzfClUGQlc-:first-child {\n  padding-top: 0;\n}\n\n.DkzfClUGQlc-:last-child {\n  padding-bottom: 0;\n  border-bottom: none;\n}\n\n.DkzfClUGQlc- dd {\n  min-width: calc(16px * 7.5);\n  min-width: calc(var(--base-unit) * 7.5);\n  box-sizing: border-box;\n  padding-right: calc(16px / 2);\n  padding-right: var(--space-small);\n  -webkit-margin-start: 0;\n          margin-left: 0;\n  -ms-flex: 1 1 40%;\n      flex: 1 1 40%;\n}\n\n.DkzfClUGQlc- dt {\n  -ms-flex: 1 1 60%;\n      flex: 1 1 60%;\n}\n";
+var css_248z = ".EQDmgmJchDA- {\n  margin: 0;\n}\n\n.DkzfClUGQlc- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n  border-bottom: calc(16px / 16) solid rgb(225, 225, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n}\n\n.DkzfClUGQlc-:first-child {\n  padding-top: 0;\n}\n\n.DkzfClUGQlc-:last-child {\n  padding-bottom: 0;\n  border-bottom: none;\n}\n\n.DkzfClUGQlc- dd {\n  min-width: calc(16px * 7.5);\n  min-width: calc(var(--base-unit) * 7.5);\n  box-sizing: border-box;\n  padding-right: calc(16px / 2);\n  padding-right: var(--space-small);\n  -webkit-margin-start: 0;\n          margin-left: 0;\n  -ms-flex: 1 1 60%;\n      flex: 1 1 60%;\n}\n\n.DkzfClUGQlc- dt {\n  -ms-flex: 1 1 40%;\n      flex: 1 1 40%;\n}\n";
 var styles = {"descriptionList":"EQDmgmJchDA-","termGroup":"DkzfClUGQlc-"};
 styleInject_es.styleInject(css_248z);
 

package/dist/InputPhoneNumber/index.js

@@ -84,11 +84,23 @@ function InputPhoneNumber(_a) {
     var { required } = _a, props = tslib_es6.__rest(_a, ["required"]);
     const { placeholder, validations } = props;
     const pattern = "(***) ***-****";
+    const errorSubject = placeholder || "Phone number";
     return (React__default["default"].createElement(InputMask, { pattern: pattern, strict: false },
-        React__default["default"].createElement(FormField.FormField, Object.assign({}, props, { type: "tel", validations: Object.assign({ required: {
+        React__default["default"].createElement(FormField.FormField, Object.assign({}, props, { type: "tel", validations: Object.assign(Object.assign({ required: {
                     value: Boolean(required),
-                    message: `${placeholder || "This"} is required`,
-                } }, validations) }))));
+                    message: `${errorSubject} is required`,
+                } }, validations), { validate: getPhoneNumberValidation }) }))));
+    function getPhoneNumberValidation(value) {
+        // Remove space, parenthesis and hyphen
+        const cleanValue = value.replace(/[- )(]/g, "");
+        if (cleanValue.length < 10) {
+            return `${errorSubject} must contain ten or more digits`;
+        }
+        if (typeof (validations === null || validations === void 0 ? void 0 : validations.validate) === "function") {
+            return validations.validate(value);
+        }
+        return true;
+    }
 }
 
 exports.InputPhoneNumber = InputPhoneNumber;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.11.1",
+  "version": "4.12.1",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -83,5 +83,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "9a18e5b1eff8708289ee20dc5a090ef06fc51346"
+  "gitHead": "8ef4129d2e9df9e4436f0b848c5809dd23f7cafc"
 }