playbook_ui 12.3.0.pre.alpha.patchtest1 → 12.3.1.pre.alpha.phone1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '0928d7277d3ae8bafae0638314ca0e5b76d4fd09e8c402e281644196b7917903'
-  data.tar.gz: f62293859cddfd9bfe8493e9fd3a40a7515881e99262a329e8914390b99a632c
+  metadata.gz: 2d0da36e2f894f76eb618fae4726c5fbdd52e6aa451ec1c8095fe32409be47d8
+  data.tar.gz: 79f4acd1edf5ade98a889ee5f0bd1a0c47c0fbb4f9851b13ef717f84d10b0378
 SHA512:
-  metadata.gz: afba11e867700ad41542a1e6a6dbff294bbe0d56dbee36ea7484cce52b8c8fc7575dc08c4f63fee38518833102abcc1815b57a4d2b71276291a1a5058a221ea7
-  data.tar.gz: bb698f0b069b59bfac04f05235f1a3a0f73b1ca3fe7e0c00613ba213a398307ee7666f29820f9249ef410ff48395c2b3674bf18d2815fd81f7e23d1aac14d86c
+  metadata.gz: 5d569535b3adc70df8c8ef5900196beca2bb253effbead6d47b6b8479346ebbe7790a3dc9db111e7901c1286b0c49f5bbed459242aaa39179c07c4149141ab35
+  data.tar.gz: ada28cdce704202dee2338e8b88e2218ec1397712db2ac392f37f133c597c6ad4f5684f9d85afa2659d8fb8d3782f28fcc95009f0440491444f749bd71c909ea

data/app/pb_kits/playbook/_playbook.scss

@@ -61,6 +61,7 @@
 @import 'pb_passphrase/passphrase';
 @import 'pb_person/person';
 @import 'pb_person_contact/person_contact';
+@import 'pb_phone_number_input/phone_number_input';
 @import 'pb_pill/pill';
 @import 'pb_popover/popover';
 @import 'pb_progress_pills/progress_pills';
@@ -106,4 +107,3 @@
 @import './utilities/display';
 @import './utilities/flexbox';
 @import './utilities/focus';
-

data/app/pb_kits/playbook/data/menu.yml

@@ -62,6 +62,7 @@ kits:
     - hashtag
     - pill
   - pagination
+  - phone_number_input
   - popover
   - progress:
     - progress_pills

data/app/pb_kits/playbook/index.js

@@ -69,6 +69,7 @@ export { default as Passphrase } from './pb_passphrase/_passphrase'
 export { default as PbReactPopover } from './pb_popover/_popover'
 export { default as Person } from './pb_person/_person'
 export { default as PersonContact } from './pb_person_contact/_person_contact'
+export { default as PhoneNumberInput} from './pb_phone_number_input/_phone_number_input'
 export { default as Pill } from './pb_pill/_pill'
 export { default as ProgressPills } from './pb_progress_pills/_progress_pills'
 export { default as ProgressSimple } from './pb_progress_simple/_progress_simple'

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

@@ -0,0 +1,82 @@
+@import "../tokens/colors";
+
+.pb_phone_number_input {
+  input::placeholder {
+    color: $focus_input_light;
+  }
+
+  .iti__country.iti__highlight {
+    background-color: $hover_light;
+
+    .iti__country-name, .iti__dial-code {
+      color: $primary
+    }
+  }
+
+  .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
+    background-color: $focus_input_light;
+  }
+
+  .iti__flag-container:hover + .text_input {
+    background-color: $focus_input_light;
+  }
+
+  .iti__flag {
+    background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/img/flags.png");
+  }
+
+  .iti--separate-dial-code .iti__selected-flag {
+    background-color: rgba(0, 0, 0, 0);
+  }
+
+  .iti__arrow {
+    border-left: unset;
+    border-right: unset;
+    border-top: unset;
+    width: unset;
+    height: unset;
+    margin-bottom: 4px;
+  }
+
+  .iti__arrow--up {
+    border-bottom: unset;
+  }
+
+  .iti__arrow::before {
+    display: inline-block;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    font: var(--fa-font-regular);
+    font-size: 0.5em;
+    content: "\f078";
+  }
+
+  .iti__arrow.iti__arrow--up::before {
+    font: var(--fa-font-regular);
+    font-size: 0.5em;
+    content: "\f077";
+  }
+
+  .iti__active::after {
+    float: right;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    font: var(--fa-font-regular);
+    content: "\f00c";
+    font-size: 1em;
+    margin-top: 5px;
+  }
+
+  .iti__country-list {
+    min-width: 340px;
+    border-radius: $border_radius_md;
+    border: 1px solid $border_light;
+    box-shadow: $shadow_deep;
+  }
+  
+  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+    .iti__flag {
+      background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/img/flags@2x.png");
+    }
+  }
+}

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

