playbook_ui 14.5.0.pre.alpha.PLAY1486highchartscssdrivenPOC3954 → 14.5.0.pre.alpha.PLAY1510railsformloading3975

data/app/pb_kits/playbook/pb_form/formHelper.js

@@ -0,0 +1,41 @@
+const formHelper = () => {
+    const loadingForm = document.querySelector(".pb_form_loading")
+    if (loadingForm) {
+        loadingForm.addEventListener("submit", function(event) {
+            event.preventDefault();
+
+            const submitButton = event['submitter'];
+            const cancelButton = event['target'].querySelector('button[type="reset"]');
+
+            if (submitButton) {
+                let currentClass = submitButton.className;
+                let newClass = currentClass.replace("_enabled", "_disabled_loading");
+
+                let cancelClass = cancelButton.className;
+                let newCancelClass = cancelClass.replace("_enabled", "_disabled");
+
+                submitButton.disabled = true;
+                submitButton.className = newClass;
+
+                if (cancelButton) {
+                    cancelButton.disabled = true;
+                    cancelButton.className = newCancelClass;
+                }
+
+                setTimeout(function() {
+                    submitButton.disabled = false;
+                    submitButton.className = currentClass;
+
+                    if (cancelButton) {
+                        cancelButton.disabled = false;
+                        cancelButton.className = cancelClass;
+                    }
+                }, 5000);
+            }
+
+            this.submit();
+        });
+    }
+};
+
+export default formHelper;

data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx

@@ -47,9 +47,13 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
 
   const iconClass = icon ? "_icon" : ""
   const closeIconSize = size === "small" ? "xs" : "sm"
+
+  const filteredProps: FormPillProps = {...props}
+  delete filteredProps.truncate
+
   const css = classnames(
     `pb_form_pill_kit_${color}${iconClass}`,
-    globalProps(props),
+    globalProps(filteredProps),
     className,
     size === 'small' ? 'small' : null,
     textTransform,
@@ -77,6 +81,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
               className="pb_form_pill_text"
               size={4}
               text={name}
+              truncate={props.truncate}
           />
         </>
       )}
@@ -92,6 +97,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
               className="pb_form_pill_text"
               size={4}
               text={name}
+              truncate={props.truncate}
           />
           <Icon
               className="pb_form_pill_icon"
@@ -111,6 +117,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
               className="pb_form_pill_tag"
               size={4}
               text={text}
+              truncate={props.truncate}
           />
         </>
       )}
@@ -119,6 +126,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
             className="pb_form_pill_tag"
             size={4}
             text={text}
+            truncate={props.truncate}
         />
       )}
       <div

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb

