playbook_ui 12.25.0.pre.alpha.PLAY818multilevelrebuild779 → 12.25.0.pre.alpha.play824786

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

@@ -1,12 +1,17 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { forwardRef, useEffect, useRef, useState } from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+
 import intlTelInput from 'intl-tel-input'
 import 'intl-tel-input/build/css/intlTelInput.css'
-import TextInput from '../pb_text_input/_text_input'
 import 'intl-tel-input/build/js/utils.js'
 
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+
+import TextInput from '../pb_text_input/_text_input'
+import { Callback } from '../types'
+import { isEmpty } from '../utilities/object'
+
 declare global {
   interface Window {
     intlTelInputGlobals: any
@@ -19,20 +24,25 @@ type PhoneNumberInputProps = {
   dark?: boolean,
   data?: { [key: string]: string },
   disabled?: boolean,
+  error?: string,
   id?: string,
   initialCountry?: string,
   isValid?: (valid: boolean) => void,
   label?: string,
   name?: string,
   onChange?: (e: React.FormEvent<HTMLInputElement>) => void,
+  onValidate?: Callback<boolean, void>,
   onlyCountries: string[],
   preferredCountries?: string[],
+  required?: boolean,
   value?: string,
 }
 
 enum ValidationError {
   TooShort = 2,
   TooLong = 3,
+  MissingAreaCode = 4,
+  SomethingWentWrong = -99
 }
 
 const formatToGlobalCountryName = (countryName: string) => {
@@ -40,10 +50,10 @@ const formatToGlobalCountryName = (countryName: string) => {
 }
 
 const formatAllCountries = () => {
-  let countryData = window.intlTelInputGlobals.getCountryData()
+  const countryData = window.intlTelInputGlobals.getCountryData()
 
   for (let i = 0; i < countryData.length; i++) {
-    let country = countryData[i]
+    const country = countryData[i]
     country.name = formatToGlobalCountryName(country.name)
   }
 }
@@ -71,7 +81,9 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
     onChange = () => {
       void 0
     },
+    onValidate = () => null,
     onlyCountries = [],
+    required = false,
     preferredCountries = [],
     value = "",
   } = props
@@ -87,39 +99,83 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
   const inputRef = useRef<HTMLInputElement>()
   const [inputValue, setInputValue] = useState(value)
   const [itiInit, setItiInit] = useState<any>()
-  const [error, setError] = useState('')
+  const [error, setError] = useState(props.error)
   const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
   const [selectedData, setSelectedData] = useState()
 
+  useEffect(() => {
+    if (error?.length > 0) {
+      onValidate(false)
+    } else {
+      onValidate(true)
+    }
+  }, [error, onValidate])
+
+  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("")
+      if (inputValue.length === 1) {
+        return showFormattedError('too short')
+      } else {
+        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 (itiInit) isValid(itiInit.isValidNumber())
+    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) => {
@@ -128,7 +184,6 @@ 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)
@@ -137,25 +192,24 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
 
   // Separating Concerns as React Docs Recommend
   // This also Fixes things for our react_component rendering on the Rails Side
-  useEffect(() => {
-    formatAllCountries()
-  }, [])
+  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)
+      validateErrors()
     })
 
     inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
@@ -164,24 +218,35 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
     setItiInit(telInputInit)
   }, [])
 
+  let textInputProps: {[key: string]: any} = {
+    className: dropDownIsOpen ? 'dropdown_open' : '',
+    dark,
+    "data-phone-number": JSON.stringify(selectedData),
+    disabled,
+    error,
+    type: 'tel',
+    id,
+    label,
+    name,
+    onBlur: validateErrors,
+    onChange: handleOnChange,
+    value: inputValue
+  }
+
+  let wrapperProps: Record<string, unknown> = { className: classes }
+
+  if (!isEmpty(aria)) textInputProps = {...textInputProps, ...ariaProps}
+  if (!isEmpty(data)) wrapperProps = {...wrapperProps, ...dataProps}
+  if (required) textInputProps.required = true
+
   return (
-    <div {...ariaProps} {...dataProps} className={classes}>
+    <div {...wrapperProps}>
       <TextInput
-        className={dropDownIsOpen ? 'dropdown_open' : ''}
-        dark={dark}
-        data-phone-number={JSON.stringify(selectedData)}
-        disabled={disabled}
-        error={error}
-        id={id}
-        label={label}
-        name={name}
-        onBlur={() => validateErrors()}
-        onChange={handleOnChange}
-        ref={inputRef}
-        value={inputValue}
+          ref={inputRef}
+          {...textInputProps}
       />
     </div>
   )
 }
 
-export default PhoneNumberInput
+export default forwardRef(PhoneNumberInput)

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb

