playbook_ui 14.22.0.pre.alpha.PLAY23038970 → 14.22.0.pre.alpha.customheaderat8564

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (93) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +7 -6
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +11 -32
  4. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +0 -6
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +8 -10
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -2
  7. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +2 -2
  8. data/app/pb_kits/playbook/pb_badge/_badge.scss +6 -5
  9. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx +15 -33
  10. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +72 -0
  11. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md +6 -0
  12. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx +15 -33
  13. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx +22 -52
  14. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx +16 -12
  15. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx +15 -31
  16. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx +16 -39
  17. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx +38 -86
  18. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx +15 -32
  19. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx +64 -0
  20. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md +1 -0
  21. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx +22 -72
  22. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md +1 -1
  23. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.jsx +15 -31
  24. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx +16 -37
  25. data/app/pb_kits/playbook/pb_bar_graph/docs/_description.md +3 -1
  26. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +3 -1
  27. data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +2 -0
  28. data/app/pb_kits/playbook/pb_body/docs/_body_truncate.jsx +3 -3
  29. data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +1 -36
  30. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +26 -71
  31. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +16 -29
  32. data/app/pb_kits/playbook/pb_circle_chart/docs/{_circle_chart_colors_rails.md → _circle_chart_colors.md} +1 -1
  33. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +16 -28
  34. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md +2 -4
  35. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +15 -23
  36. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.jsx +51 -81
  37. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +75 -103
  38. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md +6 -3
  39. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +13 -19
  40. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +38 -0
  41. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +1 -0
  42. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +17 -30
  43. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.jsx +20 -34
  44. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx +20 -29
  45. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx +20 -28
  46. data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +1 -0
  47. data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +1 -0
  48. data/app/pb_kits/playbook/pb_draggable/context/index.tsx +4 -12
  49. data/app/pb_kits/playbook/pb_draggable/context/types.ts +2 -5
  50. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +17 -27
  51. data/app/pb_kits/playbook/pb_table/_table.tsx +4 -4
  52. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.jsx +8 -8
  53. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_react.md +1 -1
  54. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx +12 -12
  55. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md +3 -3
  56. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.jsx +12 -12
  57. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_react.md +3 -3
  58. data/app/pb_kits/playbook/pb_title/docs/_title_truncate.jsx +3 -3
  59. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +0 -1
  60. data/app/pb_kits/playbook/pb_tooltip/index.js +36 -59
  61. data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +2 -9
  62. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +0 -1
  63. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +0 -3
  64. data/dist/chunks/{_typeahead-B1tu_vWi.js → _typeahead-B7FRYVtS.js} +3 -3
  65. data/dist/chunks/_weekday_stacked-CEJcIpjK.js +45 -0
  66. data/dist/chunks/{lib-DYpq0k8j.js → lib-Carqm8Ip.js} +1 -1
  67. data/dist/chunks/{pb_form_validation-BUOKwfvW.js → pb_form_validation-DqRmTS8m.js} +1 -1
  68. data/dist/chunks/vendor.js +1 -1
  69. data/dist/menu.yml +8 -68
  70. data/dist/playbook-doc.js +2 -2
  71. data/dist/playbook-rails-react-bindings.js +1 -1
  72. data/dist/playbook-rails.js +1 -1
  73. data/dist/playbook.css +1 -1
  74. data/lib/playbook/version.rb +1 -1
  75. metadata +17 -24
  76. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.jsx +0 -65
  77. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.md +0 -5
  78. data/app/pb_kits/playbook/pb_bar_graph/barGraphTheme.ts +0 -106
  79. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.md +0 -3
  80. data/app/pb_kits/playbook/pb_body/docs/_body_truncate_react.md +0 -4
  81. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_react.md +0 -2
  82. data/app/pb_kits/playbook/pb_circle_chart/docs/_description.md +0 -1
  83. data/app/pb_kits/playbook/pb_title/docs/_title_truncate_react.md +0 -4
  84. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb +0 -14
  85. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md +0 -1
  86. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.html.erb +0 -18
  87. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_rails.md +0 -1
  88. data/dist/chunks/_circle_chart-BZmlhBs2.js +0 -1
  89. data/dist/chunks/_weekday_stacked-CKk0dR5s.js +0 -45
  90. /data/app/pb_kits/playbook/pb_body/docs/{_body_truncate_rails.md → _body_truncate.md} +0 -0
  91. /data/app/pb_kits/playbook/pb_title/docs/{_title_truncate_rails.md → _title_truncate.md} +0 -0
  92. /data/app/pb_kits/playbook/pb_tooltip/docs/{_tooltip_click_open_react.md → _tooltip_click_open.md} +0 -0
  93. /data/app/pb_kits/playbook/pb_typeahead/docs/{_typeahead_preserve_input_react.md → _typeahead_preserve_input.md} +0 -0
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "14.22.0"
5
- VERSION = "14.22.0.pre.alpha.PLAY23038970"
5
+ VERSION = "14.22.0.pre.alpha.customheaderat8564"
6
6
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 14.22.0.pre.alpha.PLAY23038970
4
+ version: 14.22.0.pre.alpha.customheaderat8564
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2025-07-15 00:00:00.000000000 Z
12
+ date: 2025-06-23 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -328,8 +328,6 @@ files:
328
328
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.md
329
329
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell_rails.html.erb
330
330
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell_rails.md
331
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.jsx
332
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.md
333
331
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx
334
332
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md
335
333
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.jsx
@@ -518,19 +516,19 @@ files:
518
516
  - app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx
