playbook_ui 15.7.0.pre.alpha.play270013399 → 15.7.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4c02da30ab73a7eeeb515a273f506b4323d47f4c34fc2c9253cabb65f9bc54eb
-  data.tar.gz: d1f34bb50e3ffcfbd0db6ad6a22dc9e4d4d78c59b578aaa93ad656ad47dfea9f
+  metadata.gz: fcd203ca2c6c310aa95e818199272a8730eba2c3cdc237405bf8b4426678be78
+  data.tar.gz: fb7eae7c6e74ceec237f663fd4c3f7706effff2009b79edbc9d6372319aa2b64
 SHA512:
-  metadata.gz: 64101d5a729f7b406fe41a415e62e3c812a518ae28fa991c61fd6fa5c156caeb5112b0ac110f632c5d18b6dc730f5ee2900a30c1170b4c04401ff8672421e65c
-  data.tar.gz: fbf4bd496307fe8ea1b49ab48ecaa3bc7aa7368283003fa8e88b244cc406ccc47fc27a89a5cf309f98c932bab583e04e91de77652bca23c1d354ca018fba9dbb
+  metadata.gz: 9bda1d76401b97c07eeeccb14e887f02b08a8e69ab256021756e7b4ad6488797d8a3523eaad710782b1c29b8727a5017f1926cbdd7b800a791dca57ba9273ea7
+  data.tar.gz: 12dfb9cd054c39b94936fdd71de6d2a92e9c920121fbf4f8a9bdc39d871ef19e7608063ac306c67577776c3edaab974d78c66ace6af6076b577f6bec97d531ac

data/app/pb_kits/playbook/_playbook.scss

@@ -1,7 +1,9 @@
+
 @import 'pb_advanced_table/advanced_table';
 @import 'pb_avatar/avatar';
 @import 'pb_background/background';
 @import 'pb_badge/badge';
+@import 'pb_bar_graph/bar_graph';
 @import 'pb_body/body';
 @import 'pb_bread_crumbs/bread_crumbs';
 @import 'pb_button/button';
@@ -9,6 +11,7 @@
 @import 'pb_caption/caption';
 @import 'pb_card/card';
 @import 'pb_checkbox/checkbox';
+@import 'pb_circle_chart/circle_chart';
 @import 'pb_circle_icon_button/circle_icon_button';
 @import 'pb_collapsible/collapsible';
 @import 'pb_contact/contact';
@@ -36,6 +39,7 @@
 @import 'pb_form/form';
 @import 'pb_form_group/form_group';
 @import 'pb_form_pill/form_pill';
+@import 'pb_gauge/gauge';
 @import 'pb_hashtag/hashtag';
 @import 'pb_highlight/highlight';
 @import 'pb_home_address_street/home_address_street';
@@ -50,6 +54,7 @@
 @import 'pb_layout/layout';
 @import 'pb_legend/legend';
 @import 'pb_lightbox/lightbox';
+@import 'pb_line_graph/line_graph';
 @import 'pb_link/link';
 @import 'pb_list/list';
 @import 'pb_loading_inline/loading_inline';
@@ -93,7 +98,6 @@
 @import 'pb_text_input/text_input';
 @import 'pb_textarea/textarea';
 @import 'pb_time/time';
-@import 'pb_time_picker/time_picker';
 @import 'pb_time_range_inline/time_range_inline';
 @import 'pb_time_stacked/time_stacked';
 @import 'pb_timeline/timeline';

data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx

