playbook_ui 14.24.0.pre.alpha.play23649503 → 14.24.0.pre.alpha.testingwithoutdatepicker9614

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7b6125bc029c939ad15a726d63897d11251203a4b3529c1e5909cf5a017938a1
-  data.tar.gz: 03153bcee4384a533f7e1b9c91447ee748077b8f52b097e3cee2134f3a14afa6
+  metadata.gz: fc2e4d67d666358c86897872c9a77d8ba2662808cd42ba496b31941786528f6a
+  data.tar.gz: 19b5ab16c5dd94a84e0f93fac4d28dce35420006af8b57b463094fa6b9865e0b
 SHA512:
-  metadata.gz: c635cb4af1e58eaddb56b5ba82f10e440e70201aa6eab3a1d469b4b568335ef1099cfd5986ac53dd841fb1b0cb2f4f796d33eb1155f5b5bde188f664f64e5b38
-  data.tar.gz: 76080ead057d43b8d5b794bdd4eadca9abe86495b1d1281edb677d58dfc1fe53dabf98269326b5623974543188da4e83191b01c28d74206512c9bc3b70cab646
+  metadata.gz: bd20e54aac1feb77f9cc987350df78951438f2c0a0e22a2ee7ae92088f15fd73be35a6390187cd198df9413564263780c571acce1ada6c228069933fac0058aa
+  data.tar.gz: 0ad927a661e4cdad5eaac8574e7d0659972316641132dc7eba96a3f620864f4cba407437f2862e684027cdc354482453db299181bb106d5b18f623b239b512a4

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

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

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

@@ -20,8 +20,9 @@ const testId = 'bargraph1';
 test('bargraph uses exact classname', () => {
   render(
     <BarGraph
-        containerProps={{ className: 'super_important_class' }}
+        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.react_props) %>
+<%= react_component('BarGraph', object.chart_options) %>

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

@@ -3,25 +3,91 @@
 module Playbook
   module PbBarGraph
     class BarGraph < Playbook::KitBase
-      prop :options, default: {}
-      prop :container_props, default: {}
+      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
 
-      def chart_options
-        options
+      def chart_type
+        orientation == "horizontal" ? "bar" : "column"
       end
 
-      def react_props
+      def standard_options
         {
-          options: options,
-          containerProps: container_props_hash,
+          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,
         }
       end
 
-      def container_props_hash
-        container_props.merge({
-                                id: id,
-                                className: classname,
-                              }).compact
+      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
       end
 
       def classname

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

@@ -15,24 +15,12 @@
     data: [1111,677,3245,500,200]
 }] %>
 
-
-<% 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}) %>
+<%= 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',
+}) %>

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb

@@ -1,5 +1,14 @@
 <%= pb_content_tag do %>
-  <%= pb_rails("button", props: {type: object.type, loading: object.loading, link: object.link, new_window:object.new_window, variant: object.variant, target: object.target, disabled: object.disabled, dark: object.dark}) do %>
+  <%= pb_rails("button", props: {
+    type: object.type, 
+    loading: object.loading, 
+    link: object.link, 
+    new_window: object.new_window, 
+    variant: object.variant, 
+    target: object.target, 
+    disabled: object.disabled, 
+    dark: object.dark
+  }.merge(object.input_options)) do %>
     <%= pb_rails("icon", props: {icon: object.icon, fixed_width: true, dark: object.dark}) %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb

@@ -21,6 +21,8 @@ module Playbook
       prop :size, type: Playbook::Props::Enum,
                   values: %w[default sm],
                   default: "default"
+      prop :input_options, type: Playbook::Props::HashProp,
+                           default: {}
 
       def classname
         generate_classname("pb_circle_icon_button_kit") + size_class

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_input_options.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("circle_icon_button", props: {
+  icon: "plus",
+  input_options: {
+    data: { "test-id": "add-button", remote: true },
+  }
+}) %>
+<br/>
+<%= pb_rails("circle_icon_button", props: {
+  icon: "pen",
+  variant: "secondary",
+  input_options: {
+    data: { "test-id": "edit-button" },
+    classname: "custom-secondary-button-class"
+  }
+}) %>
+<br/>
+<%= pb_rails("circle_icon_button", props: {
+  icon: "user",
+  variant: "link",
+  input_options: {
+    data: { "test-id": "user-button" },
+    id: "user-button-id"
+  }
+}) %>

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_input_options.md

@@ -0,0 +1,3 @@
+Use the `input_options` prop to pass additional attributes directly to the internal Playbook Button component. While the wrapper div has access to the standard `data` prop from KitBase, `input_options` allows you to attach attributes specifically to the internal button element.
+
+This is particularly useful when you need data attributes or other HTML attributes to apply to the button itself.

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

@@ -5,6 +5,7 @@ examples:
   - circle_icon_button_link: Link
   - circle_icon_button_loading: Loading
   - circle_icon_button_size: Size
+  - circle_icon_button_input_options: Input Options
   
   react:
   - circle_icon_button_default: Default

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -115,39 +115,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
   const inputDataProps = buildDataProps(inputData)
 
   useEffect(() => {
-    datePickerHelper({
-      allowInput,
-      customQuickPickDates,
-      defaultDate,
-      disableDate,
-      disableRange,
-      disableWeekdays,
-      enableTime,
-      format,
-      hideIcon,
-      inLine,
-      maxDate,
-      minDate,
-      mode,
-      onChange,
-      onClose,
-      pickerId,
-      plugins,
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      position,
-      positionElement,
-      selectionType,
-      showTimezone,
-      staticPosition,
-      thisRangesEndToday,
-      yearRange,
-      controlsStartId,
-      controlsEndId,
-      syncStartWith,
-      syncEndWith,
-      required: false,
-    }, scrollContainer)
+    console.log("Hi, I'm the React Date Picker useEffect")
   }, initializeOnce ? [] : undefined)
   const filteredProps = {...props}
   if (filteredProps.marginBottom === undefined) {

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -69,16 +69,7 @@
   <%= javascript_tag do %>
     (function() {
       const loadDatePicker = () => {
-        datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
-
-        if (<%= object.selection_type == "quickpick" %>) {
-          document.getElementById("<%= object.picker_id %>").addEventListener("change", ({ target }) => {
-            const startDate = document.getElementById("<%= object.start_date_id %>")
-            const endDate = document.getElementById("<%= object.end_date_id %>")
-            const splittedValue = target.value.split(" to ")
-            startDate.value = splittedValue[0]
-            endDate.value = splittedValue[1] ? splittedValue[1] : splittedValue[0]
-          })
+            console.log("Hi, I'm the Rails Date Picker 'loadDatePicker' function")
         }
       }