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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: f193bafab12813db3ab70df636c2788dbe87313c6ce5a8dc5ab839e29609bfc3
4
- data.tar.gz: df4cd9b8865bdce52da3a30e579db39854cd5c088b530cc0fda6f14c56cb3a5d
3
+ metadata.gz: 3160d881435d1e6c3522764055aa63dec0beff2a89f85859161c028c3b81eb35
4
+ data.tar.gz: 8310c35391b6f2bfa0ba70d1ee2bcc6aa6ea3762601f3aee2f5ebcc5169ea106
5
5
  SHA512:
6
- metadata.gz: 32d3773de3e20fff72f7cdb61900538059309d70e3948b323b74d75484f02add229470ab283dbf57a3a290b8bdbd46bb064a3629db7ef4031d5d384fba0e6a7a
7
- data.tar.gz: aed4ec243b8842e61b37763e092171597dd2f5eb5eba00877227a893b7088d7e6ed901dc830c9ccdf7273f6d233387cc9cd6d13d2b7646bb7f7c64cf6308c4b1
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 %>
@@ -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.0
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-08 00:00:00.000000000 Z
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