@@ -63,11 +63,10 @@ const TableCellRenderer = ({
 
         const { column } = cell;
 
-        // Find the "owning" colDefinition by accessor. Needed for multi column logic
+        // Find the “owning” colDefinition by accessor. Needed for multi column logic
         const colDef = findColumnDefByAccessor(columnDefinitions ?? [], column.id)
         const cellAlignment = colDef?.columnStyling?.cellAlignment ?? "right"
         const cellFontColor = colDef?.columnStyling?.fontColor
-        const cellBackgroundColor = colDef?.columnStyling?.cellBackgroundColor
         const paddingValue = colDef?.columnStyling?.cellPadding ?? customRowStyle?.cellPadding
         const paddingClass = paddingValue ? `p_${paddingValue}` : undefined
 
@@ -89,7 +88,7 @@ const TableCellRenderer = ({
                     ? '180px'
                     : `${column.getStart("left")}px`
                   : undefined,
-                  backgroundColor: cellBackgroundColor || (i === 0 && customRowStyle?.backgroundColor),
+                  backgroundColor: i === 0 && customRowStyle?.backgroundColor,
                   color: cellFontColor || customRowStyle?.fontColor,
             }}
           >

data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx

@@ -90,8 +90,6 @@ export const TableHeaderCell = ({
    : undefined
 
  const headerAlignment =   colDef?.columnStyling?.headerAlignment ?? colDef?.columnStyling?.headerAligment
- const headerBackgroundColor = colDef?.columnStyling?.headerBackgroundColor
- const headerFontColor = colDef?.columnStyling?.headerFontColor
 
   const isLeafColumn =
   header?.column.getLeafColumns().length === 1 &&
@@ -196,8 +194,6 @@ const isToggleExpansionEnabled =
         id={cellId}
         key={`${header?.id}-header`}
         style={{
-          backgroundColor: headerBackgroundColor,
-          color: headerFontColor,
           left: isPinnedLeft
             ? header?.index === 1 //Accounting for set min-width for first column
               ? '180px'

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -888,98 +888,3 @@ test("Sort icon renders with enableSort on individual columns", () => {
   expect(sortButton).toBeInTheDocument();
 });
 
-test("columnStyling.backgroundColor works as excpected", () => {
-  const styledColumnDefs = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      columnStyling: { 
-        cellBackgroundColor: colors.error_subtle,
-      },
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-  ];
-
-  render(
-    <AdvancedTable
-        columnDefinitions={styledColumnDefs}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  );
-
-  const firstEnrollmentCell = screen.getAllByText("20")[0].closest("td");
-  expect(firstEnrollmentCell).toHaveStyle({ backgroundColor: colors.error_subtle });
-});
-
-test("columnStyling.headerBackgroundColor works as excpected", () => {
-  const styledColumnDefs = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      columnStyling: { 
-        headerBackgroundColor: colors.error_subtle,
-      },
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-  ];
-
-  render(
-    <AdvancedTable
-        columnDefinitions={styledColumnDefs}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  );
-
-  const firstEnrollmentHeader = screen.getAllByText("New Enrollments")[0].closest("th");
-  expect(firstEnrollmentHeader).toHaveStyle({ backgroundColor: colors.error_subtle });
-});
-
-test("columnStyling.headerFontColor works as excpected", () => {
-  const styledColumnDefs = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      columnStyling: { 
-        headerFontColor: colors.white,
-      },
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-  ];
-
-  render(
-    <AdvancedTable
-        columnDefinitions={styledColumnDefs}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  );
-
-  const firstEnrollmentHeader = screen.getAllByText("New Enrollments")[0].closest("th");
-  expect(firstEnrollmentHeader).toHaveStyle({ color: colors.white });
-});

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.html.erb

@@ -8,26 +8,16 @@
       accessor: "newEnrollments",
       label: "New Enrollments",
       column_styling: { 
-        cell_background_color: "error_subtle",
-        header_background_color: "error_subtle"
+        cell_background_color: ->(row) { row[:newEnrollments].to_i > 20 ? "success_secondary" : "warning_secondary" }
       }
     },
     {
       accessor: "scheduledMeetings",
       label: "Scheduled Meetings",
-      column_styling: { 
-        cell_background_color: "info_subtle",
-      }
     },
     {
       accessor: "attendanceRate",
       label: "Attendance Rate",
-      column_styling: { 
-        cell_background_color: "info",
-        header_background_color: "info",
-        header_font_color: "white",
-        font_color: "white"
-      }
     },
     {
       accessor: "completedClasses",
@@ -36,6 +26,10 @@
     {
       accessor: "classCompletionRate",
       label: "Class Completion Rate",
+      column_styling: { 
+        cell_background_color: "category_1",
+        font_color: "white"
+      }
     },
     {
       accessor: "graduatedStudents",

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.md

@@ -1,7 +1 @@
-`column_styling` can also be used to control the background color on all cells in a given column. Use the following key/values pairs to achieve this:
-
-1)  `cell_background_color`:  use this to control the background color of all cells in the given column
-2) `font_color`: use this to control font color for all cells in the given column if needed, for example if using a darker background color
-3) `header_background_color`: use this to control the background color of the column header
-4) `header_font_color`: use this to control font color for the header in the given column if needed, for example if using a darker background color.
-
+`column_styling` can also be used to control the background color on all cells in a given column via the use of the `cell_background_color` key/value pair. Use `cell_background_color` to achieve custom background colors for individual cells as seen here. Use `font_color` to achieve better contrast between cell content and background for darker backgrounds.

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

