playbook_ui 12.24.0.pre.alpha.play824733 → 12.24.0.pre.alpha.railsmultilevelimprovements741

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8231bb3fbf02190e76cf2763a3d70ee166e665ea67ab0456fb61e90aba95e933
-  data.tar.gz: 71ef01fbd0bb7e37c38958c8b0409d577a682283713c3c7a50aec203b6870423
+  metadata.gz: da9354cafa403b90e25fad73dc219e98daf8daa09d49ea12b51bfd537a2221f8
+  data.tar.gz: 347e207c228a8bb42406003a64f811c115c14ab0abd8e60de3399014fc60752c
 SHA512:
-  metadata.gz: 5ec035a7462706717a83e63a232d4e2cbf761eeb8e89b17466630e1921f01c1aeecd79b6e21f3b2d930a112edab0cf39cbd649ea9ddd3320a8ca9b942a4322ac
-  data.tar.gz: e1966ede2224963aa2c903d23765dae5cb24c0317d3d7bff6f0fd9d211ae1453f48d70ab94cffdf3d04d760274234a61b5fd2d2c1cf838d652bea6e635f059d8
+  metadata.gz: 066a9da18630f39904e91a4807ac6941ebc6ea111c174208c34c21cb6ac9de1eaccb4c6d1b79f77ca7181c674fa6d7fd0740446166b0a06137f9070f1804fdd5
+  data.tar.gz: b6ee20cdcf777fe7405ff203719b0ce03592f71631406df7c682dba5e6d14e95543a30bbac23b489efb1016f06fcb7bb1bcee5e545df4bc9651c19ab0148a0be

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

@@ -1,16 +1,11 @@
-import React, { forwardRef, useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import classnames from 'classnames'
-
-import intlTelInput from 'intl-tel-input'
-import 'intl-tel-input/build/css/intlTelInput.css'
-import 'intl-tel-input/build/js/utils.js'
-
 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 { Callback } from '../types'
-import { isEmpty } from '../utilities/object'
+import 'intl-tel-input/build/js/utils.js'
 
 declare global {
   interface Window {
@@ -24,17 +19,14 @@ 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,
 }
 
@@ -48,10 +40,10 @@ const formatToGlobalCountryName = (countryName: string) => {
 }
 
 const formatAllCountries = () => {
-  const countryData = window.intlTelInputGlobals.getCountryData()
+  let countryData = window.intlTelInputGlobals.getCountryData()
 
   for (let i = 0; i < countryData.length; i++) {
-    const country = countryData[i]
+    let country = countryData[i]
     country.name = formatToGlobalCountryName(country.name)
   }
 }
@@ -79,9 +71,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
     onChange = () => {
       void 0
     },
-    onValidate = () => null,
     onlyCountries = [],
-    required = false,
     preferredCountries = [],
     value = "",
   } = props
@@ -97,18 +87,10 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
   const inputRef = useRef<HTMLInputElement>()
   const [inputValue, setInputValue] = useState(value)
   const [itiInit, setItiInit] = useState<any>()
-  const [error, setError] = useState(props.error)
+  const [error, setError] = useState('')
   const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
   const [selectedData, setSelectedData] = useState()
 
-  useEffect(() => {
-    if (error?.length > 0) {
-      onValidate(false)
-    } else {
-      onValidate(true)
-    }
-  }, [error, onValidate])
-
   const validateTooLongNumber = (itiInit: any) => {
     const error = itiInit.getValidationError()
 
@@ -155,7 +137,9 @@ 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, {
@@ -164,14 +148,14 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
       allowDropdown: !disabled,
       initialCountry,
       onlyCountries,
-    })
+    }
+    )
 
     inputRef.current.addEventListener("countrychange", (evt: Event) => {
       validateTooLongNumber(telInputInit)
       const phoneNumberData = getCurrentSelectedData(telInputInit, (evt.target as HTMLInputElement).value)
       setSelectedData(phoneNumberData)
       onChange(phoneNumberData)
-      isValid(telInputInit.isValidNumber())
     })
 
     inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
