playbook_ui_docs 14.23.0.pre.rc.0 → 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 (33) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.jsx +65 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.md +5 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.jsx +69 -0
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.md +1 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -0
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -0
  8. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx +33 -15
  9. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx +33 -15
  10. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx +52 -22
  11. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.md +3 -0
  12. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx +12 -16
  13. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx +31 -15
  14. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx +39 -16
  15. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx +86 -38
  16. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx +32 -15
  17. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx +72 -22
  18. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md +1 -1
  19. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.jsx +31 -15
  20. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx +37 -16
  21. data/app/pb_kits/playbook/pb_bar_graph/docs/_description.md +1 -3
  22. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +1 -3
  23. data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +0 -2
  24. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb +14 -0
  25. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md +1 -0
  26. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +1 -0
  27. data/dist/playbook-doc.js +1 -1
  28. metadata +10 -7
  29. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +0 -72
  30. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md +0 -6
  31. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx +0 -64
  32. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md +0 -1
  33. /data/app/pb_kits/playbook/pb_tooltip/docs/{_tooltip_click_open.md → _tooltip_click_open_react.md} +0 -0
@@ -1,8 +1,11 @@
1
1
  import React from 'react'
2
+ import barGraphTheme from '../barGraphTheme';
3
+ import Highcharts from "highcharts";
4
+ import HighchartsReact from "highcharts-react-official";
2
5
 
3
- import BarGraph from "../../pb_bar_graph/_bar_graph"
4
6
  import Title from "../../pb_title/_title"
5
7
 
