playbook_ui_docs 14.7.0.pre.alpha.dependabotnpmandyarnintltelinput24704448 → 14.7.0.pre.alpha.spacingquickchange4482
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_card/docs/_card_light.md +1 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.html.erb +26 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.md +7 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb +38 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.md +0 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb +19 -0
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +6 -0
- data/dist/playbook-doc.js +1 -1
- metadata +7 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 305905fca6bab9e8fffdf4dee21a81a04172d8a3c47b25346af358c072791ea0
|
|
4
|
+
data.tar.gz: 98c608e407e99720a465f680009e7ff3b778023c3ce0a68da3be904a3df3654d
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: e050d379ce8c0ad37201304b3abc2efc512e0af9e497d5e6056b3e378d849f77d28a905918090f337365d70ed59477fe501709c8bd61541447c83b275ef74345
|
|
7
|
+
data.tar.gz: a6ade754cb45d89d373bbc501870d0213072d3b8393776358005b374609168dd3d400411f82bfa2f4bfcc740528a660a05cfaede6e5adf4fb48a70b176663494
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Card can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>
|
|
1
|
+
Card can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
<% initial_items = [
|
|
2
|
+
{
|
|
3
|
+
id: "1",
|
|
4
|
+
url: "https://unsplash.it/500/400/?image=633",
|
|
5
|
+
},
|
|
6
|
+
{
|
|
7
|
+
id: "2",
|
|
8
|
+
url: "https://unsplash.it/500/400/?image=634",
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
id: "3",
|
|
12
|
+
url: "https://unsplash.it/500/400/?image=637",
|
|
13
|
+
},
|
|
14
|
+
] %>
|
|
15
|
+
|
|
16
|
+
<%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
|
|
17
|
+
<%= pb_rails("draggable/draggable_container") do %>
|
|
18
|
+
<%= pb_rails("flex") do %>
|
|
19
|
+
<% initial_items.each do |item| %>
|
|
20
|
+
<%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
|
|
21
|
+
<%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url], margin: "xs" }) %>
|
|
22
|
+
<% end %>
|
|
23
|
+
<% end %>
|
|
24
|
+
<% end %>
|
|
25
|
+
<% end %>
|
|
26
|
+
<% end %>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
The `draggable` kit gives you a full subcomponent structure that allows it to be used with almost any kit.
|
|
2
|
+
|
|
3
|
+
`initial_items` is a REQUIRED prop, which is the array of objects that contains data for the the draggable items.
|
|
4
|
+
|
|
5
|
+
`draggable/draggable_container` = This specifies the container within which items can be dropped.
|
|
6
|
+
|
|
7
|
+
`draggable/draggable_item` = This specifies the items that can be dragged and dropped. `drag_id` is a REQUIRED prop for draggable_item and must match the id on the items within `initial_items`.
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
<% initial_items = [
|
|
2
|
+
{ id: "21", name: "Joe Black" },
|
|
3
|
+
{ id: "22", name: "Nancy White" },
|
|
4
|
+
{ id: "23", name: "Bill Green" },
|
|
5
|
+
] %>
|
|
6
|
+
|
|
7
|
+
<%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
|
|
8
|
+
<%= pb_rails("draggable/draggable_container") do %>
|
|
9
|
+
<% initial_items.each do |item| %>
|
|
10
|
+
<%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
|
|
11
|
+
<%= pb_rails("card", props: {highlight: {position: "side", color:"primary"}, margin_bottom: "xs", padding: "xs"}) do %>
|
|
12
|
+
<%= pb_rails("flex", props:{align_items: "stretch", flex_direction:"column"}) do %>
|
|
13
|
+
<%= pb_rails("flex", props:{gap: "xs"}) do %>
|
|
14
|
+
<%= pb_rails("title", props: { text: item[:name], tag: "h4", size: 4 }) %>
|
|
15
|
+
<%= pb_rails("badge", props: {text:"35-12345" ,variant: "primary"}) %>
|
|
16
|
+
<% end %>
|
|
17
|
+
<%= pb_rails("caption", props: { size: "xs", text: "8:00A • Township Name • 90210" }) %>
|
|
18
|
+
<%= pb_rails("flex", props:{gap: "xxs", spacing:"between"}) do %>
|
|
19
|
+
<%= pb_rails("flex", props:{gap: "xxs"}) do %>
|
|
20
|
+
<%= pb_rails("caption", props: { size: "xs" , color: "error" }) do %>
|
|
21
|
+
<%= pb_rails("icon", props: { icon: "house-circle-exclamation", fixed_width: true }) %>
|
|
22
|
+
<% end %>
|
|
23
|
+
<%= pb_rails("caption", props: { size: "xs" , color: "success" }) do %>
|
|
24
|
+
<%= pb_rails("icon", props: { icon: "file-circle-check", fixed_width: true }) %>
|
|
25
|
+
<% end %>
|
|
26
|
+
<% end %>
|
|
27
|
+
<%= pb_rails("flex") do %>
|
|
28
|
+
<%= pb_rails("badge", props: {text:"Schedule QA" ,variant: "warning", rounded: true}) %>
|
|
29
|
+
<%= pb_rails("badge", props: {text:"Flex" ,variant: "primary", rounded: true}) %>
|
|
30
|
+
<%= pb_rails("badge", props: {text:"R99" ,variant: "primary", rounded: true}) %>
|
|
31
|
+
<% end %>
|
|
32
|
+
<% end %>
|
|
33
|
+
<% end %>
|
|
34
|
+
<% end %>
|
|
35
|
+
<% end %>
|
|
36
|
+
<% end %>
|
|
37
|
+
<% end %>
|
|
38
|
+
<% end %>
|
|
File without changes
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<% initial_items = [
|
|
2
|
+
{ id: "31", name: "Philadelphia" },
|
|
3
|
+
{ id: "32", name: "New Jersey" },
|
|
4
|
+
{ id: "33", name: "Maryland" },
|
|
5
|
+
{ id: "34", name: "Connecticut" },
|
|
6
|
+
|
|
7
|
+
] %>
|
|
8
|
+
|
|
9
|
+
<%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
|
|
10
|
+
<%= pb_rails("draggable/draggable_container") do %>
|
|
11
|
+
<%= pb_rails("list", props: {ordered: false}) do %>
|
|
12
|
+
<% initial_items.each do |item| %>
|
|
13
|
+
<%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
|
|
14
|
+
<%= pb_rails("list/item") do %><%= item[:name] %><% end %>
|
|
15
|
+
<% end %>
|
|
16
|
+
<% end %>
|
|
17
|
+
<% end %>
|
|
18
|
+
<% end %>
|
|
19
|
+
<% end %>
|
|
@@ -8,4 +8,10 @@ examples:
|
|
|
8
8
|
- draggable_with_cards: Draggable with Cards
|
|
9
9
|
- draggable_multiple_containers: Dragging Across Multiple Containers
|
|
10
10
|
|
|
11
|
+
rails:
|
|
12
|
+
- draggable_default_rails: Default
|
|
13
|
+
- draggable_with_list_rails: Draggable with List Kit
|
|
14
|
+
- draggable_with_cards_rails: Draggable with Cards
|
|
15
|
+
|
|
16
|
+
|
|
11
17
|
|