@@ -0,0 +1,19 @@
+<%
+  names = [
+    { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
+    { label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
+    { label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
+    { label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
+    { label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
+  ]
+%>
+
+<%= pb_rails("typeahead", props: {
+    html_options: { style: { maxWidth: "240px" }},
+    id: "typeahead-form-pill",
+    is_multi: true,
+    options: names,
+    label: "Names",
+    pills: true,
+    truncate: 1,
+}) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import Typeahead from '../../pb_typeahead/_typeahead'
+
+const names = [
+  { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
+  { label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
+  { label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
+  { label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
+  { label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
+]
+
+const FormPillTruncatedText = (props) => {
+  return (
+    <>
+      <Typeahead
+          htmlOptions={{ style: { maxWidth: "240px" }}}
+          isMulti
+          label="Names"
+          options={names}
+          truncate={1}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default FormPillTruncatedText

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md

@@ -0,0 +1 @@
+For pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.

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

@@ -3,6 +3,7 @@ examples:
   rails:
   - form_pill_user: Form Pill User
   - form_pill_size: Form Pill Size
+  - form_pill_truncated_text: Truncated Text
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
   - form_pill_icon: Form Pill Icon
@@ -11,6 +12,7 @@ examples:
   react:
   - form_pill_user: Form Pill User
   - form_pill_size: Form Pill Size
+  - form_pill_truncated_text: Truncated Text
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
   - form_pill_icon: Form Pill Icon

data/app/pb_kits/playbook/pb_form_pill/docs/index.js

@@ -4,3 +4,4 @@ export { default as FormPillTag } from './_form_pill_tag.jsx'
 export { default as FormPillExample } from './_form_pill_example.jsx'
 export { default as FormPillIcon } from './_form_pill_icon.jsx'
 export { default as FormPillColors } from './_form_pill_colors.jsx'
+export { default as FormPillTruncatedText } from './_form_pill_truncated_text.jsx'

data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.tsx

@@ -1,9 +1,70 @@
-import React from 'react';
+import React, { useState, useEffect } from "react";
+import classnames from "classnames";
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
+import { globalProps } from "../utilities/globalProps";
+import HighchartsReact from "highcharts-react-official";
+import Highcharts from "highcharts/highcharts-gantt";
+
+import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
+import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
+
+type GanttChartProps = {
+  aria?: { [key: string]: string };
+  className?: string;
+  customOptions: Partial<Highcharts.Options>;
+  dark?: boolean;
+  data?: { [key: string]: string };
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
+  id?: string;
+};
+
+const GanttChart = (props: GanttChartProps) => {
+  const {
+    aria = {},
+    className,
+    customOptions = {},
+    dark = false,
+    data = {},
+    htmlOptions = {},
+    id,
+  } = props;
+
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
+  const classes = classnames(
+    buildCss("pb_gantt_chart"),
+    globalProps(props),
+    className
+  );
+
+  const [options, setOptions] = useState<Highcharts.Options | undefined>(customOptions);
+
+  useEffect(() => {
+    setOptions(customOptions);
+  }, [customOptions]);
+
+  const setupTheme = () => {
+    dark
+      ? Highcharts.setOptions(highchartsDarkTheme)
+      : Highcharts.setOptions(highchartsTheme);
+  };
+  setupTheme();
 
-const GanttChart: React.FC = () => {
   return (
     <div>
-      This is a simple div component.
+      <HighchartsReact
+          constructorType={"ganttChart"}
+          containerProps={{
+            className: classnames(globalProps(props), classes),
+            id: id,
+            ...ariaProps,
+            ...dataProps,
+            ...htmlProps,
+          }}
+          highcharts={Highcharts}
+          options={options}
+      />
     </div>
   );
 };

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

@@ -1,10 +1,208 @@
-import React from 'react';
+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";
+import highchartsMore from "highcharts/highcharts-more";
+import solidGauge from "highcharts/modules/solid-gauge";
+import defaultColors from "../tokens/exports/_colors.module.scss";
+import typography from "../tokens/exports/_typography.module.scss";
+
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
+import { globalProps } from "../utilities/globalProps";
+import { GenericObject } from "../types";
+import { merge } from 'lodash'
+
+type GaugeProps = {
+  aria: { [key: string]: string };
+  className?: string;
+  chartData?: { name: string; value: number[] | number }[];
+  customOptions?: Partial<Highcharts.Options>;
+  dark?: boolean;
+  data?: { [key: string]: string };
+  disableAnimation?: boolean;
+  fullCircle?: boolean;
+  height?: string;
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  id?: string;
+  max?: number;
+  min?: number;
+  prefix?: string;
+  showLabels?: boolean;
+  style?: string;
+  suffix?: string;
+  title?: string;
+  tooltipHtml?: string;
+  colors: string[];
+  minorTickInterval?: number;
+  circumference: number[];
+};
+
+const Gauge = ({
+  aria = {},
+  chartData,
+  customOptions = {},
+  dark = false,
+  data = {},
+  disableAnimation = false,
+  fullCircle = false,
+  height = null,
+  htmlOptions = {},
+  id,
+  max = 100,
+  min = 0,
+  prefix = "",
+  showLabels = false,
+  style = "solidgauge",
+  suffix = "",
+  title = "",
+  tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
+    "<b>{point.y}</b>",
+  colors = [],
+  minorTickInterval = null,
+  circumference = fullCircle ? [0, 360] : [-100, 100],
+  ...props
+}: GaugeProps): React.ReactElement => {
+  const ariaProps = buildAriaProps(aria);
+  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({});
+
+  useEffect(() => {
+    const formattedChartData = chartData.map((obj: GenericObject) => {
+      obj.y = obj.value;
+      delete obj.value;
+      return obj;
+    });
+
+    const staticOptions = {
+      chart: {
+        events: {
+          load() {
+            setTimeout(this.reflow.bind(this), 0);
+          },
+        },
+        type: style,
+        height: height,
+      },
+      title: {
+        text: title,
+      },
+      yAxis: {
+        min: min,
+        max: max,
+        lineWidth: 0,
+        tickWidth: 0,
+        minorTickInterval: minorTickInterval,
+        tickAmount: 2,
+        tickPositions: [min, max],
+        labels: {
+          y: 26,
+          enabled: showLabels,
+        },
+      },
+      credits: false,
+      series: [
+        {
+          data: formattedChartData,
+        },
+      ],
+      pane: {
+        center: ["50%", "50%"],
+        size: "90%",
+        startAngle: circumference[0],
+        endAngle: circumference[1],
+        background: {
+          borderWidth: 20,
+          innerRadius: "90%",
+          outerRadius: "90%",
+          shape: "arc",
+          className: "gauge-pane",
+        },
+      },
+      colors:
+        colors !== undefined && colors.length > 0
+          ? mapColors(colors)
+          : highchartsTheme.colors,
+      plotOptions: {
+        series: {
+          animation: !disableAnimation,
+        },
+        solidgauge: {
+          borderColor:
+            colors !== undefined && colors.length === 1
+              ? mapColors(colors).join()
+              : highchartsTheme.colors[0],
+          borderWidth: 20,
+          radius: 90,
+          innerRadius: "90%",
+          dataLabels: {
+            borderWidth: 0,
+            color: defaultColors.text_lt_default,
+            enabled: true,
+            format:
+              `<span class="prefix">${prefix}</span>` +
+              '<span class="fix">{y:,f}</span>' +
+              `<span class="suffix">${suffix}</span>`,
+            style: {
+              fontFamily: typography.font_family_base,
+              fontWeight: typography.regular,
+              fontSize: typography.heading_2,
+            },
+            y: -26,
+          },
+        },
+      },
+    };
+
+    setOptions(merge(staticOptions, customOptions));
+
+    if (document.querySelector(".prefix")) {
+      document.querySelectorAll(".prefix").forEach((prefix) => {
+        prefix.setAttribute("y", "28");
+      });
+      document
+        .querySelectorAll(".fix")
+        .forEach((fix) => fix.setAttribute("y", "38"));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [chartData]);
 
-const Gauge: React.FC = () => {
   return (
-    <div>
-      This is a simple div component.
-    </div>
+    <HighchartsReact
+        containerProps={{
+        className: classnames(css, globalProps(props)),
+        id: id,
+        ...ariaProps,
+        ...dataProps,
+        ...htmlProps,
+      }}
+        highcharts={Highcharts}
+        options={options}
+    />
   );
 };
 

data/app/pb_kits/playbook/pb_gauge/gauge.test.js

@@ -17,7 +17,7 @@ afterEach(() => {
 
 const testId = 'gauge1';
 
-test.skip('uses exact classname', () => {
+test('uses exact classname', () => {
   const data = [
     { name: 'Name', value: 45 },
   ]

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

@@ -1,10 +1,159 @@
-import React from 'react';
+import React, { useState, useEffect } from "react";
+import classnames from "classnames";
+import { globalProps } from "../utilities/globalProps";
+import { buildAriaProps, buildDataProps, buildHtmlProps } 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";
+import { merge } from 'lodash'
+
+type LineGraphProps = {
+  align?: "left" | "right" | "center";
+  axisTitle?: string;
+  dark?: boolean;
+  xAxisCategories: [];
+  yAxisMin: number;
+  yAxisMax: number;
+  className?: string;
+  chartData: {
+    name: string;
+    data: number[];
+  }[];
+  customOptions?: Partial<Highcharts.Options>;
+  gradient?: boolean;
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  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 = ({
+  aria = {},
+  data = {},
+  align = "center",
+  className = "pb_bar_graph",
+  customOptions = {},
+  dark = false,
+  gradient = false,
+  type = "line",
+  htmlOptions = {},
+  id,
+  legend = false,
+  toggleLegendClick = true,
+  layout = "horizontal",
+  verticalAlign = "bottom",
+  x = 0,
+  y = 0,
+  axisTitle,
+  xAxisCategories,
+  yAxisMin,
+  yAxisMax,
+  chartData,
+  pointStart,
+  subTitle,
+  title,
+  height,
+  colors = [],
+  ...props
+}: LineGraphProps) => {
+  
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
+
+  const setupTheme = () => {
+    dark
+      ? Highcharts.setOptions(highchartsDarkTheme)
+      : Highcharts.setOptions(highchartsTheme);
+  };
+  setupTheme();
+
+  const staticOptions = {
+    title: {
+      text: title,
+    },
+    chart: {
+      height: height,
+      type: type,
+    },
+    subtitle: {
+      text: subTitle,
+    },
+    yAxis: {
+      min: yAxisMin,
+      max: yAxisMax,
+      title: {
+        text: axisTitle,
+      },
+    },
+    xAxis: {
+      categories: xAxisCategories,
+    },
+    legend: {
+      enabled: legend,
+      align: align,
+      verticalAlign: verticalAlign,
+      layout: layout,
+      x: x,
+      y: y,
+    },
+    colors:
+      colors !== undefined && colors.length > 0
+        ? mapColors(colors)
+        : highchartsTheme.colors,
+    plotOptions: {
+      series: {
+        pointStart: pointStart,
+        events: {},
+        dataLabels: {
+          enabled: false,
+        },
+      },
+    },
+    series: chartData,
+    credits: false,
+  };
+
+  if (!toggleLegendClick) {
+    staticOptions.plotOptions.series.events = { legendItemClick: () => false };
+  }
+
+  const filteredProps: any = {...props};
+ delete filteredProps.verticalAlign;
+
+  const [options, setOptions] = useState({});
+
+  useEffect(() => {
+    setOptions(merge(staticOptions, customOptions));
+  }, [chartData]);
 
-const LineGraph: React.FC = () => {
   return (
-    <div>
-      This is a simple div component.
-    </div>
+    <HighchartsReact
+        containerProps={{
+        className: classnames(globalProps(filteredProps), className),
+        id: id,
+        ...ariaProps,
+        ...dataProps,
+        ...htmlProps
+      }}
+        highcharts={Highcharts}
+        options={options}
+    />
   );
 };
 

data/app/pb_kits/playbook/pb_line_graph/lineGraph.test.js

@@ -17,7 +17,7 @@ afterEach(() => {
 
 const testId = 'linechart1';
 
-test.skip('uses exact classname', () => {
+test('uses exact classname', () => {
   const data = [{
     name: 'Installation',
     data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],