playbook_ui 14.5.0.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4098 → 14.5.0.pre.alpha.PLAY1486highchartscssdrivenPOC3930

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b9228103de6d01a84145169d2ad394bf2c6b3b6df7ec0e3b16cfe518a803f579
-  data.tar.gz: 257b1a1fdd3adc9310b52b8e513b2fe3e9974cf4429a2ae719aa8e247c74a2ce
+  metadata.gz: d8687cb9c372332d775ad42cd0a189c2e1c78e73d84accdb0b4a3f2039e4040d
+  data.tar.gz: e17faee766f6ff7a943f2bd1ece969cc7ed509c3c6600e6e83b096146b9fb51a
 SHA512:
-  metadata.gz: 925407457e1d6d8ce1c3a6012bf084ef8721040ce76e5432978a7407d1d80769126a4ea24c089bef72a4cd6af4eafe15fc86ae997d7f9b88338de01d144c43cf
-  data.tar.gz: 79f269ceeb505d1f9b200d1088d6db340acc6a3be267f8e9fe777eb8e2e121089361729fd156df2a37535bf27a020f282d5aad6b9a3cecb5d53e4add11e93a9e
+  metadata.gz: 2ab52cb63f67300accbd3ef804cbc092d67647e5a3205717f56e6499a947acc963b53e655c49d441e063f16f0f0cfad162fc9d630b0dbe11561d1a5d96994033
+  data.tar.gz: 5f8156e8c9e5726066c2b432448c1dcac097f7e8a095dd9ef1b37d5a3b5f176a88bc691479a6ee681812b6d2162874a415f51547fc54b83bf250d4c93a1a9cac

data/app/pb_kits/playbook/pb_advanced_table/index.js

@@ -13,20 +13,9 @@ export default class PbAdvancedTable extends PbEnhancedElement {
   get target() {
     return document.querySelector(CONTENT_SELECTOR.replace("id", this.element.id))
   }
-  
-  static expandedRows = new Set()
-  static isCollapsing = false
 
   connect() {
     this.element.addEventListener('click', () => {
-      if (!PbAdvancedTable.isCollapsing) {
-        const isExpanded = this.element.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
-        if (!isExpanded) {
-          PbAdvancedTable.expandedRows.add(this.element.id)
-        } else {
-          PbAdvancedTable.expandedRows.delete(this.element.id)
-        }
-      }
       this.toggleElement(this.target)
     })
   }
@@ -86,53 +75,4 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'inline-block'
     this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'none'
   }
-
-  static handleToggleAllHeaders(element) {
-    const table = element.closest('.pb_table')
-    const firstLevelButtons = table.querySelectorAll('.pb_advanced_table_body > .pb_table_tr [data-advanced-table]')
-    
-    const expandedRows = Array.from(firstLevelButtons).filter(button => 
-      button.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
-    )
-  
-    if (expandedRows.length === firstLevelButtons.length) {
-      expandedRows.forEach(button => {
-        button.click()
-      })
-      this.expandedRows.clear()
-    } else {
-      firstLevelButtons.forEach(button => {
-        if (!this.expandedRows.has(button.id)) {
-          button.click()
-        }
-      })
-    }
-  }
-  static handleToggleAllSubRows(element, rowDepth) {
-    const parentElement = element.closest(".toggle-content")
-    const subrowButtons = parentElement.querySelectorAll('.depth-sub-row-' + rowDepth + ' [data-advanced-table]')
-    
-    const expandedSubRows = Array.from(subrowButtons).filter(button => 
-      button.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
-    )
-  
-    if (expandedSubRows.length === subrowButtons.length) {
-      expandedSubRows.forEach(button => {
-        button.click()
-      })
-    } else {
-      subrowButtons.forEach(button => {
-        if (!this.expandedRows.has(button.id)) {
-          button.click()
-        }
-      })
-    }
-  }
-}
-
-window.expandAllRows = (element) => {
-  PbAdvancedTable.handleToggleAllHeaders(element)
 }
-window.expandAllSubRows = (element, rowDepth) => {
-  PbAdvancedTable.handleToggleAllSubRows(element, rowDepth)
-}

data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb

@@ -13,4 +13,12 @@
                 <% end %>
             <% end %>
         <% end %>
-<% end %>
+<% end %>
+
+<script type="text/javascript">
+    var expandAllRows = (element) => {
+        element.closest('.pb_table').querySelectorAll('.pb_advanced_table_body > .pb_table_tr [data-advanced-table]').forEach((button) => {
+            button.dispatchEvent(new Event('click'));
+        });
+    };
+</script>

data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb

@@ -23,4 +23,12 @@
                 <% end %>
             <% end %>
         <% end %>