@@ -26,8 +26,7 @@ examples:
   - advanced_table_column_styling_rails: Column Styling
   - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
   - advanced_table_padding_control_rails: Padding Control using Column Styling
-  - advanced_table_background_control_rails: Column Styling Background Color
-  - advanced_table_background_colors_rails: Column Styling Individual Cell Background Color
+  - advanced_table_background_control_rails: Background Control using Column Styling
   - advanced_table_column_border_color_rails: Column Group Border Color
 
 
@@ -76,8 +75,6 @@ examples:
   - advanced_table_padding_control_per_row: Padding Control using Row Styling
   - advanced_table_column_styling: Column Styling
   - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
-  - advanced_table_column_styling_background: Column Styling Background Color
-  - advanced_table_column_styling_background_multi: Column Styling Background Color with Multiple Headers
   - advanced_table_padding_control: Padding Control using Column Styling
   - advanced_table_column_border_color: Column Group Border Color
   - advanced_table_fullscreen: Fullscreen

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

@@ -45,6 +45,4 @@ export { default as AdvancedTableWithCustomHeaderMultiHeader } from './_advanced
 export { default as AdvancedTableSortPerColumn } from './_advanced_table_sort_per_column.jsx'
 export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced_table_sort_per_column_for_multi_column.jsx'
 export { default as AdvancedTablePaddingControl } from './_advanced_table_padding_control.jsx'
-export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
-export { default as AdvancedTableColumnStylingBackground } from './_advanced_table_column_styling_background.jsx'
-export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
+export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'

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

@@ -5,8 +5,8 @@
         <%= object.render_select_all_header %>
       <% end %>
       <% header_row.each_with_index do |cell, cell_index| %>
-        <% header_component = object.header_component_info(cell, cell_index, row_index) %>
-        <%= pb_rails(header_component[:name], props: header_component[:props]) do %>
+        <% header_id = cell[:accessor].present? ? cell[:accessor] : "header_#{row_index}_#{cell_index}" %>
+        <%= pb_rails("table/table_header", props: { id: header_id, colspan: cell[:colspan], classname: [object.th_classname(is_first_column: cell_index.zero?), ('last-header-cell' if cell[:is_last_in_group] && cell_index != 0)].compact.join(' '), sort_menu: cell[:accessor] ? cell[:sort_menu] : nil }) do %>
           <%= pb_rails("flex", props: { align: "center", justify: cell_index.zero? ? "start" : row_index === header_rows.size - 1 ? "end" : "center", text_align: (cell[:header_alignment] || "end") }) do %>
             <% if cell_index.zero? && row_index === header_rows.size - 1 %>
               <% if object.selectable_rows && object.enable_toggle_expansion != "none" %>

data/app/pb_kits/playbook/pb_advanced_table/table_header.rb

@@ -119,59 +119,6 @@ module Playbook
         end
       end
 