@@ -180,34 +164,24 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
     setItiInit(telInputInit)
   }, [])
 
-  let textInputProps: {[key: string]: any} = {
-    className: dropDownIsOpen ? 'dropdown_open' : '',
-    dark,
-    "data-phone-number": JSON.stringify(selectedData),
-    disabled,
-    error,
-    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 {...wrapperProps}>
+    <div {...ariaProps} {...dataProps} className={classes}>
       <TextInput
-          ref={inputRef}
-          {...textInputProps}
+        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}
       />
     </div>
   )
 }
 
-export default forwardRef(PhoneNumberInput)
+export default PhoneNumberInput

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

@@ -5,11 +5,9 @@ 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_validation: Form Validation
+  - phone_number_input_only_countries: Limited Countries

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

@@ -2,4 +2,3 @@ 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,8 +5,6 @@ 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,
@@ -17,7 +15,6 @@ module Playbook
                             default: []
       prop :preferred_countries, type: Playbook::Props::Array,
                                  default: []
-      prop :error, type: Playbook::Props::String
       prop :value, type: Playbook::Props::String,
                    default: ""
 
@@ -30,13 +27,11 @@ 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,122 +1,74 @@
-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,
-    };
-
-    render(<PhoneNumberInput {...props} />);
-    const kit = screen.getByRole("textbox");
-    expect(kit).toBeDisabled();
-});
-
-test("should be enabled by default", () => {
-    const props = {
-        id: testId,
-    };
-
-    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,
-    };
-
-    render(<PhoneNumberInput {...props} />);
-    const kit = screen.getByText(label);
-    expect(kit).toBeInTheDocument();
-});
-
-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,
-    };
+test('should be disabled', () => {
+  const props = {
+    disabled: true,
+    id: testId,
+  }
 
-    render(<PhoneNumberInput {...props} />);
-    const kit = screen.getByRole("textbox");
-    expect(kit).toHaveDisplayValue(value);
-});
+  render(<PhoneNumberInput {...props} />)
+  const kit = screen.getByRole("textbox")
+  expect(kit).toBeDisabled()
+})
 
-//TODO: test required field presence
-test("should pass required prop", () => {
-    const props = {
-        id: testId,
-    };
+test('should be enabled by default', () => {
+  const props = {
+    id: testId,
+  }
 
-    render(
-        <PhoneNumberInput
-            required
-            {...props}
-        />
-    );
-    const kit = screen.getByRole("textbox");
-    expect(kit).toHaveAttribute("required");
-});
+  render(<PhoneNumberInput {...props} />)
+  const kit = screen.getByRole("textbox")
+  expect(kit).not.toBeDisabled()
+})
 
-test("should have error attribute when invalid", () => {
+test('should have label', () => {
+  const label = 'Phone Number'
   const props = {
-      id: testId,
-      error: "Something isn't right here."
-  };
+    id: testId,
+    label,
+  }
 
-  render(
-      <PhoneNumberInput
-          {...props}
-      />
-  );
-  const kit = screen.getByRole("textbox");
-  expect(kit).toHaveAttribute("error");
-});
-
-test("should trigger callback", () => {
-  const handleOnValidate = jest.fn((valid) => valid)
+  render(<PhoneNumberInput {...props} />)
+  const kit = screen.getByText(label)
+  expect(kit).toBeInTheDocument()
+})
 
+test('should pass data prop', () => {
   const props = {
-      id: testId,
-      onValidate: handleOnValidate
-  };
+    data: { testid: testId },
+    id: testId,
+  }
 
-  render(
-      <PhoneNumberInput
-          {...props}
-      />
-  );
+  render(<PhoneNumberInput {...props} />)
+  const kit = screen.getByTestId(testId)
+  expect(kit).toBeInTheDocument()
+})
 
-  expect(handleOnValidate).toBeCalledWith(true)
-});
+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.getByRole("textbox")
+  expect(kit).toHaveDisplayValue(value)
+})