playbook_ui 14.23.0 → 14.24.0.pre.rc.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: aeed9af08158c508c8b195a9a8a515fbf8b5820de4f901adc83bd5537f18868f
-  data.tar.gz: c4f3694719d090dd4e95bcfe5a6d96ba2a8638e79375ed57cb44db655e9d2a26
+  metadata.gz: f7c659555bc336ddf2054d431ed8a754a7c30cbdb8d39768ee809e5b8c801de4
+  data.tar.gz: 1f304c66382893591a3002738d79a2c5f7736ec72056ae42186c07e03b289798
 SHA512:
-  metadata.gz: 9e3dc38be6ab808b213be4fb97c714e9b48c405381fa7b228bf91d1173fdce2defb7d5d0fcfaaffc532e141ce84f78b2b276a64648edb24e8887eadbe523f70e
-  data.tar.gz: fa966bc31c22ee4fe086d691cfb56845dbfde777bb4b0e6a733389ad0b3c3829b503bd8c8e9cca28aad15913236d5c0ed7785768b2604164992f2b893f2e9cf7
+  metadata.gz: cbcdc199c2fb6aa26aaa8363e99b49e9e29d607daf16918e5850a24d68abb6ac115f9a720601c439acbffebc190a9508be6ffa69d449cd6829470b98c33af39f
+  data.tar.gz: 651647fac808212d5227707f2b43d190ca2f517e47a794cb993ecb04053e86c41e8b6dc25eb4da7e5097b43fc06cc1bbd9e3e634427a2e1a267ee0d367d26a0e

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

