playbook_ui 13.15.0.pre.alpha.play1141iconkitusinglibrary1956 → 13.15.0.pre.alpha.play10841940

data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx

@@ -44,11 +44,11 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
     return users.slice(0, 1).map((userObject, index) => {
       return (
         <Avatar
-          {...userObject}
-          className="pb_multiple_users_stacked_item"
-          dark={dark}
-          key={index}
-          size="xs"
+            {...userObject}
+            className="pb_multiple_users_stacked_item"
+            dark={dark}
+            key={index}
+            size="xs"
         />
       )
     })
@@ -59,11 +59,11 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
       return users.slice(1, 2).map((userObject, index) => {
         return (
           <Avatar
-            {...userObject}
-            className="pb_multiple_users_stacked_item second_item"
-            dark={dark}
-            key={index}
-            size="xs"
+              {...userObject}
+              className="pb_multiple_users_stacked_item second_item"
+              dark={dark}
+              key={index}
+              size="xs"
           />
         )
       })
@@ -74,11 +74,11 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
     if (moreThanTwo === true) {
       return (
         <Badge
-          className="pb_multiple_users_stacked_item second_item"
-          dark={dark}
-          rounded
-          text={`+${users.length - displayCount()}`}
-          variant="primary"
+            className="pb_multiple_users_stacked_item second_item"
+            dark={dark}
+            rounded
+            text={`+${users.length - displayCount()}`}
+            variant="primary"
         />
       )
     }
@@ -86,11 +86,11 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
 
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={classes}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
+        id={id}
     >
       {firstUser()}
       {secondUser()}

data/app/pb_kits/playbook/pb_nav/_item.tsx

