playbook_ui 14.24.0.pre.alpha.PLAY23139411 → 14.24.0.pre.alpha.play23649479

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e3d762bec279ed08c6f2c32e62d81d19ff9309898bd898b64b5ebbafa042746c
-  data.tar.gz: 9e9e7d6f94777f1770757559c95bb1e12ac8b4016cc48d84236278a9d8ab15dd
+  metadata.gz: 9be43cefc6c49eebecc1cc7526b3dd1e7ccf55544dbdc1adf92f81ff22768867
+  data.tar.gz: 85f5fd95aef9a42e578af9a00448e49cb74e3dac79fb6824f0dcc919c257ead6
 SHA512:
-  metadata.gz: 50d7e0dd26c65b9bbf45ecb7132b46deb8507e5d06d6c9e3c8ee0d3f49f26844184f69fdef2ee7baccda44f490c13cc2a4232d8d2f73c0ec35dea88f10149aed
-  data.tar.gz: 4709d36e634964f8a1a9b9fb1b7d8fe0893951a5b5fc2d2b83d55fcbe2e966a7a95e03be098891c6e7811704f9db4c54d1eb903e891d4cf0b1f8d71348ddef14
+  metadata.gz: 1261c1fb78b71682d0b4f04b3051def634b429b3915f1566f15ddf6bc3cbcec7508f7d6c1c2dc08ef9a474c918271398a67e74788bb72dd7a599dbe0089a7d6b
+  data.tar.gz: fc343526ed3f7b8d5ba4f1cdcc96b96726e664a47a636627fc9a432b98a28ce32720aca491bf68a5617965aa7133841a589ac1999c63f748bab2c6542e205f71

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -971,6 +971,40 @@
       }
     }
   }
+
+  // Firefox-specific fix for last-header-cell and last-cell vertical borders
+  @-moz-document url-prefix() {
+    .pb_advanced_table_header {
+      .last-header-cell {
+        border-right: none !important;
+        box-shadow: 1px 0 0 0 $border_light !important;
+      }
+    }
+
+    .pb_advanced_table_body {
+      .last-cell {
+        border-right: none !important;
+        box-shadow: 1px 0 0 0 $border_light !important;
+      }
+    }
+
+    // Dark mode Firefox fixes
+    &.dark {
+      .pb_advanced_table_header {
+        .last-header-cell {
+          border-right: none !important;
+          box-shadow: 1px 0 0 0 $border_dark !important;
+        }
+      }
+
+      .pb_advanced_table_body {
+        .last-cell {
+          border-right: none !important;
+          box-shadow: 1px 0 0 0 $border_dark !important;
+        }
+      }
+    }
+  }
 }
 
 // Outside of the pb_advanced_table class for popover

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

@@ -0,0 +1,43 @@
+<% column_definitions = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    label: "Enrollment Data",
+    columns: [
+      {
+        accessor: "newEnrollments",
+        label: "New Enrollments",
+      },
+      {
+        accessor: "scheduledMeetings",
+        label: "Scheduled Meetings",
+      },
+    ],
+  },
+  {
+    label: "Performance Data",
+    columns: [
+      {
+        accessor: "attendanceRate",
+        label: "Attendance Rate",
+      },
+      {
+        accessor: "completedClasses",
+        label: "Completed Classes",
+      },
+      {
+        accessor: "classCompletionRate",
+        label: "Class Completion Rate",
+      },
+      {
+        accessor: "graduatedStudents",
+        label: "Graduated Students",
+      },
+    ],
+  },
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "table_multi_headers_vertical_borders", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true } }) %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx

