playbook_ui 12.26.1.pre.alpha.railsmultilevelimprovements842 → 12.27.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 326f8eff50b791dc21ab3ec0bdb295adef8d14d3957277f4f92d8abdfe445686
-  data.tar.gz: 0a9d5b6672174df0cb045cc3aea6b017d0e30f1a978df27e0529b7f1d3cb3472
+  metadata.gz: c8a90666ee111265053efa8a6306dcf5312bd5db5b1f9ed04f9f308efc4b800c
+  data.tar.gz: 5ff43b2f9c0b59121483cb30cfd1fcd24ba8fa02c65381000fb86b8ef5097fa9
 SHA512:
-  metadata.gz: 1b079256265e6bcdea4576a6930b527b944044f0064936376278147aad59cf1a5b311ba25632ca3878bb50e3fd62a33ccdf17cf805d7dd60eaece7d5d3e640fe
-  data.tar.gz: fa05822858223b65f2a3a2755a1f7fcecea6946d7a1f31ea40a32ad10ebd5b3df128cc3736fdab16b6329ba283e50d201412a8d79c6027745a646d8c6c94ac05
+  metadata.gz: 23a90f57292ebf633ef4d2305b4ca7c038abd1bfa8a0a2e8729c5c279522c265b76ca3e8f616076d5483990467baeaec22999d70dec6cb015f9064a64cba7e6a
+  data.tar.gz: ca7a82f0e5d3c9de8df3cef5c4913f1dbbd8890b0b29ebfd563f6cb02d5125c664a0a221cb676eb56a68e1f4be7ce26bd1507c0bf7893530a916ccf8e720891d

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss

@@ -1,4 +1,6 @@
 // Manual Import -- Flatpickr Styles
+@import "./tokens/typography";
+
 .flatpickr-calendar {
   background: transparent;
   opacity: 0;
@@ -295,7 +297,7 @@
 .flatpickr-current-month {
   font-size: 135%;
   line-height: inherit;
-  font-weight: 300;
+  font-weight: $light;
   color: inherit;
   position: absolute;
   width: 75%;
@@ -310,7 +312,7 @@
 }
 .flatpickr-current-month span.cur-month {
   font-family: inherit;
-  font-weight: 700;
+  font-weight: $bolder;
   color: inherit;
   display: inline-block;
   margin-left: 0.5ch;
@@ -341,7 +343,7 @@
   display: inline-block;
   font-size: inherit;
   font-family: inherit;
-  font-weight: 300;
+  font-weight: $light;
   line-height: inherit;
   height: auto;
   border: 0;
@@ -371,7 +373,7 @@
   cursor: pointer;
   font-size: inherit;
   font-family: inherit;
-  font-weight: 300;
+  font-weight: $light;
   height: auto;
   line-height: inherit;
   margin: -1px 0 0 0;
@@ -492,7 +494,7 @@ span.flatpickr-weekday {
           box-sizing: border-box;
   color: #393939;
   cursor: pointer;
-  font-weight: 400;
+  font-weight: $regular;
   width: 14.2857143%;
   -webkit-flex-basis: 14.2857143%;
       -ms-flex-preferred-size: 14.2857143%;
@@ -707,11 +709,11 @@ span.flatpickr-weekday {
   appearance: textfield;
 }
 .flatpickr-time input.flatpickr-hour {
-  font-weight: bold;
+  font-weight: $bolder;
 }
 .flatpickr-time input.flatpickr-minute,
 .flatpickr-time input.flatpickr-second {
-  font-weight: 400;
+  font-weight: $regular;
 }
 .flatpickr-time input:focus {
   outline: 0;
@@ -723,7 +725,7 @@ span.flatpickr-weekday {
   float: left;
   line-height: inherit;
   color: #393939;
-  font-weight: bold;
+  font-weight: $bolder;
   width: 2%;
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -738,7 +740,7 @@ span.flatpickr-weekday {
   width: 18%;
   cursor: pointer;
   text-align: center;
-  font-weight: 400;
+  font-weight: $regular;
 }
 .flatpickr-time input:hover,
 .flatpickr-time .flatpickr-am-pm:hover,

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_month_and_year_styles.scss

@@ -20,7 +20,7 @@
   color: $text_lt_default;
   cursor: pointer;
   display: inline-block;
-  font-weight: 400;
+  font-weight: $regular;
   margin: 0.5px;
   justify-content: center;
   padding: 10px;

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_week_styles.scss

@@ -20,7 +20,7 @@
   color: $text_lt_default;
   cursor: pointer;
   display: inline-block;
-  font-weight: 400;
+  font-weight: $regular;
   margin: 0.5px;
   justify-content: center;
   padding: 10px;

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss

@@ -56,7 +56,7 @@ $form_pill_colors: (
     height: -moz-fit-content;
     .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag {
       font-size: 16px;
-      font-weight: 400;
+      font-weight: $regular;
     }
     .pb_form_pill_text, .pb_form_pill_tag {
       line-height: 1.7;

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb

@@ -9,8 +9,6 @@ module Playbook
                        default: []
       prop :return_all_selected, type: Playbook::Props::Boolean,
                                  default: false
-      prop :return_complete_data, type: Playbook::Props::Boolean,
-                                  default: false
 
       def classname
         generate_classname("pb_multi_level_select")
@@ -22,7 +20,6 @@ module Playbook
           name: name,
           treeData: tree_data,
           returnAllSelected: return_all_selected,
-          returnCompleteData: return_complete_data,
         }
       end
     end

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