RubyGems - playbook_ui - Versions diffs - 12.3.1 → 12.4.0.pre.alpha.devdocstest1 - Mend

playbook_ui 12.3.1 → 12.4.0.pre.alpha.devdocstest1

Files changed (38) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 03ffd4e3909a43dd2714dc9758a33fc752497e9094813c57184cfd8eab6c2425
-  data.tar.gz: 5fe6360b001e357d6e211c16e36ec5ddaf30ff5bc6d88d3d07272cd52d305076
+  metadata.gz: 3663b6779408f8388e9eaf0cf9f6ff48d0e98e5f6ac6abc11c75c5360b6b5f76
+  data.tar.gz: 809146bf7a2354e0010a59f6672e36daf0dd547eedf5525dc584abb9c0fa0961
 SHA512:
-  metadata.gz: '09002a0c8f9c2983ee3f5e484d75ef119bd874bcd85f39a6b23c8bb5b656b531543525ddbb83c1565eb308517f78c315918583ab5850966e3f5b33ab6583ea4d'
-  data.tar.gz: af4db16c100917ba7fda5be538be2be422610c9bb41b8d6dc58e3ff54763171f6f48a6b6bf2a2302db52904863533b37137c560363cbaf65c148df304c969ec8
+  metadata.gz: 30fb6ffcbc0b0b0fe04cd8c5400ffa31ad39756ed9e9eb53a46b464898a9c4cdea4cf6784a9091b4f17b151b1e245672d5a7431ccaa9e02558acd62b5d9d0bc1
+  data.tar.gz: 71fe5fdce4763e7ef7fe6600a59549bfb2b74532460ef9bb29bcfb99aa8fe5d86de6585a3f44de9fb09827c410477f4e2200ce53b3a91d4614e7db8c4c5644c7

data/app/pb_kits/playbook/_playbook.scss CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -32,6 +32,7 @@ kits:
     - form_group
     - form_pill
     - passphrase
+    - phone_number_input
     - radio
     - rich_text_editor
     - select

data/app/pb_kits/playbook/index.js CHANGED Viewed

@@ -53,7 +53,6 @@ export { default as LabelPill } from './pb_label_pill/_label_pill'
 export { default as LabelValue } from './pb_label_value/_label_value'
 export { default as Layout } from './pb_layout/_layout'
 export { default as Legend } from './pb_legend/_legend'
-export { default as Lightbox } from './pb_lightbox/_lightbox'
 export { default as LineGraph } from './pb_line_graph/_line_graph'
 export { default as List } from './pb_list/_list'
 export { default as ListItem } from './pb_list/_list_item'
@@ -69,6 +68,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_dashboard_value/{_dashboard_value.jsx → _dashboard_value.tsx} RENAMED Viewed

@@ -1,5 +1,3 @@
-/* @flow */
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
@@ -11,22 +9,22 @@ import StatValue from '../pb_stat_value/_stat_value'
 type DashboardValueProps = {
   align?: 'left' | 'center' | 'right',
-  aria?: object,
+  aria?: { [key: string]: string },
   className?: string,
-  data?: object,
+  data?: { [key: string]: string },
   id?: string,
   statChange?: {
-    change?: string,
-    value?: string | Number
+    change? : 'increase' | 'decrease' | 'neutral',
+    value?: string | number
   },
   statLabel?: string,
   statValue?: {
     unit?: string,
-    value?: string | Number
+    value?: string | number
   }
 }
