playbook_ui 14.24.0.pre.alpha.play23649503 → 14.24.0.pre.alpha.reactupgradetest9656

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7b6125bc029c939ad15a726d63897d11251203a4b3529c1e5909cf5a017938a1
-  data.tar.gz: 03153bcee4384a533f7e1b9c91447ee748077b8f52b097e3cee2134f3a14afa6
+  metadata.gz: 552aff01486bb4ad720c0b4973b0153c73effaa236876820794fd7d25fa5c795
+  data.tar.gz: e3e53e9f91f91216d806d3a63c6869826c361dbf265659f7eb18cd831c2f3237
 SHA512:
-  metadata.gz: c635cb4af1e58eaddb56b5ba82f10e440e70201aa6eab3a1d469b4b568335ef1099cfd5986ac53dd841fb1b0cb2f4f796d33eb1155f5b5bde188f664f64e5b38
-  data.tar.gz: 76080ead057d43b8d5b794bdd4eadca9abe86495b1d1281edb677d58dfc1fe53dabf98269326b5623974543188da4e83191b01c28d74206512c9bc3b70cab646
+  metadata.gz: 6986ae6d81e6a358f59d73c98a6c94f64fa5771fec4a54f0bfd25bad3bc089df3765ece2efa5def2efaaeaea71d7e4064dcbc174365e3f8a4d837da10ae65f5b
+  data.tar.gz: 2bdc809201cdebae095d683ce618bca8ddd6d00d05bff60f82831933ae7878f8b62d9c92d377a3b3455cd7a2954a1e031ab3a3a9205dd7b66748fdb3f049cff8

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