@@ -0,0 +1,155 @@
+/* @flow */
+import React, { 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'
+
+declare global {
+  interface Window {
+    intlTelInputGlobals: any,
+  }
+}
+
+type PhoneNumberInputProps = {
+  aria?: { [key: string]: string },
+  className?: string,
+  data?: { [key: string]: string },
+  disabled?: boolean,
+  id?: string,
+  initialCountry?: string,
+  isValid?: (valid: boolean) => void,
+  label?: string,
+  name?: string,
+  onChange?: (e: React.FormEvent<HTMLInputElement>) => void,
+  onlyCountries: string[],
+  preferredCountries?: string[],
+  value?: string,
+}
+
+enum ValidationError {
+  TooShort = 2,
+  TooLong = 3,
+}
+
+const formatToGlobalCountryName = (countryName: string) => {
+  return countryName.split('(')[0].trim()
+}
+
+const formatAllCountries = () => {
+  let countryData = window.intlTelInputGlobals.getCountryData()
+  for (let i = 0; i < countryData.length; i++) {
+    let country = countryData[i]
+    country.name = formatToGlobalCountryName(country.name)
+  }
+}
+
+const containOnlyNumbers = (value: string) => {
+  return /^(\++)*(\d+)$/.test(value)
+}
+
+const PhoneNumberInput = (props: PhoneNumberInputProps) => {
+  const {
+    aria = {},
+    className,
+    data = {},
+    disabled = false,
+    id = '',
+    initialCountry = '',
+    isValid = () => {void 0 },
+    label = '',
+    name = '',
+    onChange = () => { void 0 },
+    onlyCountries = [],
+    preferredCountries = [],
+    value = '',
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_phone_number_input'), globalProps(props), className)
+
+  const inputRef = useRef<HTMLInputElement>()
+  const [inputValue, setInputValue] = useState(value)
+  const [itiInit, setItiInit] = useState<any>()
+  const [error, setError] = useState('')
+
+  const validateTooLongNumber = (itiInit: any) => {
+    const error = itiInit.getValidationError()
+
+    if (error === ValidationError.TooLong) {
+      const countryName = itiInit.getSelectedCountryData().name
+      setError(`Invalid ${countryName} phone number (too long)`)
+    } else {
+      setError('')
+    }
+  }
+
+  const validateTooShortNumber = () => {
+    const error = itiInit.getValidationError()
+
+    if (error === ValidationError.TooShort) {
+      const countryName = itiInit.getSelectedCountryData().name
+      setError(`Invalid ${countryName} phone number (too short)`)
+    }
+  }
+
+  const validateOnlyNumbers = () => {
+    if (inputValue && !containOnlyNumbers(inputValue)) {
+      setError('Invalid phone number. Enter numbers only.')
+    }
+  }
+
+  const validateErrors = () => {
+    validateTooShortNumber()
+    validateOnlyNumbers()
+  }
+
+  const handleOnChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(evt.target.value)
+    validateTooLongNumber(itiInit)
+    onChange(evt)
+    isValid(itiInit.isValidNumber())
+  }
+
+  useEffect(() => {
+    formatAllCountries()
+
+    const telInputInit = new intlTelInput(inputRef.current, {
+        utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/utils.js',
+        separateDialCode: true,
+        preferredCountries,
+        allowDropdown: !disabled,
+        initialCountry,
+        onlyCountries,
+      }
+    )
+    
+    inputRef.current.addEventListener("countrychange", () => validateTooLongNumber(telInputInit))
+    setItiInit(telInputInit)
+  }, [])
+
+  return (
+    <div
+      {...ariaProps}
+      {...dataProps}
+      className={classes}
+    >
+      <TextInput
+        disabled={disabled}
+        error={error}
+        id={id}
+        label={label}
+        name={name}
+        onBlur={() => validateErrors()}
+        onChange={handleOnChange}
+        ref={inputRef}
+        value={inputValue}
+      />
+    </div>
+  )
+}
+
+export default PhoneNumberInput

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

@@ -0,0 +1,10 @@
+import React from 'react'
+import { PhoneNumberInput } from '../../'
+
+const PhoneNumberInputDefault = () => (
+  <>
+    <PhoneNumberInput id='default' />
+  </>
+)
+
+export default PhoneNumberInputDefault

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

@@ -0,0 +1,12 @@
+import React from 'react'
+import { PhoneNumberInput } from '../../'
+
+const PhoneNumberInitialCountry = () => (
+  <>
+    <PhoneNumberInput id='initial'
+        initialCountry='br'
+    />
+  </>
+)
+
+export default PhoneNumberInitialCountry

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.md

@@ -0,0 +1 @@
+You can set an initial country, which will preselect that country within the input as well as the country dropdown.

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

@@ -0,0 +1,13 @@
+import React from 'react'
+import { PhoneNumberInput } from '../../'
+
+const PhoneNumberInputOnlyCountries = () => (
+  <>
+    <PhoneNumberInput
+        id='only'
+        onlyCountries={['us', 'br']}
+    />
+  </>
+)
+
+export default PhoneNumberInputOnlyCountries

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.md

@@ -0,0 +1 @@
+You can limit the country options, which will remove all countries except your selections from the dropdown.

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

@@ -0,0 +1,13 @@
+import React from 'react'
+import { PhoneNumberInput } from '../../'
+
+const PhoneNumberInputPreferredCountries = () => (
+  <>
+    <PhoneNumberInput
+        id='preferred'
+        preferredCountries={['us', 'br', 'ph', 'gb']}
+    />
+  </>
+)
+
+export default PhoneNumberInputPreferredCountries

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md

@@ -0,0 +1 @@
+You can set preferred countries to group at the top of your country selector dropdown. The countries you select will display in the order you list them, with the first country preselected and all other countries listed alphabetically below a section separator within the remaining dropdown.

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

@@ -0,0 +1,7 @@
+examples:
+
+  react:
+  - 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

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

@@ -0,0 +1,4 @@
+export { default as PhoneNumberInputDefault } from './_phone_number_input_default'
+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'

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

@@ -0,0 +1,74 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import PhoneNumberInput from './_phone_number_input'
+
+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,
+  }
+
+  render(<PhoneNumberInput {...props} />)
+  const kit = screen.getByRole("textbox")
+  expect(kit).toHaveDisplayValue(value)
+})