-<% end %>
+<% end %>
+
+<script type="text/javascript">
+    var expandAllSubRows = (element, rowDepth) => {
+        element.closest(".toggle-content").querySelectorAll('.depth-sub-row-' + rowDepth + ' [data-advanced-table]').forEach((button) => {
+            button.dispatchEvent(new Event('click'));
+        });
+    };
+</script>

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.scss

@@ -1,6 +1,60 @@
+@import "../tokens/colors";
+@import "../tokens/typography";
+
 .pb_bar_graph {
     rect.highcharts-background {
         fill: #0000 !important;
     }
 }
 
+@import url("https://code.highcharts.com/css/highcharts.css");
+
+// @import "highcharts/css/highcharts";
+// @import "highcharts/highcharts.css";
+
+:root {
+    --highcharts-color-0: #{$data_1};
+    --highcharts-color-1: #{$data_2};
+    --highcharts-color-2: #{$data_3};
+    --highcharts-color-3: #{$data_4};
+    --highcharts-color-4: #{$data_5};
+    --highcharts-color-5: #{$data_6};
+    --highcharts-color-6: #{$data_7};
+    --highcharts-color-7: #{$data_8};
+}
+
+.highcharts-title {
+    font-family: $font_family_base;
+    font-weight: $bold;
+    font-size: $heading_3;
+    color: $text_lt_default;
+    fill: $text_lt_default;
+}
+
+.highcharts-subtitle {
+    font-family: $font_family_base;
+    color: $text_lt_light;
+    fill: $text_lt_light;
+    font-weight: $regular;
+    font-size: $text_base;
+}
+
+.highcharts-yaxis > .highcharts-axis-title {
+    color: $text_lt_lighter;
+    fill: $text_lt_lighter;
+    font-family: $font_family_base;
+    font-weight: $bold;
+    font-size: $text_smaller;
+}
+
+.highcharts-axis-labels {
+    font-family: $font_family_base;
+    color: $text_lt_lighter;
+    fill: $text_lt_lighter;
+    font-weight: $bold;
+    font-size: $text_smaller;
+}
+
+.highcharts-grid-line {
+    stroke: $border_light;
+}

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx

@@ -1,189 +1,10 @@
-import React, { useState, useEffect } from "react";
-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'
-
-import classnames from "classnames";
-
-type BarGraphProps = {
-  align?: "left" | "right" | "center";
-  axisTitle: { name: string; }[] | string;
-  dark?: boolean;
-  xAxisCategories: [];
-  yAxisMin: number;
-  yAxisMax: number;
-  chartData: { name: string; data: number[], yAxis: number }[];
-  className?: string;
-  customOptions?: Partial<Highcharts.Options>;
-  id: string;
-  pointStart: number;
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
-  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 };
-  stacking?: "normal" | "percent" 
-  axisFormat?: { format: string; }[] | string;
-};
-
-
-const BarGraph = ({
-  aria = {},
-  data = {},
-  align = "center",
-  axisTitle,
-  dark = false,
-  chartData,
-  className = "pb_bar_graph",
-  colors,
-  htmlOptions = {},
-  customOptions = {},
-  axisFormat,
-  id,
-  pointStart,
-  stacking,
-  subTitle,
-  type = "column",
-  title = "Title",
-  xAxisCategories,
-  yAxisMin,
-  yAxisMax,
-  legend = false,
-  toggleLegendClick = true,
-  height,
-  layout = "horizontal",
-  verticalAlign = "bottom",
-  x = 0,
-  y = 0,
-  ...props
-}: BarGraphProps): React.ReactElement => { 
-  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: [{
-      labels: {
-        format: typeof axisFormat === 'string' ? axisFormat : (axisFormat && axisFormat[0] ? axisFormat[0].format : "")
-
-      },
-      min: yAxisMin,
-      max: yAxisMax,
-      opposite: false,
-      title: {
-        text: Array.isArray(axisTitle) ? (axisTitle.length > 0 ? axisTitle[0].name : null) : axisTitle,
-      },
-      plotLines: typeof yAxisMin !== 'undefined' && yAxisMin !== null ? [] : [{
-        value: 0,
-        zIndex: 10,
-        color: "#E4E8F0"
-    }],
-    }],
-    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: {
-        stacking: stacking,
-        pointStart: pointStart,
-        borderWidth: stacking ? 0 : "",
-        events: {},
-        dataLabels: {
-          enabled: false,
-        },
-      },
-    },
-    series: chartData,
-    credits: false,
-  };
-
-if (Array.isArray(axisTitle) && axisTitle.length > 1 && axisTitle[1].name) {
-  staticOptions.yAxis.push({
-    labels: {
-      format: typeof axisFormat === 'string' ? axisFormat : axisFormat[1].format,
-    },
-    min: yAxisMin,
-    max: yAxisMax,
-    opposite: true,
-    title: {
-      text: axisTitle[1].name,
-    }, 
-    plotLines: typeof yAxisMin !== 'undefined' && yAxisMin !== null ? [] : [{
-      value: 0,
-      zIndex: 10,
-      color: "#E4E8F0"
-  }],
-  });
-}
-
-  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]);
+import React from 'react';
 