@@ -101,7 +101,6 @@ export const TableHeaderCell = ({
     if (!header) return false;
   
     if (header.colSpan > 1 && header.column.parent !== undefined) return true;
-  
     const parent = header.column.parent;
   
     if (!parent) {

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts

@@ -83,11 +83,11 @@ export function useTableState({
   const buildColumns = useCallback((columnDefinitions: GenericObject[], isRoot = true): any[] => {
     return columnDefinitions?.map((column, index) => {
       const isFirstColumn = isRoot && index === 0;
-
       // Handle grouped columns
       if (column.columns && column.columns.length > 0) {
         return {
-          header: column.header || column.label || "",
+          header: column.header ?? column.label ?? "",
+          id: column.id ?? column.label ?? `group-${index}`,
           columns: buildColumns(column.columns, false),
         };
       }

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

@@ -12,7 +12,7 @@
       <% content.presence %>
     <% else %>
       <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, show_actions_bar: object.show_actions_bar }) %>
-      <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion }) %>
+      <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion, row_styling: object.row_styling }) %>
     <% end %>
   <% end %>
 <% end %>

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

@@ -31,6 +31,8 @@ module Playbook
                      default: []
       prop :scroll_bar_none, type: Playbook::Props::Boolean,
                              default: false
+      prop :row_styling, type: Playbook::Props::Array,
+                         default: []
 
       def classname
         additional_classes = [responsive_classname, max_height_classname, hide_scroll_bar_class]

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

@@ -0,0 +1,46 @@
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+] %>
+
+<% row_styling = [
+  {
+    row_id: "1",
+    background_color: "#F9BB00",
+  },
+  {
+    row_id: "8",
+    background_color: "#0056CF",
+    font_color: "white",
+    expand_button_color: "white",
+  },
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "row-styling", table_data: @table_data_with_id, column_definitions: column_definitions, row_styling: row_styling }) %>

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

@@ -0,0 +1,7 @@
+The `row_styling` prop can be used in conjunction with row ids to control certain styling options on individual rows. Currently, `row_styling` gives you 3 optional controls:
+
+- `background_color` : use this to control the background color of the row
+- `font_color`: use this to control font color for each row if needed, for example if using a darker background color.
+- `expand_button_color`: use this to control the color of the expand icon if needed, for example if using a darker background color.
+
+**NOTE:** Each object within the `table_data` Array must contain a unique id in order to attach an id to all Rows for this to function.

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

@@ -1 +1 @@
-The optional `header` key/value pair can be used within `columnDefinitions` to render a custom header. This example shows an Icon and Tooltip being used but other kits can be used as well. 
+The optional `header` key/value pair can be used within `columnDefinitions` to render a custom header. This example shows an Icon and Tooltip being used but other kits can be used as well.

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

@@ -0,0 +1,107 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import Icon from "../../pb_icon/_icon"
+import Flex from "../../pb_flex/_flex"
+import Caption from "../../pb_caption/_caption"
+import Tooltip from "../../pb_tooltip/_tooltip"
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableWithCustomHeaderMultiHeader = (props) => {
+
+const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      id: "year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      label: "Enrollment Data",
+      id: "enrollmentData",
+      header: () => (
+        <Flex alignItems="center" 
+            justifyContent="center"
+        >
+          <Caption marginRight="xs">Enrollments Data</Caption>
+          <Tooltip placement="top" 
+              text="Whoa. I'm a Tooltip" 
+              zIndex={10}
+          >
+            <Icon cursor="pointer" 
+                icon="info"
+                size="xs" 
+            />
+          </Tooltip>
+        </Flex>
+      ),
+      columns: [
+        {
+          label: "Enrollment Stats",
+          id: "enrollmentStats",
+          columns: [
+            {
+              accessor: "newEnrollments",
+              id: "newEnrollments",
+              label: "New Enrollments",
+            },
+            {
+              accessor: "scheduledMeetings",
+              id: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      label: "Performance Data",
+      id: "performanceData",
+      columns: [
+        {
+          label: "Completion Metrics",
+          id: "completionMetrics",
+          columns: [
+            {
+              accessor: "completedClasses",
+              label: "Completed Classes",
+              id: "completedClasses",
+            },
+            {
+              accessor: "classCompletionRate",
+              label: "Class Completion Rate",
+              id: "classCompletionRate",
+            },
+          ],
+        },
+        {
+          label: "Attendance",
+          id: "attendance",
+          columns: [
+            {
+              accessor: "attendanceRate",
+              label: "Attendance Rate",
+              id: "attendanceRate",
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+              id: "scheduledMeetings",
+            },
+          ],
+        },
+      ],
+    },
+  ];
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableWithCustomHeaderMultiHeader;

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

@@ -0,0 +1 @@
+The optional `header` key/value pair within `columnDefinitions` can also be used with multi headers as seen here. 

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

@@ -0,0 +1,51 @@
+<%
+  column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      header: ->(cell, label) {
+        capture do
+          pb_rails("flex", props: { align_items: "center", justify_content: "center" }) do
+            pb_rails("caption", props: { margin_right: "xs", text: "New Enrollments" }) +
+            pb_rails("icon", props: { id: "tooltip-interact", icon: "info", size: "xs" }) +
+            pb_rails("tooltip", props: {
+              trigger_element_id: "tooltip-interact",
+              tooltip_id: "example-custom-tooltip",
+              position: "top",
+              z_index: "10"
+            }) do
+              "Whoa. I'm a Tooltip"
+            end
+          end
+        end
+      }
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      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: "custom_header_table", table_data: @table_data, column_definitions: column_definitions }) %>

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

@@ -0,0 +1 @@
+The optional `header` item can be used within `column_definitions` to render a custom header. This example shows an Icon and Tooltip being used but other kits can be used as well.

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

@@ -10,6 +10,7 @@ examples:
   - advanced_table_beta_sort: Enable Sorting
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell_rails: Custom Components for Cells
+  - 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_no_subrows: Table with No Subrows or Expansion
@@ -18,6 +19,7 @@ examples:
   - advanced_table_selectable_rows_actions_rails: Selectable Rows (With Actions)
   - advanced_table_selectable_rows_header_rails: Selectable Rows (No Actions Bar)
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
+  - advanced_table_row_styling: Row Styling
   - advanced_table_column_styling_rails: Column Styling
   - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
   - advanced_table_column_border_color_rails: Column Group Border Color
@@ -41,6 +43,7 @@ examples:
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell: Custom Components for Cells
   - advanced_table_with_custom_header: Custom Header Cell
+  - advanced_table_with_custom_header_multi_header: Custom Header with Multiple Headers
   - advanced_table_pagination: Pagination
   - advanced_table_pagination_with_props: Pagination Props
   - advanced_table_loading: Loading State

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

@@ -40,3 +40,4 @@ export { default as AdvancedTableColumnStylingColumnHeaders } from './_advanced_
 export { default as AdvancedTableInfiniteScroll} from './_advanced_table_infinite_scroll.jsx'
 export {default as AdvancedTableWithCustomHeader} from './_advanced_table_with_custom_header.jsx'
 export { default as AdvancedTableCustomSort } from './_advanced_table_custom_sort.jsx'
+export { default as AdvancedTableWithCustomHeaderMultiHeader } from './_advanced_table_with_custom_header_multi_header.jsx'

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

@@ -23,6 +23,8 @@ module Playbook
                         default: "scroll"
       prop :selectable_rows, type: Playbook::Props::Boolean,
                              default: false
+      prop :row_styling, type: Playbook::Props::Array,
+                         default: []
 
       def flatten_columns(columns)
         columns.flat_map do |col|
@@ -66,7 +68,7 @@ module Playbook
                                   end
 
         # Additional class and data attributes needed for toggle logic
-        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion })
+        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion, row_styling: row_styling })
 
         if row[:children].present?
           row[:children].each do |child_row|

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