@@ -0,0 +1,64 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableColumnHeadersVerticalBorder = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      label: "Enrollment Data",
+      columns: [
+        {
+          accessor: "newEnrollments",
+          label: "New Enrollments",
+        },
+        {
+          accessor: "scheduledMeetings",
+          label: "Scheduled Meetings",
+        },
+      ],
+    },
+    {
+      label: "Performance Data",
+      columns: [
+        {
+          accessor: "attendanceRate",
+          label: "Attendance Rate",
+        },
+        {
+          accessor: "completedClasses",
+          label: "Completed Classes",
+        },
+        {
+          accessor: "classCompletionRate",
+          label: "Class Completion Rate",
+        },
+        {
+          accessor: "graduatedStudents",
+          label: "Graduated Students",
+        },
+      ],
+    },
+  ];
+  
+  const tableProps = {
+    verticalBorder: true
+  }
+
+  return (
+    <>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          tableProps={tableProps}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default AdvancedTableColumnHeadersVerticalBorder

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

@@ -13,6 +13,7 @@ examples:
   - advanced_table_with_custom_header_rails: Custom Header Cell
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
+  - advanced_table_column_headers_vertical_border: Multi-Header Columns with Vertical Borders
   - advanced_table_no_subrows: Table with No Subrows or Expansion
   - advanced_table_selectable_rows_rails: Selectable Rows
   - advanced_table_selectable_rows_no_subrows_rails: Selectable Rows (No Subrows)
@@ -53,6 +54,7 @@ examples:
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
   - advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
+  - advanced_table_column_headers_vertical_border: Multi-Header Columns with Vertical Borders
   - advanced_table_no_subrows: Table with No Subrows or Expansion
   - advanced_table_pinned_rows: Pinned Rows
   - advanced_table_selectable_rows: Selectable Rows

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

@@ -21,6 +21,7 @@ export { default as AdvancedTableSelectableRowsHeader } from './_advanced_table_
 export { default as AdvancedTableSelectableRowsActions } from './_advanced_table_selectable_rows_actions.jsx'
 export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'
 export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
+export { default as AdvancedTableColumnHeadersVerticalBorder } from './_advanced_table_column_headers_vertical_border.jsx'
 export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'
 export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
 export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'

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

@@ -43,7 +43,7 @@ module Playbook
       end
 
       def td_classname(column, index)
-        classes = %w[id-cell chrome-styles]
+        classes = %w[id-cell]
         classes << "last-cell" if column[:is_last_in_group]
         classes << "pinned-left" if index.zero? && is_pinned_left && responsive == "scroll"
         classes.join(" ")

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

@@ -29,7 +29,7 @@ module Playbook
       end
 
       def td_classname(index)
-        classes = %w[id-cell chrome-styles]
+        classes = %w[id-cell]
         classes << "pinned-left" if index.zero? && responsive == "scroll"
         classes.join(" ")
       end

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

@@ -1,190 +1,41 @@
-import React, { useState, useEffect } from "react";
-import { globalProps } from "../utilities/globalProps";
+import React, { useMemo } from "react"
 import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
 
-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";
+import barGraphTheme from "./barGraphTheme"
 
 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"
-  }],
-  });
+  options: Record<string, unknown>
+  containerProps?: React.HTMLProps<HTMLDivElement>
+  data?: Record<string, unknown>
 }
 
-  if (!toggleLegendClick) {
-    staticOptions.plotOptions.series.events = { legendItemClick: () => false };
-  }
+const BarGraph = ({
+  options,
+  containerProps = {},
+  data = {}
+}: BarGraphProps): React.ReactElement => {
 
-  const filteredProps: any = {...props};
-  delete filteredProps.verticalAlign;
+  const dataProps = buildDataProps(data)
 
-  const [options, setOptions] = useState({});
+  const mergedOptions = useMemo(() => {
+    if (!options || typeof options !== "object") {
+      // eslint-disable-next-line no-console
+      console.error("❌ Invalid options passed to <BarGraph />", options)
+      return {}
+    }
 
-  useEffect(() => {
-    setOptions(merge(staticOptions, customOptions));
-  }, [chartData]);
+    return Highcharts.merge({}, barGraphTheme, options)
+  }, [options])
 
   return (
     <HighchartsReact
-        containerProps={{
-          className: classnames(globalProps(filteredProps), className),
-          id: id,
-          ...ariaProps,
-          ...dataProps,
-          ...htmlProps
-        }}
+        containerProps={{ ...containerProps, ...dataProps }}
         highcharts={Highcharts}
-        options={options}
+        options={mergedOptions}
     />
-  );
-};
+  )
+}
 
