playbook_ui 6.1.0.pre.alpha2 → 7.0.0.pre.alpha1

data/app/pb_kits/playbook/pb_online_status/_online_status.jsx

@@ -7,9 +7,9 @@ import { globalProps } from '../utilities/globalProps.js'
 import { buildDataProps } from '../utilities/props'
 
 type OnlineStatusProps = {
-  className?: String,
+  className?: string,
   data?: object,
-  id?: String,
+  id?: string,
   status?: "online" | "offline" | "away",
 }
 

data/app/pb_kits/playbook/pb_person/_person.jsx

@@ -14,11 +14,11 @@ import { Body, Title } from '../'
 
 type PersonProps = {
   aria?: object,
-  className?: String | Array<String>,
+  className?: string | array<string>,
   data?: object,
-  firstName: String,
-  id?: String,
-  lastName: String,
+  firstName: string,
+  id?: string,
+  lastName: string,
 }
 
 const Person = (props: PersonProps) => {

data/app/pb_kits/playbook/pb_person_contact/_person_contact.jsx

@@ -14,20 +14,20 @@ import { globalProps } from '../utilities/globalProps.js'
 import { Caption, Contact, Person } from '../'
 
 type ContactItem = {
-  contactType: String,
-  contactValue: String,
-  contactDetail: String,
+  contactType: string,
+  contactValue: string,
+  contactDetail: string,
 }
 
 type PersonContactProps = {
   aria?: object,
-  className?: String | Array<String>,
-  dark?: Boolean,
+  className?: string | array<string>,
+  dark?: boolean,
   data?: object,
-  firstName: String,
-  id?: String,
-  lastName: String,
-  contacts?: Array<ContactItem>,
+  firstName: string,
+  id?: string,
+  lastName: string,
+  contacts?: array<ContactItem>,
 }
 
 const PersonContact = (props: PersonContactProps) => {
@@ -73,22 +73,23 @@ const PersonContact = (props: PersonContactProps) => {
             contactDetail={contactObject.contactDetail}
             contactType={contactObject.contactType}
             contactValue={contactObject.contactValue}
-            key={index}
+            key={`valid-contact-${index}`}
         />
-            ))}
+      ))}
       {wrongContacts().map((contactObject, index) => (
-        <>
+        <div key={`wrong-contact-caption-wrapper-${index}`}>
           <Caption
               className="wrong_numbers"
+              key={`wrong-contact-caption-${index}`}
               text="wrong number"
           />
           <Contact
               contactType={contactObject.contactType}
               contactValue={contactObject.contactValue}
-              key={index}
+              key={`wrong-contact-${index}`}
           />
-        </>
-          ))}
+        </div>
+      ))}
     </div>
   )
 }

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_wrong_numbers.jsx