-const DashboardValue = (props: DashboardValueProps) => {
+const DashboardValue = (props: DashboardValueProps): React.ReactElement => {
   const {
     align = 'left',
     aria = {},
@@ -53,21 +51,21 @@ const DashboardValue = (props: DashboardValueProps) => {
         className={classes}
         id={id}
     >
-      <If condition={statLabel}>
+      { statLabel &&
         <Body color="light">{statLabel}</Body>
-      </If>
-      <If condition={statValue}>
+      }
+      { statValue &&
         <StatValue
             unit={statValue.unit}
             value={statValue.value}
         />
-      </If>
-      <If condition={statChange}>
+      }
+      { statChange &&
         <StatChange
             change={statChange.change}
             value={statChange.value}
         />
-      </If>
+      }
     </div>
   )
 }

data/app/pb_kits/playbook/pb_date_time_stacked/{_date_time_stacked.jsx → _date_time_stacked.tsx} RENAMED Viewed

@@ -1,6 +1,4 @@
-/* @flow */
 import React from 'react'
 import { buildCss } from '../utilities/props'
@@ -20,7 +18,7 @@ type DateTimeStackedProps = {
   timeZone?: string,
 }
-const DateTimeStacked = (props: DateTimeStackedProps) => {
+const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
   if (props.date) deprecatedProps('Date Time Stacked', ['date'])
   const {
@@ -34,7 +32,7 @@ const DateTimeStacked = (props: DateTimeStackedProps) => {
   return (
     <Flex
-        inline="flex-container"
+        inline={false}
         vertical="stretch"
         {...props}
     >
@@ -44,7 +42,6 @@ const DateTimeStacked = (props: DateTimeStackedProps) => {
             bold
             dark={dark}
             date={date || datetime}
-            timeZone={timeZone}
         />
       </FlexItem>
@@ -57,7 +54,6 @@ const DateTimeStacked = (props: DateTimeStackedProps) => {
             className={classes}
             dark={dark}
             date={date || datetime}
-            tag="caption"
             timeZone={timeZone}
         />
       </FlexItem>

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.jsx CHANGED Viewed

@@ -9,17 +9,20 @@ const DateTimeStackedDefault = (props) => (
         {...props}
     />
     <br />
+    <DateTimeStacked
+        datetime={new Date(2018, 2, 20)}
+        {...props}
+    />
+    <br />
     <DateTimeStacked
         datetime={new Date()}
         timeZone="Asia/Tokyo"
         {...props}
     />
     <br />
     <DateTimeStacked
         datetime={new Date()}
         timeZone="America/Denver"
         {...props}
     />

data/app/pb_kits/playbook/pb_dialog/_dialog.scss CHANGED Viewed

@@ -5,6 +5,7 @@
 @import "../tokens/border_radius";
 @import "../tokens/spacing";
 @import "../tokens/animation-curves";
+@import "../tokens/positioning";
@@ -119,6 +120,7 @@
 	position: sticky;
 	top: 0;
 	background-color: $white;
+	z-index: $z_8;
 	}
 	// @include pb_card;

data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 /* eslint-disable jsx-control-statements/jsx-use-if-tag */
-import React, { useEffect } from 'react'
+import React from 'react'
 import Slides from './Slides'
 import Thumbnails from './Thumbnails'
@@ -24,13 +24,13 @@ export default function Carousel({
   onChange = ()=>{},
   setIndex,
 }: CarouselType): React.ReactElement {
-  useEffect(() => {
-    document.body.style.overflow = 'hidden'
+  // useEffect(() => {
+  //   document.body.style.overflow = 'hidden'
-    return () => {
-      document.body.style.overflow = 'initial'
-    }
-  }, [])
+  //   return () => {
+  //     document.body.style.overflow = 'initial'
+  //   }
+  // }, [])
   const handleChange = (index: number) => {
     onChange(index)

data/app/pb_kits/playbook/pb_person/{_person.jsx → _person.tsx} RENAMED Viewed

@@ -1,5 +1,3 @@
-/* @flow */
 import React from 'react'
 import classnames from 'classnames'
@@ -14,15 +12,15 @@ import Body from '../pb_body/_body'
 import Title from '../pb_title/_title'
 type PersonProps = {
-  aria?: object,
-  className?: string | array<string>,
-  data?: object,
+  aria?: { [key: string]: string },
+  className?: string | string[],
+  data?: { [key: string]: string },
   firstName: string,
   id?: string,
   lastName: string,
 }
-const Person = (props: PersonProps) => {
+const Person = (props: PersonProps): React.ReactElement => {
   const {
     aria = {},
     className,
@@ -52,13 +50,13 @@ const Person = (props: PersonProps) => {
       >
         {firstName}
       </Body>
-      <If condition={lastName}>
+      {lastName &&
         <Title
             className="pb_person_first"
             size={4}
             text={` ${lastName}`}
         />
-      </If>
+      }
     </div>
   )
 }

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

@@ -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 ADDED Viewed

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

@@ -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 ADDED Viewed

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

@@ -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 ADDED Viewed

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

data/app/pb_kits/playbook/pb_radio/_radio.scss CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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} RENAMED Viewed

@@ -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>

data/app/pb_kits/playbook/pb_title_count/title_count.test.js ADDED Viewed

@@ -0,0 +1,69 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import TitleCount from './_title_count'
+test('returns namespaced class name', () => {
+  render(
+    <TitleCount
+        count={35.78}
+        data={{ testid: 'primary-test' }}
+        title="Appointments"
+    />
+  )
+  const kit = screen.getByTestId('primary-test')
+  expect(kit).toHaveClass('pb_title_count_kit_left_sm')
+})
+test('size variant', () => {
+  render(
+    <TitleCount
+        count={35.78}
+        data={{ testid: 'large-test' }}
+        size="lg"
+        title="Appointments"
+    />
+  )
+  const kit = screen.getByTestId('large-test')
+  expect(kit).toHaveClass('pb_title_count_kit_left_lg')
+})
+test('align variant', () => {
+  render(
+    <TitleCount
+        align="right"
+        count={35.78}
+        data={{ testid: 'large-test' }}
+        title="Appointments"
+    />
+  )
+  const kit = screen.getByTestId('large-test')
+  expect(kit).toHaveClass('pb_title_count_kit_right_sm')
+})
+test('renders count correctly', () => {
+  render(
+    <TitleCount
+        count={35.78}
+        title="Appointments"
+    />
+  )
+  const kit = screen.getByText('35.78')
+  expect(kit).toBeTruthy()
+})
+test('renders title correctly', () => {
+  render(
+    <TitleCount
+        count={35.78}
+        title="Appointments"
+    />
+  )
+  const kit = screen.getByText('Appointments')
+  expect(kit).toBeTruthy()
+})

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

@@ -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/app/pb_kits/playbook/tokens/_colors.scss CHANGED Viewed

@@ -59,7 +59,7 @@ $main_colors: (
 Background colors ------------------*/
 $bg_light:            $silver !default;
 $bg_dark:             #0a0527 !default;
-$bg_dark_card:        #231E3D;
+$bg_dark_card:        #231E3D !default;
 $background_colors: (
   bg_light:           $bg_light,
   bg_dark:            $bg_dark,
@@ -68,7 +68,7 @@ $background_colors: (
 /* Card colors ------------------*/
 $card_light:          $white !default;
-$card_dark:           rgba($white, $opacity_1);
+$card_dark:           rgba($white, $opacity_1) !default;
 $card_colors: (
   card_light:         $card_light,
   card_dark:          $card_dark
@@ -80,7 +80,7 @@ $action_colors: (
 );
 /* Active colors ----------------------*/
-$active_light:        lighten(#E5F2FF, 3.5%);
+$active_light:        lighten(#E5F2FF, 3.5%) !default;
 $active_dark:         #0082ff !default;
 $active_colors: (
   active_light:       $active_light,
@@ -88,17 +88,17 @@ $active_colors: (
 );
 /* Hover colors -----------------------*/
-$hover_light:         darken($silver, 5%);
-$hover_dark:          rgba($white, $opacity_2);
+$hover_light:         darken($silver, 5%) !default;
+$hover_dark:          rgba($white, $opacity_2) !default;
 $hover_colors: (
   hover_light:        $hover_light,
   hover_dark:         $hover_dark
 );
 /* Focus colors -----------------------*/
-$focus_color:         $primary;
-$focus_input_light:   rgba($active_light, $opacity_5);
-$focus_input_dark:    rgba(#144075, $opacity_5);
+$focus_color:         $primary !default;
+$focus_input_light:   rgba($active_light, $opacity_5) !default;
+$focus_input_dark:    rgba(#144075, $opacity_5) !default;
 $focus_input_colors: (
   focus_input_light:        $focus_input_light,
   focus_input_dark:         $focus_input_dark,
@@ -107,14 +107,14 @@ $focus_input_colors: (
 /* Border colors ----------------------*/
 $border_light:        #E4E8F0 !default;
-$border_dark:         rgba($white, $opacity_1);
+$border_dark:         rgba($white, $opacity_1) !default;
 $border_colors: (
   border_light:       $border_light,
   border_dark:        $border_dark
 );
 /* Shadow colors ----------------------*/
-$shadow:        rgba(#3C6AAC, $opacity_2);
+$shadow:        rgba(#3C6AAC, $opacity_2) !default;
 $shadow_colors: (
   shadow:       $shadow,
 );
@@ -124,8 +124,8 @@ $text_lt_default:     $charcoal !default;
 $text_lt_light:       #687887 !default;
 $text_lt_lighter:     $slate !default;
 $text_dk_default:     $white !default;
-$text_dk_light:       rgba($white, $opacity_6);
-$text_dk_lighter:     rgba($white, $opacity_4);
+$text_dk_light:       rgba($white, $opacity_6) !default;
+$text_dk_lighter:     rgba($white, $opacity_4) !default;
 $text_colors: (
   text_lt_default:    $text_lt_default,
   text_lt_light:      $text_lt_light,
@@ -157,24 +157,24 @@ $data_colors: (
 /* Status colors ----------------------*/
 $success:             $green !default;
-$success_secondary:   lighten($success, 10%);
-$success_subtle:      rgba($success, $opacity_1);
+$success_secondary:   lighten($success, 10%) !default;
+$success_subtle:      rgba($success, $opacity_1) !default;
 $warning:             $yellow !default;
-$warning_secondary:   lighten($warning, 10%);
-$warning_subtle:      rgba($warning, $opacity_1);
+$warning_secondary:   lighten($warning, 10%) !default;
+$warning_subtle:      rgba($warning, $opacity_1) !default;
 $error:               $red !default;
 $error_dark:          $red_dark !default;
-$error_dark_body:     $error_dark;
-$error_secondary:     lighten($error, 10%);
-$error_subtle:        rgba($error, $opacity_1);
+$error_dark_body:     $error_dark !default;
+$error_secondary:     lighten($error, 10%) !default;
+$error_subtle:        rgba($error, $opacity_1) !default;
 $info:                $teal !default;
-$info_secondary :     lighten($info, 10%);
-$info_subtle:         rgba($info, $opacity_1);
+$info_secondary :     lighten($info, 10%) !default;
+$info_subtle:         rgba($info, $opacity_1) !default;
 $neutral:             $slate !default;
-$neutral_secondary:   lighten($neutral, 10%);
-$neutral_subtle:      rgba($neutral, $opacity_1);
+$neutral_secondary:   lighten($neutral, 10%) !default;
+$neutral_subtle:      rgba($neutral, $opacity_1) !default;
 $primary:             $primary !default;
-$primary_secondary:   lighten($primary, 10%);
+$primary_secondary:   lighten($primary, 10%) !default;
 $status_colors: (
   success:            $success,

data/lib/playbook/version.rb CHANGED Viewed

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

metadata CHANGED Viewed

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.3.1
+  version: 12.4.0.pre.alpha.devdocstest1
 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-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -660,10 +660,10 @@ files:
 - app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts
 - app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts
 - app/pb_kits/playbook/pb_dashboard/themeTypes.ts
-- app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx
 - app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.scss
+- app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.tsx
 - app/pb_kits/playbook/pb_dashboard_value/_dashboard_value_mixins.scss
-- app/pb_kits/playbook/pb_dashboard_value/dashboardValueSettings.js
+- app/pb_kits/playbook/pb_dashboard_value/dashboardValueSettings.ts
 - app/pb_kits/playbook/pb_dashboard_value/dashboard_value.html.erb
 - app/pb_kits/playbook/pb_dashboard_value/dashboard_value.rb
 - app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_align.html.erb
@@ -812,8 +812,8 @@ files:
 - app/pb_kits/playbook/pb_date_time/docs/_description.md
 - app/pb_kits/playbook/pb_date_time/docs/example.yml
 - app/pb_kits/playbook/pb_date_time/docs/index.js
-- app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.jsx
 - app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.scss
+- app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx
 - app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb
 - app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.rb
 - app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js
@@ -1525,8 +1525,8 @@ files:
 - app/pb_kits/playbook/pb_passphrase/passphrase.html.erb
 - app/pb_kits/playbook/pb_passphrase/passphrase.rb
 - app/pb_kits/playbook/pb_passphrase/passphrase.test.jsx
-- app/pb_kits/playbook/pb_person/_person.jsx
 - app/pb_kits/playbook/pb_person/_person.scss
+- app/pb_kits/playbook/pb_person/_person.tsx
 - app/pb_kits/playbook/pb_person/docs/_description.md
 - app/pb_kits/playbook/pb_person/docs/_footer.md
 - app/pb_kits/playbook/pb_person/docs/_person_default.html.erb
@@ -1536,6 +1536,7 @@ files:
 - app/pb_kits/playbook/pb_person/docs/index.js
 - app/pb_kits/playbook/pb_person/person.html.erb
 - app/pb_kits/playbook/pb_person/person.rb
+- app/pb_kits/playbook/pb_person/person.test.js
 - app/pb_kits/playbook/pb_person_contact/_person_contact.jsx
 - app/pb_kits/playbook/pb_person_contact/_person_contact.scss
 - app/pb_kits/playbook/pb_person_contact/docs/_description.md
@@ -1552,6 +1553,20 @@ 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_default.md
+- 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
@@ -2075,8 +2090,8 @@ files:
 - app/pb_kits/playbook/pb_title/title.html.erb
 - app/pb_kits/playbook/pb_title/title.rb
 - app/pb_kits/playbook/pb_title/title.test.js
-- app/pb_kits/playbook/pb_title_count/_title_count.jsx
 - app/pb_kits/playbook/pb_title_count/_title_count.scss
+- app/pb_kits/playbook/pb_title_count/_title_count.tsx
 - app/pb_kits/playbook/pb_title_count/docs/_description.md
 - app/pb_kits/playbook/pb_title_count/docs/_footer.md
 - app/pb_kits/playbook/pb_title_count/docs/_title_count_align.html.erb
@@ -2088,6 +2103,7 @@ files:
 - app/pb_kits/playbook/pb_title_count/docs/index.js
 - app/pb_kits/playbook/pb_title_count/title_count.html.erb
 - app/pb_kits/playbook/pb_title_count/title_count.rb
+- app/pb_kits/playbook/pb_title_count/title_count.test.js
 - app/pb_kits/playbook/pb_title_detail/_title_detail.jsx
 - app/pb_kits/playbook/pb_title_detail/_title_detail.scss
 - app/pb_kits/playbook/pb_title_detail/docs/_description.md
@@ -2406,9 +2422,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.3.7
 signing_key:

/data/app/pb_kits/playbook/pb_dashboard_value/{dashboardValueSettings.js → dashboardValueSettings.ts} RENAMED Viewed

File without changes