playbook_ui 12.3.1 → 12.4.0.pre.alpha.map1

data/app/pb_kits/playbook/pb_person/person.test.js

@@ -0,0 +1,43 @@
+import React from 'react'
+
+import { render, screen } from '../utilities/test-utils'
+
+import Person from './_person'
+
+test('renders person classname', () => {
+  render(
+    <Person
+        data={{ testid: 'classname-test' }}
+        firstName="Kyle"
+        lastName="Fadigan"
+    />
+  )
+
+  const kit = screen.getByTestId('classname-test')
+  expect(kit).toHaveClass("pb_person_kit");
+})
+
+
+test('it renders the component with the first name', () => {
+  render(
+    <Person
+        firstName="Kyle"
+        lastName="Fadigan"
+    />
+  )
+
+  const kit = screen.getByText('Kyle')
+  expect(kit).toBeTruthy()
+})
+
+test('it renders the component with the last name', () => {
+  render(
+    <Person
+        firstName="Kyle"
+        lastName="Fadigan"
+    />
+  )
+
+  const kit = screen.getByText('Fadigan')
+  expect(kit).toBeTruthy()
+})

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

@@ -0,0 +1,102 @@
+@import "../tokens/colors";
+
+.pb_phone_number_input {
+  input::placeholder {
+    color: $focus_input_light;
+  }
+
+  .iti__country {
+    padding: 5px 10px 5px 16px;
+  }
+
+  .iti__selected-flag {
+    padding: 0 6px 0 16px;
+  }
+
+  .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($white, $opacity_1);
+  }
+
+  .iti__arrow {
+    border-left: unset;
+    border-right: unset;
+    border-top: unset;
+    width: unset;
+    height: unset;
+    margin-bottom: $space_xxs;
+  }
+
+  .iti__arrow--up {
+    border-bottom: unset;
+  }
+
+  .iti__arrow::before {
+    border-style: solid;
+    border-width: 0.1em 0.1em 0 0;
+    content: '';
+    display: inline-block;
+    height: 0.6em;
+    left: 0.1em;
+    position: relative;
+    vertical-align: top;
+    width: 0.6em;
+    top: 10px;
+    transform: rotate(135deg);
+    font-size: 0.5em;
+    color: $slate;
+  }
+
+  .iti__arrow.iti__arrow--up::before {
+    transform: rotate(-45deg);
+    top: 12px;
+  }
+
+  .iti__active::after {
+    float: right;
+    content: "";
+    margin-top: 5px;
+    transform: rotate(45deg);
+    height: 12px;
+    width: 6px;
+    border-bottom: 2px solid;
+    border-right: 2px solid;
+    border-radius: 1px;
+  }
+
+  .iti__country-list {
+    min-width: 340px;
+    border-radius: $border_radius_md;
+    border: 1px solid $border_light;
+    box-shadow: $shadow_deep;
+  }
+
+  .iti__divider {
+    border-bottom: 1px solid $border_light;
+  }
+  
+  @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_default.md

@@ -0,0 +1 @@
+NOTE: Error state is handled by default, validating length (too long or too short) relative to the selected country’s phone format and enforcing numeric-only values for all countries.

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 @@
+Setting an initial country preselects 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 @@
+Limiting countries removes all countries from the dropdown except your selections.

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 @@
+Preferred countries will display in the order they are listed with the first country preselected, and all non-preferred 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/pb_radio/_radio.scss

@@ -16,16 +16,13 @@
     border-radius: 1000px;
     border: 2px solid $border_light;
     margin-right: $space_xs;