@@ -134,13 +134,15 @@ export const RegularTableView = ({
   const columnDefinitions = table.options.meta?.columnDefinitions || [];
   // Row pinning
   function PinnedRow({ row }: { row: Row<any> }) {
+    const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
     return (
       <tr
           className={classnames(
             `pinned-row`,
           )}
           style={{
-            backgroundColor: 'white',
+            backgroundColor: customRowStyle?.backgroundColor ? customRowStyle?.backgroundColor : 'white',
+            color: customRowStyle?.fontColor,
             position: 'sticky',
             top:   
               row.getIsPinned() === 'top'
@@ -153,6 +155,7 @@ export const RegularTableView = ({
             collapsibleTrail={collapsibleTrail}
             columnDefinitions={columnDefinitions}
             columnPinning={columnPinning}
+            customRowStyle={customRowStyle}
             loading={loading}
             row={row}
             stickyLeftColumn={stickyLeftColumn}

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_dropdown/index.js

@@ -284,6 +284,9 @@ export default class PbDropdown extends PbEnhancedElement {
           this.adjustDropdownHeight();
         }
       });
+      this.element.querySelector(DROPDOWN_INPUT).value = Array.from(this.selectedOptions)
+        .map((opt) => JSON.parse(opt).id)
+        .join(",");
     } else {
       options.forEach((option) => {
         option.classList.remove("pb_dropdown_option_selected");

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx

@@ -52,7 +52,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
   } = props;
 
   const returnedIcon = icon || iconMap[status]
-  const iconClass = icon ? "custom_icon" : ""
+  const iconClass = icon && icon !== "none" ? "custom_icon" : ""
 
   const css = classnames(
     `pb_fixed_confirmation_toast_kit_${status}`,
@@ -92,7 +92,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
             onClick={handleClick}
             {...htmlProps}
         >
-          {returnedIcon && (
+          {returnedIcon && icon !== "none" && (
             <Icon
                 className="pb_icon"
                 fixedWidth

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.html.erb

@@ -0,0 +1,22 @@
+<%= pb_rails("fixed_confirmation_toast", props: {
+  text: "Error Message",
+  status: "error",
+  icon: "none",
+  closeable: true
+})%>
+
+<br><br>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  text: "Items Successfully Moved",
+  status: "success",
+  icon: "none"
+})%>
+
+<br><br>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  text: "Scan to Assign Selected Items",
+  status: "neutral",
+  icon: "none"
+})%>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+
+import FixedConfirmationToast from '../_fixed_confirmation_toast'
+
+const FixedConfirmationToastNoIcon = (props) => {
+  return (
+    <div>
+      <div>
+        <FixedConfirmationToast
+            closeable
+            icon="none"
+            status="error"
+            text="Error Message"
+            {...props}
+        />
+      </div>
+
+      <br />
+
+      <div>
+        <FixedConfirmationToast
+            icon="none"
+            status="success"
+            text="Items Successfully Moved"
+            {...props}
+        />
+      </div>
+
+      <br />
+
+      <div>
+        <FixedConfirmationToast
+            icon="none"
+            status="neutral"
+            text="Scan to Assign Selected Items"
+            {...props}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default FixedConfirmationToastNoIcon

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.md

@@ -0,0 +1 @@
+Setting `icon` prop to "none" will render the fixed confirmation toast without the left side icon. 

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

@@ -8,6 +8,7 @@ examples:
   - fixed_confirmation_toast_auto_close: Click to Show Auto Close
   - fixed_confirmation_toast_children: Children
   - fixed_confirmation_toast_custom_icon: Custom Icon
+  - fixed_confirmation_toast_no_icon: No Icon
   
   react:
   - fixed_confirmation_toast_default: Default
@@ -17,6 +18,7 @@ examples:
   - fixed_confirmation_toast_auto_close: Click to Show Auto Close
   - fixed_confirmation_toast_children: Children
   - fixed_confirmation_toast_custom_icon: Custom Icon
+  - fixed_confirmation_toast_no_icon: No Icon
 
   swift:
   - fixed_confirmation_toast_default_swift: Default

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

@@ -5,3 +5,4 @@ export { default as FixedConfirmationToastPositions } from './_fixed_confirmatio
 export { default as FixedConfirmationToastAutoClose } from './_fixed_confirmation_toast_auto_close.jsx'
 export { default as FixedConfirmationToastChildren } from './_fixed_confirmation_toast_children.jsx'
 export { default as FixedConfirmationToastCustomIcon } from './_fixed_confirmation_toast_custom_icon.jsx'
+export { default as FixedConfirmationToastNoIcon } from './_fixed_confirmation_toast_no_icon.jsx'

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb

@@ -1,6 +1,7 @@
 <%= pb_content_tag do %>
+    <% if object.icon_value && object.icon_value != "none" %>
     <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true }) %>
-
+    <% end %>
     <% if content %>
         <%= content %>
     <% elsif object.show_text? %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb

@@ -56,7 +56,7 @@ module Playbook
       end
 
       def icon_class
-        icon.present? ? " custom_icon" : ""
+        icon.present? && icon != "none" ? " custom_icon" : ""
       end
 
       def classname

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.test.js

@@ -56,6 +56,12 @@ test('renders custom icon when provided', () => {
     expect(container.querySelector('.custom_icon')).toBeInTheDocument();
 });
 
+test("renders no icon when icon prop is 'none'", () => {
+    const { container } = render(<FixedConfirmationToast icon="none" />);
+    expect(container.querySelector('.pb_icon')).not.toBeInTheDocument();
+    expect(container.querySelector('.custom_icon')).not.toBeInTheDocument();
+});
+
 test('renders correctly with multiLine prop', () => {
     const { container } = render(<FixedConfirmationToast multiLine />);
     expect(container.querySelector('._multi_line')).toBeInTheDocument();

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -197,13 +197,22 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   }
 
   const validateMissingAreaCode = (itiInit: any) => {
-    if (!required || !itiInit) return
+    if (!itiInit) return
     if (itiInit.getValidationError() === ValidationError.MissingAreaCode) {
       showFormattedError('missing area code')
       return true
     }
   }
 
+  const validateRepeatCountryCode = (itiInit: any) => {
+    if (!itiInit) return
+    const countryDialCode = itiInit.getSelectedCountryData().dialCode;
+    if (unformatNumber(inputValue).startsWith(countryDialCode)) {
+      return showFormattedError('repeat country code')
+    }
+  }
+
+
   const validateErrors = () => {
     if (!hasTyped && !error) return
 
@@ -213,6 +222,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     if (validateTooShortNumber(itiRef.current)) return
     if (validateUnhandledError(itiRef.current)) return
     if (validateMissingAreaCode(itiRef.current)) return
+    if (validateRepeatCountryCode(itiRef.current)) return
   }
 
   const getCurrentSelectedData = (itiInit: any, inputValue: string) => {