playbook_ui 13.12.0.pre.alpha.play1051testhighcharts1581 → 13.12.0.pre.alpha.play10281596

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

@@ -3,259 +3,257 @@ import typography from '../tokens/exports/_typography.scss'
 
 import { ThemeProps } from './themeTypes'
 
-//import Highcharts from 'highcharts'
+import Highcharts from 'highcharts'
 
 const pbButtonHoverColor = '#004ebb'
-function highchartsTheme(highcharts: any): ThemeProps {
-  return {
-    lang: {
-      thousandsSep: ',',
+const highchartsTheme: ThemeProps = {
+  lang: {
+    thousandsSep: ',',
+  },
+  colors: [
+    colors.data_1,
+    colors.data_2,
+    colors.data_3,
+    colors.data_4,
+    colors.data_5,
+    colors.data_6,
+    colors.data_7,
+  ],
+  chart: {
+    borderWidth: 0,
+    borderRadius: 0,
+    plotBackgroundColor: null,
+    plotShadow: false,
+    plotBorderWidth: 0,
+  },
+  title: {
+    style: {
+      color: colors.text_lt_default,
+      fontFamily: typography.font_family_base,
+      fontWeight: typography.regular,
+      fontSize: typography.heading_3,
     },
-    colors: [
-      colors.data_1,
-      colors.data_2,
-      colors.data_3,
-      colors.data_4,
-      colors.data_5,
-      colors.data_6,
-      colors.data_7,
-    ],
-    chart: {
-      borderWidth: 0,
-      borderRadius: 0,
-      plotBackgroundColor: null,
-      plotShadow: false,
-      plotBorderWidth: 0,
+  },
+  subtitle: {
+    style: {
+      fontFamily: typography.font_family_base,
+      color: colors.text_lt_light,
+      fontWeight: typography.regular,
+      fontSize: typography.text_base,
     },
-    title: {
+  },
+  xAxis: {
+    gridLineWidth: 0,
+    lineColor: colors.border_light,
+    tickColor: colors.border_light,
+    labels: {
       style: {
-        color: colors.text_lt_default,
         fontFamily: typography.font_family_base,
-        fontWeight: typography.regular,
-        fontSize: typography.heading_3,
+        color: colors.text_lt_lighter,
+        fontWeight: typography.bold,
+        fontSize: typography.text_smaller,
       },
     },
-    subtitle: {
+    title: {
       style: {
+        color: colors.text_lt_default,
         fontFamily: typography.font_family_base,
-        color: colors.text_lt_light,
         fontWeight: typography.regular,
-        fontSize: typography.text_base,
-      },
-    },
-    xAxis: {
-      gridLineWidth: 0,
-      lineColor: colors.border_light,
-      tickColor: colors.border_light,
-      labels: {
-        style: {
-          fontFamily: typography.font_family_base,
-          color: colors.text_lt_lighter,
-          fontWeight: typography.bold,
-          fontSize: typography.text_smaller,
-        },
-      },
-      title: {
-        style: {
-          color: colors.text_lt_default,
-          fontFamily: typography.font_family_base,
-          fontWeight: typography.regular,
-          fontSize: typography.heading_4,
-        },
+        fontSize: typography.heading_4,
       },
     },
-    yAxis: {
-      alternateGridColor: null,
-      minorTickInterval: null,
-      gridLineColor: colors.border_light,
-      minorGridLineColor: colors.border_light,
-      lineWidth: 0,
-      tickWidth: 0,
-      labels: {
-        style: {
-          fontFamily: typography.font_family_base,
-          color: colors.text_lt_lighter,
-          fontWeight: typography.bold,
-          fontSize: typography.text_smaller,
-        },
-      },
-      title: {
-        style: {
-          fontFamily: typography.font_family_base,
-          color: colors.text_lt_lighter,
-          fontWeight: typography.bold,
-          fontSize: typography.text_smaller,
-        },
-      },
-    },
-    legend: {
-      layout: 'horizontal',
-      align: 'center',
-      verticalAlign: 'bottom',
-      itemStyle: {
+  },
+  yAxis: {
+    alternateGridColor: null,
+    minorTickInterval: null,
+    gridLineColor: colors.border_light,
+    minorGridLineColor: colors.border_light,
+    lineWidth: 0,
+    tickWidth: 0,
+    labels: {
+      style: {
         fontFamily: typography.font_family_base,
-        color: colors.text_lt_light,
-        fontWeight: typography.regular,
-        fontSize: typography.text_smaller,
-      },
-      itemHoverStyle: {
-        color: colors.text_lt_default,
-      },
-      itemHiddenStyle: {
         color: colors.text_lt_lighter,
+        fontWeight: typography.bold,
+        fontSize: typography.text_smaller,
       },
     },
-    labels: {
+    title: {
       style: {
-        color: colors.primary,
+        fontFamily: typography.font_family_base,
+        color: colors.text_lt_lighter,
+        fontWeight: typography.bold,
+        fontSize: typography.text_smaller,
       },
     },
-    tooltip: {
-      backgroundColor: {
-        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+  },
+  legend: {
+    layout: 'horizontal',
+    align: 'center',
+    verticalAlign: 'bottom',
+    itemStyle: {
+      fontFamily: typography.font_family_base,
+      color: colors.text_lt_light,
+      fontWeight: typography.regular,
+      fontSize: typography.text_smaller,
+    },
+    itemHoverStyle: {
+      color: colors.text_lt_default,
+    },
+    itemHiddenStyle: {
+      color: colors.text_lt_lighter,
+    },
+  },
+  labels: {
+    style: {
+      color: colors.primary,
+    },
+  },
+  tooltip: {
+    backgroundColor: {
+      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+      stops: [
+        [0, colors.bg_dark],
+        [1, colors.bg_dark],
+      ],
+    },
+    shadow: false,
+    borderWidth: 0,
+    borderRadius: 10,
+    style: {
+      fontFamily: typography.font_family_base,
+      color: colors.text_dk_default,
+      fontWeight: typography.regular,
+      fontSize: typography.text_smaller,
+    },
+  },
+  // specific to gauge
+  // unfilled gauge color
+  pane: {
+    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, colors.bg_dark],
-          [1, colors.bg_dark],
+          [0, Highcharts.getOptions().colors[0]],
+          [1, 'white'],
         ],
       },
-      shadow: false,
-      borderWidth: 0,
-      borderRadius: 10,
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_dk_default,
-        fontWeight: typography.regular,
-        fontSize: typography.text_smaller,
-      },
+      threshold: null,
     },
-    // specific to gauge
-    // unfilled gauge color
-    pane: {
-      background: {
-        borderColor: colors.border_light,
+    // PIE STYLES
+    pie: {
+      colors: [
+        colors.data_1,
+        colors.data_2,
+        colors.data_3,
+        colors.data_4,
+        colors.data_5,
+        colors.data_6,
+        colors.data_7,
+      ],
+      dataLabels: {
+        style: {
+          fontFamily: typography.font_family_base,
+          fontSize: typography.text_smaller,
+          color: colors.text_lt_light,
+          fontWeight: typography.regular,
+        },
       },
     },
 
-    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,
+    // LINE CHART STYLES
+    line: {
+      dataLabels: {
+        color: '#CCC',
       },
-      // PIE STYLES
-      pie: {
-        colors: [
-          colors.data_1,
-          colors.data_2,
-          colors.data_3,
-          colors.data_4,
-          colors.data_5,
-          colors.data_6,
-          colors.data_7,
-        ],
-        dataLabels: {
-          style: {
-            fontFamily: typography.font_family_base,
-            fontSize: typography.text_smaller,
-            color: colors.text_lt_light,
-            fontWeight: typography.regular,
+      marker: {
+        lineColor: '#333',
+      },
+      area: {
+        shadow: false,
+        states: {
+          hover: {
+            lineWidth: 1,
           },
         },
+        threshold: null,
       },
+    },
 
-      // LINE CHART STYLES
-      line: {
-        dataLabels: {
-          color: '#CCC',
+    //TREEMAP CHART STYLES
+    treemap: {
+      layoutAlgorithm: "squarified",
+      allowTraversingTree: false,
+      animationLimit: 1000,
+      colors: [
+        colors.data_1,
+        colors.data_2,
+        colors.data_3,
+        colors.data_4,
+        colors.data_5,
+        colors.data_6,
+        colors.data_7,
+        colors.data_8,
+      ],
+      colorByPoint: true,
+      dataLabels: {
+        enabled: true,
+        style: {
+          fontFamily: typography.font_family_base,
+          fontWeight: typography.bold,
+          fontSize: typography.heading_4,
         },
-        marker: {
-          lineColor: '#333',
+      },
+      levels: [
+        {
+          level: 1,
+          dataLabels: {
+            enabled: false,
+          },
         },
-        area: {
-          shadow: false,
+      ],
+      traverseUpButton: {
+        position: { y: -50 },
+        text: '< Back',
+        theme: {
+          r: 4,
           states: {
             hover: {
-              lineWidth: 1,
+              style: {
+                fill: pbButtonHoverColor,
+              },
             },
           },
-          threshold: null,
-        },
-      },
-
-      //TREEMAP CHART STYLES
-      treemap: {
-        layoutAlgorithm: "squarified",
-        allowTraversingTree: false,
-        animationLimit: 1000,
-        colors: [
-          colors.data_1,
-          colors.data_2,
-          colors.data_3,
-          colors.data_4,
-          colors.data_5,
-          colors.data_6,
-          colors.data_7,
-          colors.data_8,
-        ],
-        colorByPoint: true,
-        dataLabels: {
-          enabled: true,
           style: {
-            fontFamily: typography.font_family_base,
+            fill: colors.royal,
+            color: colors.white,
+            fontSize: `${typography.text_small}`,
             fontWeight: typography.bold,
-            fontSize: typography.heading_4,
-          },
-        },
-        levels: [
-          {
-            level: 1,
-            dataLabels: {
-              enabled: false,
-            },
-          },
-        ],
-        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,
+            fontFamily: `${typography.font_family_base}`,
           },
+          stroke: colors.royal,
+          height: 24,
+          width: 90,
         },
       },
     },
-    credits: {
-      enabled: false
-    },
-  }
+  },
+  credits: {
+    enabled: false
+  },
 }
 
 export { highchartsTheme }

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 import Body from '../pb_body/_body'
@@ -12,6 +12,7 @@ type DashboardValueProps = {
   aria?: { [key: string]: string },
   className?: string,
   data?: { [key: string]: string },
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   statChange?: {
     change? : 'increase' | 'decrease' | 'neutral',
@@ -30,6 +31,7 @@ const DashboardValue = (props: DashboardValueProps): React.ReactElement => {
     aria = {},
     className,
     data = {},
+    htmlOptions = {},
     id,
     statChange = {},
     statLabel,
@@ -38,6 +40,7 @@ const DashboardValue = (props: DashboardValueProps): React.ReactElement => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_dashboard_value_kit', align),
     globalProps(props),
@@ -48,6 +51,7 @@ const DashboardValue = (props: DashboardValueProps): React.ReactElement => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

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

@@ -1,7 +1,7 @@
 import React from "react";
 import classnames from "classnames";
 
-import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
 import DateTime from '../pb_kit/dateTime';
 
@@ -15,6 +15,7 @@ type PbDateProps = {
   aria?: { [key: string]: string };
   className?: string;
   data?: { [key: string]: string };
+  htmlOptions?: { [key: string]: string | number | boolean | Function };
   id?: string;
   showDayOfWeek?: boolean;
   showIcon?: boolean;
@@ -29,6 +30,7 @@ const PbDate = (props: PbDateProps) => {
     alignment = "left",
     className,
     data = {},
+    htmlOptions = {},
     id,
     showDayOfWeek = false,
     showIcon = false,
@@ -43,8 +45,9 @@ const PbDate = (props: PbDateProps) => {
   const year = DateTime.toYear(value);
   const currentYear = new Date().getFullYear();
 
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
 
   const classes = classnames(
     buildCss("pb_date_kit", alignment),
@@ -53,10 +56,12 @@ const PbDate = (props: PbDateProps) => {
   );
 
   return (
-    <div {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
+    <div 
+      {...ariaProps}
+      {...dataProps}
+      {...htmlProps}
+      className={classes}
+      id={id}
     >
       {unstyled
         ? <>

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

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react'
 import classnames from 'classnames'
 
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
 
 import datePickerHelper from './date_picker_helper'
@@ -25,6 +25,7 @@ type DatePickerProps = {
   format?: string,
   hideIcon?: boolean,
   hideLabel?: boolean,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   inLine?: boolean,
   inputAria?: { [key: string]: string },
@@ -67,6 +68,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     format = 'm/d/Y',
     hideIcon = false,
     hideLabel = false,
+    htmlOptions = {},
     id,
     inLine = false,
     inputAria = {},
@@ -95,6 +97,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const inputAriaProps = buildAriaProps(inputAria)
   const inputDataProps = buildDataProps(inputData)
 
@@ -158,6 +161,7 @@ useEffect(() => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

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

@@ -2,7 +2,7 @@ import React from "react";
 import classnames from "classnames";
 
 import { globalProps } from "../utilities/globalProps";
-import { buildCss, buildDataProps } from "../utilities/props";
+import { buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import DateTime from '../pb_kit/dateTime';
 
 import Body from "../pb_body/_body";
@@ -16,6 +16,7 @@ type DateRangeInlineProps = {
   align?: "left" | "center" | "vertical";
   size?: "sm" | "xs";
   dark?: boolean;
+  htmlOptions?: {[key: string]: string | number | boolean | Function};
   icon?: boolean;
   startDate?: Date;
   endDate?: Date;
@@ -40,6 +41,7 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
     size = "sm",
     align = "left",
     data = {},
+    htmlOptions = {},
     startDate,
     endDate,
     className,
@@ -79,6 +81,7 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
 
   const dateRangeClasses = buildCss("pb_date_range_inline_kit", align);
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const renderTime = (date: Date) => {
     return (
       <time dateTime={dateTimeIso(date)}>
@@ -94,6 +97,7 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
   return (
     <div
         {...dataProps}
+        {...htmlProps}
         className={classnames(dateRangeClasses, globalProps(props), className)}
     >
       <div className="pb_date_range_inline_wrapper">

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { buildCss, buildDataProps } from '../utilities/props'
+import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 import Body from '../pb_body/_body'
@@ -15,21 +15,32 @@ type DateRangeStackedProps = {
   data?: string,
   dark?: boolean,
   endDate: Date,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   startDate: Date,
 }
 
 const DateRangeStacked = (props: DateRangeStackedProps) => {
-  const { className, dark = false, endDate, startDate, data={} } = props
+  const { 
+    className, 
+    dark = false, 
+    endDate, 
+    htmlOptions={},
+    startDate, 
+    data={},
+  } = props
   const css = classnames(
     buildCss('pb_date_range_stacked'),
     globalProps(props),
     className
   )
-  const dataProps = buildDataProps(data)
+   const dataProps = buildDataProps(data)
+   const htmlProps = buildHtmlProps(htmlOptions)
 
   return (
-    <div {...dataProps}
+    <div 
+        {...dataProps}
+        {...htmlProps}
         className={css}
     >
       <Flex vertical="center">