playbook_ui_docs 15.1.0 → 15.2.0.pre.alpha.PLAY236711331
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_button/docs/_button_loading.html.erb +7 -3
- data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx +29 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled.html.erb +31 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled.md +7 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled_helper.html.erb +21 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled_helper.md +7 -0
- data/app/pb_kits/playbook/pb_button/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.html.erb +16 -16
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx +2 -1
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.html.erb +31 -31
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx +4 -3
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +12 -1
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/_description.md +3 -0
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_colors.html.erb +34 -0
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_colors.jsx +52 -0
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_colors.md +5 -0
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_default.html.erb +34 -0
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_default.jsx +45 -0
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_height.html.erb +47 -0
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_height.jsx +64 -0
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_height.md +3 -0
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend.html.erb +24 -0
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend.jsx +37 -0
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend_nonclickable.html.erb +39 -0
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend_nonclickable.jsx +45 -0
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend_position.html.erb +86 -0
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend_position.jsx +116 -0
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend_position.md +11 -0
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/example.yml +20 -0
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/index.js +6 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.html.erb +8 -4
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx +5 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.md +1 -0
- data/dist/playbook-doc.js +2 -2
- metadata +25 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 3c1fbecb01fa9be84280cc35fb8d7a3d73414640f1a92d1473ee0defe94ce65a
|
|
4
|
+
data.tar.gz: 365d1e57fddb353d666a197b982cf12722d06290df602f05b7b8c043150a8289
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 9567ce1fd61dd872be308050a69957b28579406fd16a0390fa43ef9f0b179a7dc918a4c90218db854d15a70f19cdae209f16b96490ba55b11867e6c43ef10a5f
|
|
7
|
+
data.tar.gz: 77d6dc1bf8cc2cd4eb522002a6b66243863a98f6bcd94c78421b61629b0376970ccf75880f2e349f382a4d94a6df360c9adb3be3f08e013679c9cbca22e52d34
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
-
<%= pb_rails("
|
|
2
|
-
<%= pb_rails("button", props: { aria: { label: "Loading" },
|
|
3
|
-
<%= pb_rails("button", props: { aria: { label: "Loading" },
|
|
1
|
+
<%= pb_rails("caption", props: { margin_y: "md", text: "Button variants with loading" }) %>
|
|
2
|
+
<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, margin_right: "lg" }) %>
|
|
3
|
+
<%= pb_rails("button", props: { aria: { label: "Loading" }, variant: "secondary", loading: true, margin_right: "lg" }) %>
|
|
4
|
+
<%= pb_rails("button", props: { aria: { label: "Loading" }, variant: "link", loading: true, margin_right: "lg" }) %>
|
|
5
|
+
<%= pb_rails("caption", props: { margin_y: "md", text: "Button sizes with loading" }) %>
|
|
6
|
+
<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, size: "sm", margin_right: "lg" }) %>
|
|
7
|
+
<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, size: "lg", margin_right: "lg" }) %>
|
|
@@ -1,8 +1,13 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
import Button from "../../pb_button/_button"
|
|
3
|
+
import Caption from "../../pb_caption/_caption"
|
|
3
4
|
|
|
4
5
|
const ButtonLoading = (props) => (
|
|
5
6
|
<div>
|
|
7
|
+
<Caption
|
|
8
|
+
marginY="md"
|
|
9
|
+
text="Button variants with loading"
|
|
10
|
+
/>
|
|
6
11
|
<Button
|
|
7
12
|
aria={{ label: 'Loading' }}
|
|
8
13
|
loading
|
|
@@ -31,6 +36,30 @@ const ButtonLoading = (props) => (
|
|
|
31
36
|
variant="link"
|
|
32
37
|
{...props}
|
|
33
38
|
/>
|
|
39
|
+
<br/>
|
|
40
|
+
<Caption
|
|
41
|
+
marginY="md"
|
|
42
|
+
text="Button sizes with loading"
|
|
43
|
+
/>
|
|
44
|
+
<Button
|
|
45
|
+
aria={{ label: 'Loading' }}
|
|
46
|
+
loading
|
|
47
|
+
marginRight='lg'
|
|
48
|
+
size="sm"
|
|
49
|
+
tabIndex={0}
|
|
50
|
+
text="Small Button"
|
|
51
|
+
{...props}
|
|
52
|
+
/>
|
|
53
|
+
{' '}
|
|
54
|
+
<Button
|
|
55
|
+
aria={{ label: 'Loading' }}
|
|
56
|
+
loading
|
|
57
|
+
marginRight='lg'
|
|
58
|
+
size="lg"
|
|
59
|
+
tabIndex={0}
|
|
60
|
+
text="Small Button"
|
|
61
|
+
{...props}
|
|
62
|
+
/>
|
|
34
63
|
</div>
|
|
35
64
|
)
|
|
36
65
|
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
<%= pb_rails("body", props: { text: "Click to disable the Buttons below", id: "toggle-disabled-demo", cursor: "pointer", color:"link", margin_bottom:"sm" }) %>
|
|
2
|
+
<%= pb_rails("body", props: { text: "Click to enable the Buttons below", id: "toggle-enabled-demo", cursor: "pointer", color:"link", margin_bottom:"sm" }) %>
|
|
3
|
+
|
|
4
|
+
<%= pb_rails("card", props:{display:"flex", flex_direction:"row", justify_content:"center"}) do %>
|
|
5
|
+
<%= pb_rails("button", props: { text: "I am a Button", id: "normal_managed_button", data:{pb_button_managed: true}, margin_right: "lg" }) %>
|
|
6
|
+
<%= pb_rails("button", props: { text: "I am an <a> Button", id: "a_tag_managed_button", tag:"a", data:{pb_button_managed: true}, link: "http://google.com"}) %>
|
|
7
|
+
<% end %>
|
|
8
|
+
<script>
|
|
9
|
+
document.addEventListener('DOMContentLoaded', function () {
|
|
10
|
+
const disableTrigger = document.querySelector('#toggle-disabled-demo')
|
|
11
|
+
const enableTrigger = document.querySelector('#toggle-enabled-demo')
|
|
12
|
+
|
|
13
|
+
// Find the Buttons you want to 'manage'
|
|
14
|
+
const btn = document.querySelector('#normal_managed_button');
|
|
15
|
+
const link = document.querySelector('#a_tag_managed_button');
|
|
16
|
+
|
|
17
|
+
disableTrigger.addEventListener('click', (e) => {
|
|
18
|
+
// Disable default button
|
|
19
|
+
btn.setAttribute('disabled', true)
|
|
20
|
+
// Disable a tag button
|
|
21
|
+
link.setAttribute('aria-disabled', 'true')
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
enableTrigger.addEventListener('click', (e) => {
|
|
25
|
+
// Enable default button
|
|
26
|
+
btn.removeAttribute('disabled')
|
|
27
|
+
// Enable a tag button
|
|
28
|
+
link.removeAttribute('aria-disabled')
|
|
29
|
+
});
|
|
30
|
+
});
|
|
31
|
+
</script>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
If needing to toggle the disabled state of the Button dynamically (for example, within a Turbo or Stimulus context), you can now do so in rails using the `pb-button-managed` data attribute.
|
|
2
|
+
|
|
3
|
+
1) Add the following data attribute to your button kit: `data:{ pb-button-managed: true }`
|
|
4
|
+
|
|
5
|
+
2) To toggle enabled/disabled state via attributes: for buttons set/remove disabled, for links set/remove aria-disabled="true". This will handle disabling the button, preventing clicks as well as all style changes so you don't have to.
|
|
6
|
+
|
|
7
|
+
Click to enable or disable the buttons above and view the code snippet below for details!
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
<%= pb_rails("body", props: { text: "Click to disable the Button below", id: "toggle-disabled-demo-with-helper", cursor: "pointer", color:"link", margin_bottom:"sm" }) %>
|
|
2
|
+
<%= pb_rails("body", props: { text: "Click to enable the Button below", id: "toggle-enabled-demo-with-helper", cursor: "pointer", color:"link", margin_bottom:"sm" }) %>
|
|
3
|
+
<br/>
|
|
4
|
+
<%= pb_rails("card", props:{display:"flex", flex_direction:"row", justify_content:"center"}) do %>
|
|
5
|
+
<%= pb_rails("button", props: { text: "Watch me Change!", id: "managed_button_with_helper", data:{pb_button_managed: true} }) %>
|
|
6
|
+
<% end %>
|
|
7
|
+
|
|
8
|
+
<script>
|
|
9
|
+
document.addEventListener('DOMContentLoaded', function () {
|
|
10
|
+
const disable = document.querySelector('#toggle-disabled-demo-with-helper')
|
|
11
|
+
const enable = document.querySelector('#toggle-enabled-demo-with-helper')
|
|
12
|
+
|
|
13
|
+
// Find the Button you want to 'manage'
|
|
14
|
+
const demoBtn = document.querySelector('#managed_button_with_helper')
|
|
15
|
+
|
|
16
|
+
// Use the pbButton object created by the kit to call the enable/disable methods
|
|
17
|
+
disable.addEventListener('click', (e) => {demoBtn._pbButton.disable()});
|
|
18
|
+
enable.addEventListener('click', (e) => {demoBtn._pbButton.enable()});
|
|
19
|
+
|
|
20
|
+
});
|
|
21
|
+
</script>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
The disabled state for the button can also be toggled via small helpers available through the `pb-button-managed` data attribute.
|
|
2
|
+
|
|
3
|
+
1) Add the following data attribute to your button kit: `data:{ pb-button-managed: true }`
|
|
4
|
+
|
|
5
|
+
2) Toggle state via the provided `_pbButton.disable()` and `_pbButton.enable()` helpers as shown in the code snippet below.
|
|
6
|
+
|
|
7
|
+
Click to enable or disable the buttons above to see this in action!
|
|
@@ -11,6 +11,8 @@ examples:
|
|
|
11
11
|
- button_options: Button Additional Options
|
|
12
12
|
- button_size: Button Size
|
|
13
13
|
- button_form: Button Form Attribute
|
|
14
|
+
- button_managed_disabled: Button Toggle Disabled State
|
|
15
|
+
- button_managed_disabled_helper: Button Toggle Disabled State Helper
|
|
14
16
|
|
|
15
17
|
react:
|
|
16
18
|
- button_default: Button Variants
|
|
@@ -3,12 +3,12 @@
|
|
|
3
3
|
<%= pb_rails("button", props: { text: "Delete Status", data: {"open-dialog": "dialog-stacked-delete"}, margin_right: "md" }) %>
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
<%= pb_rails("dialog", props: {
|
|
7
|
-
id:"dialog-stacked-default",
|
|
6
|
+
<%= pb_rails("dialog", props: {
|
|
7
|
+
id:"dialog-stacked-default",
|
|
8
8
|
status: "default",
|
|
9
|
-
size: "sm",
|
|
10
|
-
title: "Are you sure?",
|
|
11
|
-
text: "Text explaining why there is an alert",
|
|
9
|
+
size: "sm",
|
|
10
|
+
title: "Are you sure?",
|
|
11
|
+
text: "Text explaining why there is an alert",
|
|
12
12
|
}) do %>
|
|
13
13
|
<%= pb_rails("dialog/dialog_footer") do %>
|
|
14
14
|
<%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
|
|
@@ -18,12 +18,12 @@
|
|
|
18
18
|
<% end %>
|
|
19
19
|
<% end %>
|
|
20
20
|
|
|
21
|
-
<%= pb_rails("dialog", props: {
|
|
22
|
-
id:"dialog-stacked-caution",
|
|
21
|
+
<%= pb_rails("dialog", props: {
|
|
22
|
+
id:"dialog-stacked-caution",
|
|
23
23
|
status: "caution",
|
|
24
|
-
size: "sm",
|
|
25
|
-
title: "Are you sure?",
|
|
26
|
-
text: "This is the action you will be taking",
|
|
24
|
+
size: "sm",
|
|
25
|
+
title: "Are you sure?",
|
|
26
|
+
text: "This is the action you will be taking",
|
|
27
27
|
}) do %>
|
|
28
28
|
<%= pb_rails("dialog/dialog_footer") do %>
|
|
29
29
|
<%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
|
|
@@ -33,16 +33,16 @@
|
|
|
33
33
|
<% end %>
|
|
34
34
|
<% end %>
|
|
35
35
|
|
|
36
|
-
<%= pb_rails("dialog", props: {
|
|
37
|
-
id:"dialog-stacked-delete",
|
|
36
|
+
<%= pb_rails("dialog", props: {
|
|
37
|
+
id:"dialog-stacked-delete",
|
|
38
38
|
status: "delete",
|
|
39
|
-
size: "sm",
|
|
40
|
-
title: "Delete",
|
|
41
|
-
text: "You are about to delete ...",
|
|
39
|
+
size: "sm",
|
|
40
|
+
title: "Delete",
|
|
41
|
+
text: "You are about to delete ...",
|
|
42
42
|
}) do %>
|
|
43
43
|
<%= pb_rails("dialog/dialog_footer") do %>
|
|
44
44
|
<%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
|
|
45
|
-
<%= pb_rails("button", props: { text: "Yes, Action", full_width: true }) %>
|
|
45
|
+
<%= pb_rails("button", props: { text: "Yes, Action", variant: "danger", full_width: true }) %>
|
|
46
46
|
<%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", full_width: true, margin_top: "sm", data: {"close-dialog": "dialog-stacked-delete" } }) %>
|
|
47
47
|
<% end %>
|
|
48
48
|
<% end %>
|
|
@@ -51,7 +51,7 @@ const DialogStackedAlert = () => {
|
|
|
51
51
|
return (
|
|
52
52
|
<div>
|
|
53
53
|
<Flex
|
|
54
|
-
rowGap="xs"
|
|
54
|
+
rowGap="xs"
|
|
55
55
|
wrap
|
|
56
56
|
>
|
|
57
57
|
<Button
|
|
@@ -93,6 +93,7 @@ const DialogStackedAlert = () => {
|
|
|
93
93
|
<Button
|
|
94
94
|
fullWidth
|
|
95
95
|
onClick={dialog.toggle}
|
|
96
|
+
variant= {dialog.status == "delete" ? "danger" : "primary"}
|
|
96
97
|
>
|
|
97
98
|
{dialog.buttonOneText}
|
|
98
99
|
</Button>
|
|
@@ -8,12 +8,12 @@
|
|
|
8
8
|
<%= pb_rails("button", props: { text: "Success Status", data: {"open-dialog": "dialog-status-success"}, margin_right: "md" }) %>
|
|
9
9
|
<% end %>
|
|
10
10
|
|
|
11
|
-
<%= pb_rails("dialog", props: {
|
|
12
|
-
id:"dialog-status-default",
|
|
11
|
+
<%= pb_rails("dialog", props: {
|
|
12
|
+
id:"dialog-status-default",
|
|
13
13
|
status: "default",
|
|
14
|
-
size: "status_size",
|
|
15
|
-
title: "Are you sure?",
|
|
16
|
-
text: "Text explaining why there is an alert",
|
|
14
|
+
size: "status_size",
|
|
15
|
+
title: "Are you sure?",
|
|
16
|
+
text: "Text explaining why there is an alert",
|
|
17
17
|
}) do %>
|
|
18
18
|
<%= pb_rails("dialog/dialog_footer") do %>
|
|
19
19
|
<%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
|
|
@@ -23,12 +23,12 @@
|
|
|
23
23
|
<% end %>
|
|
24
24
|
<% end %>
|
|
25
25
|
|
|
26
|
-
<%= pb_rails("dialog", props: {
|
|
27
|
-
id:"dialog-status-info",
|
|
26
|
+
<%= pb_rails("dialog", props: {
|
|
27
|
+
id:"dialog-status-info",
|
|
28
28
|
status: "info",
|
|
29
|
-
size: "status_size",
|
|
30
|
-
title: "Information",
|
|
31
|
-
text: "Text explaining why there is an alert",
|
|
29
|
+
size: "status_size",
|
|
30
|
+
title: "Information",
|
|
31
|
+
text: "Text explaining why there is an alert",
|
|
32
32
|
}) do %>
|
|
33
33
|
<%= pb_rails("dialog/dialog_footer") do %>
|
|
34
34
|
<%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
|
|
@@ -37,12 +37,12 @@
|
|
|
37
37
|
<% end %>
|
|
38
38
|
<% end %>
|
|
39
39
|
|
|
40
|
-
<%= pb_rails("dialog", props: {
|
|
41
|
-
id:"dialog-status-caution",
|
|
40
|
+
<%= pb_rails("dialog", props: {
|
|
41
|
+
id:"dialog-status-caution",
|
|
42
42
|
status: "caution",
|
|
43
|
-
size: "status_size",
|
|
44
|
-
title: "Are you Sure?",
|
|
45
|
-
text: "This is the action you will be taking",
|
|
43
|
+
size: "status_size",
|
|
44
|
+
title: "Are you Sure?",
|
|
45
|
+
text: "This is the action you will be taking",
|
|
46
46
|
}) do %>
|
|
47
47
|
<%= pb_rails("dialog/dialog_footer") do %>
|
|
48
48
|
<%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
|
|
@@ -52,27 +52,27 @@
|
|
|
52
52
|
<% end %>
|
|
53
53
|
<% end %>
|
|
54
54
|
|
|
55
|
-
<%= pb_rails("dialog", props: {
|
|
56
|
-
id:"dialog-status-delete",
|
|
55
|
+
<%= pb_rails("dialog", props: {
|
|
56
|
+
id:"dialog-status-delete",
|
|
57
57
|
status: "delete",
|
|
58
|
-
size: "status_size",
|
|
59
|
-
title: "Delete",
|
|
60
|
-
text: "You are about to delete ...",
|
|
58
|
+
size: "status_size",
|
|
59
|
+
title: "Delete",
|
|
60
|
+
text: "You are about to delete ...",
|
|
61
61
|
}) do %>
|
|
62
62
|
<%= pb_rails("dialog/dialog_footer") do %>
|
|
63
63
|
<%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
|
|
64
|
-
<%= pb_rails("button", props: { text: "Yes, Delete" }) %>
|
|
64
|
+
<%= pb_rails("button", props: { text: "Yes, Delete", variant: "danger" }) %>
|
|
65
65
|
<%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", data: {"close-dialog": "dialog-status-delete" } }) %>
|
|
66
66
|
<% end %>
|
|
67
67
|
<% end %>
|
|
68
68
|
<% end %>
|
|
69
69
|
|
|
70
|
-
<%= pb_rails("dialog", props: {
|
|
71
|
-
id:"dialog-status-error",
|
|
70
|
+
<%= pb_rails("dialog", props: {
|
|
71
|
+
id:"dialog-status-error",
|
|
72
72
|
status: "error",
|
|
73
|
-
size: "status_size",
|
|
74
|
-
title: "Error Message",
|
|
75
|
-
text: "Text explaining the error",
|
|
73
|
+
size: "status_size",
|
|
74
|
+
title: "Error Message",
|
|
75
|
+
text: "Text explaining the error",
|
|
76
76
|
}) do %>
|
|
77
77
|
<%= pb_rails("dialog/dialog_footer") do %>
|
|
78
78
|
<%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
|
|
@@ -81,12 +81,12 @@
|
|
|
81
81
|
<% end %>
|
|
82
82
|
<% end %>
|
|
83
83
|
|
|
84
|
-
<%= pb_rails("dialog", props: {
|
|
85
|
-
id:"dialog-status-success",
|
|
84
|
+
<%= pb_rails("dialog", props: {
|
|
85
|
+
id:"dialog-status-success",
|
|
86
86
|
status: "success",
|
|
87
|
-
size: "status_size",
|
|
88
|
-
title: "Success!",
|
|
89
|
-
text: "Text explaining what is successful",
|
|
87
|
+
size: "status_size",
|
|
88
|
+
title: "Success!",
|
|
89
|
+
text: "Text explaining what is successful",
|
|
90
90
|
}) do %>
|
|
91
91
|
<%= pb_rails("dialog/dialog_footer") do %>
|
|
92
92
|
<%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
|
|
@@ -83,8 +83,8 @@ const DialogStatus = () => {
|
|
|
83
83
|
|
|
84
84
|
return (
|
|
85
85
|
<div>
|
|
86
|
-
<Flex
|
|
87
|
-
rowGap="xs"
|
|
86
|
+
<Flex
|
|
87
|
+
rowGap="xs"
|
|
88
88
|
wrap
|
|
89
89
|
>
|
|
90
90
|
<Button
|
|
@@ -117,7 +117,7 @@ const DialogStatus = () => {
|
|
|
117
117
|
>
|
|
118
118
|
{"Success Status"}
|
|
119
119
|
</Button>
|
|
120
|
-
<Button
|
|
120
|
+
<Button
|
|
121
121
|
marginRight="md"
|
|
122
122
|
onClick={toggleErrorAlert}
|
|
123
123
|
>
|
|
@@ -152,6 +152,7 @@ const DialogStatus = () => {
|
|
|
152
152
|
<Button
|
|
153
153
|
onClick={dialog.toggle}
|
|
154
154
|
paddingRight="xl"
|
|
155
|
+
variant={dialog.status == "delete" ? "danger" : "primary"}
|
|
155
156
|
>
|
|
156
157
|
{dialog.buttonOneText}
|
|
157
158
|
</Button>
|
|
@@ -21,6 +21,15 @@
|
|
|
21
21
|
]
|
|
22
22
|
%>
|
|
23
23
|
|
|
24
|
+
<%
|
|
25
|
+
example_typeahead_options = [
|
|
26
|
+
{ label: 'Orange', value: '#FFA500' },
|
|
27
|
+
{ label: 'Red', value: '#FF0000' },
|
|
28
|
+
{ label: 'Green', value: '#00FF00' },
|
|
29
|
+
{ label: 'Blue', value: '#0000FF' },
|
|
30
|
+
]
|
|
31
|
+
%>
|
|
32
|
+
|
|
24
33
|
<% treeData = [{
|
|
25
34
|
label: "Power Home Remodeling",
|
|
26
35
|
value: "Power Home Remodeling",
|
|
@@ -89,8 +98,10 @@
|
|
|
89
98
|
|
|
90
99
|
<%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
|
|
91
100
|
<%= form.typeahead :example_typeahead_validation, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>
|
|
101
|
+
<%= form.typeahead :example_typeahead_validation_react, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead (React Rendered)", placeholder: "Search for a user", required: true, validation: { message: "Please select a color." } } %>
|
|
102
|
+
<%= form.typeahead :example_typeahead_validation_react_2, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead 2 (React Rendered)", placeholder: "Search for a user", required: true } %>
|
|
92
103
|
<%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
|
|
93
|
-
<%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true } %>
|
|
104
|
+
<%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true, required: true } %>
|
|
94
105
|
<%= form.email_field :example_email_field_validation, props: { label: true, required: true } %>
|
|
95
106
|
<%= form.number_field :example_number_field_validation, props: { label: true, required: true } %>
|
|
96
107
|
<%= form.search_field :example_project_number_validation, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo. Once done, any prop or functionality provided by Highcharts can be used with this kit without requiring specifc props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible.
|
|
2
|
+
|
|
3
|
+
See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
<% data = [{
|
|
2
|
+
name: 'Installation',
|
|
3
|
+
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
|
|
4
|
+
}, {
|
|
5
|
+
name: 'Manufacturing',
|
|
6
|
+
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
|
|
7
|
+
}, {
|
|
8
|
+
name: 'Sales & Distribution',
|
|
9
|
+
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
|
|
10
|
+
}, {
|
|
11
|
+
name: 'Project Development',
|
|
12
|
+
data: [nil, nil, 7988, 12169, 15112, 22452, 34400, 34227],
|
|
13
|
+
}, {
|
|
14
|
+
name: 'Other',
|
|
15
|
+
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
|
|
16
|
+
}] %>
|
|
17
|
+
|
|
18
|
+
<% categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] %>
|
|
19
|
+
|
|
20
|
+
<% chart_options = {
|
|
21
|
+
series: data,
|
|
22
|
+
colors: ['#1CA05C', '#FD804C', '#144075', '#00C4D7', '#DA0014'],
|
|
23
|
+
title: { text: "Line Graph with Custom Data Colors" },
|
|
24
|
+
xAxis: {
|
|
25
|
+
categories: categories,
|
|
26
|
+
},
|
|
27
|
+
yAxis: {
|
|
28
|
+
title: {
|
|
29
|
+
text: "Number of Employees",
|
|
30
|
+
},
|
|
31
|
+
},
|
|
32
|
+
} %>
|
|
33
|
+
|
|
34
|
+
<%= pb_rails("pb_line_graph", props: {options: chart_options}) %>
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import PbLineGraph from '../../pb_pb_line_graph/_pb_line_graph'
|
|
3
|
+
import { colors } from 'playbook-ui'
|
|
4
|
+
|
|
5
|
+
const data = [{
|
|
6
|
+
name: 'Installation',
|
|
7
|
+
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
|
|
8
|
+
}, {
|
|
9
|
+
name: 'Manufacturing',
|
|
10
|
+
data: [24916, 28064, 29742, 40851, 50590, 65282, 70121, 85434],
|
|
11
|
+
}, {
|
|
12
|
+
name: 'Sales & Distribution',
|
|
13
|
+
data: [11744, 17722, 16005, 19771, 25185, 28377, 36147, 43387],
|
|
14
|
+
}, {
|
|
15
|
+
name: 'Project Development',
|
|
16
|
+
data: [5332, 6344, 7988, 12169, 15112, 14452, 22400, 30227],
|
|
17
|
+
}, {
|
|
18
|
+
name: 'Other',
|
|
19
|
+
data: [null, null, null, 3112, 4989, 5816, 15274, 18111],
|
|
20
|
+
}]
|
|
21
|
+
|
|
22
|
+
const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
|
|
23
|
+
|
|
24
|
+
const chartOptions = {
|
|
25
|
+
title: {
|
|
26
|
+
text: 'Line Graph with Custom Data Colors',
|
|
27
|
+
},
|
|
28
|
+
xAxis: {
|
|
29
|
+
categories: categories,
|
|
30
|
+
},
|
|
31
|
+
yAxis: {
|
|
32
|
+
min: 0,
|
|
33
|
+
title: {
|
|
34
|
+
text: 'Number of Employees',
|
|
35
|
+
},
|
|
36
|
+
},
|
|
37
|
+
series: data,
|
|
38
|
+
colors: [colors.data_4, colors.data_5, "#144075", colors.data_7, colors.data_8]
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
const PbLineGraphColors = (props) => {
|
|
42
|
+
return (
|
|
43
|
+
<div>
|
|
44
|
+
<PbLineGraph
|
|
45
|
+
options={chartOptions}
|
|
46
|
+
{...props}
|
|
47
|
+
/>
|
|
48
|
+
</div>
|
|
49
|
+
)
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
export default PbLineGraphColors
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
Custom data colors allow for color customization to match the needs of business requirements.
|
|
2
|
+
|
|
3
|
+
For React, import 'colors' from Playbook, then set custom colors in the colors array using the desired color variables. Hex colors are also available.
|
|
4
|
+
|
|
5
|
+
For Rails, HEX values are required.
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
<% data = [{
|
|
2
|
+
name: 'Installation',
|
|
3
|
+
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
|
|
4
|
+
}, {
|
|
5
|
+
name: 'Manufacturing',
|
|
6
|
+
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
|
|
7
|
+
}, {
|
|
8
|
+
name: 'Sales & Distribution',
|
|
9
|
+
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
|
|
10
|
+
}, {
|
|
11
|
+
name: 'Project Development',
|
|
12
|
+
data: [nil, nil, 7988, 12169, 15112, 22452, 34400, 34227],
|
|
13
|
+
}, {
|
|
14
|
+
name: 'Other',
|
|
15
|
+
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
|
|
16
|
+
}] %>
|
|
17
|
+
|
|
18
|
+
<% categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] %>
|
|
19
|
+
|
|
20
|
+
<% chart_options = {
|
|
21
|
+
series: data,
|
|
22
|
+
title: { text: "Solar Employment Growth by Sector, 2010-2016" },
|
|
23
|
+
subtitle: { text: "Source: thesolarfoundation.com" },
|
|
24
|
+
xAxis: {
|
|
25
|
+
categories: categories,
|
|
26
|
+
},
|
|
27
|
+
yAxis: {
|
|
28
|
+
title: {
|
|
29
|
+
text: "Number of Employees",
|
|
30
|
+
},
|
|
31
|
+
},
|
|
32
|
+
} %>
|
|
33
|
+
|
|
34
|
+
<%= pb_rails("pb_line_graph", props: {options: chart_options}) %>
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import PbLineGraph from '../../pb_pb_line_graph/_pb_line_graph'
|
|
3
|
+
|
|
4
|
+
const data = [{
|
|
5
|
+
name: 'Installation',
|
|
6
|
+
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
|
|
7
|
+
}, {
|
|
8
|
+
name: 'Manufacturing',
|
|
9
|
+
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
|
|
10
|
+
}, {
|
|
11
|
+
name: 'Sales & Distribution',
|
|
12
|
+
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
|
|
13
|
+
}, {
|
|
14
|
+
name: 'Project Development',
|
|
15
|
+
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
|
|
16
|
+
}, {
|
|
17
|
+
name: 'Other',
|
|
18
|
+
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
|
|
19
|
+
}]
|
|
20
|
+
|
|
21
|
+
const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
|
|
22
|
+
|
|
23
|
+
const chartOptions = {
|
|
24
|
+
series: data,
|
|
25
|
+
title: { text: "Solar Employment Growth by Sector, 2010-2016" },
|
|
26
|
+
subtitle: { text: "Source: thesolarfoundation.com" },
|
|
27
|
+
xAxis: {
|
|
28
|
+
categories: categories,
|
|
29
|
+
},
|
|
30
|
+
yAxis: {
|
|
31
|
+
title: {
|
|
32
|
+
text: "Number of Employees",
|
|
33
|
+
},
|
|
34
|
+
},
|
|
35
|
+
}
|
|
36
|
+
const PbLineGraphDefault = (props) => (
|
|
37
|
+
<div>
|
|
38
|
+
<PbLineGraph
|
|
39
|
+
options={chartOptions}
|
|
40
|
+
{...props}
|
|
41
|
+
/>
|
|
42
|
+
</div>
|
|
43
|
+
)
|
|
44
|
+
|
|
45
|
+
export default PbLineGraphDefault
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
<% data = [{
|
|
2
|
+
name: 'Number of Installations',
|
|
3
|
+
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
|
|
4
|
+
}] %>
|
|
5
|
+
|
|
6
|
+
<% categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] %>
|
|
7
|
+
|
|
8
|
+
<% chart_options_first = {
|
|
9
|
+
title: {
|
|
10
|
+
text: 'Fixed Height (300px)',
|
|
11
|
+
},
|
|
12
|
+
chart: {
|
|
13
|
+
height: '300px'
|
|
14
|
+
},
|
|
15
|
+
xAxis: {
|
|
16
|
+
categories: categories,
|
|
17
|
+
},
|
|
18
|
+
yAxis: {
|
|
19
|
+
min: 0,
|
|
20
|
+
title: {
|
|
21
|
+
text: 'Number of Employees',
|
|
22
|
+
},
|
|
23
|
+
},
|
|
24
|
+
series: data
|
|
25
|
+
} %>
|
|
26
|
+
|
|
27
|
+
<% chart_options_second = {
|
|
28
|
+
title: {
|
|
29
|
+
text: 'Percentage Height (50%)',
|
|
30
|
+
},
|
|
31
|
+
chart: {
|
|
32
|
+
height: '50%'
|
|
33
|
+
},
|
|
34
|
+
xAxis: {
|
|
35
|
+
categories: categories,
|
|
36
|
+
},
|
|
37
|
+
yAxis: {
|
|
38
|
+
min: 0,
|
|
39
|
+
title: {
|
|
40
|
+
text: 'Number of Employees',
|
|
41
|
+
},
|
|
42
|
+
},
|
|
43
|
+
series: data
|
|
44
|
+
} %>
|
|
45
|
+
|
|
46
|
+
<%= pb_rails("pb_line_graph", props: {options: chart_options_first}) %>
|
|
47
|
+
<%= pb_rails("pb_line_graph", props: {options: chart_options_second}) %>
|