519
517
  - app/pb_kits/playbook/pb_bar_graph/barGraph.test.js
520
518
  - app/pb_kits/playbook/pb_bar_graph/barGraphSettings.js
521
- - app/pb_kits/playbook/pb_bar_graph/barGraphTheme.ts
522
519
  - app/pb_kits/playbook/pb_bar_graph/bar_graph.html.erb
523
520
  - app/pb_kits/playbook/pb_bar_graph/bar_graph.rb
524
521
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.html.erb
525
522
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx
526
523
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.md
524
+ - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx
525
+ - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md
527
526
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb
528
527
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.md
529
528
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.html.erb
530
529
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx
531
530
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.html.erb
532
531
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx
533
- - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.md
534
532
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.html.erb
535
533
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx
536
534
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.html.erb
@@ -542,6 +540,8 @@ files:
542
540
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.md
543
541
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.html.erb
544
542
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx
543
+ - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx
544
+ - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md
545
545
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.html.erb
546
546
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx
547
547
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md
@@ -573,8 +573,7 @@ files:
573
573
  - app/pb_kits/playbook/pb_body/docs/_body_styled.md
574
574
  - app/pb_kits/playbook/pb_body/docs/_body_truncate.html.erb
575
575
  - app/pb_kits/playbook/pb_body/docs/_body_truncate.jsx
576
- - app/pb_kits/playbook/pb_body/docs/_body_truncate_rails.md
577
- - app/pb_kits/playbook/pb_body/docs/_body_truncate_react.md
576
+ - app/pb_kits/playbook/pb_body/docs/_body_truncate.md
578
577
  - app/pb_kits/playbook/pb_body/docs/_description.md
579
578
  - app/pb_kits/playbook/pb_body/docs/_footer.md
580
579
  - app/pb_kits/playbook/pb_body/docs/example.yml
@@ -768,8 +767,7 @@ files:
768
767
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx
769
768
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb
770
769
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx
771
- - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_rails.md
772
- - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_react.md
770
+ - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.md
773
771
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb
774
772
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx
775
773
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md
@@ -781,6 +779,8 @@ files:
781
779
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx
782
780
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md
783
781
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx
782
+ - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx
783
+ - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md
784
784
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb
785
785
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx
786
786
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.html.erb
@@ -789,7 +789,6 @@ files:
789
789
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx
790
790
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.html.erb
791
791
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx
792
- - app/pb_kits/playbook/pb_circle_chart/docs/_description.md
793
792
  - app/pb_kits/playbook/pb_circle_chart/docs/example.yml
794
793
  - app/pb_kits/playbook/pb_circle_chart/docs/index.js