-      # Get header background color from column styling
-      def header_background_color(cell)
-        original_def = find_original_column_def_for_cell(cell)
-        return nil unless original_def
-
-        original_def.dig(:column_styling, :header_background_color)
-      end
-
-      # Get header font color from column styling
-      def header_font_color(cell)
-        original_def = find_original_column_def_for_cell(cell)
-        return nil unless original_def
-
-        original_def.dig(:column_styling, :header_font_color)
-      end
-
-      # Check if header has custom background color
-      def has_custom_header_background_color?(cell)
-        cell[:header_background_color].present?
-      end
-
-      # Returns component info for header cell (uses background kit if custom bg color)
-      def header_component_info(cell, cell_index, row_index)
-        header_id = cell[:accessor].present? ? cell[:accessor] : "header_#{row_index}_#{cell_index}"
-        classname = [th_classname(is_first_column: cell_index.zero?), ("last-header-cell" if cell[:is_last_in_group] && cell_index != 0)].compact.join(" ")
-
-        if has_custom_header_background_color?(cell)
-          component_name = "background"
-          component_props = {
-            background_color: cell[:header_background_color],
-            tag: "th",
-            classname: classname,
-          }
-          component_props[:html_options] = {
-            id: header_id,
-            colspan: cell[:colspan],
-            style: { color: cell[:header_font_color] },
-          }
-          component_props[:html_options][:style].delete(:color) unless cell[:header_font_color].present?
-        else
-          component_name = "table/table_header"
-          component_props = {
-            id: header_id,
-            colspan: cell[:colspan],
-            classname: classname,
-            sort_menu: cell[:accessor] ? cell[:sort_menu] : nil,
-          }
-          component_props[:html_options] = { style: { color: cell[:header_font_color] } } if cell[:header_font_color].present?
-        end
-
-        { name: component_name, props: component_props }
-      end
-
     private
 
       # Find the original column definition for a cell
@@ -216,8 +163,6 @@ module Playbook
           else
             raw_styling = col[:column_styling] || {}
             header_alignment = raw_styling[:header_alignment]
-            header_background_color = raw_styling[:header_background_color]
-            header_font_color = raw_styling[:header_font_color]
 
             colspan = 1
             cell_hash = {
@@ -227,8 +172,6 @@ module Playbook
               sort_menu: col[:sort_menu],
               is_last_in_group: is_last && current_depth.positive?,
               header_alignment: header_alignment,
-              header_background_color: header_background_color,
-              header_font_color: header_font_color,
             }
             cell_hash[:id] = col[:id] if col[:id].present?
             rows[current_depth] << cell_hash

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

@@ -0,0 +1,6 @@
+.pb_bar_graph {
+    rect.highcharts-background {
+        fill: #0000 !important;
+    }
+}
+

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

@@ -0,0 +1,190 @@
+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 '../utilities/object'
+
+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]);
+
+  return (
+    <HighchartsReact
+        containerProps={{
+          className: classnames(globalProps(filteredProps), className),
+          id: id,
+          ...ariaProps,
+          ...dataProps,
+          ...htmlProps
+        }}
+        highcharts={Highcharts}
+        options={options}
+    />
+  );
+};
+
+export default BarGraph;

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, screen } from '../utilities/test-utils';
+import BarGraph from './_bar_graph';
+
+beforeEach(() => {
+  // Silences error logs within the test suite.
+  jest.spyOn(console, 'error');
+  jest.spyOn(console, 'warn');
+  console.error.mockImplementation(() => {});
+  console.warn.mockImplementation(() => {});
+});
+
+afterEach(() => {
+  console.error.mockRestore();
+  console.warn.mockRestore();
+});
+
+const testId = 'bargraph1';
+
+test('bargraph uses exact classname', () => {
+  render(
+    <BarGraph
+        className='super_important_class'
+        data={{ testid: testId }}
+        id='bar-default'
+    />
+  );
+ 
+  const kit = screen.getByTestId(testId);
+  expect(kit).toHaveClass('super_important_class');
+});

data/app/pb_kits/playbook/pb_bar_graph/barGraphSettings.js

@@ -0,0 +1,32 @@
+import { commonSettings } from '../pb_dashboard/commonSettings.js'
+import typography from '../tokens/exports/_typography.module.scss'
+
+const sizeColumns = function(highchart) {
+  const column = highchart.plotOptions.column
+  const series = highchart.plotOptions.series
+
+  column.borderRadius = 0
+  column.pointPadding = 0.3
+  column.groupPadding = 0
+
+  series.borderWidth = 0
+  series.shadow = false
+  series.pointPadding = 0.25
+  series.groupPadding = 0
+}
+
+const styleDataLabels = (highchart) => {
+  const series = highchart.plotOptions.series
+
+  series.dataLabels.style.fontFamily = typography.font_family_base
+  series.dataLabels.style.fontSize = typography.text_small
+  series.dataLabels.style.fontWeight = typography.bold
+}
+
+const barGraphSettings = function(highchart) {
+  commonSettings(highchart)
+  sizeColumns(highchart)
+  styleDataLabels(highchart)
+}
+
+export default barGraphSettings