@@ -0,0 +1,14 @@
+<form id="example-form-validation" action="" method="get">
+    <%= pb_rails("phone_number_input", props: { error: "Missing phone number.", id: "validation", initial_country: "af", value: "", required: true }) %>
+    <%= pb_rails("button", props: {html_type: "submit", text: "Save Phone Number"}) %>
+</form>
+
+<% content_for(:pb_js) do %>
+    <%= javascript_tag do %>
+        document.addEventListener('DOMContentLoaded', function () {
+            document.querySelector('#example-form-validation').addEventListener('submit', function (e) {
+                if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) e.preventDefault();
+            })
+        })
+    <% end %>
+<% end %>

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

@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from "react";
+import { Button, FixedConfirmationToast, PhoneNumberInput } from "../../";
+
+const PhoneNumberInputValidation = (props) => {
+    const [formErrors, setFormErrors] = useState("");
+    const [showFormErrors, setShowFormErrors] = useState(false);
+    const [phoneNumber, setPhoneNumber] = useState("");
+    const [countryCode, setCountryCode] = useState("af");
+
+    const handleOnValidate = (valid) => {
+        setFormErrors(
+            valid ? "" : "Please correct the fields below and try again."
+        );
+    };
+
+    const handleOnChange = ({ iso2, number }) => {
+        setCountryCode(iso2);
+        setPhoneNumber(number);
+    };
+    
+    const handleOnSubmit = (e) => {
+        if (showFormErrors) e.preventDefault()
+    }
+
+    useEffect(() => {
+        setShowFormErrors(formErrors.length > 0);
+    }, [formErrors]);
+
+    return (
+        <form
+            action=""
+            method="get"
+            onSubmit={handleOnSubmit}
+        >
+            {showFormErrors && (
+                <FixedConfirmationToast
+                    marginBottom="md"
+                    status="error"
+                    text={formErrors}
+                />
+            )}
+            <PhoneNumberInput
+                error="Missing phone number."
+                id="validation"
+                initialCountry={countryCode}
+                onChange={handleOnChange}
+                onValidate={handleOnValidate}
+                required
+                value={phoneNumber}
+                {...props}
+            />
+            <Button
+                htmlType="submit"
+                text="Save Phone Number"
+            />
+        </form>
+    );
+};
+
+export default PhoneNumberInputValidation;

data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml

@@ -5,9 +5,11 @@ examples:
   - phone_number_input_preferred_countries: Preferred Countries
   - phone_number_input_initial_country: Initial Country
   - phone_number_input_only_countries: Limited Countries
+  - phone_number_input_validation: Form Validation
 
   rails:
   - phone_number_input_default: Default
   - phone_number_input_preferred_countries: Preferred Countries
   - phone_number_input_initial_country: Initial Country
-  - phone_number_input_only_countries: Limited Countries
+  - phone_number_input_only_countries: Limited Countries
+  - phone_number_input_validation: Form Validation

data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js

@@ -2,3 +2,4 @@ export { default as PhoneNumberInputDefault } from './_phone_number_input_defaul
 export { default as PhoneNumberInputPreferredCountries } from './_phone_number_input_preferred_countries'
 export { default as PhoneNumberInputInitialCountry } from './_phone_number_input_initial_country'
 export { default as PhoneNumberInputOnlyCountries } from './_phone_number_input_only_countries'
+export { default as PhoneNumberInputValidation } from './_phone_number_input_validation'

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

@@ -5,6 +5,8 @@ module Playbook
     class PhoneNumberInput < Playbook::KitBase
       prop :disabled, type: Playbook::Props::Boolean,
                       default: false
+      prop :required, type: Playbook::Props::Boolean,
+                      default: false
       prop :initial_country, type: Playbook::Props::String,
                              default: ""
       prop :label, type: Playbook::Props::String,
@@ -15,6 +17,8 @@ module Playbook
                             default: []
       prop :preferred_countries, type: Playbook::Props::Array,
                                  default: []
+      prop :error, type: Playbook::Props::String,
+                   default: ""
       prop :value, type: Playbook::Props::String,
                    default: ""
 
@@ -27,11 +31,13 @@ module Playbook
           id: id,
           dark: dark,
           disabled: disabled,
+          error: error,
           initialCountry: initial_country,
           label: label,
           name: name,
           onlyCountries: only_countries,
           preferredCountries: preferred_countries,
+          required: required,
           value: value,
         }
       end

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js

@@ -1,74 +1,122 @@
-import React from 'react'
-import { render, screen } from '../utilities/test-utils'
-import PhoneNumberInput from './_phone_number_input'
+import React from "react";
+import { render, screen } from "../utilities/test-utils";
+import PhoneNumberInput from "./_phone_number_input";
 
-const testId = "phoneNumberInput"
+const testId = "phoneNumberInput";
 
-test('should be disabled', () => {
-  const props = {
-    disabled: true,
-    id: testId,
-  }
+test("should be disabled", () => {
+    const props = {
+        disabled: true,
+        id: testId,
+    };
 
-  render(<PhoneNumberInput {...props} />)
-  const kit = screen.getByRole("textbox")
-  expect(kit).toBeDisabled()
-})
+    render(<PhoneNumberInput {...props} />);
+    const kit = screen.getByRole("textbox");
+    expect(kit).toBeDisabled();
+});
 