@@ -26,7 +26,11 @@
                 <% end %>
               <% end %>
             <% end %>
-            <%= cell[:label] %>
+            <% if object.has_header_renderer?(cell) %>
+              <%= raw(object.render_header(cell)) %>
+            <% else %>
+              <%= cell[:label] %>
+            <% end %>
           <% end %>
         <% end %>
       <% end %>

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

@@ -76,6 +76,30 @@ module Playbook
         end
       end
 
+      # Get original column definition for custom rendering
+      def find_original_column_def(accessor)
+        find_column_def_by_accessor(column_definitions, accessor)
+      end
+
+      # Check if a header cell has a custom renderer
+      def has_header_renderer?(cell)
+        return false unless cell[:accessor].present?
+
+        original_def = find_original_column_def(cell[:accessor])
+        original_def && original_def[:header].present?
+      end
+
+      # Render custom header content
+      def render_header(cell)
+        return cell[:label] unless has_header_renderer?(cell)
+
+        original_def = find_original_column_def(cell[:accessor])
+        custom_renderer = original_def[:header]
+
+        # Call the custom renderer with the cell data and label
+        custom_renderer.call(cell, cell[:label])
+      end
+
     private
 
       def compute_max_depth(columns)
@@ -148,6 +172,18 @@ module Playbook
         end
         wrapped
       end
+
+      def find_column_def_by_accessor(defs, target_accessor)
+        defs.each do |col|
+          return col if col[:accessor] == target_accessor
+
+          if col[:columns].is_a?(Array)
+            found = find_column_def_by_accessor(col[:columns], target_accessor)
+            return found if found
+          end
+        end
+        nil
+      end
     end
   end
 end

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

@@ -1,3 +1,10 @@
+<% 
+  row_style = object.row_styling.find { |style| style[:row_id].to_s == object.row_id.to_s } 
+  button_color = row_style&.[](:expand_button_color)
+  bg_color = row_style&.[](:background_color)
+  font_color = row_style&.[](:font_color)
+%>
+
 <%= pb_content_tag(:tr) do %>
     <% has_separate_checkbox = object.selectable_rows && object.enable_toggle_expansion == "none" %>
     <% if has_separate_checkbox %>
@@ -5,7 +12,7 @@
     <% end %>
     <% object.column_definitions.each_with_index do |column, index| %>
         <% next unless column[:accessor].present? %>
-        <%= pb_rails("table/table_cell", props: { classname:object.td_classname(column, index)}) do %>
+        <%= pb_rails("table/table_cell", props: {  html_options: { style: { "background-color": bg_color, color: font_color } }, classname:object.td_classname(column, index)}) do %>
             <%= pb_rails("flex", props:{ align: "center", justify: object.justify_for(column, index), classname: object.loading ? "loading-cell" : "" }) do %>
                 <% if collapsible_trail && index.zero? %>
                     <% (1..depth).each do |i| %>
@@ -28,7 +35,9 @@
                                 <button
                                     id="<%= "#{object.id}_#{object.row.object_id}" %>"
                                     class="gray-icon expand-toggle-icon"