@@ -5,6 +5,7 @@ const PersonContactWithWrongNumbers = () => {
   return (
     <>
       <PersonContact
+          key="person-contact-1"
           contacts={[
             {
               contactType: 'email',

data/app/pb_kits/playbook/pb_pill/_pill.jsx

@@ -7,9 +7,9 @@ import Title from '../pb_title/_title.jsx'
 import { globalProps } from '../utilities/globalProps.js'
 
 type PillProps = {
-  className?: String,
-  id?: String,
-  text: String,
+  className?: string,
+  id?: string,
+  text: string,
   variant?: "success" | "warning" | "error" | "info" | "neutral",
 }
 

data/app/pb_kits/playbook/pb_popover/_popover.jsx

@@ -16,12 +16,12 @@ import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps.js'
 
 type PbPopoverProps = {
-  className?: String,
+  className?: string,
   closeOnClick?: "outside" | "inside",
-  offset?: Boolean,
+  offset?: boolean,
   reference: PopperReference,
-  show?: Boolean,
-  shouldClosePopover?: () => Boolean,
+  show?: boolean,
+  shouldClosePopover?: () => boolean,
 } & PopperProps
 
 // Prop enabled default modifiers here

data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.jsx

@@ -13,15 +13,15 @@ import {
 import { globalProps } from '../utilities/globalProps.js'
 
 type ProgressPillsProps = {
-  active?: Number,
+  active?: number,
   aria?: object,
-  className?: String,
+  className?: string,
   data?: object,
-  id?: String,
-  steps?: Number,
-  title?: String,
-  value?: String,
-  dark?: Boolean,
+  id?: string,
+  steps?: number,
+  title?: string,
+  value?: string,
+  dark?: boolean,
 }
 
 const showSteps = (steps, active, dark) => {

data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.jsx

@@ -6,16 +6,16 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type ProgressSimpleProps = {
   align?: "left" | "center" | "right",
-  className?: String | Array<String>,
-  dark?: Boolean,
-  data?: String,
-  id?: String,
-  max?: String,
-  muted: Boolean,
-  percent: String,
-  value: Number,
+  className?: string | array<string>,
+  dark?: boolean,
+  data?: string,
+  id?: string,
+  max?: string,
+  muted: boolean,
+  percent: string,
+  value: number,
   variant?: "default" | "positive" | "negative",
-  width: String,
+  width: string,
 }
 
 const ProgressSimple = (props: ProgressSimpleProps) => {

data/app/pb_kits/playbook/pb_progress_step/_progress_step.jsx

@@ -6,13 +6,13 @@ import { buildCss } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 type ProgressStepProps = {
-  className?: String,
-  data?: String,
-  id?: String,
-  children?: Array<React.ReactChild>,
+  className?: string,
+  data?: string,
+  id?: string,
+  children?: array<React.ReactChild>,
   orientation?: "horizontal" | "vertical",
-  icon?: Boolean,
-  dark?: Boolean,
+  icon?: boolean,
+  dark?: boolean,
 }
 
 const ProgressStep = (props: ProgressStepProps) => {

data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.jsx

@@ -6,7 +6,7 @@ import { buildCss } from '../utilities/props'
 import { Icon } from '..'
 
 type ProgressStepItemProps = {
-  className?: String,
+  className?: string,
   status?: 'complete' | 'active' | 'inactive',
   children?: React.Node,
 }

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

@@ -7,18 +7,18 @@ import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps.js'
 
 type RadioProps = {
-  className?: String,
-  data?: String,
-  error?: Boolean,
-  id?: String,
-  label: String,
-  name: String,
-  value: String,
-  checked?: Boolean,
-  dark?: Boolean,
-  text: String,
+  className?: string,
+  data?: string,
+  error?: boolean,
+  id?: string,
+  label: string,
+  name: string,
+  value: string,
+  checked?: boolean,
+  dark?: boolean,
+  text: string,
   children?: Node,
-  onChange: (Boolean)=>void,
+  onChange: (boolean)=>void,
 }
 
 const Radio = ({

data/app/pb_kits/playbook/pb_section_separator/_section_separator.jsx

@@ -7,12 +7,12 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type SectionSeparatorProps = {
   aria: object,
-  className: String,
-  dark?: Boolean,
+  className: string,
+  dark?: boolean,
   data: object,
-  id: String,
+  id: string,
   orientation?: "horizontal" | "vertical",
-  text: String,
+  text: string,
   variant?: "card" | "background",
 }
 

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.jsx

@@ -17,19 +17,19 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type SelectableCardProps = {
   aria?: object,
-  checked: Boolean,
-  children?: Array<React.ReactChild>,
-  className?: String,
+  checked: boolean,
+  children?: array<React.ReactChild>,
+  className?: string,
   data: object,
-  disabled?: Boolean,
-  icon?: Boolean,
-  id?: String,
-  inputId?: String,
-  multi?: Boolean,
-  name?: String,
+  disabled?: boolean,
+  icon?: boolean,
+  id?: string,
+  inputId?: string,
+  multi?: boolean,
+  name?: string,
   onChange: InputCallback<HTMLInputElement>,
-  text?: String,
-  value?: String,
+  text?: string,
+  value?: string,
 }
 
 const SelectableCard = ({

data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.jsx

@@ -13,19 +13,19 @@ import {
 
 type SelectableCardIconProps = {
   aria?: Object,
-  checked?: Boolean,
-  checkmark: Boolean,
-  className?: String,
-  dark?: Boolean,
+  checked?: boolean,
+  checkmark: boolean,
+  className?: string,
+  dark?: boolean,
   data?: Object,
-  disabled?: Boolean,
-  icon?: String,
-  inputId?: String,
-  multi?: Boolean,
-  name?: String,
-  titleText?: String,
-  bodyText?: String,
-  value?: String,
+  disabled?: boolean,
+  icon?: string,
+  inputId?: string,
+  multi?: boolean,
+  name?: string,
+  titleText?: string,
+  bodyText?: string,
+  value?: string,
   onChange?: (e) => void,
 }
 

data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.jsx

@@ -14,17 +14,17 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type SelectableIconProps = {
   aria?: Object,
-  checked?: Boolean,
-  className?: String,
-  disabled?: Boolean,
+  checked?: boolean,
+  className?: string,
+  disabled?: boolean,
   data?: Object,
-  icon: String,
-  inputId: String,
-  inputs: String,
-  multi?: Boolean,
-  name: String,
-  text: String,
-  value?: String
+  icon: string,
+  inputId: string,
+  inputs: string,
+  multi?: boolean,
+  name: string,
+  text: string,
+  value?: string
 }
 
 const SelectableIcon = ({

data/app/pb_kits/playbook/pb_source/_source.jsx

@@ -18,11 +18,11 @@ import {
 } from '../'
 
 type SourceProps = {
-  className?: String,
+  className?: string,
   data?: object,
-  hideIcon: Boolean,
-  id?: String,
-  source?: String,
+  hideIcon: boolean,
+  id?: string,
+  source?: string,
   type: "events" | "inbound" | "outbound" | "prospecting" | "referral" | "retail" | "user",
   user: object,
 }

data/app/pb_kits/playbook/pb_star_rating/_star_rating.jsx

@@ -14,13 +14,13 @@ import {
 
 type StarRatingProps = {
   aria?: object,
-  className?: String,
+  className?: string,
   data?: object,
-  fixedWidth?: Boolean,
-  hideRating: Boolean,
-  icon?: String,
-  id?: String,
-  rating: Numeric,
+  fixedWidth?: boolean,
+  hideRating: boolean,
+  icon?: string,
+  id?: string,
+  rating: number,
 }
 
 const StarRating = ({

data/app/pb_kits/playbook/pb_stat_change/_stat_change.jsx

@@ -19,9 +19,9 @@ const iconMap = {
 
 type StatChangeProps = {
   change?: "increase" | "decrease" | "neutral",
-  className?: String,
-  id?: String,
-  value?: String | Number,
+  className?: string,
+  id?: string,
+  value?: string | number,
 }
 
 const StatChange = (props: StatChangeProps) => {

data/app/pb_kits/playbook/pb_stat_value/_stat_value.jsx

@@ -6,10 +6,10 @@ import { Title } from '../'
 import { globalProps } from '../utilities/globalProps.js'
 
 type StatValueProps = {
-  className?: String,
-  id?: String,
-  unit?: String,
-  value: String | Number
+  className?: string,
+  id?: string,
+  unit?: string,
+  value: string | number
 }
 
 const StatValue = (props: StatValueProps) => {

data/app/pb_kits/playbook/pb_table/_table.jsx

@@ -5,7 +5,7 @@ import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps.js'
 
 type TableProps = {
-  children: Array<Node> | Node,
+  children: array<Node> | Node,
   className: string,
   container: boolean,
   dark: boolean,

data/app/pb_kits/playbook/pb_table/_table_row.jsx

@@ -5,9 +5,9 @@ import { buildCss } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 type TableRowPropTypes = {
-  children: Array<React.ReactNode> | React.ReactNode,
-  className: String,
-  sideHighlightColor: String,
+  children: array<React.ReactNode> | React.ReactNode,
+  className: string,
+  sideHighlightColor: string,
 }
 
 const TableRow = (props: TableRowPropTypes) => {

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

@@ -11,17 +11,17 @@ import {
 
 type TextInputProps = {
   aria?: object,
-  className: String,
+  className: string,
   dark: boolean,
   data?: object,
-  error?: String,
-  id?: String,
-  name: String,
-  label: String,
+  error?: string,
+  id?: string,
+  name: string,
+  label: string,
   onChange: (String) => void,
-  placeholder: String,
-  type: String,
-  value: String | number,
+  placeholder: string,
+  type: string,
+  value: string | number,
   children: Node,
 }