playbook_ui_docs 14.23.0.pre.rc.1 → 14.23.0.pre.rc.2

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 (27) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx +33 -15
  3. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx +33 -15
  4. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx +52 -22
  5. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.md +3 -0
  6. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx +12 -16
  7. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx +31 -15
  8. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx +39 -16
  9. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx +86 -38
  10. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx +32 -15
  11. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx +72 -22
  12. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md +1 -1
  13. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.jsx +31 -15
  14. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx +37 -16
  15. data/app/pb_kits/playbook/pb_bar_graph/docs/_description.md +1 -3
  16. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +1 -3
  17. data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +0 -2
  18. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb +14 -0
  19. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md +1 -0
  20. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +1 -0
  21. data/dist/playbook-doc.js +1 -1
  22. metadata +6 -7
  23. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +0 -72
  24. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md +0 -6
  25. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx +0 -64
  26. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md +0 -1
  27. /data/app/pb_kits/playbook/pb_tooltip/docs/{_tooltip_click_open.md → _tooltip_click_open_react.md} +0 -0
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui_docs
3
3
  version: !ruby/object:Gem::Version
4
- version: 14.23.0.pre.rc.1
4
+ version: 14.23.0.pre.rc.2
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-06-26 00:00:00.000000000 Z
12
+ date: 2025-07-03 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: playbook_ui
@@ -230,14 +230,13 @@ files:
230
230
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.html.erb
231
231
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx
232
232
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.md
233
- - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx
234
- - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md
235
233
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb
236
234
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.md
237
235
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.html.erb
238
236
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx
239
237
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.html.erb
240
238
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx
239
+ - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.md
241
240
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.html.erb
242
241
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx
243
242
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.html.erb
@@ -249,8 +248,6 @@ files:
249
248
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.md
250
249
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.html.erb
251
250
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx
252
- - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx
253
- - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md
254
251
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.html.erb
255
252
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx
256
253
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md
@@ -2285,8 +2282,10 @@ files:
2285
2282
  - app/pb_kits/playbook/pb_toggle/docs/_toggle_props_swift.md
2286
2283
  - app/pb_kits/playbook/pb_toggle/docs/example.yml
2287
2284
  - app/pb_kits/playbook/pb_toggle/docs/index.js
2285
+ - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb
2288
2286
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.jsx
2289
- - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.md
2287
+ - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md
2288
+ - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_react.md
2290
2289
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb
2291
2290
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx
2292
2291
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.md
@@ -1,72 +0,0 @@
1
- import React from 'react'
2
- import ReactDOMServer from 'react-dom/server'
3
- import BarGraph from '../_bar_graph'
4
- import Icon from '../../pb_icon/_icon'
5
-
6
- const chartData = [
7
- {
8
- name: 'Role',
9
- data: [0, 200, 300, 654, 656],
10
- },
11
- {
12
- name: 'Company',
13
- data: [150, 524, 320, 440, 500],
14
- },
15
- ]
16
-
17
- const renderIcon = (iconName, color) => {
18
- return ReactDOMServer.renderToStaticMarkup(
19
- <Icon
20
- color={color}
21
- icon={iconName}
22
- />)
23
- };
24
-
25
- const barGraphOptions = {
26
- yAxis: {
27
- tickInterval: 5,
28
- },
29
- xAxis: {
30
- categories: ['1', '2', '3', '4', '5'],
31
- labels: {
32
- useHTML: true,
33
- formatter: function () {
34
- switch (this.value) {
35
- case '1':
36
- return `${renderIcon('frown', 'error')}`;
37
- case '2':
38
- return `${renderIcon('frown', 'warning')}`;
39
- case '3':
40
- return `${renderIcon('frown-open', 'neutral')}`;
41
- case '4':
42
- return `${renderIcon('smile', 'category_7')}`;
43
- case '5':
44
- return `${renderIcon('smile-beam', 'success')}`;
45
- default:
46
- return ''
47
- }
48
- },
49
- style: {
50
- fontSize: '1.4em',
51
- },
52
- y: 42,
53
- },
54
- },
55
- legend: {
56
- itemMarginTop: 62,
57
- },
58
- }
59
-
60
- const BarGraphCustom = () => (
61
- <div>
62
- <BarGraph
63
- chartData={chartData}
64
- customOptions={barGraphOptions}
65
- id="happiness-dashboard"
66
- legend
67
- title="Bar Graph with Custom Overrides"
68
- />
69
- </div>
70
- )
71
-
72
- export default BarGraphCustom
@@ -1,6 +0,0 @@
1
- The `customOptions` prop provides comprehensive access to additional [Highcharts options](https://api.highcharts.com/highcharts/) that are not explicitly defined as props.
2
- It's important to note that certain options may require specific script imports to function properly.
3
-
4
- Note: If you are having trouble getting any Highcharts options to work, please match the formatting of our [staticOptions](https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx#L85-L141). For example, `yAxis` will need to be wrapped with square brackets.
5
-
6
- You may also need to override any of the [defaults](https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx#L45-L73) in order to get that options to work.
@@ -1,64 +0,0 @@
1
- import React from 'react'
2
- import Highcharts from "highcharts";
3
- import HighchartsReact from "highcharts-react-official";
4
-
5
- import "../BarGraphStyles.scss";
6
- // Your path might look more like this
7
- //import "playbook-ui/dist/pb_bar_graph/BarGraphStyles.scss";
8
-
9
- const columnChartData = [
10
- {
11
- name: "Installation",
12
- data: [1475, 200, 3000, 654, 656],
13
- },
14
- {
15
- name: "Manufacturing",
16
- data: [4434, 524, 2320, 440, 500],
17
- },
18
- {
19
- name: "Sales & Distribution",
20
- data: [3387, 743, 1344, 434, 440],
21
- },
22
- {
23
- name: "Project Development",
24
- data: [3227, 878, 999, 780, 1000],
25
- },
26
- {
27
- name: "Other",
28
- data: [1111, 677, 3245, 500, 200],
29
- },
30
- ];
31
-
32
- const columnOptions = {
33
- chart: {
34
- type: "column",
35
- },
36
- series: columnChartData,
37
- title: {
38
- text: "Solar Employment Growth by Sector, 2010-2016",
39
- },
40
- subtitle: {
41
- text: "Source: thesolarfoundation.com",
42
- },
43
- xAxis: {
44
- categories: ["Jan", "Feb", "Mar", "Apr", "May"],
45
- },
46
- yAxis: {
47
- min: 0,
48
- title: {
49
- text: "Number of Employees",
50
- },
51
- },
52
- legend: { enabled: false },
53
- credits: { enabled: false },
54
- };
55
-
56
- const BarGraphPbStyles = () => (
57
- <div>
58
- <HighchartsReact highcharts={Highcharts}
59
- options={columnOptions}
60
- />
61
- </div>
62
- )
63
-
64
- export default BarGraphPbStyles
@@ -1 +0,0 @@
1
- You don't need to use the bar graph kit to apply the styles to your Highcharts bar graph. Just import the BarGraphStyles.scss to your component and the styles will apply automatically.