playbook_ui_docs 14.8.0.pre.rc.0 → 14.8.0.pre.rc.2
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
- 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: 3160d881435d1e6c3522764055aa63dec0beff2a89f85859161c028c3b81eb35
|
4
|
+
data.tar.gz: 8310c35391b6f2bfa0ba70d1ee2bcc6aa6ea3762601f3aee2f5ebcc5169ea106
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 9f4c92be3a0c32d4c1177406ab1a37817f9b9ccf9996be02509d62d1b8d6e8364e406934c69ca36e9e04134b79f6664b5972543b9c39698d1d5b5b41bcd38bbd
|
7
|
+
data.tar.gz: 4f2f01314cf3707f42e4247e0d3d14eb3380946aef2f107110e608b973c3636cffa17717ffec2be76d081e3382921c98956c8751f7de3fa9d548b201c3e85ebb
|
@@ -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
|
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui_docs
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 14.8.0.pre.rc.
|
4
|
+
version: 14.8.0.pre.rc.2
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2024-11-
|
12
|
+
date: 2024-11-14 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: playbook_ui
|
@@ -648,12 +648,17 @@ files:
|
|
648
648
|
- app/pb_kits/playbook/pb_distribution_bar/docs/index.js
|
649
649
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx
|
650
650
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_default.md
|
651
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.html.erb
|
652
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.md
|
651
653
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx
|
652
654
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.md
|
653
655
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx
|
654
656
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.md
|
657
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb
|
658
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.md
|
655
659
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx
|
656
660
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.md
|
661
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb
|
657
662
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx
|
658
663
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.md
|
659
664
|
- app/pb_kits/playbook/pb_draggable/docs/example.yml
|