playbook_ui 13.12.0.pre.alpha.play1051testhighcharts1580 → 13.12.0.pre.alpha.play10281596

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

@@ -1,7 +1,7 @@
-/* eslint-disable */
 import React, { useState, useEffect } from "react";
 import classnames from "classnames";
 import HighchartsReact from "highcharts-react-official";
+import Highcharts from "highcharts";
 import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
@@ -10,30 +10,31 @@ import solidGauge from "highcharts/modules/solid-gauge";
 import defaultColors from "../tokens/exports/_colors.scss";
 import typography from "../tokens/exports/_typography.scss";
 
-import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
 
 type GaugeProps = {
-  aria: { [key: string]: string },
-  className?: string,
-  chartData?: { name: string, value: number[] | number }[],
-  dark?: Boolean,
-  data?: { [key: string]: string },
-  disableAnimation?: boolean,
-  fullCircle?: boolean,
-  height?: string,
-  id?: string,
-  max?: number,
-  min?: number,
-  prefix?: string,
-  showLabels?: boolean,
-  style?: string,
-  suffix?: string,
-  title?: string,
-  tooltipHtml?: string,
-  colors: string[],
-  minorTickInterval: any,
-  circumference: number[],
+  aria: { [key: string]: string };
+  className?: string;
+  chartData?: { name: string; value: number[] | number }[];
+  dark?: Boolean;
+  data?: { [key: string]: string };
+  disableAnimation?: boolean;
+  fullCircle?: boolean;
+  height?: string;
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  id?: string;
+  max?: number;
+  min?: number;
+  prefix?: string;
+  showLabels?: boolean;
+  style?: string;
+  suffix?: string;
+  title?: string;
+  tooltipHtml?: string;
+  colors: string[];
+  minorTickInterval: any;
+  circumference: number[];
 };
 
 const Gauge = ({
@@ -45,6 +46,7 @@ const Gauge = ({
   disableAnimation = false,
   fullCircle = false,
   height = null,
+  htmlOptions = {},
   id,
   max = 100,
   min = 0,
@@ -61,14 +63,30 @@ const Gauge = ({
   ...props
 }: GaugeProps) => {
   const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
+ const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions);
+  highchartsMore(Highcharts);
+  solidGauge(Highcharts);
+  const setupTheme = () => {
+    dark
+      ? Highcharts.setOptions(highchartsDarkTheme)
+      : Highcharts.setOptions(highchartsTheme);
+  };
+  setupTheme();
+
+  //set tooltip directly to prevent being overriden by Highcharts defaults
+  Highcharts.setOptions({
+    tooltip: {
+      pointFormat: tooltipHtml,
+      followPointer: true,
+    },
+  });
 
   const css = buildCss({
     pb_gauge_kit: true,
   });
 
   const [options, setOptions] = useState({});
-  const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);
 
   useEffect(() => {
     const formattedChartData = chartData.map((obj: any) => {
@@ -125,7 +143,7 @@ const Gauge = ({
       colors:
         colors !== undefined && colors.length > 0
           ? mapColors(colors)
-          : highchartsTheme(window.Highcharts).colors,
+          : highchartsTheme.colors,
       plotOptions: {
         series: {
           animation: !disableAnimation,
@@ -134,7 +152,7 @@ const Gauge = ({
           borderColor:
             colors !== undefined && colors.length === 1
               ? mapColors(colors).join()
-              : highchartsTheme(window.Highcharts).colors[0],
+              : highchartsTheme.colors[0],
           borderWidth: 20,
           radius: 90,
           innerRadius: "90%",
@@ -159,53 +177,27 @@ const Gauge = ({
 
     setOptions({ ...staticOptions });
 
-    const interval = setInterval(() => {
-      if (window.Highcharts) {
-        clearInterval(interval)
-        
-        const gaugeInterval = setInterval(() => {
-          if (document.querySelector(".prefix")) {
-            clearInterval(gaugeInterval)
-            document.querySelectorAll(".prefix").forEach((prefix) => {
-              prefix.setAttribute("y", "28");
-            });
-            document
-              .querySelectorAll(".fix")
-              .forEach((fix) => fix.setAttribute("y", "38"));
-          }
-        }, 0)
-
-        dark
-          ? window.Highcharts.setOptions(highchartsDarkTheme(window.Highcharts))
-          : window.Highcharts.setOptions(highchartsTheme(window.Highcharts))
-        
-        highchartsMore(window.Highcharts);
-        solidGauge(window.Highcharts);
-      
-        //set tooltip directly to prevent being overriden by window.Highcharts defaults
-        window.Highcharts.setOptions({
-          tooltip: {
-            pointFormat: tooltipHtml,
-            followPointer: true,
-          },
-        });
-
-        setIsHighchartsLoaded(true)
-      }
-    }, 0)
+    if (document.querySelector(".prefix")) {
+      document.querySelectorAll(".prefix").forEach((prefix) => {
+        prefix.setAttribute("y", "28");
+      });
+      document
+        .querySelectorAll(".fix")
+        .forEach((fix) => fix.setAttribute("y", "38"));
+    }
 
   }, [chartData]);
 
   return (
-    isHighchartsLoaded &&
     <HighchartsReact
       containerProps={{
         className: classnames(css, globalProps(props)),
         id: id,
         ...ariaProps,
         ...dataProps,
+        ...htmlProps,
       }}
-      highcharts={window.Highcharts}
+      highcharts={Highcharts}
       options={options}
     />
   );

data/app/pb_kits/playbook/pb_hashtag/_hashtag.tsx

@@ -4,7 +4,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, GlobalProps } from '../utilities/globalProps'
 
 import Badge from '../pb_badge/_badge'
@@ -14,6 +14,7 @@ type HashtagProps = {
   className?: string,
   dark?: boolean,
   data?: string,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   newWindow?: boolean,
   rel?: string,
@@ -35,6 +36,7 @@ const Hashtag = (props: HashtagProps) => {
     className,
     dark = false,
     data = {},
+    htmlOptions = {},
     id,
     newWindow,
     rel,
@@ -45,12 +47,14 @@ const Hashtag = (props: HashtagProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(buildCss('pb_hashtag_kit'), globalProps(props), className)
 
   return (
     <span
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_highlight/_highlight.tsx

@@ -3,10 +3,12 @@ import Highlighter from 'react-highlight-words'
 import React from 'react'
 import classnames from 'classnames'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
+import { buildHtmlProps } from '../utilities/props'
 
 type HighlightProps = {
   className?: string,
   data?: {[key: string]: string},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   children?: React.ReactChild[] | React.ReactChild | string,
   text?: string,
@@ -19,10 +21,12 @@ const Highlight = (props: HighlightProps): React.ReactElement => {
     className = 'pb_highlight_kit',
     data = {},
     highlightedText = ['highlight'],
+    htmlOptions = {},
     id = '',
     text = '',
   } = props
 
+  const htmlProps = buildHtmlProps(htmlOptions)
   const highlightContent: any = text || children;
 
   return (
@@ -34,6 +38,7 @@ const Highlight = (props: HighlightProps): React.ReactElement => {
         id={id}
         searchWords={highlightedText}
         textToHighlight={highlightContent}
+        {...htmlProps}
     />
   )
 }

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

@@ -7,7 +7,7 @@ import { globalProps } from '../utilities/globalProps'
 import Body from '../pb_body/_body'
 import Hashtag from '../pb_hashtag/_hashtag'
 import Title from '../pb_title/_title'
-import { buildAriaProps, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
 
 type HomeAddressStreetProps = {
   aria?: { [key: string]: string },
@@ -18,6 +18,7 @@ type HomeAddressStreetProps = {
   data?: { [key: string]: string },
   dark?: boolean,
   emphasis: "street" | "city",
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   homeId: string,
   houseStyle: string,
   homeUrl: string,
@@ -37,6 +38,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps) => {
     data = {},
     dark = false,
     emphasis = 'street',
+    htmlOptions = {},
     homeId,
     homeUrl,
     newWindow,
@@ -58,9 +60,14 @@ const HomeAddressStreet = (props: HomeAddressStreetProps) => {
 
   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}>
+    <div 
+      className={classes(className, dark)} 
+      {...ariaProps} 
+      {...dataProps}
+      {...htmlProps}
+    >
       {emphasis == 'street' && 
         <div>
           <Title

data/app/pb_kits/playbook/pb_icon/_icon.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 import { isValidEmoji } from '../utilities/validEmojiChecker'
 
@@ -28,6 +28,7 @@ type IconProps = {
   fixedWidth?: boolean,
   flip?: "horizontal" | "vertical" | "both" | "none",
   icon: string,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   inverse?: boolean,
   listItem?: boolean,
@@ -55,6 +56,7 @@ const Icon = (props: IconProps) => {
     data = {},
     fixedWidth = true,
     flip = "none",
+    htmlOptions = {},
     icon,
     id,
     inverse = false,
@@ -104,6 +106,7 @@ const Icon = (props: IconProps) => {
   aria.label ? null : aria.label = `${icon} icon`
   const ariaProps: {[key: string]: any} = buildAriaProps(aria)
   const dataProps: {[key: string]: any} = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
 
   // Add a conditional here to show only the SVG if custom
   const displaySVG = (customIcon: any) => {
@@ -113,6 +116,7 @@ const Icon = (props: IconProps) => {
           {
             React.cloneElement(customIcon, {
               ...dataProps,
+              ...htmlProps,
               className: classes,
               id,
             })
@@ -124,6 +128,7 @@ const Icon = (props: IconProps) => {
         <>
           <span
               {...dataProps}
+              {...htmlProps}
               className={classesEmoji}
               id={id}
           >
@@ -137,6 +142,7 @@ const Icon = (props: IconProps) => {
         <>
           <i
               {...dataProps}
+              {...htmlProps}
               className={classes}
               id={id}
           />

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx

@@ -2,7 +2,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 Icon from '../pb_icon/_icon'
@@ -13,6 +13,7 @@ type IconCircleProps = {
   dark?: boolean,
   data?: {[key:string]: string},
   icon: string,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   size?: "base" | "xs" | "sm" | "md" | "lg" | "xl",
   variant?: | "default"
@@ -32,6 +33,7 @@ const IconCircle = (props: IconCircleProps) => {
     className,
     dark = false,
     data = {},
+    htmlOptions = {},
     icon,
     id,
     size = 'md',
@@ -40,6 +42,7 @@ const IconCircle = (props: IconCircleProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(buildCss('pb_icon_circle_kit', size, variant), globalProps(props), className)
 
 
@@ -47,6 +50,7 @@ const IconCircle = (props: IconCircleProps) => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.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 Body from '../pb_body/_body'
@@ -16,6 +16,7 @@ type IconStatValueProps = {
   data?: object,
   dark?: boolean,
   icon: string,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   orientation?: "vertical" | "horizontal",
   size?: "sm" | "md" | "lg",
@@ -39,6 +40,7 @@ const IconStatValue = (props: IconStatValueProps) => {
     className,
     data = {},
     dark = false,
+    htmlOptions = {},
     icon,
     id,
     orientation = 'horizontal',
@@ -50,6 +52,7 @@ const IconStatValue = (props: IconStatValueProps) => {
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_icon_stat_value_kit', orientation, size, variant), globalProps(props),
     className
@@ -89,6 +92,7 @@ const IconStatValue = (props: IconStatValueProps) => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_icon_value/_icon_value.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 Body from '../pb_body/_body'
@@ -14,6 +14,7 @@ type IconValueProps = {
   dark?: boolean,
   data?: object,
   icon: string,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   text: string,
 }
@@ -25,12 +26,14 @@ const IconValue = (props: IconValueProps) => {
     className,
     dark,
     data = {},
+    htmlOptions = {},
     icon,
     id,
     text,
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss('pb_icon_value_kit', align),
     globalProps(props),
@@ -41,6 +44,7 @@ const IconValue = (props: IconValueProps) => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_image/_image.tsx

@@ -1,13 +1,14 @@
 import React from 'react'
 import classnames from 'classnames'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 
 type ImageType = {
   alt?: string,
   aria?: {[key: string]: string},
   className?: string,
   data?: {[key: string]: string},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   onError?: () => void,
   size?: "xs" | "sm" | "md" | "lg" | "xl",
@@ -22,6 +23,7 @@ const Image = (props: ImageType): React.ReactElement => {
     aria = {},
     className,
     data = {},
+    htmlOptions = {},
     id,
     onError = null,
     rounded = false,
@@ -40,11 +42,14 @@ const Image = (props: ImageType): React.ReactElement => {
     className
   )
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
+
 
   return (
     <img
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         alt={alt}
         className={classes}
         data-src={url}

data/app/pb_kits/playbook/pb_label_pill/_label_pill.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps'
 
-import { buildAriaProps, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
 
 import Pill from '../pb_pill/_pill'
 import Caption from '../pb_caption/_caption'
@@ -11,6 +11,7 @@ type LabelPillProps = {
   aria?: {[key: string]:string},
   className?: string,
   data?: {[key: string]:string},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   label?: string,
   pillValue?: string,
@@ -22,6 +23,7 @@ const LabelPill = (props: LabelPillProps) => {
     aria = {},
     className,
     data = {},
+    htmlOptions = {},
     id,
     label,
     pillValue,
@@ -29,6 +31,7 @@ const LabelPill = (props: LabelPillProps) => {
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const css = classnames(
     'pb_label_pill_kit',
     globalProps(props),
@@ -39,6 +42,7 @@ const LabelPill = (props: LabelPillProps) => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={css}
         id={id}
     >

data/app/pb_kits/playbook/pb_label_value/_label_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 DateTime from '../pb_kit/dateTime';
 
@@ -17,6 +17,7 @@ type LabelValueProps = {
   dark?: boolean;
   data?: object;
   date?: Date;
+  htmlOptions?: {[key: string]: string | number | boolean | Function};
   id?: string;
   label: string;
   value?: string;
@@ -42,6 +43,7 @@ const LabelValue = (props: LabelValueProps) => {
     data = {},
     date,
     description,
+    htmlOptions = {},
     icon,
     id,
     label,
@@ -51,7 +53,8 @@ const LabelValue = (props: LabelValueProps) => {
   } = props;
 
   const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions);
   const variantClass = variant === "details" ? "details" : "";
   const classes = classnames(
     buildCss("pb_label_value_kit", variantClass),
@@ -63,6 +66,7 @@ const LabelValue = (props: LabelValueProps) => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
         title={title}

data/app/pb_kits/playbook/pb_layout/_layout.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'
 
@@ -12,6 +12,7 @@ type LayoutPropTypes = {
   dark?: boolean,
   data?: object,
   full?: boolean,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   position?: "left" | "right",
   responsive?: boolean,
   size?: "xs" | "sm" | "md" | "base" | "lg" | "xl",
@@ -106,6 +107,7 @@ const Layout = (props: LayoutPropTypes) => {
     dark = false,
     data = {},
     full = false,
+    htmlOptions = {},
     position = 'left',
     responsive = false,
     size = 'md',
@@ -116,6 +118,8 @@ const Layout = (props: LayoutPropTypes) => {
   const responsiveClass = responsive ? '_responsive' : ''
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
+
   const layoutCss =
     layout == 'collection'
       ? `pb_layout_kit_${layout}`
@@ -159,6 +163,7 @@ const Layout = (props: LayoutPropTypes) => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classnames(
         layoutCss,
         layoutCollapseCss,

data/app/pb_kits/playbook/pb_legend/_legend.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 Body from '../pb_body/_body'
@@ -13,6 +13,7 @@ type LegendProps = {
   color?: string,
   dark?: boolean,
   data?: object,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   prefixText?: string,
   text: string,
@@ -25,6 +26,7 @@ const Legend = (props: LegendProps) => {
     color = 'data_1',
     dark = false,
     data = {},
+    htmlOptions = {},
     id,
     prefixText,
     text,
@@ -32,6 +34,7 @@ const Legend = (props: LegendProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
 
   const customColor = color.charAt(0) === '#' && color
 
@@ -50,6 +53,7 @@ const Legend = (props: LegendProps) => {
     <div
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={bodyCss}
         id={id}
     >