playbook_ui_docs 14.7.0.pre.alpha.dependabotnpmandyarnintltelinput24704448 → 14.7.0.pre.alpha.spacingquickchange4482
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_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
|
|