795
794
  - app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss
@@ -3283,8 +3282,7 @@ files:
3283
3282
  - app/pb_kits/playbook/pb_title/docs/_title_responsive.md
3284
3283
  - app/pb_kits/playbook/pb_title/docs/_title_truncate.html.erb
3285
3284
  - app/pb_kits/playbook/pb_title/docs/_title_truncate.jsx
3286
- - app/pb_kits/playbook/pb_title/docs/_title_truncate_rails.md
3287
- - app/pb_kits/playbook/pb_title/docs/_title_truncate_react.md
3285
+ - app/pb_kits/playbook/pb_title/docs/_title_truncate.md
3288
3286
  - app/pb_kits/playbook/pb_title/docs/example.yml
3289
3287
  - app/pb_kits/playbook/pb_title/docs/index.js
3290
3288
  - app/pb_kits/playbook/pb_title/title.html.erb
@@ -3341,10 +3339,8 @@ files:
3341
3339
  - app/pb_kits/playbook/pb_toggle/toggle.test.js
3342
3340
  - app/pb_kits/playbook/pb_tooltip/_tooltip.scss
3343
3341
  - app/pb_kits/playbook/pb_tooltip/_tooltip.tsx
3344
- - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb
3345
3342
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.jsx
3346
- - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md
3347
- - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_react.md
3343
+ - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.md
3348
3344
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb
3349
3345
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx
3350
3346
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.md
@@ -3410,10 +3406,8 @@ files:
3410
3406
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx
3411
3407
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb
3412
3408
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.jsx
3413
- - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.html.erb
3414
3409
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.jsx
3415
- - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_rails.md
3416
- - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_react.md
3410
+ - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.md
3417
3411
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx
3418
3412
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md
3419
3413
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.html.erb
@@ -3620,12 +3614,11 @@ files:
3620
3614
  - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
3621
3615
  - app/pb_kits/playbook/utilities/text.ts
3622
3616
  - app/pb_kits/playbook/utilities/validEmojiChecker.ts
3623
- - dist/chunks/_circle_chart-BZmlhBs2.js
3624
- - dist/chunks/_typeahead-B1tu_vWi.js
3625
- - dist/chunks/_weekday_stacked-CKk0dR5s.js
3617
+ - dist/chunks/_typeahead-B7FRYVtS.js
3618
+ - dist/chunks/_weekday_stacked-CEJcIpjK.js
3626
3619
  - dist/chunks/lazysizes-B7xYodB-.js
3627
- - dist/chunks/lib-DYpq0k8j.js
3628
- - dist/chunks/pb_form_validation-BUOKwfvW.js
3620
+ - dist/chunks/lib-Carqm8Ip.js
3621
+ - dist/chunks/pb_form_validation-DqRmTS8m.js
3629
3622
  - dist/chunks/vendor.js
3630
3623
  - dist/menu.yml
3631
3624
  - dist/playbook-doc.js