-                                    data-advanced-table="true">
+                                    data-advanced-table="true"
+                                    style="color: <%= button_color %>"
+                                >
                                     <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %>
                                     <%= pb_rails("icon", props: { id: "advanced-table_close_icon", icon: "circle-play-down", cursor: "pointer" }) %>
                                 </button>

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

@@ -27,6 +27,8 @@ module Playbook
       prop :enable_toggle_expansion, type: Playbook::Props::Enum,
                                      values: %w[all header none],
                                      default: "header"
+      prop :row_styling, type: Playbook::Props::Array,
+                         default: []
 
       def data
         Hash(prop(:data)).merge(table_data_attributes)

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.md

@@ -1,7 +1,7 @@
 ##### Prop
 
 `align` **Type**: String | **Values**: left | center | right (defaults to center)
-`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults middle)
+`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults to bottom)
 `layout` **Type**: String | **Values**: horizontal | vertical | proximate (defaults to horizontal)
 `x` **Type**: Number (defaults to 0)
 `y` **Type**: Number (defaults to 0)

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -6,6 +6,8 @@ module Playbook
       prop :error, type: Playbook::Props::Boolean, default: false
       prop :checked, type: Playbook::Props::Boolean, default: false
       prop :indeterminate_main, type: Playbook::Props::Boolean, default: false
+      prop :indeterminate_main_labels, type: Playbook::Props::Array,
+                                       default: []
       prop :indeterminate_parent
       prop :text
       prop :value
@@ -49,10 +51,19 @@ module Playbook
       end
 
       def data
-        Hash(prop(:data)).merge(
+        base_data = Hash(prop(:data)).merge(
           pb_checkbox_indeterminate_main: indeterminate_main,
           pb_checkbox_indeterminate_parent: indeterminate_parent
         )
+
+        if indeterminate_main && indeterminate_main_labels.size == 2
+          base_data.merge!(
+            pb_checkbox_indeterminate_main_label_check: indeterminate_main_labels[0],
+            pb_checkbox_indeterminate_main_label_uncheck: indeterminate_main_labels[1]
+          )
+        end
+
+        base_data
       end
 
     private

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb

@@ -9,10 +9,10 @@
     <tr>
       <th>
         <%= pb_rails("checkbox", props: {
-          text: "Uncheck All",
           value: "checkbox-value",
           name: "main-checkbox",
           indeterminate_main: true,
+          indeterminate_main_labels: ["Check All Ice Cream", "Uncheck All Ice Cream"],
           id: "indeterminate-checkbox"
         }) %>
       </th>

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_rails.md

@@ -1 +1,2 @@
-If you want to use indeterminate, "check/uncheck all" checkboxes, add `indeterminate_main: true` and an `id` to the main checkbox. Then, add an `indeterminate_parent` prop with the main checkbox's `id` to the children checkboxes.
+If you want to use indeterminate, "check/uncheck all" checkboxes, add `indeterminate_main: true` and an `id` to the main checkbox. Then, add an `indeterminate_parent` prop with the main checkbox's `id` to the children checkboxes.
+If you want to customize the main checkbox labels, set an array `indeterminate_main_labels` with "Check All" and "Uncheck All" labels.

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

@@ -23,7 +23,9 @@ export default class PbCheckbox extends PbEnhancedElement {
       mainCheckbox.checked = checkedCount > 0;
 
       // Determine the main checkbox label based on the number of checked checkboxes
-      const text = checkedCount === 0 ? 'Check All' : 'Uncheck All';
+      const checkAllLabel = mainCheckboxWrapper.dataset.pbCheckboxIndeterminateMainLabelCheck ?? 'Check All'
+      const uncheckAllLabel = mainCheckboxWrapper.dataset.pbCheckboxIndeterminateMainLabelUncheck ?? 'Uncheck All'
+      const text = checkedCount === 0 ? checkAllLabel : uncheckAllLabel;
 
       // Determine the icon class to add and remove based on the number of checked checkboxes
       const iconClassToAdd = checkedCount === 0 ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md

@@ -1,7 +1,7 @@
 ##### Prop
 
 `align` **Type**: String | **Values**: left | center | right (defaults to center)
-`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults middle)
+`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults to bottom)
 `layout` **Type**: String | **Values**: horizontal | vertical | proximate (defaults to horizontal)
 `x` **Type**: Number (defaults to 0)
 `y` **Type**: Number (defaults to 0)

data/app/pb_kits/playbook/pb_gauge/docs/_description.md

@@ -0,0 +1 @@
+**Important Note for the React Kit**: In order to leverage this kit, you must install `highcharts` and `highcharts-react-official` into your project as shown below. To then apply Playbook styles to your Highchart, import gaugeTheme.ts from playbook-ui and merge it with your Highchart options. Then, pass the merged value to the options prop. Playbook’s styling will be applied automatically. See the examples in the documentation below.

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx

@@ -1,19 +1,36 @@
 import React from 'react'
-import Gauge from '../../pb_gauge/_gauge'
+import gaugeTheme from '../gaugeTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+import HighchartsMore from "highcharts/highcharts-more"
+import SolidGauge from "highcharts/modules/solid-gauge"
+import colors from '../../tokens/exports/_colors.module.scss'
 
-const data = [
-  { name: 'Name', value: 67 },
-]
+HighchartsMore(Highcharts);
+SolidGauge(Highcharts);
 
-const GaugeColors = (props) => (
-  <div>
-    <Gauge
-        chartData={data}
-        id="gauge-colors"
-        {...props}
-        colors={['data-7']}
-    />
-  </div>
-)
+const data = [{ name: "Name", y: 67 }]
 
-export default GaugeColors
+const baseOptions = {
+  series: [{ data: data }],
+  plotOptions: {
+    solidgauge: {
+      borderColor: colors.data_7,
+    }
+  },
+};
+
+const GaugeColors = () => {
+  const options = Highcharts.merge({}, gaugeTheme, baseOptions);
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  );
+};
+
+export default GaugeColors;

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors_react.md