-export default BarGraph;
+export default BarGraph

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

@@ -20,9 +20,8 @@ const testId = 'bargraph1';
 test('bargraph uses exact classname', () => {
   render(
     <BarGraph
-        className='super_important_class'
+        containerProps={{ className: 'super_important_class' }}
         data={{ testid: testId }}
-        id='bar-default'
     />
   );
  

data/app/pb_kits/playbook/pb_bar_graph/bar_graph.html.erb

@@ -1 +1 @@
-<%= react_component('BarGraph', object.chart_options) %>
+<%= react_component('BarGraph', object.react_props) %>

data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb

@@ -3,91 +3,25 @@
 module Playbook
   module PbBarGraph
     class BarGraph < Playbook::KitBase
-      prop :align, type: Playbook::Props::Enum,
-                   values: %w[left right center],
-                   default: "center"
-      prop :axis_title
-      prop :axis_format
-      prop :chart_data, type: Playbook::Props::Array,
-                        default: []
-      prop :custom_options, default: {}
-      prop :orientation, type: Playbook::Props::Enum,
-                         values: %w[vertical horizontal],
-                         default: "vertical"
-      prop :point_start, type: Playbook::Props::Numeric
-      prop :stacking
-      prop :subtitle
-      prop :title
-      prop :x_axis_categories, type: Playbook::Props::Array,
-                               default: []
-      prop :y_axis_min, type: Playbook::Props::Numeric
-      prop :y_axis_max, type: Playbook::Props::Numeric
-      prop :legend, type: Playbook::Props::Boolean,
-                    default: false
-      prop :toggle_legend_click, type: Playbook::Props::Boolean,
-                                 default: true
-      prop :height
-      prop :colors, type: Playbook::Props::Array,
-                    default: []
-      prop :layout, type: Playbook::Props::Enum,
-                    values: %w[horizontal vertical proximate],
-                    default: "horizontal"
-      prop :vertical_align, type: Playbook::Props::Enum,
-                            values: %w[top middle bottom],
-                            default: "bottom"
-      prop :x, type: Playbook::Props::Numeric
-      prop :y, type: Playbook::Props::Numeric
+      prop :options, default: {}
+      prop :container_props, default: {}
 
-      def chart_type
-        orientation == "horizontal" ? "bar" : "column"
+      def chart_options
+        options
       end
 
-      def standard_options
+      def react_props
         {
-          align: align,
-          id: id,
-          className: classname,
-          chartData: chart_data,
-          dark: dark ? "dark" : "",
-          type: chart_type,
-          title: title,
-          stacking: stacking,
-          subTitle: subtitle,
-          axisTitle: axis_title,
-          axisFormat: axis_format,
-          pointStart: point_start,
-          xAxisCategories: x_axis_categories,
-          yAxisMin: y_axis_min,
-          yAxisMax: y_axis_max,
-          legend: legend,
-          toggleLegendClick: toggle_legend_click,
-          height: height,
-          colors: colors,
-          layout: layout,
-          verticalAlign: vertical_align,
-          x: x,
-          y: y,
+          options: options,
+          containerProps: container_props_hash,
         }
       end
 
-      def chart_options
-        standard_options.deep_merge(custom_options)
-      end
-
-      def vertical_align_props
-        if vertical_align
-          if object.vertical_align
-            original_result = super
-            class_to_remove = "vertical_align_#{object.vertical_align}"
-
-            modified_result = original_result.gsub(class_to_remove, "").strip
-            modified_result.empty? ? nil : modified_result
-          else
-            super
-          end
-        else
-          super
-        end
+      def container_props_hash
+        container_props.merge({
+                                id: id,
+                                className: classname,
+                              }).compact
       end
 
       def classname

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.html.erb

@@ -15,12 +15,24 @@
     data: [1111,677,3245,500,200]
 }] %>
 