@@ -1,65 +0,0 @@
1
- import React from "react"
2
- import AdvancedTable from '../../pb_advanced_table/_advanced_table'
3
- import MOCK_DATA from "./advanced_table_mock_data.json"
4
-
5
- const AdvancedTableCustomSort = (props) => {
6
- const columnDefinitions = [
7
- {
8
- accessor: "year",
9
- label: "Year",
10
- id: "year",
11
- cellAccessors: ["quarter", "month", "day"],
12
- },
13
- {
14
- accessor: "newEnrollments",
15
- id: "newEnrollments",
16
- label: "New Enrollments",
17
- },
18
- {
19
- accessor: "scheduledMeetings",
20
- id: "scheduledMeetings",
21
- label: "Scheduled Meetings",
22
- },
23
- {
24
- accessor: "attendanceRate",
25
- id: "attendanceRate",
26
- label: "Attendance Rate",
27
- },
28
- {
29
- accessor: "completedClasses",
30
- id: "completedClasses",
31
- label: "Completed Classes",
32
- },
33
- {
34
- accessor: "classCompletionRate",
35
- id: "classCompletionRate",
36
- label: "Class Completion Rate",
37
- },
38
- {
39
- accessor: "graduatedStudents",
40
- id: "graduatedStudents",
41
- label: "Graduated Students",
42
- },
43
- ]
44
-
45
- //Render the subRow header rows
46
- const subRowHeaders = ["Quarter", "Month", "Day"]
47
-
48
- return (
49
- <div>
50
- <AdvancedTable
51
- columnDefinitions={columnDefinitions}
52
- customSort
53
- enableToggleExpansion="all"
54
- onCustomSortClick={(subrows)=>{console.log("Custom sort clicked", subrows)}}
55
- tableData={MOCK_DATA}
56
- {...props}
57
- >
58
- <AdvancedTable.Header enableSorting />
59
- <AdvancedTable.Body subRowHeaders={subRowHeaders} />
60
- </AdvancedTable>
61
- </div>
62
- )
63
- }
64
-
65
- export default AdvancedTableCustomSort
@@ -1,5 +0,0 @@
1
- The optional `customSort` prop can be used to add a sort button within a subrow header. The button will only appear if that subrowheader has more than one subrow nested within it. This button comes with a callback function called `onCustomSortClick`.
2
-
3
- The `onCustomSortClick` provides as an argument an array of all the subrows nested within that level of the table.
4
-
5
- __NOTE__: `customSort` must be used in conjunction with the `subRowHeaders` prop. The `customSort` DOES NOT handle the sort logic, this must be handled on the frontend using the callback provided.
@@ -1,106 +0,0 @@
1
- import colors from '../tokens/exports/_colors.module.scss'
2
- import typography from '../tokens/exports/_typography.module.scss'
3
-
4
- const barGraphTheme = {
5
- title: {
6
- text: "",
7
- style: {
8
- color: colors.text_lt_default,
9
- fontFamily: typography.font_family_base,
10
- fontWeight: typography.bold,
11
- fontSize: typography.heading_3,
12
- },
13
- },
14
- subtitle: {
15
- text: "",
16
- style: {
17
- fontFamily: typography.font_family_base,
18
- color: colors.text_lt_light,
19
- fontWeight: typography.regular,
20
- fontSize: typography.text_base,
21
- },
22
- },
23
- chart: {
24
- type: "column",
25
- },
26
- tooltip: {
27
- backgroundColor: {
28
- linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
29
- stops: [
30
- [0, colors.bg_dark],
31
- [1, colors.bg_dark],
32
- ],
33
- },
34
- style: {
35
- fontFamily: typography.font_family_base,
36
- color: colors.text_dk_default,
37
- fontWeight: typography.regular,
38
- fontSize: typography.text_smaller,
39
- },
40
- },
41
- colors: [
42
- colors.data_1,
43
- colors.data_2,
44
- colors.data_3,
45
- colors.data_4,
46
- colors.data_5,
47
- colors.data_6,
48
- colors.data_7,
49
- ],
50
- credits: { enabled: false },
51
- legend: {
52
- enabled: false,
53
- itemStyle: {
54
- color: colors.text_lt_light,
55
- fill: colors.text_lt_light,
56
- fontSize: typography.text_smaller,
57
- },
58
- },
59
- xAxis: {
60
- gridLineWidth: 0,
61
- lineColor: colors.border_light,
62
- tickColor: colors.border_light,
63
- labels: {
64
- style: {
65
- fontFamily: typography.font_family_base,
66
- color: colors.text_lt_lighter,
67
- fontWeight: typography.bold,
68
- fontSize: typography.text_smaller,
69
- },
70
- },
71
- title: {
72
- style: {
73
- color: colors.text_lt_default,
74
- fontFamily: typography.font_family_base,
75
- fontWeight: typography.regular,
76
- fontSize: typography.heading_4,
77
- },
78
- },
79
- },
80
- yAxis: {
81
- alternateGridColor: undefined as string | undefined,
82
- minorTickInterval: null as number | null,
83
- gridLineColor: colors.border_light,
84
- minorGridLineColor: colors.border_light,
85
- lineWidth: 0,
86
- tickWidth: 0,
87
- labels: {
88
- style: {
89
- fontFamily: typography.font_family_base,
90
- color: colors.text_lt_lighter,
91
- fontWeight: typography.bold,
92
- fontSize: typography.text_smaller,
93
- },
94
- },
95
- title: {
96
- style: {
97
- fontFamily: typography.font_family_base,
98
- color: colors.text_lt_lighter,
99
- fontWeight: typography.bold,
100
- fontSize: typography.text_smaller,
101
- },
102
- },
103
- },
104
- }
105
-
106
- export default barGraphTheme;
@@ -1,3 +0,0 @@
1
- By default, Highcharts have a height of 400px, but this can be customized. You can override the default by specifying either a percentage or a fixed pixel value.
2
-
3
- Using a percentage maintains a consistent aspect ratio across different responsive sizes. For example, setting the height to 50% makes the chart’s height half of its width.
@@ -1,4 +0,0 @@
1
- ##### Prop
2
- `truncate` | **Type**: Enum | **Values**: 1 | 2 | 3 | 4 | 5
3
-
4
- The `truncate` prop truncates overflowing text up to a maximum of five rows and adds an ellipsis at the end.
@@ -1,2 +0,0 @@
1
- Custom data colors allow for color customization to match the needs of business requirements.
2
- Import the colors from Playbook's tokens, then set custom colors in the plotOptions.pie.colors array using the desired color variables. Hex colors are also available `eg: #CA0095`.
@@ -1 +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 circleChartTheme.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.
@@ -1,4 +0,0 @@
1
- ##### Prop
2
- `truncate` | **Type**: Enum | **Values**: 1 | 2 | 3 | 4 | 5
3
-
4
- The `truncate` prop truncates overflowing text up to a maximum of five rows and adds an ellipsis at the end.
@@ -1,14 +0,0 @@
1
- <%= pb_rails("button", props: {
2
- text: "Click to Open",
3
- id: "click-tooltip-trigger-1",
4
- variant: "primary"
5
- }) %>
6
-
7
- <%= pb_rails("tooltip", props: {
8
- trigger_element_selector: "#click-tooltip-trigger-1",
9
- tooltip_id: "click-tooltip-1",
10
- position: "top",
11
- use_click_to_open: true
12
- }) do %>
13
- Tooltip opened by click! Click trigger again to close.
14
- <% end %>
@@ -1 +0,0 @@
1
- Set the prop `use_click_to_open` as `true` so that the tooltip will only appear when an item is clicked rather than hovered over.
@@ -1,18 +0,0 @@
1
- <%
2
- options = [
3
- { label: 'Orange', value: '#FFA500' },
4
- { label: 'Red', value: '#FF0000' },
5
- { label: 'Green', value: '#00FF00' },
6
- { label: 'Blue', value: '#0000FF' },
7
- ]
8
- %>
9
-
10
- <%= pb_rails("typeahead", props: {
11
- id: "typeahead-preserve-search-input",
12
- is_multi: false,
13
- label: "Colors",
14
- options: options,
15
- placeholder: "Select...",
16
- preserve_search_input: true,
17
- })
18
- %>
@@ -1 +0,0 @@
1
- By default, text is not preserved in the typeahead kit when you click off of the input field. You can utilize the `preserve_search_input` prop in order to prevent text from being cleared when the field loses focus
@@ -1 +0,0 @@
1
- import{jsx,Fragment,jsxs}from"react/jsx-runtime";import{useState,useEffect}from"react";import{b as buildAriaProps,a as buildDataProps,c as buildHtmlProps,m as mapColors,H as HighchartsReact,d as Highcharts,e as classnames,g as globalProps,f as HighchartsMore}from"./_typeahead-B1tu_vWi.js";import{h as highchartsTheme,m as merge,a as highchartsDarkTheme}from"./lib-DYpq0k8j.js";const BarGraph=({aria:aria={},data:data={},align:align="center",axisTitle:axisTitle,dark:dark=false,chartData:chartData,className:className="pb_bar_graph",colors:colors,htmlOptions:htmlOptions={},customOptions:customOptions={},axisFormat:axisFormat,id:id,pointStart:pointStart,stacking:stacking,subTitle:subTitle,type:type="column",title:title="Title",xAxisCategories:xAxisCategories,yAxisMin:yAxisMin,yAxisMax:yAxisMax,legend:legend=false,toggleLegendClick:toggleLegendClick=true,height:height,layout:layout="horizontal",verticalAlign:verticalAlign="bottom",x:x=0,y:y=0,...props})=>{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!==void 0&&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={...props};delete filteredProps.verticalAlign;const[options,setOptions]=useState({});useEffect((()=>{setOptions(merge(staticOptions,customOptions))}),[chartData]);return jsx(HighchartsReact,{containerProps:{className:classnames(globalProps(filteredProps),className),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})};const alignBlockElement=event=>{const itemToMove=document.querySelector(`#wrapper-circle-chart-${event.target.renderTo.id} .pb-circle-chart-block`);const chartContainer=document.querySelector(`#${event.target.renderTo.id}`);if(itemToMove!==null&&chartContainer!==null){itemToMove.style.height=`${event.target.chartHeight}px`;itemToMove.style.width=`${event.target.chartWidth}px`;if(chartContainer.firstChild!==null){chartContainer.firstChild.before(itemToMove)}}};const CircleChart=({align:align="center",aria:aria={},rounded:rounded=false,borderColor:borderColor=(rounded?null:""),borderWidth:borderWidth=(rounded?20:null),chartData:chartData,children:children,className:className,colors:colors=[],customOptions:customOptions={},dark:dark=false,data:data={},dataLabelHtml:dataLabelHtml="<div>{point.name}</div>",dataLabels:dataLabels=false,height:height,htmlOptions:htmlOptions={},id:id,innerSize:innerSize="md",legend:legend=false,maxPointSize:maxPointSize=null,minPointSize:minPointSize=null,startAngle:startAngle=null,style:style="pie",title:title,tooltipHtml:tooltipHtml,useHtml:useHtml=false,zMin:zMin=null,layout:layout="horizontal",verticalAlign:verticalAlign="bottom",x:x=0,y:y=0,...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);HighchartsMore(Highcharts);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();Highcharts.setOptions({tooltip:{headerFormat:null,pointFormat:tooltipHtml?tooltipHtml:'<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',useHTML:useHtml}});const innerSizes={sm:"35%",md:"50%",lg:"85%",none:"0%"};const innerSizeFormat=size=>innerSizes[size];const filteredProps={...props};delete filteredProps.verticalAlign;const[options,setOptions]=useState({});useEffect((()=>{const formattedChartData=chartData.map((obj=>{obj.y=obj.value;delete obj.value;return obj}));const staticOptions={title:{text:title},chart:{height:height,type:style,events:{render:event=>alignBlockElement(event),redraw:event=>alignBlockElement(event)}},legend:{align:align,verticalAlign:verticalAlign,layout:layout,x:x,y:y},plotOptions:{pie:{colors:colors.length>0?mapColors(colors):highchartsTheme.colors,dataLabels:{enabled:dataLabels,connectorShape:"straight",connectorWidth:3,format:dataLabelHtml},showInLegend:legend}},series:[{minPointSize:minPointSize,maxPointSize:maxPointSize,innerSize:borderWidth==20?"100%":innerSizeFormat(innerSize),data:formattedChartData,zMin:zMin,startAngle:startAngle,borderWidth:borderWidth,borderColor:borderColor}],credits:false};setOptions(merge(staticOptions,customOptions))}),[chartData]);return jsx(Fragment,{children:children?jsxs("div",{id:`wrapper-circle-chart-${id}`,children:[jsx(HighchartsReact,{containerProps:{className:classnames("pb_circle_chart",globalProps(filteredProps)),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options}),jsx("div",{className:"pb-circle-chart-block",children:children})]}):jsx(HighchartsReact,{containerProps:{className:classnames("pb_circle_chart",globalProps(filteredProps)),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})})};export{BarGraph as B,CircleChart as C};