@@ -18,7 +18,7 @@ type NavItemProps = {
   children?: React.ReactNode[] | React.ReactNode;
   className?: string;
   collapsible?: boolean;
-  data?: object;
+  data?: Record<string, unknown>;
   dark?: boolean;
   fontSize?: "normal" | "small";
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
@@ -76,7 +76,7 @@ const NavItem = (props: NavItemProps) => {
     id,
     imageUrl,
     link,
-    onClick = () => {},
+    onClick,
     target = "_self",
     text = "",
     collapsibleTrail,
@@ -205,46 +205,49 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
       {collapsible ? (
         <>
           <Collapsible
-            className={collapsibleClasses}
-            icon={iconRight && iconRight}
-            iconSize="xs"
-            id={id}
-            collapsed={collapsed}
-            onIconClick={onIconRightClick}
-            onClick={onClick}
+              className={collapsibleClasses}
+              collapsed={collapsed}
+              icon={iconRight && iconRight}
+              iconSize="xs"
+              id={id}
+              onClick={onClick}
+              onIconClick={onIconRightClick}
           >
             <Collapsible.Main
-            className={globalProps({ ...finalItemSpacing })}
-            dark={dark}>
+                className={globalProps({ ...finalItemSpacing })}
+                dark={dark}
+            >
               <Tag
-                {...ariaProps}
-                {...dataProps}
-                {...htmlProps}
-                className={classes}
-                id={id}
-                href={link}
-                target={target}
+                  {...ariaProps}
+                  {...dataProps}
+                  {...htmlProps}
+                  className={classes}
+                  href={link}
+                  id={id}
+                  target={target}
               >
                 {imageUrl && (
                   <div
-                    className="pb_nav_list_item_icon_section_collapsible"
-                    key={imageUrl}
-                    onClick={(e) => handleIconClick(e)}
+                      className="pb_nav_list_item_icon_section_collapsible"
+                      key={imageUrl}
+                      onClick={(e) => handleIconClick(e)}
                   >
-                    <Image className="pb_nav_img_wrapper" url={imageUrl} />
+                    <Image className="pb_nav_img_wrapper"
+                        url={imageUrl}
+                    />
                   </div>
                 )}
 
                 {iconLeft && (
                   <div
-                    className="pb_nav_list_item_icon_section_collapsible"
-                    key={iconLeft}
-                    onClick={(e) => handleIconClick(e)}
+                      className="pb_nav_list_item_icon_section_collapsible"
+                      key={iconLeft}
+                      onClick={(e) => handleIconClick(e)}
                   >
                     <Icon
-                      className="pb_nav_list_item_icon_left_collapsible"
-                      fixedWidth
-                      icon={iconLeft}
+                        className="pb_nav_list_item_icon_left_collapsible"
+                        fixedWidth
+                        icon={iconLeft}
                     />
                   </div>
                 )}
@@ -258,27 +261,33 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
         </>
       ) : (
         <Tag
-          {...ariaProps}
-          {...dataProps}
-          {...htmlProps}
-          className={classes}
-          id={id}
-          href={link}
-          onClick={onClick}
-          target={target}
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={classes}
+            href={link}
+            id={id}
+            onClick={onClick}
+            target={target}
         >
           {imageUrl && (
-            <div className="pb_nav_list_item_icon_section" key={imageUrl}>
-              <Image className="pb_nav_img_wrapper" url={imageUrl} />
+            <div className="pb_nav_list_item_icon_section"
+                key={imageUrl}
+            >
+              <Image className="pb_nav_img_wrapper"
+                  url={imageUrl}
+              />
             </div>
           )}
 
           {iconLeft && (
-            <div className="pb_nav_list_item_icon_section" key={iconLeft}>
+            <div className="pb_nav_list_item_icon_section"
+                key={iconLeft}
+            >
               <Icon
-                className="pb_nav_list_item_icon_left"
-                fixedWidth
-                icon={iconLeft}
+                  className="pb_nav_list_item_icon_left"
+                  fixedWidth
+                  icon={iconLeft}
               />
             </div>
           )}
@@ -287,13 +296,13 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
 
           {iconRight && (
             <div
-              className="pb_nav_list_item_icon_section"
-              key={iconRight as string}
+                className="pb_nav_list_item_icon_section"
+                key={iconRight as string}
             >
               <Icon
-                className="pb_nav_list_item_icon_right"
-                fixedWidth
-                icon={iconRight as string}
+                  className="pb_nav_list_item_icon_right"
+                  fixedWidth
+                  icon={iconRight as string}
               />
             </div>
           )}

data/app/pb_kits/playbook/pb_nav/_nav.tsx

@@ -12,12 +12,12 @@ type NavProps = {
   borderless?: boolean,
   children?: React.ReactNode[] | React.ReactNode,
   className?: string | string[],
-  data?: object,
+  data?: Record<string, unknown>,
   dark?: boolean,
   highlight?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
-  onClick?: React.MouseEventHandler<HTMLElement>,
+  onClick?: () => void,
   orientation?: "vertical" | "horizontal",
   link?: string,
   title?: string,
@@ -25,7 +25,7 @@ type NavProps = {
   itemSpacing?: SpacingObject
 } & GlobalProps
 
-const Nav = (props: NavProps) => {
+const Nav = (props: NavProps): React.ReactElement => {
   const {
     aria = {},
     borderless = false,
@@ -37,7 +37,7 @@ const Nav = (props: NavProps) => {
     htmlOptions = {},
     id,
     link = '#',
-    onClick = () => { },
+    onClick,
     orientation = 'vertical',
     title = '',
     variant = 'normal',
@@ -71,23 +71,23 @@ const childrenWithProps = React.Children.map(children, (child) => {
 
   return (
     <nav
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={cardCss}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={cardCss}
+        id={id}
     >
       {title &&
         <div className="pb_nav_list_title">
           <a
-            className="pb_nav_list_item_link_text"
-            href={link}
-            onClick={onClick}
+              className="pb_nav_list_item_link_text"
+              href={link}
+              onClick={onClick}
           >
             <Caption
-              dark={dark}
-              size="md"
-              text={`${title}`}
+                dark={dark}
+                size="md"
+                text={`${title}`}
             />
           </a>
         </div>

data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx

@@ -13,26 +13,25 @@ import Flex from '../pb_flex/_flex'
 import Icon from '../pb_icon/_icon'
 import PbReactPopover from '../pb_popover/_popover'
 import TextInput from '../pb_text_input/_text_input'
-import { GenericObject } from "../types"
 
 type PassphraseProps = {
   aria?: { [key: string]: string },
   confirmation?: boolean,
   className?: string,
-  data?: GenericObject,
+  data?: object,
   dark?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
-  inputProps?: GenericObject,
+  inputProps?: {},
   label?: string,
-  onChange: (inputValue: string) => void,
+  onChange: (inputValue: String) => void,
   showTipsBelow?: "always" | "xs" | "sm" | "md" | "lg" | "xl",
   tips?: Array<string>,
   uncontrolled?: boolean,
   value: string,
 }
 
-const Passphrase = (props: PassphraseProps): React.ReactElement => {
+const Passphrase = (props: PassphraseProps) => {
   const {
     aria = {},
     className,
@@ -43,7 +42,7 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
     id,
     inputProps = {},
     label = confirmation ? "Confirm Passphrase" : "Passphrase",
-    onChange = () => undefined,
+    onChange = () => { },
     showTipsBelow = "always",
     tips = [],
     uncontrolled = false,
@@ -85,60 +84,60 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
     globalProps(props),
     className
   )
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
+   const dataProps = buildDataProps(data)
+   const htmlProps = buildHtmlProps(htmlOptions)
 
   const popoverReference = (
     <CircleIconButton
-        className={tipClass}
-        dark={dark}
-        icon="info-circle"
-        onClick={toggleShowPopover}
-        variant="link"
+      className={tipClass}
+      dark={dark}
+      icon="info-circle"
+      onClick={toggleShowPopover}
+      variant="link"
     />
   )
 
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={classes}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      {...htmlProps}
+      className={classes}
+      id={id}
     >
       <label>
         <Flex align="baseline">
           <Caption
-              className="passphrase-label"
-              text={label}
+            className="passphrase-label"
+            text={label}
           />
           {tips.length > 0 && !confirmation &&
             <PbReactPopover
-                className="passphrase-tips"
-                closeOnClick="outside"
-                placement="right"
-                reference={popoverReference}
-                shouldClosePopover={handleShouldClosePopover}
-                show={showPopover}
+              className="passphrase-tips"
+              closeOnClick="outside"
+              placement="right"
+              reference={popoverReference}
+              shouldClosePopover={handleShouldClosePopover}
+              show={showPopover}
             >
               <Flex
-                  align="center"
-                  orientation="column"
+                align="center"
+                orientation="column"
               >
                 <Caption
-                    marginBottom="xs"
-                    text="Tips for a good passphrase"
+                  marginBottom="xs"
+                  text="Tips for a good passphrase"
                 />
                 <div>
                   {tips.map((tip, i) => (
                     <Caption
-                        key={i}
-                        marginBottom="xs"
-                        size="xs"
+                      key={i}
+                      marginBottom="xs"
+                      size="xs"
                     >
                       <Icon
-                          icon="shield-check"
-                          marginRight="xs"
+                        icon="shield-check"
+                        marginRight="xs"
                       />
                       {tip}
                     </Caption>
@@ -150,30 +149,30 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
         </Flex>
         <div className="passphrase-text-input-wrapper">
           <TextInput
-              className="passphrase-text-input"
-              dark={dark}
-              marginBottom="xs"
-              onChange={handleChange}
-              placeholder="Enter a passphrase..."
-              type={showPassphrase ? "text" : "password"}
-              value={displayValue}
-              {...inputProps}
+            className="passphrase-text-input"
+            dark={dark}
+            marginBottom="xs"
+            onChange={handleChange}
+            placeholder="Enter a passphrase..."
+            type={showPassphrase ? "text" : "password"}
+            value={displayValue}
+            {...inputProps}
           />
           <span
-              className="show-passphrase-icon"
-              onClick={toggleShowPassphrase}
+            className="show-passphrase-icon"
+            onClick={toggleShowPassphrase}
           >
             <Body
-                className={showPassphrase ? "hide-icon" : ""}
-                color="light"
-                dark={dark}
+              className={showPassphrase ? "hide-icon" : ""}
+              color="light"
+              dark={dark}
             >
               <Icon icon="eye-slash" />
             </Body>
             <Body
-                className={showPassphrase ? "" : "hide-icon"}
-                color="light"
-                dark={dark}
+              className={showPassphrase ? "" : "hide-icon"}
+              color="light"
+              dark={dark}
             >
               <Icon icon="eye" />
             </Body>

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

@@ -7,7 +7,6 @@ import { globalProps } from '../utilities/globalProps'
 import Caption from '../pb_caption/_caption'
 import Contact from '../pb_contact/_contact'
 import Person from '../pb_person/_person'
-import { GenericObject } from '../types'
 
 type ContactItem = {
   contactType: string,
@@ -18,7 +17,7 @@ type ContactItem = {
 type PersonContactProps = {
   aria?: { [key: string]: string },
   className?: string | string[],
-  data?: GenericObject,
+  data?: object,
   firstName: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
@@ -26,7 +25,7 @@ type PersonContactProps = {
   contacts?: ContactItem[],
 }
 
-const PersonContact = (props: PersonContactProps): React.ReactElement => {
+const PersonContact = (props: PersonContactProps) => {
   const {
     aria = {},
     className,
@@ -61,35 +60,35 @@ const PersonContact = (props: PersonContactProps): React.ReactElement => {
 
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={classes}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      {...htmlProps}
+      className={classes}
+      id={id}
     >
       <Person
-          firstName={firstName}
-          lastName={lastName}
+        firstName={firstName}
+        lastName={lastName}
       />
       {validContacts().map((contactObject, index) => (
         <Contact
-            contactDetail={contactObject.contactDetail}
-            contactType={contactObject.contactType}
-            contactValue={contactObject.contactValue}
-            key={`valid-contact-${index}`}
+          contactDetail={contactObject.contactDetail}
+          contactType={contactObject.contactType}
+          contactValue={contactObject.contactValue}
+          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"
+            className="wrong_numbers"
+            key={`wrong-contact-caption-${index}`}
+            text="wrong number"
           />
           <Contact
-              contactType={contactObject.contactType}
-              contactValue={contactObject.contactValue}
-              key={`wrong-contact-${index}`}
+            contactType={contactObject.contactType}
+            contactValue={contactObject.contactValue}
+            key={`wrong-contact-${index}`}
           />
         </div>
       ))}

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

@@ -62,7 +62,6 @@ const formatAllCountries = () => {
 formatAllCountries()
 
 const containOnlyNumbers = (value: string) => {
-  // eslint-disable-next-line no-useless-escape
   return /^[()+\-\ .\d]*$/g.test(value)
 }
 
@@ -260,9 +259,9 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
   if (required) textInputProps.required = true
 
   return (
-    <div
-        {...wrapperProps}
-        {...htmlProps}
+    <div 
+      {...wrapperProps} 
+      {...htmlProps}
     >
       <TextInput
           ref={

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

@@ -1,4 +1,3 @@
-/* eslint-disable react/no-multi-comp */
 import React, { useEffect, useState } from "react";
 import ReactDOM from "react-dom";
 import {
@@ -55,7 +54,7 @@ const popoverModifiers = ({
   offset,
 }: {
   modifiers: Modifier<any> & any;
-  offset: boolean;
+  offset: {};
 }) => {
   return offset ? modifiers.concat([POPOVER_MODIFIERS.offset]) : modifiers;
 };
@@ -144,7 +143,7 @@ const Popover = (props: PbPopoverProps) => {
   );
 };
 
-const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
+const PbReactPopover = (props: PbPopoverProps) => {
   const [targetId] = useState(_uniqueId('id-'))
   const {
     className,
@@ -227,10 +226,9 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
           <PopperReference>
             {({ ref }) => (
               <span
-                  className="pb_popover_reference_wrapper"
                   id={"reference-" + targetId}
-                  ref={ref}
-              >
+                  className="pb_popover_reference_wrapper"
+                  ref={ref}>
                 <reference.type {...reference.props} />
               </span>
             )}

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

@@ -20,14 +20,6 @@ type ProgressPillsProps = {
   value?: string,
 }
 
-const ProgressPill = ({ active, dark, steps: step }: ProgressPillsProps) => (
-  <div
-      className={`pb_progress_pill${step <= active ? '_active' : '_inactive'}${dark ? ' dark' : ''
-      }`}
-      key={step}
-  />
-)
-
 const showSteps = (steps: number, active: number, dark: boolean) => {
   const items = []
 
@@ -38,6 +30,14 @@ const showSteps = (steps: number, active: number, dark: boolean) => {
   return items
 }
 
+const ProgressPill = ({ active, dark, steps: step }: ProgressPillsProps) => (
+  <div
+    className={`pb_progress_pill${step <= active ? '_active' : '_inactive'}${dark ? ' dark' : ''
+      }`}
+    key={step}
+  />
+)
+
 const ProgressPills = (props: ProgressPillsProps) => {
   const {
     active = 0,
@@ -59,24 +59,24 @@ const ProgressPills = (props: ProgressPillsProps) => {
 
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={classes}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      {...htmlProps}
+      className={classes}
+      id={id}
     >
       {title &&
         <div className="progress_pills_status">
           <Title
-              dark={dark}
-              size={4}
-              tag="h4"
-              text={title}
+            dark={dark}
+            size={4}
+            tag="h4"
+            text={title}
           />
           <Body
-              color="light"
-              dark={dark}
-              text={value}
+            color="light"
+            dark={dark}
+            text={value}
           />
         </div>}
       <div className="progress_pills">{showSteps(steps, active, dark)}</div>