@@ -0,0 +1,2 @@
+Custom data colors allow for color customization to match the needs of business requirements.
+Pass the prop `plotOptions.solidgauge.borderColor` with a Playbook token like `colors.` + `data_1 | data_2 | data_3 | data_4 | data_5 | data_6 | data_7 | data_8`. Hex colors are also available `eg: #CA0095`

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx

@@ -2,14 +2,44 @@ import React from "react";
 
 import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
-import Gauge from '../../pb_gauge/_gauge'
 import Card from '../../pb_card/_card'
 import Caption from '../../pb_caption/_caption'
 import Body from '../../pb_body/_body'
 import SectionSeparator from '../../pb_section_separator/_section_separator'
 import Title from '../../pb_title/_title'
+import gaugeTheme from '../gaugeTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+import HighchartsMore from "highcharts/highcharts-more"
+import SolidGauge from "highcharts/modules/solid-gauge"
+import colors from '../../tokens/exports/_colors.module.scss'
+import typography from '../../tokens/exports/_typography.module.scss'
 
-const data = [{ name: "Name", value: 10 }];
+HighchartsMore(Highcharts);
+SolidGauge(Highcharts);
+
+const data = [{ name: "Name", y: 10 }];
+
+const baseOptions = {
+  series: [{ data: data }],
+  chart: {
+    height: "150",
+  },
+  plotOptions: {
+    series: {
+      animation: false,
+    },
+    solidgauge: {
+      dataLabels: {
+        format:
+          `<span class="fix">{y:,f}</span>` +
+          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">%</span>`,
+      },
+    },
+  },
+};
+
+const options = Highcharts.merge({}, gaugeTheme, baseOptions);
 
 const GaugeComplex = (props) => (
   <Flex
@@ -100,13 +130,9 @@ const GaugeComplex = (props) => (
                   shrink
                   {...props}
               >
-                <Gauge
-                    chartData={data}
-                    disableAnimation
-                    height="150"
-                    id="gauge-complex"
-                    suffix="%"
-                    {...props}
+                <HighchartsReact
+                    highcharts={Highcharts}
+                    options={options}
                 />
                </FlexItem>
             </Flex>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex_react.md

@@ -0,0 +1 @@
+We are able to wrap the Highcharts Gauge kit within Playbook kits (such as Flex and Card components).