data/app/pb_kits/playbook/pb_phone_number_input/types.d.ts

@@ -0,0 +1 @@
+declare module 'intl-tel-input'

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

@@ -65,6 +65,7 @@ import * as Passphrase from 'pb_passphrase/docs'
 import * as PbReactPopover from 'pb_popover/docs'
 import * as Person from 'pb_person/docs'
 import * as PersonContact from 'pb_person_contact/docs'
+import * as PhoneNumberInput from 'pb_phone_number_input/docs'
 import * as Pill from 'pb_pill/docs'
 import * as ProgressPills from 'pb_progress_pills/docs'
 import * as ProgressSimple from 'pb_progress_simple/docs'
@@ -163,6 +164,7 @@ WebpackerReact.setup({
   ...PbReactPopover,
   ...Person,
   ...PersonContact,
+  ...PhoneNumberInput,
   ...Pill,
   ...ProgressPills,
   ...ProgressSimple,

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "12.3.0"
-  VERSION = "12.3.0.pre.alpha.patchtest1"
+  PREVIOUS_VERSION = "12.3.1"
+  VERSION = "12.3.1.pre.alpha.phone1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.3.0.pre.alpha.patchtest1
+  version: 12.3.1.pre.alpha.phone1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-02-14 00:00:00.000000000 Z
+date: 2023-02-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1552,6 +1552,19 @@ files:
 - app/pb_kits/playbook/pb_person_contact/docs/index.js
 - app/pb_kits/playbook/pb_person_contact/person_contact.html.erb
 - app/pb_kits/playbook/pb_person_contact/person_contact.rb
+- app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss
+- app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx
+- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx
+- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.jsx
+- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.md
+- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.jsx
+- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.md
+- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.jsx
+- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md
+- app/pb_kits/playbook/pb_phone_number_input/docs/example.yml
+- app/pb_kits/playbook/pb_phone_number_input/docs/index.js
+- app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js
+- app/pb_kits/playbook/pb_phone_number_input/types.d.ts
 - app/pb_kits/playbook/pb_pill/_pill.scss
 - app/pb_kits/playbook/pb_pill/_pill.tsx
 - app/pb_kits/playbook/pb_pill/docs/_description.md