playbook_ui 12.3.1.pre.alpha.phone1 → 12.3.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2d0da36e2f894f76eb618fae4726c5fbdd52e6aa451ec1c8095fe32409be47d8
-  data.tar.gz: 79f4acd1edf5ade98a889ee5f0bd1a0c47c0fbb4f9851b13ef717f84d10b0378
+  metadata.gz: 03ffd4e3909a43dd2714dc9758a33fc752497e9094813c57184cfd8eab6c2425
+  data.tar.gz: 5fe6360b001e357d6e211c16e36ec5ddaf30ff5bc6d88d3d07272cd52d305076
 SHA512:
-  metadata.gz: 5d569535b3adc70df8c8ef5900196beca2bb253effbead6d47b6b8479346ebbe7790a3dc9db111e7901c1286b0c49f5bbed459242aaa39179c07c4149141ab35
-  data.tar.gz: ada28cdce704202dee2338e8b88e2218ec1397712db2ac392f37f133c597c6ad4f5684f9d85afa2659d8fb8d3782f28fcc95009f0440491444f749bd71c909ea
+  metadata.gz: '09002a0c8f9c2983ee3f5e484d75ef119bd874bcd85f39a6b23c8bb5b656b531543525ddbb83c1565eb308517f78c315918583ab5850966e3f5b33ab6583ea4d'
+  data.tar.gz: af4db16c100917ba7fda5be538be2be422610c9bb41b8d6dc58e3ff54763171f6f48a6b6bf2a2302db52904863533b37137c560363cbaf65c148df304c969ec8

data/app/pb_kits/playbook/_playbook.scss

@@ -61,7 +61,6 @@
 @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';
@@ -107,3 +106,4 @@
 @import './utilities/display';
 @import './utilities/flexbox';
 @import './utilities/focus';
+

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

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

data/app/pb_kits/playbook/index.js

@@ -69,7 +69,6 @@ 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/playbook-doc.js

@@ -65,7 +65,6 @@ 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'
@@ -164,7 +163,6 @@ 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.1"
-  VERSION = "12.3.1.pre.alpha.phone1"
+  PREVIOUS_VERSION = "12.3.0"
+  VERSION = "12.3.1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.3.1.pre.alpha.phone1
+  version: 12.3.1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-02-15 00:00:00.000000000 Z
+date: 2023-02-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1552,19 +1552,6 @@ 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
@@ -2419,9 +2406,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubygems_version: 3.3.7
 signing_key:

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

@@ -1,82 +0,0 @@
-@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

@@ -1,155 +0,0 @@
-/* @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

@@ -1,10 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

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

@@ -1,13 +0,0 @@
-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

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

@@ -1,13 +0,0 @@
-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

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

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

@@ -1,4 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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

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