playbook_ui 13.12.0.pre.alpha.play900startratingasinput1612 → 13.12.0.pre.alpha.play1051highchartstest1556

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";
@@ -14,26 +14,26 @@ import { buildAriaProps, buildCss, buildDataProps } 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,
+  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 = ({
@@ -54,7 +54,7 @@ const Gauge = ({
   suffix = "",
   title = "",
   tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
-    "<b>{point.y}</b>",
+  "<b>{point.y}</b>",
   colors = [],
   minorTickInterval = null,
   circumference = fullCircle ? [0, 360] : [-100, 100],
@@ -62,28 +62,13 @@ const Gauge = ({
 }: GaugeProps) => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
-  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) => {
@@ -174,18 +159,45 @@ const Gauge = ({
 
     setOptions({ ...staticOptions });
 
-    if (document.querySelector(".prefix")) {
-      document.querySelectorAll(".prefix").forEach((prefix) => {
-        prefix.setAttribute("y", "28");
-      });
-      document
-        .querySelectorAll(".fix")
-        .forEach((fix) => fix.setAttribute("y", "38"));
-    }
+    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)
+
+        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)
 
   }, [chartData]);
 
   return (
+    isHighchartsLoaded &&
     <HighchartsReact
       containerProps={{
         className: classnames(css, globalProps(props)),
@@ -193,7 +205,7 @@ const Gauge = ({
         ...ariaProps,
         ...dataProps,
       }}
-      highcharts={Highcharts}
+      highcharts={window.Highcharts}
       options={options}
     />
   );

data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx

@@ -1,42 +1,42 @@
+/* eslint-disable */
 import React, { useState, useEffect } from "react";
 import classnames from "classnames";
 import { globalProps } from "../utilities/globalProps";
 import { buildAriaProps, buildDataProps } from "../utilities/props";
 
 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";
 
 type LineGraphProps = {
-  align?: "left" | "right" | "center";
-  axisTitle?: string;
-  dark?: Boolean;
-  xAxisCategories: [];
-  yAxisMin: number;
-  yAxisMax: number;
-  className?: string;
+  align?: "left" | "right" | "center",
+  axisTitle?: string,
+  dark?: boolean,
+  xAxisCategories: [],
+  yAxisMin: number,
+  yAxisMax: number,
+  className?: string,
   chartData: {
-    name: string;
-    data: number[];
-  }[];
-  gradient?: boolean;
-  id: string;
-  pointStart: number;
-  subTitle?: string;
-  title: string;
-  type?: string;
-  legend?: boolean;
-  toggleLegendClick?: boolean;
-  height?: string;
-  colors: string[];
-  layout?: "horizontal" | "vertical" | "proximate";
-  verticalAlign?: "top" | "middle" | "bottom";
-  x?: number;
-  y?: number;
-  aria?: { [key: string]: string };
-  data?: { [key: string]: string };
+    name: string,
+    data: number[],
+  }[],
+  gradient?: boolean,
+  id: string,
+  pointStart: number,
+  subTitle?: string,
+  title: string,
+  type?: string,
+  legend?: boolean,
+  toggleLegendClick?: boolean,
+  height?: string,
+  colors: string[],
+  layout?: "horizontal" | "vertical" | "proximate",
+  verticalAlign?: "top" | "middle" | "bottom",
+  x?: number,
+  y?: number,
+  aria?: { [key: string]: string },
+  data?: { [key: string]: string },
 };
 
 const LineGraph = ({
@@ -68,12 +68,6 @@ const LineGraph = ({
 }: LineGraphProps) => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
-  const setupTheme = () => {
-    dark
-      ? Highcharts.setOptions(highchartsDarkTheme)
-      : Highcharts.setOptions(highchartsTheme);
-  };
-  setupTheme();
 
   const staticOptions = {
     title: {
@@ -126,12 +120,24 @@ const LineGraph = ({
   }
 
   const [options, setOptions] = useState({});
+  const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);
 
   useEffect(() => {
     setOptions({ ...staticOptions });
+
+    const interval = setInterval(() => {
+      if (window.Highcharts) {
+        clearInterval(interval)
+        dark
+          ? window.Highcharts.setOptions(highchartsDarkTheme(window.Highcharts))
+          : window.Highcharts.setOptions(highchartsTheme)
+        setIsHighchartsLoaded(true)
+      }
+    }, 0)
   }, [chartData]);
 
   return (
+    isHighchartsLoaded &&
     <HighchartsReact
       containerProps={{
         className: classnames(globalProps(props), className),
@@ -139,7 +145,7 @@ const LineGraph = ({
         ...ariaProps,
         ...dataProps,
       }}
-      highcharts={Highcharts}
+      highcharts={window.Highcharts}
       options={options}
     />
   );

data/app/pb_kits/playbook/pb_multiple_users/docs/example.yml

@@ -10,9 +10,3 @@ examples:
   - multiple_users_default: Default
   - multiple_users_reverse: Reverse
   - multiple_users_size: Size
-
-  swift:
-  - multiple_users_default_swift: Default
-  - multiple_users_reverse_swift: Reverse
-  - multiple_users_size_swift: Small
-  - multiple_users_props_swift: ""

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml

@@ -6,9 +6,3 @@ examples:
 
   react:
   - multiple_users_stacked_default: Default
-
-  swift: 
-  - multiple_users_stacked_default_swift: Default
-  - multiple_users_stacked_small_swift: Small
-  - multiple_users_stacked_xsmall_swift: xSmall
-  - multiple_users_stacked_props_swift: ""

data/app/pb_kits/playbook/pb_star_rating/_star_rating.scss

@@ -2,92 +2,61 @@
 @import "../tokens/opacity";
 @import "../tokens/spacing";
 
+$pb_star_rating_number_width: 30px;
+$pb_star_rating_wrapper_width: 90px;
+$pb_star_rating_height: 26px;
 
-[class*=pb_star_rating_kit] {
-  display: flex;
-  align-items: flex-end;
+[class^=pb_star_rating_kit] {
+  position: relative;
+  display: inline-flex;
   justify-content: flex-start;
-
-  path {
-    &.suble_star_dark {
-      fill: $text_dk_default;
-    }
-    &.suble_star_light {
-      fill: $text_lt_default;
-    }
-    &.outline_star_dark {
-      stroke: $text_dk_lighter;
-    }
-    &.outline_star_light {
-      stroke: $text_lt_lighter;
-    }
-    &.empty_star_dark {
-      fill: $border_dark;
-    }
-    &.empty_star_light {
-      fill: $border_light;
-    }
-  }
-
-  .pb_star_rating_number_xs {
-    max-height: 14px;
-  }
-
-  .pb_star_rating_number_sm {
-    max-height: 14px;
-  }
-
-  .pb_star_rating_number_md {
-    max-height: 24px;
-  }
-
-  .pb_star_rating_number_lg {
-    max-height: 40px;
-    height: 29px;
-  }
-
-  $star-styles: (
-    pb_star_xs: (font-size: 14px, padding-right: 4px),
-    pb_star_sm: (font-size: 16px, padding-right: 4px),
-    pb_star_md: (font-size: 24px, padding-right: 6px),
-    pb_star_lg: (font-size: 48px, padding-right: 12px)
-  );
-
-  @each $class, $styles in $star-styles {
-    .#{$class} {
-      @each $property, $value in $styles {
-        #{$property}: $value;
-      }
-    }
-  }
-
-  $star-container: (
-    pb_star_container_xs: (font-size: 14px ),
-    pb_star_container_sm: (font-size: 16px ),
-    pb_star_container_md: (font-size: 24px ),
-    pb_star_container_lg: (font-size: 48px )
-  );
-
-  @each $class, $styles in $star-container {
-    .#{$class} {
-      @each $property, $value in $styles {
-        #{$property}: $value;
-      }
-    }
-  }
-
-  $star-padding: (
-    pb_star_padding_xs: (padding-right: 4px),
-    pb_star_padding_sm: (padding-right: 4px),
-    pb_star_padding_md: (padding-right: 6px),
-    pb_star_padding_lg: (padding-right: 12px)
-  );
-
-  @each $class, $styles in $star-padding {
-    .#{$class} {
-      @each $property, $value in $styles {
-        #{$property}: $value;
-      }
+  align-items: flex-start;
+
+  .pb_star_rating_number {
+    flex-shrink: 0;
+    flex-grow: 0;
+    flex-basis: $pb_star_rating_number_width;
+    width: $pb_star_rating_number_width;
+    min-height: $pb_star_rating_height;
+    padding: 0 $space-xs 0;
+    color: $text_lt_light;
+    font-size: $text-small;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .pb_star_rating_wrapper {
+    position: relative;
+    width: $pb_star_rating_wrapper_width;
+    flex-basis: $pb_star_rating_wrapper_width;
+    flex-shrink: 0;
+    flex-grow: 1;
+    min-height: $pb_star_rating_height;
+
+    .pb_star_rating_highlight {
+      display: flex;
+      position: absolute;
+      top: 5px;
+      left: 0;
+      z-index: 5;
+      color: $yellow;
+      line-height: $pb_star_rating_height;
+    }
+    .pb_star_rating_base {
+      display: flex;
+      position: absolute;
+      top: 5px;
+      left: 0;
+      z-index: 0;
+      color: rgba($slate, $opacity-4);
+      line-height: $pb_star_rating_height;
+    }
+  }
+
+  &[class*=_hide_rating] {
+    .pb_star_rating_number {
+      display: none;
     }
   }
 }