playbook_ui_docs 14.15.0.pre.rc.1 → 14.15.0.pre.rc.3
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_drawer/docs/_drawer_behavior.html.erb +8 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.html.erb +33 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.html.erb +0 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb +20 -1
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.html.erb +24 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.html.erb +21 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.md +1 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.html.erb +49 -0
- data/app/pb_kits/playbook/pb_drawer/docs/example.yml +5 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.html.erb +11 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.md +1 -0
- data/app/pb_kits/playbook/pb_overlay/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.html.erb +39 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.md +3 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.html.erb +26 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +2 -0
- data/dist/playbook-doc.js +1 -1
- metadata +14 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: a38fa6ccc0eb9472a94875bf27b0f2a0e79232151c3994fe3d16046bff4981b2
|
|
4
|
+
data.tar.gz: 4f01eb3318a3e167113f29460df0802465eab3d8f2e05046cb97a7672ecf20cc
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 43cf8d7abab810d80445901fd4c2eb0a45edb0a7c963609c3db5ccc14a6c9db6f9a95b25bedcca7c661b8a28f1d4e5955da6633922daa87272b1b4ffcdebb47c
|
|
7
|
+
data.tar.gz: 13a79ccd9361d76267bd680a82210e160ff60dab087407297c1a30696299b6b191a85419ade8e9e3272461562aef19c1d4a7b04fa4edf4b1bc29a53e56d9e291
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
<%= pb_rails("flex") do %>
|
|
2
|
+
<%= pb_rails("button", props: { text: "Drawer with border right", margin_right: "sm", data: {"open-drawer": "drawer-12"} }) %>
|
|
3
|
+
|
|
4
|
+
<%= pb_rails("drawer", props: {
|
|
5
|
+
id:"drawer-12",
|
|
6
|
+
overlay: false,
|
|
7
|
+
border: "right"
|
|
8
|
+
}) do %>
|
|
9
|
+
Test me (Border Right)
|
|
10
|
+
<% end %>
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
<%= pb_rails("button", props: { text: "Drawer with border left", margin_right: "sm", data: {"open-drawer": "drawer-13"} }) %>
|
|
14
|
+
|
|
15
|
+
<%= pb_rails("drawer", props: {
|
|
16
|
+
id:"drawer-13",
|
|
17
|
+
overlay: false,
|
|
18
|
+
border: "left"
|
|
19
|
+
}) do %>
|
|
20
|
+
Test me (Border Left)
|
|
21
|
+
<% end %>
|
|
22
|
+
|
|
23
|
+
<%= pb_rails("button", props: { text: "Drawer with border full", data: {"open-drawer": "drawer-14"} }) %>
|
|
24
|
+
|
|
25
|
+
<%= pb_rails("drawer", props: {
|
|
26
|
+
id:"drawer-14",
|
|
27
|
+
overlay: false,
|
|
28
|
+
border: "full"
|
|
29
|
+
}) do %>
|
|
30
|
+
Test me (Border Full)
|
|
31
|
+
<% end %>
|
|
32
|
+
<% end %>
|
|
33
|
+
|
|
File without changes
|
|
@@ -1 +1,20 @@
|
|
|
1
|
-
<%= pb_rails("
|
|
1
|
+
<%= pb_rails("flex") do %>
|
|
2
|
+
<%= pb_rails("button", props: { text: "Left Drawer", margin_right: "sm", data: {"open-drawer": "drawer-1"} }) %>
|
|
3
|
+
|
|
4
|
+
<%= pb_rails("drawer", props: {
|
|
5
|
+
id:"drawer-1",
|
|
6
|
+
}) do %>
|
|
7
|
+
Test me (Left Drawer)
|
|
8
|
+
<% end %>
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
<%= pb_rails("button", props: { text: "Right Drawer", data: {"open-drawer": "drawer-2"} }) %>
|
|
12
|
+
|
|
13
|
+
<%= pb_rails("drawer", props: {
|
|
14
|
+
id:"drawer-2",
|
|
15
|
+
placement: "right"
|
|
16
|
+
}) do %>
|
|
17
|
+
Test me (Right Drawer)
|
|
18
|
+
<% end %>
|
|
19
|
+
<% end %>
|
|
20
|
+
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
<%= pb_rails("button", props: { padding: "xs", margin_right: "sm", data: {"open-drawer": "drawer-4"} }) do %>
|
|
2
|
+
<%= pb_rails("icon", props: { icon: "bars", size: "2x" }) %>
|
|
3
|
+
<% end %>
|
|
4
|
+
|
|
5
|
+
<%= pb_rails("drawer", props: {
|
|
6
|
+
id:"drawer-4",
|
|
7
|
+
within_element: true,
|
|
8
|
+
placement: "bottom",
|
|
9
|
+
breakpoint: "md",
|
|
10
|
+
size: "full"
|
|
11
|
+
}) do %>
|
|
12
|
+
<%= pb_rails("nav", props: { display: {xl: "none", lg: "none", md: "none", sm: "block" } }) do %>
|
|
13
|
+
<%= pb_rails("nav/item", props: { text: "Photos", link: "#" }) %>
|
|
14
|
+
<%= pb_rails("nav/item", props: { text: "Music", link: "#" }) %>
|
|
15
|
+
<%= pb_rails("nav/item", props: { text: "Video", link: "#", active: true }) %>
|
|
16
|
+
<%= pb_rails("nav/item", props: { text: "Files", link: "#" }) %>
|
|
17
|
+
<% end %>
|
|
18
|
+
<%= pb_rails("nav", props: { display: {md: "block", sm: "none", xs: "none" }, orientation: "horizontal" }) do %>
|
|
19
|
+
<%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
|
|
20
|
+
<%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
|
|
21
|
+
<%= pb_rails("nav/item", props: { text: "Service ", link: "#" }) %>
|
|
22
|
+
<%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
|
|
23
|
+
<% end %>
|
|
24
|
+
<% end %>
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
<%= pb_rails("flex") do %>
|
|
2
|
+
<%= pb_rails("button", props: { text: "No Overlay Drawer", margin_right: "sm", data: {"open-drawer": "drawer-10"} }) %>
|
|
3
|
+
|
|
4
|
+
<%= pb_rails("drawer", props: {
|
|
5
|
+
id:"drawer-10",
|
|
6
|
+
overlay: false
|
|
7
|
+
}) do %>
|
|
8
|
+
Test me (No Overlay)
|
|
9
|
+
<% end %>
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
<%= pb_rails("button", props: { text: "Overlay Drawer", data: {"open-drawer": "drawer-11"} }) %>
|
|
13
|
+
|
|
14
|
+
<%= pb_rails("drawer", props: {
|
|
15
|
+
id:"drawer-11",
|
|
16
|
+
placement: "right"
|
|
17
|
+
}) do %>
|
|
18
|
+
Test me (Has Overlay)
|
|
19
|
+
<% end %>
|
|
20
|
+
<% end %>
|
|
21
|
+
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Click the button to close the drawer when there is no overlay.
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
<%= pb_rails("flex") do %>
|
|
2
|
+
<%= pb_rails("button", props: { text: "XS Drawer", margin_right: "sm", data: {"open-drawer": "drawer-5"} }) %>
|
|
3
|
+
|
|
4
|
+
<%= pb_rails("drawer", props: {
|
|
5
|
+
id:"drawer-5",
|
|
6
|
+
size: "xs"
|
|
7
|
+
}) do %>
|
|
8
|
+
XS
|
|
9
|
+
<% end %>
|
|
10
|
+
|
|
11
|
+
<%= pb_rails("button", props: { text: "SM Drawer", margin_right: "sm", data: {"open-drawer": "drawer-6"} }) %>
|
|
12
|
+
|
|
13
|
+
<%= pb_rails("drawer", props: {
|
|
14
|
+
id:"drawer-6",
|
|
15
|
+
size: "sm",
|
|
16
|
+
placement: "right"
|
|
17
|
+
}) do %>
|
|
18
|
+
This is a small drawer
|
|
19
|
+
<% end %>
|
|
20
|
+
|
|
21
|
+
<%= pb_rails("button", props: { text: "MD Drawer", margin_right: "sm", data: {"open-drawer": "drawer-7"} }) %>
|
|
22
|
+
|
|
23
|
+
<%= pb_rails("drawer", props: {
|
|
24
|
+
id:"drawer-7",
|
|
25
|
+
size: "md"
|
|
26
|
+
}) do %>
|
|
27
|
+
This is a medium drawer
|
|
28
|
+
<% end %>
|
|
29
|
+
|
|
30
|
+
<%= pb_rails("button", props: { text: "LG Drawer", margin_right: "sm", data: {"open-drawer": "drawer-8"} }) %>
|
|
31
|
+
|
|
32
|
+
<%= pb_rails("drawer", props: {
|
|
33
|
+
id:"drawer-8",
|
|
34
|
+
size: "lg",
|
|
35
|
+
placement: "right"
|
|
36
|
+
}) do %>
|
|
37
|
+
This is a large drawer
|
|
38
|
+
<% end %>
|
|
39
|
+
|
|
40
|
+
<%= pb_rails("button", props: { text: "XL Drawer", margin_right: "sm", data: {"open-drawer": "drawer-9"} }) %>
|
|
41
|
+
|
|
42
|
+
<%= pb_rails("drawer", props: {
|
|
43
|
+
id:"drawer-9",
|
|
44
|
+
size: "xl"
|
|
45
|
+
}) do %>
|
|
46
|
+
This is an extra large drawer
|
|
47
|
+
<% end %>
|
|
48
|
+
<% end %>
|
|
49
|
+
|
data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.html.erb
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<%= pb_rails("overlay", props: { layout: { "x": "xl" }, color: "card_light", dynamic: true }) do %>
|
|
2
|
+
<%= pb_rails("flex", props: { column_gap: "lg", orientation: "row", overflow_x: "auto" }) do %>
|
|
3
|
+
<% 15.times do %>
|
|
4
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
5
|
+
<%= pb_rails("card") do %>
|
|
6
|
+
Card content
|
|
7
|
+
<% end %>
|
|
8
|
+
<% end %>
|
|
9
|
+
<% end %>
|
|
10
|
+
<% end %>
|
|
11
|
+
<% end %>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Pass the `dynamic` prop to make the overlay render while the scrollbar isn't at either end on the scrollbar.
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
<%= pb_rails("flex", props: { orientation: "row", gap: "md" }) do %>
|
|
2
|
+
<%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
|
|
3
|
+
<%= pb_rails("button", props: {classname: "tooltip-delay", text: "1s delay"}) %>
|
|
4
|
+
<% end %>
|
|
5
|
+
|
|
6
|
+
<%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
|
|
7
|
+
<%= pb_rails("button", props: {classname: "tooltip-open-delay", text: "Open only"}) %>
|
|
8
|
+
<% end %>
|
|
9
|
+
|
|
10
|
+
<%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
|
|
11
|
+
<%= pb_rails("button", props: {classname: "tooltip-close-delay", text: "Close only"}) %>
|
|
12
|
+
<% end %>
|
|
13
|
+
|
|
14
|
+
<%= pb_rails("tooltip", props: {
|
|
15
|
+
trigger_element_selector: ".tooltip-delay",
|
|
16
|
+
tooltip_id: "delay-tooltip",
|
|
17
|
+
position: 'top',
|
|
18
|
+
delay_open: 1000,
|
|
19
|
+
delay_close: 1000
|
|
20
|
+
}) do %>
|
|
21
|
+
1s open/close delay
|
|
22
|
+
<% end %>
|
|
23
|
+
<%= pb_rails("tooltip", props: {
|
|
24
|
+
trigger_element_selector: ".tooltip-open-delay",
|
|
25
|
+
tooltip_id: "open-tooltip",
|
|
26
|
+
position: 'top',
|
|
27
|
+
delay_open: 1000
|
|
28
|
+
}) do %>
|
|
29
|
+
1s open delay
|
|
30
|
+
<% end %>
|
|
31
|
+
<%= pb_rails("tooltip", props: {
|
|
32
|
+
trigger_element_selector: ".tooltip-close-delay",
|
|
33
|
+
tooltip_id: "close-tooltip",
|
|
34
|
+
position: 'top',
|
|
35
|
+
delay_close: 1000
|
|
36
|
+
}) do %>
|
|
37
|
+
1s close delay
|
|
38
|
+
<% end %>
|
|
39
|
+
<% end %>
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
<%= pb_rails("flex", props: { gap: "md", wrap: true }) do %>
|
|
2
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
3
|
+
<%= pb_rails("button", props: { text: "With Interaction", id: "tooltip-interaction"}) %>
|
|
4
|
+
|
|
5
|
+
<%= pb_rails("tooltip", props: {
|
|
6
|
+
trigger_element_selector: "#tooltip-interaction",
|
|
7
|
+
tooltip_id: "tooltip-with-interaction",
|
|
8
|
+
position: 'top',
|
|
9
|
+
interaction: true
|
|
10
|
+
}) do %>
|
|
11
|
+
You can copy me
|
|
12
|
+
<% end %>
|
|
13
|
+
<% end %>
|
|
14
|
+
|
|
15
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
16
|
+
<%= pb_rails("button", props: { text: "No Interaction", id: "tooltip-no-interaction"}) %>
|
|
17
|
+
|
|
18
|
+
<%= pb_rails("tooltip", props: {
|
|
19
|
+
trigger_element_selector: "#tooltip-no-interaction",
|
|
20
|
+
tooltip_id: "tooltip-without-interaction",
|
|
21
|
+
position: 'top',
|
|
22
|
+
}) do %>
|
|
23
|
+
I'm just a regular tooltip
|
|
24
|
+
<% end %>
|
|
25
|
+
<% end %>
|
|
26
|
+
<% end %>
|
|
@@ -2,8 +2,10 @@ examples:
|
|
|
2
2
|
|
|
3
3
|
rails:
|
|
4
4
|
- tooltip_default: Default
|
|
5
|
+
- tooltip_interaction: Content Interaction
|
|
5
6
|
- tooltip_selectors: Using Common Selectors
|
|
6
7
|
- tooltip_with_icon_circle: Icon Circle Tooltip
|
|
8
|
+
- tooltip_delay_rails: Delay
|
|
7
9
|
- tooltip_show_tooltip: Show Tooltip
|
|
8
10
|
|
|
9
11
|
react:
|