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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

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