+const BarGraph: React.FC = () => {
   return (
-    <HighchartsReact
-        containerProps={{
-          className: classnames(globalProps(filteredProps), className),
-          id: id,
-          ...ariaProps,
-          ...dataProps,
-          ...htmlProps
-        }}
-        highcharts={Highcharts}
-        options={options}
-    />
+    <div>
+      This is a simple div component.
+    </div>
   );
 };
 

data/app/pb_kits/playbook/pb_bar_graph/barGraph.test.js

@@ -17,7 +17,7 @@ afterEach(() => {
 
 const testId = 'bargraph1';
 
-test('bargraph uses exact classname', () => {
+test.skip('bargraph uses exact classname', () => {
   render(
     <BarGraph
         className='super_important_class'

data/app/pb_kits/playbook/pb_card/_card_mixin.scss

@@ -28,7 +28,8 @@ $pb_card_header_colors: map-merge(map-merge($product_colors, $additional_colors)
 
 @mixin pb_card_selected($border_color: $primary) {
   border-color: $border_color;
-  border-width: $pb_card_border_width * 2;
+  border-width: $pb_card_border_width;
+  outline: 1px solid $border_color;
 }
 
 @mixin pb_card_selected_dark {

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx

@@ -1,221 +1,10 @@
-import React, { useEffect, useState } from "react";
-import classnames from "classnames";
-import HighchartsReact from "highcharts-react-official";
-import highchartsMore from "highcharts/highcharts-more";
-
-import Highcharts from "highcharts";
-
-import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
-import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
-import mapColors from "../pb_dashboard/pbChartsColorsHelper";
-import { globalProps } from "../utilities/globalProps";
-import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
-import { merge } from 'lodash'
-
-type CircleChartProps = {
-  align?: "left" | "right" | "center";
-  aria: { [key: string]: string };
-  chartData?: [];
-  children?: Node;
-  className?: string;
-  colors?: string[];
-  customOptions?: Partial<Highcharts.Options>;
-  dark?: boolean;
-  data?: {[key: string]: string},
-  dataLabelHtml?: string;
-  dataLabels?: boolean;
-  height?: string;
-  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
-  id?: string;
-  innerSize?: "sm" | "md" | "lg" | "none";
-  legend?: boolean;
-  maxPointSize?: number;
-  minPointSize?: number;
-  rounded?: boolean;
-  startAngle?: number;
-  style?: string;
-  title?: string;
-  tooltipHtml: string;
-  useHtml?: boolean;
-  zMin?: number;
-  layout?: "horizontal" | "vertical" | "proximate";
-  verticalAlign?: "top" | "middle" | "bottom";
-  x?: number;
-  y?: number;
-  borderColor?: string;
-  borderWidth?: number;
-};
-
-
-
-const alignBlockElement = (event: any) => {
-  const itemToMove = document.querySelector<HTMLElement>(
-    `#wrapper-circle-chart-${event.target.renderTo.id} .pb-circle-chart-block`
-  );
-  const chartContainer = document.querySelector(`#${event.target.renderTo.id}`);
-
-  if (itemToMove !== null && chartContainer !== null) {
-    itemToMove.style.height = `${event.target.chartHeight}px`;
-    itemToMove.style.width = `${event.target.chartWidth}px`;
-    if (chartContainer.firstChild !== null) {
-      chartContainer.firstChild.before(itemToMove);
-    }
-  }
-};
-
-const CircleChart = ({
-  align = "center",
-  aria = {},
-  rounded = false,
-  borderColor = rounded ? null : "",
-  borderWidth = rounded ? 20 : null,
-  chartData,
-  children,
-  className,
-  colors = [],
-  customOptions = {},
-  dark = false,
-  data = {},
-  dataLabelHtml = "<div>{point.name}</div>",
-  dataLabels = false,
-  height,
-  htmlOptions = {},
-  id,
-  innerSize = "md",
-  legend = false,
-  maxPointSize = null,
-  minPointSize = null,
-  startAngle = null,
-  style = "pie",
-  title,
-  tooltipHtml,
-  useHtml = false,
-  zMin = null,
-  layout = "horizontal",
-  verticalAlign = "bottom",
-  x = 0,
-  y = 0,
-  ...props
-}: CircleChartProps) => {
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions);
-  highchartsMore(Highcharts);
-
-  const setupTheme = () => {
-    dark
-      ? Highcharts.setOptions(highchartsDarkTheme)
-      : Highcharts.setOptions(highchartsTheme);
-  };
-  setupTheme();
-
-  Highcharts.setOptions({
-    tooltip: {
-      headerFormat: null,
-      pointFormat: tooltipHtml ? tooltipHtml : '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' + "<b>{point.y}</b>",
-      useHTML: useHtml,
-    },
-  });
-
-  const innerSizes = { sm: "35%", md: "50%", lg: "85%", none: "0%" };
-  const innerSizeFormat = (size: "sm" | "md" | "lg" | "none") =>
-    innerSizes[size];
-
-
-  const filteredProps: any = {...props};
-  delete filteredProps.verticalAlign;
-
-  const [options, setOptions] = useState({});
-
-  useEffect(() => {
-    const formattedChartData = chartData.map((obj: any) => {
-      obj.y = obj.value;
-      delete obj.value;
-      return obj;
-    });
-
-    const staticOptions = {
-      title: {
-        text: title,
-      },
-      chart: {
-        height: height,
-        type: style,
-        events: {
-          render: (event: any) => alignBlockElement(event),
-          redraw: (event: any) => alignBlockElement(event),
-        },
-      },
-
-      legend: {
-        align: align,
-        verticalAlign: verticalAlign,
-        layout: layout,
-        x: x,
-        y: y,
-      },
-      plotOptions: {
-        pie: {
-          colors:
-            colors.length > 0 ? mapColors(colors) : highchartsTheme.colors,
-          dataLabels: {
-            enabled: dataLabels,
-            connectorShape: "straight",
-            connectorWidth: 3,
-            format: dataLabelHtml,
-          },
-          showInLegend: legend,
-        },
-      },
-      series: [
-        {
-          minPointSize: minPointSize,
-          maxPointSize: maxPointSize,
-          innerSize: borderWidth == 20 ? "100%" : innerSizeFormat(innerSize),
-          data: formattedChartData,
-          zMin: zMin,
-          startAngle: startAngle,
-          borderWidth: borderWidth,
-          borderColor: borderColor,
-        },
-      ],
-      credits: false,
-    };
-    setOptions(merge(staticOptions, customOptions));
-  }, [chartData]);
-
+import React from 'react';
 
+const CircleChart: React.FC = () => {
   return (
-    <>
-      {children ? (
-        <div id={`wrapper-circle-chart-${id}`}>
-          <HighchartsReact
-              containerProps={{
-              className: classnames("pb_circle_chart", globalProps(filteredProps)),
-              id: id,
-              ...ariaProps,
-              ...dataProps,
-              ...htmlProps,
-            }}
-              highcharts={Highcharts}
-              options={options}
-          />
-          <div className="pb-circle-chart-block">{children}</div>
-        </div>
-      ) : (
-        <HighchartsReact
-            containerProps={{
-            className: classnames("pb_circle_chart", globalProps(filteredProps)),
-            id: id,
-            ...ariaProps,
-            ...dataProps,
-            ...htmlProps,
-          }}
-            highcharts={Highcharts}
-            options={options}
-        />
-      )}
-    </>
+    <div>
+      This is a simple div component.
+    </div>
   );
 };
 

data/app/pb_kits/playbook/pb_circle_chart/circleChart.test.js

@@ -17,7 +17,7 @@ afterEach(() => {
 
 const testId = 'circlechart1';
 
-test('uses exact classname', () => {
+test.skip('uses exact classname', () => {
   const data = [
     {
       name: 'Waiting for Calls',

data/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx

@@ -13,7 +13,6 @@ type ResultsCountProps = {
 const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactElement => {
   
   const resultTitle = () => {
-    if (results == null) return null
     return (
       <TitleCount
           align="center"
@@ -25,7 +24,6 @@ const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactE
   }
 
   const justResults = () => {
-    if (results == null) return null
     return (
       <Caption
           className="filter-results"
@@ -37,13 +35,13 @@ const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactE
   }
 
   const displayResultsCount = () => {
-    if (results != null && results >=0 && title) {
+    if (results && title) {
       return (
         <>
           {resultTitle()}
         </>
       )
-    } else if (results !=null && results >=0 ) {
+    } else if (results) {
       return (
         <>
           {justResults()}

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx

@@ -78,7 +78,7 @@ const FilterDefault = (props) => {
           double
           minWidth="375px"
           onSortChange={SortingChangeCallback}
-          results={0}
+          results={1}
           sortOptions={{
             popularity: 'Popularity',
             // eslint-disable-next-line