playbook_ui_docs 14.12.0.pre.alpha.play1830updateclassnamesdependency5888 → 14.12.0.pre.alpha.play1849cssbargraph5901
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.
- 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_copy_button/docs/_copy_button_default.html.erb +2 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb +5 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +3 -3
- data/app/pb_kits/playbook/pb_link/docs/_link_target.html.erb +15 -0
- data/app/pb_kits/playbook/pb_link/docs/_link_target.jsx +29 -0
- data/app/pb_kits/playbook/pb_link/docs/example.yml +5 -3
- data/app/pb_kits/playbook/pb_link/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tooltip.html.erb +6 -6
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb +1 -1
- data/dist/playbook-doc.js +1 -1
- metadata +7 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 6f42b391ecaf21b4335e781ca86d1ef688a426ab7040a1d5ede989137f4b9b0a
|
|
4
|
+
data.tar.gz: 9aa88344fd52e57753c99c1ff678f4c290dd8b1c1a819e9da6edbb50cd41c153
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 791bb2ac382c5c50cb7905eca350b64f7e829449662a26f1149cbcc047685748d8c0f35b290cc600054dfb5308e967a8b901140522083a89e39164f7ae31af6b
|
|
7
|
+
data.tar.gz: 763a3ec4f0dafc812714a1d532674e4808e86bf9dc9220e287b189316a5a661ec7227b85a258ab99e5a490b2081de80b0930160a4d14f1a1ff8f5afc5415c43d
|
|
@@ -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 bargraph kit to apply the styles to your Highcharts Bargraph. Just import the BarGraphStyles.scss to your component and the sytles will apply automaticlly.
|
|
@@ -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,2 @@
|
|
|
1
|
+
<%= pb_rails("copy_button", props: { id: "default-copy-button", text: "Copy Text", value: "Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease." } ) %>
|
|
2
|
+
<%= pb_rails("textarea", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<%= pb_rails("body", props: { id: "body", text: "Copy this body text!"}) %>
|
|
2
|
+
<%= pb_rails("copy_button", props: { text: "Copy Body text", from: "body", id: "copy-body-button" }) %>
|
|
3
|
+
<%= pb_rails("text_input", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>
|
|
4
|
+
<%= pb_rails("copy_button", props: { text: "Copy Text Input", from: "copy-input", id: "copy-input-button" }) %>
|
|
5
|
+
<%= pb_rails("text_input", props: { margin_top: "xs", id: "copy-input" , value: "Copy and paste here" }) %>
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<div>
|
|
2
|
+
<%= pb_rails("link", props: {
|
|
3
|
+
href: "http://google.com",
|
|
4
|
+
target: "blank",
|
|
5
|
+
text: "Open In New Window"
|
|
6
|
+
}) %>
|
|
7
|
+
</div>
|
|
8
|
+
|
|
9
|
+
<div>
|
|
10
|
+
<%= pb_rails("link", props: {
|
|
11
|
+
href: "https://playbook.powerapp.cloud/",
|
|
12
|
+
target: "child",
|
|
13
|
+
text: "Open In Child Tab",
|
|
14
|
+
}) %>
|
|
15
|
+
</div>
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Link } from 'playbook-ui'
|
|
3
|
+
|
|
4
|
+
const LinkTarget = (props) => (
|
|
5
|
+
<div>
|
|
6
|
+
<div>
|
|
7
|
+
<Link
|
|
8
|
+
aria={{ label: 'Link to Google in new window' }}
|
|
9
|
+
href="https://google.com"
|
|
10
|
+
tabIndex={0}
|
|
11
|
+
target='blank'
|
|
12
|
+
text="Open In New Window"
|
|
13
|
+
{...props}
|
|
14
|
+
/>
|
|
15
|
+
</div>
|
|
16
|
+
<div>
|
|
17
|
+
<Link
|
|
18
|
+
aria={{ label: 'Link to Playbook in a child tab' }}
|
|
19
|
+
href="https://playbook.powerapp.cloud/"
|
|
20
|
+
tabIndex={0}
|
|
21
|
+
target='child'
|
|
22
|
+
text="Open In Child Tab"
|
|
23
|
+
{...props}
|
|
24
|
+
/>
|
|
25
|
+
</div>
|
|
26
|
+
</div>
|
|
27
|
+
)
|
|
28
|
+
|
|
29
|
+
export default LinkTarget
|
|
@@ -1,16 +1,18 @@
|
|
|
1
1
|
examples:
|
|
2
|
-
|
|
2
|
+
|
|
3
3
|
rails:
|
|
4
4
|
- link_color: Color
|
|
5
5
|
- link_underline: Underline
|
|
6
6
|
- link_icon: Icon
|
|
7
7
|
- link_disabled: Disabled
|
|
8
8
|
- link_tag: Tag
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
- link_target: Target
|
|
10
|
+
|
|
11
|
+
|
|
11
12
|
react:
|
|
12
13
|
- link_color: Color
|
|
13
14
|
- link_underline: Underline
|
|
14
15
|
- link_icon: Icon
|
|
15
16
|
- link_disabled: Disabled
|
|
16
17
|
- link_tag: Tag
|
|
18
|
+
- link_target: Target
|
|
@@ -2,4 +2,5 @@ export { default as LinkColor } from './_link_color.jsx'
|
|
|
2
2
|
export { default as LinkUnderline } from './_link_underline.jsx'
|
|
3
3
|
export { default as LinkIcon } from './_link_icon.jsx'
|
|
4
4
|
export { default as LinkDisabled } from './_link_disabled.jsx'
|
|
5
|
-
export { default as LinkTag } from './_link_tag.jsx'
|
|
5
|
+
export { default as LinkTag } from './_link_tag.jsx'
|
|
6
|
+
export { default as LinkTarget } from './_link_target.jsx'
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-1", tooltip: "Tooltip for step 1", tooltip_position: "right", step_direction: "horizontal" }) do %>
|
|
3
3
|
step 1
|
|
4
4
|
<% end %>
|
|
5
|
-
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-2", tooltip: "Tooltip for step 2", step_direction: "horizontal" }) do %>
|
|
5
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-2", tooltip: "Tooltip for step 2", tooltip_position: "left", step_direction: "horizontal" }) do %>
|
|
6
6
|
step 2
|
|
7
7
|
<% end %>
|
|
8
8
|
<%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-3", tooltip: "Tooltip for step 3", tooltip_position: "left", step_direction: "horizontal" }) do %>
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-4", tooltip: "Tooltip for step 4", tooltip_position: "bottom" }) do %>
|
|
12
12
|
step 4
|
|
13
13
|
<% end %>
|
|
14
|
-
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-5", tooltip: "Tooltip for step 5" }) do %>
|
|
14
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-5", tooltip: "Tooltip for step 5", tooltip_position: "left" }) do %>
|
|
15
15
|
step 5
|
|
16
16
|
<% end %>
|
|
17
17
|
<% end %>
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
<br /><br />
|
|
20
20
|
|
|
21
21
|
<%= pb_rails("progress_step", props: {orientation: "vertical"}) do %>
|
|
22
|
-
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-6", tooltip: "Tooltip step 1", step_direction: "vertical" }) do %>
|
|
22
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-6", tooltip: "Tooltip step 1", step_direction: "vertical", tooltip_position: "left" }) do %>
|
|
23
23
|
<% end %>
|
|
24
24
|
<%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-7", tooltip: "Tooltip step 2", tooltip_position: "left"}) do %>
|
|
25
25
|
<% end %>
|
|
@@ -31,10 +31,10 @@
|
|
|
31
31
|
|
|
32
32
|
<br /><br>
|
|
33
33
|
<%= pb_rails("progress_step",props:{ variant:"tracker", icon:true}) do %>
|
|
34
|
-
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-10", tooltip: "The order has been received", step_direction: "horizontal" , tooltip_position: "right"
|
|
34
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-10", tooltip: "The order has been received", step_direction: "horizontal" , tooltip_position: "right" }) do %>
|
|
35
35
|
<%= pb_rails("caption", props:{text: "Ordered"})%>
|
|
36
36
|
<% end %>
|
|
37
|
-
<%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-11", tooltip:"Item(s) have been shipped" }) do %>
|
|
37
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-11", tooltip:"Item(s) have been shipped", tooltip_position: "right" }) do %>
|
|
38
38
|
<%= pb_rails("caption", props:{text: "Shipped"})%>
|
|
39
39
|
<% end %>
|
|
40
40
|
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-12", tooltip:"This step has not been reached", tooltip_position: "left" }) do %>
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
<%= pb_rails("progress_step/progress_step_item", props: {status: "active", icon: "exclamation-triangle", classname: "tooltip-trigger-14", tooltip: "More details needed before shipment", tooltip_position: "bottom" }) do %>
|
|
51
51
|
<%= pb_rails("caption", props:{text: "Shipped"})%>
|
|
52
52
|
<% end %>
|
|
53
|
-
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-15", tooltip: "This step is inactive"}) do %>
|
|
53
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-15", tooltip: "This step is inactive", tooltip_position: "bottom"}) do %>
|
|
54
54
|
<%= pb_rails("caption", props:{text: "Out for Delivery"})%>
|
|
55
55
|
<% end %>
|
|
56
56
|
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-16", tooltip: "Estimated delivery: Jun 27", tooltip_position: "left"}) do %>
|