playbook_ui 13.14.0.pre.alpha.play1120lintdatepicker1797 → 13.14.0

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx

@@ -15,7 +15,7 @@ const CollapsibleContent = ({
   children,
   className,
   ...props
-}: CollapsibleContentProps): React.ReactElement => {
+}: CollapsibleContentProps) => {
   const context: {[key: string]: boolean | string} = useContext(CollapsibleContext)
   const contentCSS = buildCss('pb_collapsible_content_kit')
   const contentSpacing = globalProps(props)
@@ -33,10 +33,9 @@ const CollapsibleContent = ({
   }, [context.collapsed]);
 
   return (
-    <div className={classnames(contentCSS, contentSpacing, "toggle-content", className)}
-        data-collapsible-content="true" 
-        ref={contentRef}
-    >
+    <div ref={contentRef}
+      data-collapsible-content="true" 
+      className={classnames(contentCSS, contentSpacing, "toggle-content", className)}>
       {children}
     </div>
   )

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx

@@ -56,7 +56,7 @@ const ToggleIcon = ({ collapsed, icon, iconSize, iconColor, onIconClick }: IconP
     return icon
   }
 
-  const handleIconClick = (e: React.MouseEvent<HTMLElement>) => {
+  const handleIconClick = (e:any) => {
     if (onIconClick) {
     e.stopPropagation();
     onIconClick()
@@ -67,25 +67,21 @@ const ToggleIcon = ({ collapsed, icon, iconSize, iconColor, onIconClick }: IconP
     <>
       {collapsed ? (
         <div
-            className="icon_wrapper"
-            key={icon ? showIcon(icon)[0] : "chevron-down"}
-            onClick={(e)=> handleIconClick(e)}
-            style={{ verticalAlign: "middle", color: color }}
+          className="icon_wrapper"
+          key={icon ? showIcon(icon)[0] : "chevron-down"}
+          style={{ verticalAlign: "middle", color: color }}
+          onClick={(e)=> handleIconClick(e)}
         >
-          <Icon icon={icon ? showIcon(icon)[0] : "chevron-down"}
-              size={iconSize}
-          />
+          <Icon icon={icon ? showIcon(icon)[0] : "chevron-down"} size={iconSize} />
         </div>
       ) : (
         <div
-            className="icon_wrapper"
-            key={icon ? showIcon(icon)[1] : "chevron-up"}
-            onClick={(e)=> handleIconClick(e)}
-            style={{ verticalAlign: "middle", color: color }}
+          className="icon_wrapper"
+          key={icon ? showIcon(icon)[1] : "chevron-up"}
+          style={{ verticalAlign: "middle", color: color }}
+          onClick={(e)=> handleIconClick(e)}
         >
-          <Icon icon={icon ? showIcon(icon)[1] : "chevron-up"}
-              size={iconSize}
-          />
+          <Icon icon={icon ? showIcon(icon)[1] : "chevron-up"} size={iconSize} />
         </div>
       )}
     </>
@@ -122,9 +118,9 @@ const CollapsibleMain = ({
           <FlexItem>
             <ToggleIcon
                 collapsed={collapsed as () => void}
-                icon={icon as string[] | string}
                 iconColor={iconColor as IconColors}
                 iconSize={iconSize as IconSizes}
+                icon={icon as string[] | string}
                 onIconClick={onIconClick}
             />
             </FlexItem>

data/app/pb_kits/playbook/pb_contact/_contact.tsx

@@ -50,12 +50,12 @@ type ContactProps = {
   contactDetail?: string,
   contactType?: string,
   contactValue: string,
-  data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  data?: object,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
 }
 
-const Contact = (props: ContactProps): React.ReactElement => {
+const Contact = (props: ContactProps) => {
   const {
     aria = {},
     className,

data/app/pb_kits/playbook/pb_currency/_currency.tsx

@@ -18,7 +18,7 @@ type CurrencyProps = {
   data?: {[key:string]:string},
   decimals?: 'default' | 'matching',
   emphasized?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   label?: string,
   size?: 'sm' | 'md' | 'lg',
@@ -34,7 +34,7 @@ const sizes: {lg: 1, md: 3, sm: 4} = {
   sm: 4,
 }
 
-const Currency = (props: CurrencyProps): React.ReactElement => {
+const Currency = (props: CurrencyProps) => {
   const {
     abbreviate = false,
     align = 'left',

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

@@ -2,7 +2,7 @@ import colors from "../tokens/exports/_colors.scss";
 
 
 // Map Data Color String Props to our SCSS Variables
-const mapColors = (array: string[]): string[] => {
+const mapColors = (array: string[]) => {
     const regex = /(data)\-[1-8]/; //eslint-disable-line
   
     const newArray = array.map((item) => {

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

@@ -3,6 +3,9 @@ import typography from '../tokens/exports/_typography.scss'
 
 import { ThemeProps } from './themeTypes'
 
+import Highcharts from 'highcharts'
+
+const pbButtonHoverColor = '#004ebb'
 const highchartsDarkTheme: ThemeProps = {
   lang: {
     thousandsSep: ',',
@@ -19,7 +22,7 @@ const highchartsDarkTheme: ThemeProps = {
   chart: {
     borderWidth: 0,
     borderRadius: 0,
-    plotBackgroundColor: undefined,
+    plotBackgroundColor: null,
     plotShadow: false,
     plotBorderWidth: 0,
   },
@@ -61,7 +64,7 @@ const highchartsDarkTheme: ThemeProps = {
     },
   },
   yAxis: {
-    alternateGridColor: undefined,
+    alternateGridColor: null,
     minorTickInterval: null,
     gridLineColor: colors.border_dark,
     minorGridLineColor: colors.border_dark,
@@ -101,6 +104,11 @@ const highchartsDarkTheme: ThemeProps = {
       color: colors.text_dk_lighter,
     },
   },
+  labels: {
+    style: {
+      color: colors.primary,
+    },
+  },
   tooltip: {
     backgroundColor: {
       linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
@@ -122,15 +130,29 @@ const highchartsDarkTheme: ThemeProps = {
   // specific to gauge
   // unfilled gauge color
   pane: {
-    background: [{
+    background: {
       borderColor: colors.border_dark,
-    }],
+    },
   },
 
   plotOptions: {
     series: {
       borderColor: colors.bg_dark_card,
       borderWidth: 2,
+      type: 'area',
+      nullColor: colors.text_dk_lighter,
+      fillColor: {
+        linearGradient: {
+          x1: 0,
+          y1: 0,
+          x2: 0,
+          y2: 1,
+        },
+        stops: [
+          [0, Highcharts.getOptions().colors[0]],
+          [1, 'white'],
+        ],
+      },
       threshold: null,
     },
     // PIE STYLES
@@ -162,6 +184,15 @@ const highchartsDarkTheme: ThemeProps = {
       marker: {
         lineColor: colors.border_dark,
       },
+      area: {
+        shadow: false,
+        states: {
+          hover: {
+            lineWidth: 1,
+          },
+        },
+        threshold: null,
+      },
     },
 
     //TREEMAP CHART STYLES
@@ -179,6 +210,7 @@ const highchartsDarkTheme: ThemeProps = {
         colors.data_7,
         colors.data_8,
       ],
+      colorByPoint: true,
       dataLabels: {
         enabled: true,
         style: {
@@ -197,6 +229,27 @@ const highchartsDarkTheme: ThemeProps = {
       ],
       traverseUpButton: {
         position: { y: -50 },
+        text: '< Back',
+        theme: {
+          r: 4,
+          states: {
+            hover: {
+              style: {
+                fill: pbButtonHoverColor,
+              },
+            },
+          },
+          style: {
+            fill: colors.royal,
+            color: colors.white,
+            fontSize: `${typography.text_small}`,
+            fontWeight: typography.bold,
+            fontFamily: `${typography.font_family_base}`,
+          },
+          stroke: colors.royal,
+          height: 24,
+          width: 90,
+        },
       },
     },
   },

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

@@ -3,6 +3,9 @@ import typography from '../tokens/exports/_typography.scss'
 
 import { ThemeProps } from './themeTypes'
 
+import Highcharts from 'highcharts'
+
+const pbButtonHoverColor = '#004ebb'
 const highchartsTheme: ThemeProps = {
   lang: {
     thousandsSep: ',',
@@ -19,7 +22,7 @@ const highchartsTheme: ThemeProps = {
   chart: {
     borderWidth: 0,
     borderRadius: 0,
-    plotBackgroundColor: undefined,
+    plotBackgroundColor: null,
     plotShadow: false,
     plotBorderWidth: 0,
   },
@@ -61,7 +64,7 @@ const highchartsTheme: ThemeProps = {
     },
   },
   yAxis: {
-    alternateGridColor: undefined,
+    alternateGridColor: null,
     minorTickInterval: null,
     gridLineColor: colors.border_light,
     minorGridLineColor: colors.border_light,
@@ -101,6 +104,11 @@ const highchartsTheme: ThemeProps = {
       color: colors.text_lt_lighter,
     },
   },
+  labels: {
+    style: {
+      color: colors.primary,
+    },
+  },
   tooltip: {
     backgroundColor: {
       linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
@@ -122,13 +130,27 @@ const highchartsTheme: ThemeProps = {
   // specific to gauge
   // unfilled gauge color
   pane: {
-    background: [{
+    background: {
       borderColor: colors.border_light,
-    }],
+    },
   },
 
   plotOptions: {
     series: {
+      type: 'area',
+      nullColor: colors.text_lt_lighter,
+      fillColor: {
+        linearGradient: {
+          x1: 0,
+          y1: 0,
+          x2: 0,
+          y2: 1,
+        },
+        stops: [
+          [0, Highcharts.getOptions().colors[0]],
+          [1, 'white'],
+        ],
+      },
       threshold: null,
     },
     // PIE STYLES
@@ -160,6 +182,15 @@ const highchartsTheme: ThemeProps = {
       marker: {
         lineColor: '#333',
       },
+      area: {
+        shadow: false,
+        states: {
+          hover: {
+            lineWidth: 1,
+          },
+        },
+        threshold: null,
+      },
     },
 
     //TREEMAP CHART STYLES
@@ -177,6 +208,7 @@ const highchartsTheme: ThemeProps = {
         colors.data_7,
         colors.data_8,
       ],
+      colorByPoint: true,
       dataLabels: {
         enabled: true,
         style: {
@@ -195,6 +227,27 @@ const highchartsTheme: ThemeProps = {
       ],
       traverseUpButton: {
         position: { y: -50 },
+        text: '< Back',
+        theme: {
+          r: 4,
+          states: {
+            hover: {
+              style: {
+                fill: pbButtonHoverColor,
+              },
+            },
+          },
+          style: {
+            fill: colors.royal,
+            color: colors.white,
+            fontSize: `${typography.text_small}`,
+            fontWeight: typography.bold,
+            fontFamily: `${typography.font_family_base}`,
+          },
+          stroke: colors.royal,
+          height: 24,
+          width: 90,
+        },
       },
     },
   },

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

@@ -1,20 +1,16 @@
-import { Options, LegendOptions } from "highcharts";
-export interface ThemeProps
-  extends Pick<
-    Options,
-    | "credits"
-    | "chart"
-    | "colors"
-    | "lang"
-    | "title"
-    | "subtitle"
-    | "xAxis"
-    | "yAxis"
-    | "legend"
-    | "tooltip"
-    | "pane"
-    | "plotOptions"
-  > {
-  colorKey?: string;
-  legend?: LegendOptions;
-}
+export type ThemeProps = {
+    lang?: {[key: string]: string}
+    credits?: {[key: string]: boolean}
+    colors?: string[]
+    chart?: {[key: string]: any}
+    title?: {[key: string]: string | {}}
+    subtitle?: {[key: string]: string | {};}
+    xAxis?: {[key: string]: any;}
+    yAxis?: {[key: string]: any;}
+    legend?: {[key: string]: string | {};}
+    labels?: {[key: string]: {};}
+    tooltip?: {[key: string]: any;}
+    pane?: {[key: string]: {};}
+    plotOptions?: {[key: string]: any;}
+    colorKey?: string
+    }

data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.tsx

@@ -12,7 +12,7 @@ type DashboardValueProps = {
   aria?: { [key: string]: string },
   className?: string,
   data?: { [key: string]: string },
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   statChange?: {
     change? : 'increase' | 'decrease' | 'neutral',

data/app/pb_kits/playbook/pb_date/_date.tsx

@@ -15,7 +15,7 @@ type PbDateProps = {
   aria?: { [key: string]: string };
   className?: string;
   data?: { [key: string]: string };
-  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
+  htmlOptions?: { [key: string]: string | number | boolean | Function };
   id?: string;
   showDayOfWeek?: boolean;
   showIcon?: boolean;
@@ -24,7 +24,7 @@ type PbDateProps = {
   value: Date;
 };
 
-const PbDate = (props: PbDateProps): React.ReactElement => {
+const PbDate = (props: PbDateProps) => {
   const {
     aria = {},
     alignment = "left",
@@ -57,11 +57,11 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
 
   return (
     <div 
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={classes}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      {...htmlProps}
+      className={classes}
+      id={id}
     >
       {unstyled
         ? <>

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -26,7 +26,7 @@ type DatePickerProps = {
   format?: string,
   hideIcon?: boolean,
   hideLabel?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   inLine?: boolean,
   inputAria?: { [key: string]: string },

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -32,10 +32,6 @@ type DatePickerConfig = {
 } & Pick<BaseOptions, "allowInput" | "defaultDate" | "enableTime" | "maxDate" | "minDate" | "mode" | "plugins" | "position" | "positionElement" >
 
 const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HTMLElement) => {
-  const noop = () => {
-    // intentionally left empty as a no-op placeholder
-  }
-
   const {
     allowInput,
     closeOnSelect = true,
@@ -49,8 +45,8 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     maxDate,
     minDate,
     mode,
-    onChange = noop,
-    onClose = noop,
+    onChange = () => {},
+    onClose = () => {},
     pickerId,
     plugins,
     position = "auto",
@@ -76,11 +72,20 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       return defaultDate
     }
   }
+  const disabledParser = () => {
+    const disabledArray=[]
+     
+    disableDate && disableDate.length > 0 && disabledArray.push(...disableDate)
+    disableRange && disableRange.length > 0 && disabledArray.push(...disableRange)
+    disableWeekdays && disableWeekdays.length > 0 && disabledArray.push(...disabledWeekDays())
+
+    return disabledArray
+  }
 
   const disabledWeekDays = () => {
     return (
       [
-        (date: any) => {
+        (date:any) => {
           const weekdayObj: {
             [day: string]: number
           } = {
@@ -105,16 +110,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       ]
     )
   }
-
-  const disabledParser = () => {
-    const disabledArray=[]
-
-    disableDate && disableDate.length > 0 && disabledArray.push(...disableDate)
-    disableRange && disableRange.length > 0 && disabledArray.push(...disableRange)
-    disableWeekdays && disableWeekdays.length > 0 && disabledArray.push(...disabledWeekDays())
-
-    return disabledArray
-  }
   const calendarResizer = () => {
     const cal = document.querySelector(`#cal-${pickerId}.open`) as HTMLElement
     const parentInput = cal.parentElement
@@ -130,46 +125,28 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
 
   const setPlugins = (thisRangesEndToday: boolean, customQuickPickDates: any) => {
     const pluginList = []
-
+  
     // month and week selection
     if (selectionType === "month" || plugins.length > 0) {
       pluginList.push(monthSelectPlugin({ shorthand: true, dateFormat: 'F Y', altFormat: 'F Y' }))
     } else if ( selectionType === "week") {
       pluginList.push(weekSelect())
-
+  
     } else if (selectionType === "quickpick") {
       //------- QUICKPICK VARIANT PLUGIN -------------//
       pluginList.push(quickPickPlugin(thisRangesEndToday, customQuickPickDates))
     }
-
+  
     // time selection
     if (enableTime) pluginList.push(timeSelectPlugin({ caption: timeCaption, showTimezone: showTimezone}))
-
+  
     return pluginList
   }
-
+  
   const getDateFormat = () => {
     return enableTime ? `${format} ${timeFormat}` : format
   }
 
-  // Attach / detach to / from scroll events
-  const initialPicker = document.querySelector<HTMLElement & { [x: string]: any }>(`#${pickerId}`)._flatpickr
-  const scrollEvent = () => {
-    initialPicker._positionCalendar()
-  }
-  function attachToScroll(scrollParent: string | HTMLElement) {
-    document.querySelectorAll(scrollParent as string)[0]?.addEventListener("scroll", scrollEvent, { passive: true })
-  }
-  function detachFromScroll(scrollParent: string | HTMLElement = document.body) {
-    document.querySelectorAll(scrollParent as string)[0]?.removeEventListener("scroll", scrollEvent)
-  }
-
-  // two way binding
-  const initialDropdown = document.querySelector<HTMLElement & { [x: string]: any }>(`#year-${pickerId}`)
-  const yearChangeHook = () => {
-    initialDropdown.value = initialPicker.currentYear
-  }
-
   // ===========================================================
   // |             Flatpickr initializer w/ config             |
   // ===========================================================
@@ -216,6 +193,17 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   const picker = document.querySelector<HTMLElement & { [x: string]: any }>(`#${pickerId}`)._flatpickr
   picker.innerContainer.parentElement.id = `cal-${pickerId}`
 
+  // Attach / detach to / from scroll events
+  const scrollEvent = () => {
+    picker._positionCalendar()
+  }
+  function attachToScroll(scrollParent: string | HTMLElement) {
+    document.querySelectorAll(scrollParent as string)[0]?.addEventListener("scroll", scrollEvent, { passive: true })
+  }
+  function detachFromScroll(scrollParent: string | HTMLElement = document.body) {
+    document.querySelectorAll(scrollParent as string)[0]?.removeEventListener("scroll", scrollEvent)
+  }
+
   // replace year selector with dropdown
   picker.yearElements[0].parentElement.innerHTML = `<select class="numInput cur-year" type="number" tabIndex="-1" aria-label="Year" id="year-${pickerId}"></select>`
 
@@ -254,6 +242,11 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     })
   }
 
+  // two way binding
+  const yearChangeHook = () => {
+    dropdown.value = picker.currentYear
+  }
+
   // Adding dropdown icons to year and month selects
   dropdown.insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
   if (picker.monthElements[0].parentElement) {

data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx

@@ -53,8 +53,8 @@ const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: cust
 
     const calculateDateRange = (timePeriod: string, amount: number): Date[] => {
       const endDate = new Date();
-      const startDate = new Date();
-
+      let startDate = new Date();
+    
       switch (timePeriod) {
         case 'days':
           startDate.setDate(endDate.getDate() - amount);
@@ -76,7 +76,7 @@ const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: cust
       }
       return [startDate, endDate];
     };
-
+  
 
     type rangesType = {
       [key: string]: Date[]
@@ -95,7 +95,7 @@ const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: cust
       'Last year': [lastYearStartDate, lastYearEndDate]
     };
 
-
+    
     if (customQuickPickDates && Object.keys(customQuickPickDates).length !== 0) {
       if (customQuickPickDates.dates.length && customQuickPickDates.override === false) {
         customQuickPickDates.dates.forEach((item) => {

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx

@@ -16,7 +16,7 @@ type DateRangeInlineProps = {
   align?: "left" | "center" | "vertical";
   size?: "sm" | "xs";
   dark?: boolean;
-  htmlOptions?: {[key: string]: string | number | boolean | (() => any)};
+  htmlOptions?: {[key: string]: string | number | boolean | Function};
   icon?: boolean;
   startDate?: Date;
   endDate?: Date;
@@ -34,7 +34,7 @@ const dateTimeIso = (dateValue: Date) => {
   return DateTime.toIso(dateValue);
 };
 
-const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
+const DateRangeInline = (props: DateRangeInlineProps) => {
   const {
     icon = false,
     dark = false,

data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.tsx

@@ -15,12 +15,12 @@ type DateRangeStackedProps = {
   data?: string,
   dark?: boolean,
   endDate: Date,
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   startDate: Date,
 }
 
-const DateRangeStacked = (props: DateRangeStackedProps): React.ReactElement => {
+const DateRangeStacked = (props: DateRangeStackedProps) => {
   const { 
     className, 
     dark = false,