playbook_ui_docs 14.14.0.pre.rc.3 → 14.14.0.pre.rc.4
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx +64 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md +1 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.html.erb +51 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click_rails.md +2 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +1 -0
- data/dist/playbook-doc.js +1 -1
- metadata +7 -3
- /data/app/pb_kits/playbook/pb_table/docs/{_table_with_collapsible_with_custom_click.md → _table_with_collapsible_with_custom_click_react.md} +0 -0
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: f270b29c635bca418f611e62f1bd4c74e27e946cd66a76a22e26bbd1612460fd
|
|
4
|
+
data.tar.gz: aaefeec03cf4b40f9a3e4f5006e2ad9e3b760f8ff5f37e3053e184963dd7581f
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 5d912f8c5ca639993f1bb25f4cc40365006adf0973e43b4b705828a53d27129e7630aeb842a38488676095260bb08b34bfb37d0e8be17d4c796e84cfc331b4bd
|
|
7
|
+
data.tar.gz: 5bbabba7c251d673ffc49f4104e7dbb4675514e50f908bae29d84bf7e531cf0fc5aaff883149ce24dc9ede9b6d9e6072a0b974d7ab2e99f585e99555ef7a211d
|
|
@@ -0,0 +1,64 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
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.
|
|
@@ -10,3 +10,4 @@ export { default as BarGraphStacked } from './_bar_graph_stacked.jsx'
|
|
|
10
10
|
export { default as BarGraphNegativeNumbers } from './_bar_graph_negative_numbers.jsx'
|
|
11
11
|
export { default as BarGraphSecondaryYAxis } from './_bar_graph_secondary_y_axis.jsx'
|
|
12
12
|
export { default as BarGraphHorizontal } from './_bar_graph_horizontal.jsx'
|
|
13
|
+
export { default as BarGraphPbStyles } from './_bar_graph_pb_styles.jsx'
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
<% content = capture do %>
|
|
2
|
+
<%= pb_rails("card", props: { border_none: true, border_radius: "none", padding: "md" }) do %>
|
|
3
|
+
<%= pb_rails("body", props: { text: "Nested content inside a Table Row" }) %>
|
|
4
|
+
<% end %>
|
|
5
|
+
<% end %>
|
|
6
|
+
|
|
7
|
+
<%= pb_rails("table", props: { size: "sm" }) do %>
|
|
8
|
+
<%= pb_rails("table/table_head") do %>
|
|
9
|
+
<%= pb_rails("table/table_row") do %>
|
|
10
|
+
<%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
|
|
11
|
+
<%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
|
|
12
|
+
<%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
|
|
13
|
+
<%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
|
|
14
|
+
<%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
|
|
15
|
+
<%= pb_rails("table/table_header", props: { text: ""}) %>
|
|
16
|
+
<% end %>
|
|
17
|
+
<% end %>
|
|
18
|
+
<%= pb_rails("table/table_body") do %>
|
|
19
|
+
<%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, toggle_cell_id: "cell-1", id: "5" }) do %>
|
|
20
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
21
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
22
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
23
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
24
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
25
|
+
<%= pb_rails("table/table_cell", props: { text_align: "right", id: "cell-1", cursor: "pointer" }) do %>
|
|
26
|
+
<%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
|
|
27
|
+
<% end %>
|
|
28
|
+
<% end %>
|
|
29
|
+
<%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, toggle_cell_id: "cell-2", id: "6" }) do %>
|
|
30
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
31
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
32
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
33
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
34
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
35
|
+
<%= pb_rails("table/table_cell", props: { text_align: "right", id: "cell-2", cursor: "pointer" }) do %>
|
|
36
|
+
<%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
|
|
37
|
+
<% end %>
|
|
38
|
+
<% end %>
|
|
39
|
+
<%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, toggle_cell_id: "cell-3", id: "7" }) do %>
|
|
40
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
41
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
42
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
43
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
44
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
45
|
+
<%= pb_rails("table/table_cell", props: { text_align: "right", id: "cell-3", cursor: "pointer" }) do %>
|
|
46
|
+
<%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
|
|
47
|
+
<% end %>
|
|
48
|
+
<% end %>
|
|
49
|
+
<% end %>
|
|
50
|
+
<% end %>
|
|
51
|
+
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
When using the `collapsible` prop, the default functionality is that the entire Row will be clickable to toggle the Row. To limit the click event to a specific Table Cell, you can use the `toggle_cell_id` prop to pass in the id of the Cell you want to use as the trigger.
|
|
2
|
+
__NOTE__: `toggle_cell_id` and the `id` on the Cell you want to use as the trigger MUST be the same. Please also be aware that you will need to pass in an `id` to any Table Rows you want to be collapsible. Make sure every `id` is unique if you are using multipe collapsibles.
|
|
@@ -31,6 +31,7 @@ examples:
|
|
|
31
31
|
- table_with_subcomponents_as_divs: Table with Sub Components (Divs)
|
|
32
32
|
- table_outer_padding: Outer Padding
|
|
33
33
|
- table_with_collapsible: Table with Collapsible
|
|
34
|
+
- table_with_collapsible_with_custom_click: Table with Collapsible with Custom Click
|
|
34
35
|
- table_with_collapsible_with_custom_content_rails: Table with Collapsible with Custom Content
|
|
35
36
|
- table_with_collapsible_with_nested_rows_rails: Table with Collapsible with Nested Rows
|
|
36
37
|
- table_with_collapsible_with_nested_table_rails: Table with Collapsible with Nested Table
|