playbook_ui 13.14.0.pre.alpha.play1101betaicons1825 → 13.14.0.pre.alpha.play1106filter1748

data/app/pb_kits/playbook/pb_collapsible/_helper_functions.ts

@@ -1,4 +1,4 @@
-export const showElement = (elem: HTMLElement) => {
+export const showElement = (elem:any) => {
   elem.style.display = 'block';
   const height = elem.scrollHeight + 'px'; // Get its height
   elem.style.height = height; // Update the max-height
@@ -11,7 +11,7 @@ export const showElement = (elem: HTMLElement) => {
   }, 300);
 };
 
-export const hideElement = (elem: HTMLElement) => {
+export const hideElement = (elem:any) => {
   elem.style.height = elem.scrollHeight + 'px';
 
   window.setTimeout(() => {

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_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, 

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx

@@ -15,7 +15,7 @@ type DateStackedProps = {
   dark?: boolean;
   data?: string;
   date: Date;
-  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
+  htmlOptions?: { [key: string]: string | number | boolean | Function };
   size?: "sm" | "md";
   id?: string;
   reverse?: boolean;
@@ -26,7 +26,7 @@ const sizes: {sm: 4, md: 3} = {
   md: 3,
 };
 
-const DateStacked = (props: DateStackedProps): React.ReactElement => {
+const DateStacked = (props: DateStackedProps) => {
   const {
     align = "left",
     bold = false,
@@ -56,9 +56,9 @@ const DateStacked = (props: DateStackedProps): React.ReactElement => {
     <>
       {bold == false ? (
         <div 
-            {...dataProps}
-            {...htmlProps}
-            className={classes}
+          {...dataProps}
+          {...htmlProps}
+          className={classes}
         >
           <div className="pb_date_stacked_day_month">
             <Caption text={DateTime.toMonth(date).toUpperCase()} />
@@ -72,9 +72,9 @@ const DateStacked = (props: DateStackedProps): React.ReactElement => {
         </div>
       ) : (
           <div 
-              {...dataProps}
-              {...htmlProps}
-              className={classes}
+            {...dataProps}
+            {...htmlProps}
+            className={classes}
           >
             <div className="pb_date_stacked_day_month">
               <Title

data/app/pb_kits/playbook/pb_date_time/_date_time.tsx

@@ -14,7 +14,7 @@ type DateTimeProps = {
   className?: string,
   data?: { [key: string]: string; },
   datetime: Date,
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   size?: "sm" | "md",
   showDayOfWeek: boolean,
@@ -22,7 +22,7 @@ type DateTimeProps = {
   timeZone?: string
 }
 
-const DateTime = (props: DateTimeProps): React.ReactElement => {
+const DateTime = (props: DateTimeProps) => {
   const {
     align = 'left',
     aria = {},

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx

@@ -11,7 +11,7 @@ import TimeStacked from '../pb_time_stacked/_time_stacked'
 import DateStacked from '../pb_date_stacked/_date_stacked'
 
 type DateTimeStackedProps = {
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   date: Date,
   datetime: Date,

data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.tsx

@@ -14,11 +14,11 @@ type DateYearStackedProps = {
   dark?: boolean,
   data?: string,
   date: Date,
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
 }
 
-const DateYearStacked = (props: DateYearStackedProps): React.ReactElement => {
+const DateYearStacked = (props: DateYearStackedProps) => {
   const { 
     align = 'left', 
     className, 

data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.test.js

@@ -21,8 +21,7 @@ describe("DateYearStacked Kit", () => {
     render(
       <DateYearStacked 
           data={{ testid: testId }} 
-          date={new Date(Date.now())}
-      />
+          date={new Date(Date.now())} />
     );
 
     const kit = screen.getByTestId(testId);
@@ -33,8 +32,7 @@ describe("DateYearStacked Kit", () => {
     render(
       <DateYearStacked 
           data={{ testid: testId }} 
-          date={new Date(Date.now())}
-      />
+          date={new Date(Date.now())} />
     );
 
     const kit = screen.getByTestId(testId);
@@ -46,8 +44,7 @@ describe("DateYearStacked Kit", () => {
     render(
       <DateYearStacked 
           data={{ testid: testId }} 
-          date={new Date(Date.now())}
-      />
+          date={new Date(Date.now())} />
     );
 
     const kit = screen.getByTestId(testId);

data/app/pb_kits/playbook/pb_detail/_detail.scss

@@ -6,13 +6,13 @@
   @include pb_detail;
 
   @each $color_name, $color_value in $pb_detail_colors {
-    &[class*=color_#{$color_name}] {
+    &[class*=_#{$color_name}] {
       @include pb_detail($color_value);
     }
   }
 
   @each $dark_color_name, $dark_color_value in $pb_dark_detail_colors{
-    &[class*=color_#{$dark_color_name}][class*=dark]{
+    &[class*=_#{$dark_color_name}][class*=dark]{
       @include pb_detail($dark_color_value)
     }
   }

data/app/pb_kits/playbook/pb_detail/_detail.tsx

@@ -11,13 +11,13 @@ type DetailProps = {
   color?: 'light' | 'default' | 'lighter' | 'link' | 'error' | 'success',
   dark?: boolean,
   data?: { [key: string]: string },
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
   text?: string,
 } & GlobalProps
 
-const Detail = (props: DetailProps): React.ReactElement => {
+const Detail = (props: DetailProps) => {
   const {
     aria = {},
     bold = false,
@@ -31,12 +31,12 @@ const Detail = (props: DetailProps): React.ReactElement => {
     text= ''
   } = props
 
-  const ariaProps: {[key: string]: string} = buildAriaProps(aria)
-  const dataProps: {[key: string]: string} = buildDataProps(data)
+  const ariaProps: {[key: string]: any} = buildAriaProps(aria)
+  const dataProps: {[key: string]: any} = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions);
   const isBold = bold ? "bold" : null
   const classes = classnames(
-    buildCss('pb_detail_kit', `color`, color),
+    buildCss('pb_detail_kit', color),
     isBold,
     globalProps(props),
     className