playbook_ui 13.15.0.pre.alpha.PLAY10831873 → 13.15.0.pre.alpha.PLAY10851907

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5c792af7baba55e98e5f05e45c33104f369267fa1acfa30556f96fb650e21ce4
-  data.tar.gz: e05765a5b49f1c379dcf111ad9085ecaf012083f673776103489d6eef8674842
+  metadata.gz: 8c5c9caf58c548d42103ad5d2b62a507a2f5498b66560a157633b11309eea33f
+  data.tar.gz: 261e1e3c9d53b1e94ef80c00e3dd157296fd9d56e8c14659f1fd3a0ddd73de87
 SHA512:
-  metadata.gz: fe584e4c6307e81a122a08406fc7451e6edbd546e4d83677d0521ebe0b4a7b324b632971ecf1818a9a8886e56aeeaea8bb9ca89efc17079907fa4d3e64f4564e
-  data.tar.gz: f2552261c54ec7d511e0f007ef7067d681eb65345cc2cc442ba3b191067dfba335eabeede5d8cb42e83203c513b491aa3baa62469c40e695ae3a4cc7724b9c42
+  metadata.gz: b39140314f8802986175b032cd4f36a77d5e0575b53b41dcaa1d6365270da7c93944698402e7f4d357859c9cb03248bb2ae09900bef1d62ad26c488890d009db
+  data.tar.gz: b3410c5d6842df03da01f4405a92cf12311ba8f819e8dac7915d7cd4b6212491aa6ad7b79921c7a6fd2844b015de28922d41bf02a6439336dbf95112338b79fb

data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts

@@ -122,9 +122,11 @@ const highchartsDarkTheme: ThemeProps = {
   // specific to gauge
   // unfilled gauge color
   pane: {
-    background: [{
+    background: {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment 
+      // @ts-ignore
       borderColor: colors.border_dark,
-    }],
+    },
   },
 
   plotOptions: {

data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts

@@ -122,9 +122,11 @@ const highchartsTheme: ThemeProps = {
   // specific to gauge
   // unfilled gauge color
   pane: {
-    background: [{
-      borderColor: colors.border_light,
-    }],
+    background: {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment 
+      // @ts-ignore
+      borderColor: colors.border_light, 
+    },
   },
 
   plotOptions: {

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx

@@ -2,8 +2,7 @@ import React, { useEffect, useState } from "react";
 import classnames from "classnames";
 
 import { globalProps } from "../utilities/globalProps";
-import { buildHtmlProps } from "../utilities/props";
-import { VoidCallback } from "../types";
+import { buildHtmlProps } from '../utilities/props'
 
 import Icon from "../pb_icon/_icon";
 import Title from "../pb_title/_title";
@@ -16,23 +15,23 @@ const iconMap = {
 };
 
 type FixedConfirmationToastProps = {
-  autoClose?: number;
-  children?: React.ReactChild[] | React.ReactChild;
-  className?: string;
-  closeable?: boolean;
-  data?: string;
-  horizontal?: "right" | "left" | "center";
-  htmlOptions?: { [key: string]: string | number | boolean | (VoidCallback) };
-  id?: string;
-  multiLine?: boolean;
-  onClose?: VoidCallback;
-  open?: boolean;
-  status?: "success" | "error" | "neutral" | "tip";
-  text?: string;
-  vertical?: "top" | "bottom";
-};
+  autoClose?: number,
+  children?: React.ReactChild[] | React.ReactChild,
+  className?: string,
+  closeable?: boolean,
+  data?: string,
+  horizontal?: "right" | "left" | "center",
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  id?: string,
+  multiLine?: boolean,
+  onClose?: () => void,
+  open?: boolean,
+  status?: "success" | "error" | "neutral" | "tip",
+  text?: string,
+  vertical?: "top" | "bottom",
+}
 
-const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.ReactElement => {
+const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
   const [showToast, toggleToast] = useState(true);
   const {
     autoClose = 0,
@@ -42,7 +41,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
     horizontal,
     htmlOptions = {},
     multiLine = false,
-    onClose = () => undefined,
+    onClose = () => { },
     open = true,
     status = "neutral",
     text,
@@ -66,7 +65,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
         onClose();
       }, autoClose);
     }
-  };
+  }
 
   useEffect(() => {
     toggleToast(open);
@@ -81,35 +80,22 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
   return (
     <>
       {showToast && (
-        <div
-            className={css}
-            onClick={handleClick}
-            {...htmlProps}
-        >
-          {icon && (
-            <Icon
-                className="pb_icon"
-                fixedWidth
-                icon={icon}
-            />
-          )}
+        <div className={css} onClick={handleClick} {...htmlProps}>
+          {icon && <Icon className="pb_icon" fixedWidth icon={icon} />}
 
-          {(children && children) ||
-            (text && (
+          {
+            children && children ||
+            text && (
               <Title
-                  className="pb_fixed_confirmation_toast_text"
-                  size={4}
-                  text={text}
+                className="pb_fixed_confirmation_toast_text"
+                size={4}
+                text={text}
               />
-            ))}
+            )
+          }
 
           {closeable && (
-            <Icon
-                className="pb_icon"
-                cursor="pointer"
-                fixedWidth={false}
-                icon="times"
-            />
+            <Icon className="pb_icon" cursor="pointer" fixedWidth={false} icon="times" />
           )}
         </div>
       )}

data/app/pb_kits/playbook/pb_flex/_flex.tsx

@@ -2,12 +2,12 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
-import { GenericObject, Sizes } from '../types'
+import { Sizes } from '../types'
 
 type FlexProps = {
   children: React.ReactChild[] | React.ReactNode,
   className?: string,
-  data?: GenericObject,
+  data?: object,
   horizontal?: "left" | "center" | "right" | "stretch" | "none",
   justify?: "start" | "center" | "end" | "around" | "between" | "evenly" | "none",
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
@@ -25,7 +25,7 @@ type FlexProps = {
   alignSelf?: "start" | "end" | "center" | "stretch" | "none"
 } & GlobalProps
 
-const Flex = (props: FlexProps): React.ReactElement => {
+const Flex = (props: FlexProps) => {
   const {
     align = 'none',
     children,
@@ -45,7 +45,7 @@ const Flex = (props: FlexProps): React.ReactElement => {
     wrap = false,
     alignSelf = 'none',
   } = props
-
+  
   const orientationClass =
     orientation !== undefined ? `orientation_${orientation}` : ''
   const justifyClass =

data/app/pb_kits/playbook/pb_form_group/_form_group.tsx

@@ -2,19 +2,18 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
-import { GenericObject } from '../types'
 
 type FormGroupProps = {
   aria?: {[key: string]: string},
   children?: Node,
   className?: string,
-  data?: GenericObject,
+  data?: object,
   fullWidth?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
 }
 
-const FormGroup = (props: FormGroupProps): React.ReactElement => {
+const FormGroup = (props: FormGroupProps) => {
   const {
     aria = {},
     className,

data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx

@@ -22,16 +22,16 @@ type FormPillProps = {
     onClick?: React.MouseEventHandler<HTMLSpanElement>,
     onMouseDown?: React.MouseEventHandler<HTMLSpanElement>,
     onTouchEnd?: React.TouchEventHandler<HTMLSpanElement>,
-  },
+  }, 
 } & GlobalProps
-const FormPill = (props: FormPillProps): React.ReactElement => {
+const FormPill = (props: FormPillProps) => {
   const {
     className,
     htmlOptions = {},
     id,
     text,
     name,
-    onClick = () => undefined,
+    onClick = () => {},
     avatarUrl,
     closeProps = {},
     size = '',
@@ -48,10 +48,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
   const htmlProps = buildHtmlProps(htmlOptions)
 
   return (
-    <div className={css}
-        id={id}
-        {...htmlProps}
-    >
+    <div className={css} id={id} {...htmlProps}>
         {name &&
         <>
         <Avatar

data/app/pb_kits/playbook/pb_gauge/_gauge.tsx

@@ -12,13 +12,12 @@ import typography from "../tokens/exports/_typography.scss";
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
-import { GenericObject } from "../types";
 
 type GaugeProps = {
   aria: { [key: string]: string };
   className?: string;
   chartData?: { name: string; value: number[] | number }[];
-  dark?: boolean;
+  dark?: Boolean;
   data?: { [key: string]: string };
   disableAnimation?: boolean;
   fullCircle?: boolean;
@@ -34,12 +33,13 @@ type GaugeProps = {
   title?: string;
   tooltipHtml?: string;
   colors: string[];
-  minorTickInterval?: number;
+  minorTickInterval: any;
   circumference: number[];
 };
 
 const Gauge = ({
   aria = {},
+  className,
   chartData,
   dark = false,
   data = {},
@@ -61,9 +61,9 @@ const Gauge = ({
   minorTickInterval = null,
   circumference = fullCircle ? [0, 360] : [-100, 100],
   ...props
-}: GaugeProps): React.ReactElement => {
+}: GaugeProps) => {
   const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data)
+ const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions);
   highchartsMore(Highcharts);
   solidGauge(Highcharts);
@@ -89,7 +89,7 @@ const Gauge = ({
   const [options, setOptions] = useState({});
 
   useEffect(() => {
-    const formattedChartData = chartData.map((obj: GenericObject) => {
+    const formattedChartData = chartData.map((obj: any) => {
       obj.y = obj.value;
       delete obj.value;
       return obj;
@@ -185,20 +185,20 @@ const Gauge = ({
         .querySelectorAll(".fix")
         .forEach((fix) => fix.setAttribute("y", "38"));
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, [chartData]);
 
   return (
     <HighchartsReact
-        containerProps={{
+      containerProps={{
         className: classnames(css, globalProps(props)),
         id: id,
         ...ariaProps,
         ...dataProps,
         ...htmlProps,
       }}
-        highcharts={Highcharts}
-        options={options}
+      highcharts={Highcharts}
+      options={options}
     />
   );
 };

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx

@@ -8,7 +8,6 @@ import Body from '../pb_body/_body'
 import Hashtag from '../pb_hashtag/_hashtag'
 import Title from '../pb_title/_title'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { GenericObject } from '../types'
 
 type HomeAddressStreetProps = {
   aria?: { [key: string]: string },
@@ -29,7 +28,7 @@ type HomeAddressStreetProps = {
   territory: string,
 }
 
-const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement => {
+const HomeAddressStreet = (props: HomeAddressStreetProps) => {
   const {
     address,
     addressCont,
@@ -59,17 +58,17 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
       className
     )
 
-  const dataProps: GenericObject = buildDataProps(data)
-  const ariaProps: GenericObject = buildAriaProps(aria)
+  const dataProps: { [key: string]: any } = buildDataProps(data)
+  const ariaProps: { [key: string]: any } = buildAriaProps(aria)
   const htmlProps = buildHtmlProps(htmlOptions)
   return (
-    <div
-        className={classes(className, dark)}
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
+    <div 
+      className={classes(className, dark)} 
+      {...ariaProps} 
+      {...dataProps}
+      {...htmlProps}
     >
-      {emphasis == 'street' &&
+      {emphasis == 'street' && 
         <div>
           <Title
               className="pb_home_address_street_address"

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx

@@ -9,12 +9,11 @@ import Caption from '../pb_caption/_caption'
 import Flex from '../pb_flex/_flex'
 import IconCircle from '../pb_icon_circle/_icon_circle'
 import Title from '../pb_title/_title'
-import { GenericObject } from '../types'
 
 type IconStatValueProps = {
   aria?: { [key: string]: string },
   className?: string,
-  data?: GenericObject,
+  data?: object,
   dark?: boolean,
   icon: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
@@ -35,7 +34,7 @@ type IconStatValueProps = {
     | "green",
 }
 
-const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
+const IconStatValue = (props: IconStatValueProps) => {
   const {
     aria = {},
     className,

data/app/pb_kits/playbook/pb_icon_value/_icon_value.tsx

@@ -6,21 +6,20 @@ import { globalProps } from '../utilities/globalProps'
 
 import Body from '../pb_body/_body'
 import Icon from '../pb_icon/_icon'
-import { GenericObject } from '../types'
 
 type IconValueProps = {
   align?: "left" | "center" | "right",
   aria?: { [key: string]: string; },
   className?: string,
   dark?: boolean,
-  data?: GenericObject,
+  data?: object,
   icon: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   text: string,
 }
 
-const IconValue = (props: IconValueProps): React.ReactElement => {
+const IconValue = (props: IconValueProps) => {
   const {
     align = 'left',
     aria = {},

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

@@ -13,25 +13,26 @@ 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?: object,
+  data?: GenericObject,
   dark?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
-  inputProps?: {},
+  inputProps?: GenericObject,
   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) => {
+const Passphrase = (props: PassphraseProps): React.ReactElement => {
   const {
     aria = {},
     className,
@@ -42,7 +43,7 @@ const Passphrase = (props: PassphraseProps) => {
     id,
     inputProps = {},
     label = confirmation ? "Confirm Passphrase" : "Passphrase",
-    onChange = () => { },
+    onChange = () => undefined,
     showTipsBelow = "always",
     tips = [],
     uncontrolled = false,
@@ -84,60 +85,60 @@ const Passphrase = (props: PassphraseProps) => {
     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>
@@ -149,30 +150,30 @@ const Passphrase = (props: PassphraseProps) => {
         </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,6 +7,7 @@ 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,
@@ -17,7 +18,7 @@ type ContactItem = {
 type PersonContactProps = {
   aria?: { [key: string]: string },
   className?: string | string[],
-  data?: object,
+  data?: GenericObject,
   firstName: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
@@ -25,7 +26,7 @@ type PersonContactProps = {
   contacts?: ContactItem[],
 }
 
-const PersonContact = (props: PersonContactProps) => {
+const PersonContact = (props: PersonContactProps): React.ReactElement => {
   const {
     aria = {},
     className,
@@ -60,35 +61,35 @@ const PersonContact = (props: PersonContactProps) => {
 
   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>
       ))}