8
+
6
9
  const chartData = [{
7
10
  name: 'Installation',
8
11
  data: [1475],
@@ -20,7 +23,76 @@ const chartData = [{
20
23
  data: [1111],
21
24
  }]
22
25
 
23
- const BarGraphLegendPosition = (props) => (
26
+ const alignChartOptions = {
27
+ series: chartData,
28
+ title: {
29
+ text: 'Alignment of Legend',
30
+ },
31
+ subtitle: {
32
+ text: 'Source: thesolarfoundation.com',
33
+ },
34
+ xAxis: {
35
+ categories: ['Jan'],
36
+ },
37
+ yAxis: {
38
+ title: {
39
+ text: 'Number of Employees',
40
+ },
41
+ },
42
+ legend: {
43
+ enabled: true,
44
+ verticalAlign: 'top',
45
+ align: 'right',
46
+ },
47
+ }
48
+
49
+ const layoutChartOptions = {
50
+ series: chartData,
51
+ title: {
52
+ text: 'Layout of Legend',
53
+ },
54
+ xAxis: {
55
+ categories: ['Jan'],
56
+ },
57
+ yAxis: {
58
+ title: {
59
+ text: 'Number of Employees',
60
+ },
61
+ },
62
+ legend: {
63
+ enabled: true,
64
+ layout: 'vertical',
65
+ },
66
+ }
67
+
68
+ const offsetChartOptions = {
69
+ series: chartData,
70
+ title: {
71
+ text: 'Offset of Legend',
72
+ },
73
+ xAxis: {
74
+ categories: ['Jan'],
75
+ },
76
+ yAxis: {
77
+ title: {
78
+ text: 'Number of Employees',
79
+ },
80
+ },
81
+ legend: {
82
+ enabled: true,
83
+ layout: 'vertical',
84
+ x: 100,
85
+ y: 10,
86
+ },
87
+ }
88
+
89
+ const BarGraphLegendPosition = () => {
90
+ const alignOptions = Highcharts.merge({}, barGraphTheme, alignChartOptions)
91
+ const layoutOptions = Highcharts.merge({}, barGraphTheme, layoutChartOptions)
92
+ const offsetOptions = Highcharts.merge({}, barGraphTheme, offsetChartOptions)
93
+
94
+
95
+ return (
24
96
  <div>
25
97
  <Title
26
98
  paddingBottom="sm"
@@ -29,19 +101,11 @@ const BarGraphLegendPosition = (props) => (
29
101
  tag="h4"
30
102
  text="align | verticalAlign"
31
103
  />
32
- <BarGraph
33
- align='right'
34
- axisTitle="Number of Employees"
35
- chartData={chartData}
36
- id="legend-position-bar"
37
- legend
38
- paddingBottom="sm"
39
- title="Alignment of Legend"
40
- verticalAlign="top"
41
- xAxisCategories={['Jan']}
42
- yAxisMin={0}
43
- {...props}
104
+ <HighchartsReact
105
+ highcharts={Highcharts}
106
+ options={alignOptions}
44
107
  />
108
+
45
109
  <Title
46
110
  paddingBottom="sm"
47
111
  paddingTop="sm"
@@ -49,19 +113,11 @@ const BarGraphLegendPosition = (props) => (
49
113
  tag="h4"
50
114
  text="layout"
51
115
  />
52
- <BarGraph
53
- axisTitle="Number of Employees"
54
- chartData={chartData}
55
- id="legend-position-bar-1"
56
- layout="vertical"
57
- legend
58
- paddingBottom="sm"
59
- paddingTop="sm"
60
- title="Layout of Legend"
61
- xAxisCategories={['Jan']}
62
- yAxisMin={0}
63
- {...props}
116
+ <HighchartsReact
117
+ highcharts={Highcharts}
118
+ options={layoutOptions}
64
119
  />
120
+
65
121
  <Title
66
122
  paddingBottom="sm"
67
123
  paddingTop="sm"
@@ -69,20 +125,12 @@ const BarGraphLegendPosition = (props) => (
69
125
  tag="h4"
70
126
  text="x | y"
71
127
  />
72
- <BarGraph
73
- axisTitle="Number of Employees"
74
- chartData={chartData}
75
- id="legend-position-bar-2"
76
- layout="vertical"
77
- legend
78
- title="Offset of Legend"
79
- x={100}
80
- xAxisCategories={['Jan']}
81
- y={10}
82
- yAxisMin={0}
83
- {...props}
128
+ <HighchartsReact
129
+ highcharts={Highcharts}
130
+ options={offsetOptions}
84
131
  />
85
132
  </div>
86
133
  )
134
+ }
87
135
 
88
136
  export default BarGraphLegendPosition
@@ -1,6 +1,8 @@
1
1
  import React from 'react'
2
+ import barGraphTheme from '../barGraphTheme';
3
+ import Highcharts from "highcharts";
4
+ import HighchartsReact from "highcharts-react-official";
2
5
 
3
- import BarGraph from '../_bar_graph'
4
6
 
5
7
  const chartData = [{
6
8
  name: 'Installation',
@@ -10,26 +12,41 @@ const chartData = [{
10
12
  name: 'Manufacturing',
11
13
  data: [1475, 200, 1000, 654, -656],
12
14
  threshold: 0
13
- },
15
+ },
14
16
  {
15
17
  name: 'Sales & Distribution',
16
18
  data: [1270, 100, -1200, 554, 756],
17
19
  threshold: 0
18
20
  }]
19
21
 
22
+ const chartOptions = {
23
+ series: chartData,
24
+ title: {
25
+ text: "Bar Graph with Negative Numbers",
26
+ },
27
+ xAxis: {
28
+ categories: ["Jan", "Feb", "Mar", "Apr", "May"],
29
+ },
30
+ yAxis: {
31
+ title: {
32
+ text: "Number of Employees",
33
+ },
34
+ },
35
+ legend: { enabled: true },
36
+ };
20
37
 
21
- const BarGraphStacked = (props) => (
22
- <div>
23
- <BarGraph
24
- axisTitle="Number of Employees"
25
- chartData={chartData}
26
- id="bar-default"
27
- legend
28
- title="Bar Graph with Negative Numbers"
29
- xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
30
- {...props}
31
- />
32
- </div>
33
- )
38
+
39
+ const BarGraphStacked = () => {
40
+ const options = Highcharts.merge({}, barGraphTheme, chartOptions)
41
+
42
+ return(
43
+ <div>
44
+ <HighchartsReact
45
+ highcharts={Highcharts}
46
+ options={options}
47
+ />
48
+ </div>
49
+ )
50
+ }
34
51
 
35
52
  export default BarGraphStacked
@@ -1,6 +1,11 @@
1
1
  import React from 'react'
2
+ import barGraphTheme from '../barGraphTheme';
3
+ import Highcharts from "highcharts"
4
+ import HighchartsReact from "highcharts-react-official"
2
5
 
3
- import BarGraph from '../_bar_graph'
6
+
7
+ import colors from '../../tokens/exports/_colors.module.scss'
8
+ import typography from '../../tokens/exports/_typography.module.scss'
4
9
 
5
10
  const chartData = [{
6
11
  name: 'Number of Installations',
@@ -13,24 +18,69 @@ const chartData = [{
13
18
  yAxis: 1
14
19
  }]
15
20
 
16
- const axisTitles = [ {name: "Number of Installations"}, {name: "Percentage"}]
17
-
18
- const axisFormats = [{format: ""}, {format: "{value}%"}]
19
-
20
- const BarGraphSecondaryYAxis= (props) => (
21
- <div>
22
- <BarGraph
23
- axisFormat={axisFormats}
24
- axisTitle={axisTitles}
25
- chartData={chartData}
26
- id="bar-spline"
27
- legend
28
- title="Bar Graph with Secondary Y-axis"
29
- xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
30
- yAxisMin={0}
31
- {...props}
32
- />
33
- </div>
34
- )
35
-
36
- export default BarGraphSecondaryYAxis
21
+ const chartOptions = {
22
+ series: chartData,
23
+ title: {
24
+ text: "Bar Graph with Secondary Y-axis",
25
+ },
26
+ xAxis: {
27
+ categories: ["Jan", "Feb", "Mar", "Apr", "May"],
28
+ },
29
+ yAxis: [{
30
+ labels: {
31
+ style: {
32
+ fontFamily: typography.font_family_base,
33
+ color: colors.text_lt_lighter,
34
+ fontWeight: typography.bold,
35
+ fontSize: typography.text_smaller,
36
+ },
37
+ },
38
+ title: {
39
+ text: "Number of Employees",
40
+ style: {
41
+ fontFamily: typography.font_family_base,
42
+ color: colors.text_lt_lighter,
43
+ fontWeight: typography.bold,
44
+ fontSize: typography.text_smaller,
45
+ },
46
+ },
47
+ }, {
48
+ labels: {
49
+ style: {
50
+ fontFamily: typography.font_family_base,
51
+ color: colors.text_lt_lighter,
52
+ fontWeight: typography.bold,
53
+ fontSize: typography.text_smaller,
54
+ },
55
+ },
56
+ title: {
57
+ text: "Percentage",
58
+ style: {
59
+ fontFamily: typography.font_family_base,
60
+ color: colors.text_lt_lighter,
61
+ fontWeight: typography.bold,
62
+ fontSize: typography.text_smaller,
63
+ },
64
+ },
65
+
66
+ opposite: true,
67
+ min: 0,
68
+ max: 100
69
+ }],
70
+ legend: { enabled: true },
71
+ }
72
+
73
+ const BarGraphSecondaryYAxis = () => {
74
+ const options = Highcharts.merge({}, barGraphTheme, chartOptions)
75
+
76
+ return (
77
+ <div>
78
+ <HighchartsReact
79
+ highcharts={Highcharts}
80
+ options={options}
81
+ />
82
+ </div>
83
+ )
84
+ }
85
+
86
+ export default BarGraphSecondaryYAxis
@@ -1,3 +1,3 @@
1
- Optionally add a second yAxis to support secondary datasets (e.x., a spline) by passing` yAxis: 1` to the second node of your `chartData` array.
1
+ Optionally add a second yAxis to support secondary datasets (e.x., a spline) by passing `yAxis: 1` to the second node of your `chartData` array.
2
2
 
3
3
  To customize the format and/or title of your secondary yAxis, pass your desired values as arrays through the `axisFormat` and `axisTitle` props, respectively.
@@ -1,6 +1,8 @@
1
1
  import React from 'react'
2
+ import barGraphTheme from '../barGraphTheme';
3
+ import Highcharts from "highcharts";
4
+ import HighchartsReact from "highcharts-react-official";
2
5
 
3
- import BarGraph from '../_bar_graph'
4
6
 
5
7
  const chartData = [{
6
8
  name: 'Number of Installations',
@@ -12,19 +14,33 @@ const chartData = [{
12
14
  color: '#F9BB00',
13
15
  }]
14
16
 
15
- const BarGraphSpline = (props) => (
16
- <div>
17
- <BarGraph
18
- axisTitle="Number of Employees"
19
- chartData={chartData}
20
- id="bar-spline"
21
- legend
22
- title="Bar Graph with Spline"
23
- xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
24
- yAxisMin={0}
25
- {...props}
26
- />
27
- </div>
28
- )
17
+ const chartOptions = {
18
+ series: chartData,
19
+ title: {
20
+ text: "Bar Graph with Spline",
21
+ },
22
+ xAxis: {
23
+ categories: ["Jan", "Feb", "Mar", "Apr", "May"],
24
+ },
25
+ yAxis: {
26
+ title: {
27
+ text: "Number of Employees",
28
+ },
29
+ },
30
+ legend: { enabled: true },
31
+ };
32
+
33
+ const BarGraphSpline = () => {
34
+ const options = Highcharts.merge({}, barGraphTheme, chartOptions)
35
+
36
+ return (
37
+ <div>
38
+ <HighchartsReact
39
+ highcharts={Highcharts}
40
+ options={options}
41
+ />
42
+ </div>
43
+ )
44
+ }
29
45
 
30
46
  export default BarGraphSpline
@@ -1,6 +1,8 @@
1
1
  import React from 'react'
2
+ import barGraphTheme from '../barGraphTheme';
3
+ import Highcharts from "highcharts";
4
+ import HighchartsReact from "highcharts-react-official";
2
5
 
3
- import BarGraph from '../_bar_graph'
4
6
 
5
7
  const chartData = [{
6
8
  name: 'Installation',
@@ -14,21 +16,40 @@ const chartData = [{
14
16
  data: [975, 1600, 1500, 924, 500],
15
17
  }]
16
18
 
19
+ const chartOptions = {
20
+ series: chartData,
21
+ title: {
22
+ text: "Bar Graph with Stacked Columns",
23
+ },
24
+ xAxis: {
25
+ categories: ["Jan", "Feb", "Mar", "Apr", "May"],
26
+ },
27
+ yAxis: {
28
+ title: {
29
+ text: "Number of Employees",
30
+ },
31
+ },
32
+ plotOptions: {
33
+ column: {
34
+ stacking: 'normal',
35
+ borderWidth: 0,
36
+ }
37
+ },
38
+ legend: { enabled: true },
39
+ };
17
40
 
18
- const BarGraphStacked = (props) => (
19
- <div>
20
- <BarGraph
21
- axisTitle="Number Of Employees"
22
- chartData={chartData}
23
- id="bar-default"
24
- legend
25
- stacking="normal"
26
- title="Bar Graph with Stacked Columns"
27
- xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
28
- yAxisMin={0}
29
- {...props}
30
- />
31
- </div>
32
- )
41
+
42
+ const BarGraphStacked = () => {
43
+ const options = Highcharts.merge({}, barGraphTheme, chartOptions)
44
+
45
+ return (
46
+ <div>
47
+ <HighchartsReact
48
+ highcharts={Highcharts}
49
+ options={options}
50
+ />
51
+ </div>
52
+ )
53
+ }
33
54
 
34
55
  export default BarGraphStacked
@@ -1,3 +1 @@
1
- Bar graphs are used to compare data. Bar graphs are not typically used to show percentages. The default height of bar graph is 400px and can be changed. The default height is in pixel units, but can also use percentage string (percentage would be that of the width. For example, `height:"50%"` would mean that the height is 50% of the width). This allows for preserving the aspect ratio across responsive sizes.
2
-
3
- For more information, see: <a href="https://api.highcharts.com/highcharts/chart.height" target="_blank"> highcharts/chart.height</a>.
1
+ To apply Playbook styles to your Highchart, import BarGraphTheme.ts 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.
@@ -17,15 +17,13 @@ examples:
17
17
 
18
18
  react:
19
19
  - bar_graph_default: Default
20
- - bar_graph_pb_styles: Playbook Styles
21
20
  - bar_graph_legend: Legend
22
21
  - bar_graph_legend_position: Legend Position
23
22
  - bar_graph_legend_non_clickable: Legend Non Clickable
24
23
  - bar_graph_height: Height
25
24
  - bar_graph_spline: Spline
26
25
  - bar_graph_colors: Color Overrides
27
- - bar_graph_custom: Custom Overrides
28
26
  - bar_graph_stacked: Stacked
29
27
  - bar_graph_negative_numbers: Negative Numbers
30
28
  - bar_graph_secondary_y_axis: Secondary Y-Axis
31
- - bar_graph_horizontal: Custom Options From Highcharts
29
+ - bar_graph_horizontal: Horizontal Bar Graph
@@ -5,9 +5,7 @@ export { default as BarGraphLegendNonClickable } from './_bar_graph_legend_non_c
5
5
  export { default as BarGraphHeight } from './_bar_graph_height.jsx'
6
6
  export { default as BarGraphSpline } from './_bar_graph_spline.jsx'
7
7
  export { default as BarGraphColors } from './_bar_graph_colors.jsx'
8
- export { default as BarGraphCustom } from './_bar_graph_custom.jsx'
9
8
  export { default as BarGraphStacked } from './_bar_graph_stacked.jsx'
10
9
  export { default as BarGraphNegativeNumbers } from './_bar_graph_negative_numbers.jsx'
11
10
  export { default as BarGraphSecondaryYAxis } from './_bar_graph_secondary_y_axis.jsx'
12
11
  export { default as BarGraphHorizontal } from './_bar_graph_horizontal.jsx'
13
- export { default as BarGraphPbStyles } from './_bar_graph_pb_styles.jsx'
@@ -0,0 +1,14 @@
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 %>
@@ -0,0 +1 @@
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.
@@ -9,6 +9,7 @@ examples:
9
9
  - tooltip_with_icon_circle: Icon Circle Tooltip
10
10
  - tooltip_delay_rails: Delay
11
11
  - tooltip_show_tooltip: Show Tooltip
12
+ - tooltip_click_open: Click to Open
12
13
 
13
14
  react:
14
15
  - tooltip_default_react: Default