-test('should be enabled by default', () => {
-  const props = {
-    id: testId,
-  }
+test("should be enabled by default", () => {
+    const props = {
+        id: testId,
+    };
 
-  render(<PhoneNumberInput {...props} />)
-  const kit = screen.getByRole("textbox")
-  expect(kit).not.toBeDisabled()
-})
+    render(<PhoneNumberInput {...props} />);
+    const kit = screen.getByRole("textbox");
+    expect(kit).not.toBeDisabled();
+});
 
-test('should have label', () => {
-  const label = 'Phone Number'
-  const props = {
-    id: testId,
-    label,
-  }
+test("should have label", () => {
+    const label = "Phone Number";
+    const props = {
+        id: testId,
+        label,
+    };
 
-  render(<PhoneNumberInput {...props} />)
-  const kit = screen.getByText(label)
-  expect(kit).toBeInTheDocument()
-})
+    render(<PhoneNumberInput {...props} />);
+    const kit = screen.getByText(label);
+    expect(kit).toBeInTheDocument();
+});
 
-test('should pass data prop', () => {
-  const props = {
-    data: { testid: testId },
-    id: testId,
-  }
+test("should pass data prop", () => {
+    const props = {
+        data: { testid: testId },
+        id: testId,
+    };
+
+    render(<PhoneNumberInput {...props} />);
+    const kit = screen.getByTestId(testId);
+    expect(kit).toBeInTheDocument();
+});
+
+test("should pass className prop", () => {
+    const className = "custom-class-name";
+    const props = {
+        className,
+        data: { testid: testId },
+        id: testId,
+    };
+
+    render(<PhoneNumberInput {...props} />);
+    const kit = screen.getByTestId(testId);
+    expect(kit).toHaveClass(className);
+});
+
+test("should pass value prop", () => {
+    const value = "1234567890";
+    const props = {
+        id: testId,
+        value,
+    };
 
-  render(<PhoneNumberInput {...props} />)
-  const kit = screen.getByTestId(testId)
-  expect(kit).toBeInTheDocument()
-})
+    render(<PhoneNumberInput {...props} />);
+    const kit = screen.getByRole("textbox");
+    expect(kit).toHaveDisplayValue(value);
+});
 
-test('should pass className prop', () => {
-  const className = 'custom-class-name'
+//TODO: test required field presence
+test("should pass required prop", () => {
+    const props = {
+        id: testId,
+    };
+
+    render(
+        <PhoneNumberInput
+            required
+            {...props}
+        />
+    );
+    const kit = screen.getByRole("textbox");
+    expect(kit).toHaveAttribute("required");
+});
+
+test("should have error attribute when invalid", () => {
   const props = {
-    className,
-    data: { testid: testId },
-    id: testId,
-  }
-
-  render(<PhoneNumberInput {...props} />)
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass(className)
-})
-
-test('should pass value prop', () => {
-  const value = '1234567890'
+      id: testId,
+      error: "Something isn't right here."
+  };
+
+  render(
+      <PhoneNumberInput
+          {...props}
+      />
+  );
+  const kit = screen.getByRole("textbox");
+  expect(kit).toHaveAttribute("error");
+});
+
+test("should trigger callback", () => {
+  const handleOnValidate = jest.fn((valid) => valid)
+
   const props = {
-    id: testId,
-    value,
-  }
-
-  render(<PhoneNumberInput {...props} />)
-  const kit = screen.getByRole("textbox")
-  expect(kit).toHaveDisplayValue(value)
-})
+      id: testId,
+      onValidate: handleOnValidate
+  };
+
+  render(
+      <PhoneNumberInput
+          {...props}
+      />
+  );
+
+  expect(handleOnValidate).toBeCalledWith(true)
+});

data/app/pb_kits/playbook/playbook-doc.js

@@ -30,6 +30,7 @@ import * as DateStacked from 'pb_date_stacked/docs'
 import * as DateTime from 'pb_date_time/docs'
 import * as DateTimeStacked from 'pb_date_time_stacked/docs'
 import * as DateYearStacked from 'pb_date_year_stacked/docs'
+import * as Detail from 'pb_detail/docs'
 import * as Dialog from 'pb_dialog/docs'
 import * as DistributionBarDocs from 'pb_distribution_bar/docs'
 import * as FileUpload from 'pb_file_upload/docs'
@@ -130,6 +131,7 @@ WebpackerReact.setup({
   ...DateTime,
   ...DateTimeStacked,
   ...DateYearStacked,
+  ...Detail,
   ...Dialog,
   ...DistributionBarDocs,
   ...FileUpload,

data/app/pb_kits/playbook/utilities/object.ts

@@ -0,0 +1,3 @@
+/* 🛠️ Any commonly used lodash functions can be added here. 🤙 */
+
+export const isEmpty = (obj: Record<string, unknown>): boolean => Object.keys(obj).length < 1

data/dist/menu.yml

@@ -90,6 +90,7 @@ kits:
   - typography:
     - body
     - caption
+    - detail
     - title
   - typography_patterns:
     - contact