-<%= pb_rails("bar_graph", props: {
-    axis_title: 'Number of Employees',
-    chart_data: data,
-    id: "bar-default",
-    y_axis_min: 0,
-    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
-    subtitle: 'Source: thesolarfoundation.com',
-    title: 'Solar Employment Growth by Sector, 2010-2016',
-}) %>
+
+<% chart_options = {
+  series: data,
+  title: {
+    text: 'Solar Employment Growth by Sector, 2010-2016',
+  },
+  subtitle: {
+    text: 'Source: thesolarfoundation.com',
+  },
+  xAxis: {
+    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
+  },
+  yAxis: {
+    title: {
+      text: 'Number of Employees',
+    },
+  },
+}
+%>
+
+<%= pb_rails("bar_graph", props: {options: chart_options}) %>

data/app/pb_kits/playbook/pb_date/_date.tsx

@@ -19,6 +19,7 @@ type PbDateProps = {
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
   showDayOfWeek?: boolean;
+  showCurrentYear?: boolean;
   showIcon?: boolean;
   size?: "sm" | "md" | "lg";
   unstyled?: boolean;
@@ -35,6 +36,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
     htmlOptions = {},
     id,
     showDayOfWeek = false,
+    showCurrentYear = false,
     showIcon = false,
     size = "md",
     unstyled = false,
@@ -90,7 +92,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
                 {month} {day}
               </span>
 
-              {currentYear != year && <span>{`, ${year}`}</span>}
+              {(currentYear !== year || showCurrentYear) && <span>{`, ${year}`}</span>}
             </span>
           </>
         : size == "md" || size == "lg"
@@ -124,7 +126,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
               <span>
                 {month} {day}
               </span>
-              {currentYear != year && <span>{`, ${year}`}</span>}
+              {(currentYear !== year || showCurrentYear) && <span>{`, ${year}`}</span>}
             </Title>
             )
           : (
@@ -158,7 +160,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
                 <Caption dark={dark}
                     tag="span">
                   {month} {day}
-                  {currentYear != year && <>{`, ${year}`}</>}
+                  {(currentYear !== year || showCurrentYear) && <>{`, ${year}`}</>}
                 </Caption>
               </>
             )}

data/app/pb_kits/playbook/pb_date/date.html.erb

@@ -13,8 +13,8 @@
     <% end %>
 
     <!-- month day, year -->
-    <%# if not current year %>
-    <% if object.year.to_s == DateTime.now.year.to_s %>
+    <%# if not current year or show_current_year is false %>
+    <% if object.year.to_s == DateTime.now.year.to_s && !object.show_current_year %>
       <span><%= "#{object.month} #{object.day}" %></span>
     <%# if is current year %>
     <% else %>
@@ -44,8 +44,8 @@
 
     <!-- month day, year -->
 
-    <%# if not current year %>
-    <% if object.year.to_s == DateTime.now.year.to_s %>
+    <%# if not current year or show_current_year is false %>
+    <% if object.year.to_s == DateTime.now.year.to_s  && !object.show_current_year  %>
       <%= pb_rails("title", props: { tag: "div", text: "#{object.month} #{object.day}", size: 4 }) %>
     <%# if is current year %>
     <% else %>
@@ -74,8 +74,8 @@
 
     <!-- month day, year -->
 
-    <%# if not current year %>
-    <% if object.year.to_s == DateTime.now.year.to_s %>
+    <%# if not current year or show_current_year is false %>
+    <% if object.year.to_s == DateTime.now.year.to_s  && !object.show_current_year %>
       <%= pb_rails("caption", props: { tag: "span", text: "#{object.month} #{object.day}" }) %>
     <%# if is current year %>
     <% else %>

data/app/pb_kits/playbook/pb_date/date.rb

@@ -11,6 +11,8 @@ module Playbook
                        default: false
       prop :show_day_of_week, type: Playbook::Props::Boolean,
                               default: false
+      prop :show_current_year, type: Playbook::Props::Boolean,
+                               default: false
       prop :size, type: Playbook::Props::Enum,
                   values: %w[lg md sm xs],
                   default: "md"

data/app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("date", props: {
+  date: Date.today,
+  show_current_year: true
+}) %>