-    transition-property: border-color, border;
-    transition-duration: $transition_short;
-    transition-timing-function: $easeIn;
+    transition: background $transition_default ease, box-shadow $transition_default ease, border-color $transition_default ease;
   }
 
   @media (hover:hover) {
-    &:hover, &:focus {
-      .pb_radio_button {
-        border-color: $primary_action;
-      }
+    &:hover .pb_radio_button {
+      background-color: $bg_light;
+      border-color: $border_light;
     }
   }
 
@@ -33,7 +30,12 @@
     position: relative;
     width: 0;
     left: $offscreen;
-    &:checked, &:focus {
+    &:focus-visible {
+      & ~ .pb_radio_button {
+        box-shadow: 0px 0px 0px 2px $white, 0px 0px 0px 4px $primary;
+      }
+    }
+    &:checked {
       & ~ .pb_radio_button {
         border: 6px solid $primary;
       }
@@ -54,7 +56,12 @@
       border-color: $border_dark;
     }
     input {
-      &:checked, &:focus {
+      &:focus-visible {
+        & ~ .pb_radio_button {
+          box-shadow: 0px 0px 0px 2px $bg_dark_card, 0px 0px 0px 4px $primary;
+        }
+      }
+      &:checked {
         & ~ .pb_radio_button {
           border: 6px solid $primary;
         }
@@ -62,9 +69,10 @@
     }
 
     @media (hover:hover) {
-      &:hover, &:focus {
+      &:hover {
         .pb_radio_button {
-          border-color: $primary_action;
+          background-color: rgba($white,.10);
+          border-color: $border_dark;
         }
       }
     }

data/app/pb_kits/playbook/pb_radio/_radio.tsx

@@ -78,7 +78,7 @@ const Radio = ({
         status={error ? 'negative' : null}
         text={label}
         variant={null}
-      />
+    />
     </label>
   )
 }

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -215,7 +215,7 @@
       }
       .text_input {
         border-left: 0;
-        padding-left: 0;
+        padding-left: 16px;
       }
     }
     &_left_on {

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.html.erb

@@ -8,6 +8,12 @@
   add_on: { icon: "user", alignment: 'right', border: true }
 }) %>
 
+
+<%= pb_rails("text_input", props: {
+  label: "Right-Aligned Add On With No Border",
+  add_on: { icon: "percent", alignment: 'right', border: false }
+}) %>
+
 <%= pb_rails("text_input", props: {
   label: "Left-Aligned Add On With No Border",
   add_on: { icon: "percent", alignment: 'left', border: false }
@@ -16,9 +22,4 @@
 <%= pb_rails("text_input", props: {
   label: "Left-Aligned Add On With Border",
   add_on: { icon: "user", alignment: 'left', border: true }
-}) %>
-
-<%= pb_rails("text_input", props: {
-  label: "Right-Aligned Add On With No Border",
-  add_on: { icon: "percent", alignment: 'right', border: false }
-}) %>
+}) %>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.jsx

@@ -51,19 +51,19 @@ const TextInputAddOn = (props) => {
       </div>
       <div>
         <TextInput
-            addOn={{ icon: 'percent', alignment: 'left', border: false }}
-            label="Left-Aligned Add On With No Border"
-            onChange={handleUpdateSecondInput}
-            value={secondInput}
+            addOn={{ icon: 'percent', alignment: 'right', border: false }}
+            label="Right-Aligned Add On With No Border"
+            onChange={handleUpdateThirdInput}
+            value={thirdInput}
             {...props}
         />
       </div>
       <div>
         <TextInput
-            addOn={{ icon: 'percent', alignment: 'right', border: false }}
-            label="Right-Aligned Add On With No Border"
-            onChange={handleUpdateThirdInput}
-            value={thirdInput}
+            addOn={{ icon: 'percent', alignment: 'left', border: false }}
+            label="Left-Aligned Add On With No Border"
+            onChange={handleUpdateSecondInput}
+            value={secondInput}
             {...props}
         />
       </div>

data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx

@@ -15,7 +15,7 @@ type TimeStackedProps = {
   data?: { [key: string]: string },
   date?: string,
   id?: string,
-  time: number | Date,
+  time?: number | Date,
   timeZone?: string,
 }
 

data/app/pb_kits/playbook/pb_title_count/{_title_count.jsx → _title_count.tsx}

@@ -11,17 +11,17 @@ import Title from '../pb_title/_title'
 
 type TitleCountProps = {
   align: "center" | "left" | "right",
-  aria?: object,
+  aria?: { [key: string]: string },
   className?: string,
-  count?: Numeric,
+  count?: number,
   dark?: boolean,
-  data?: object,
+  data?: { [key: string]: string },
   id?: string,
   title?: string,
   size?: "lg" | "sm",
 };
 
-const TitleCount = (props: TitleCountProps) => {
+const TitleCount = (props: TitleCountProps): React.ReactElement => {
   const {
     align = 'left',
     aria = {},
@@ -61,7 +61,9 @@ const TitleCount = (props: TitleCountProps) => {
           color="light"
           dark={dark}
       >
-        <If condition={count}>{formatCount}</If>
+        {count &&
+          formatCount
+        }
       </Body>
 
     </div>