playbook_ui_docs 14.18.0.pre.alpha.PLAY2107phonenumberlabeljumpbug7435 → 14.18.0.pre.alpha.PLAY2107phonenumberlabeljumpbug7445

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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 9b25979d0bfa8a16d002d098f683373d7dcd9232289b9e259012113d5a770df0
4
- data.tar.gz: 1d5856e717f7370a398cf0276da700bc794755c9944c4499795b99eb30b718a5
3
+ metadata.gz: d842c5f132d8fa77a340283283ce6d4e0f6191cf44b935057bca8b0483f49859
4
+ data.tar.gz: 04b4e8481f4cd7e6bd7414b828701b3ca64572fdd091f1b956e7fa50b22a0b27
5
5
  SHA512:
6
- metadata.gz: 1c442935dafc77799f8bee7672f436b6cb41e08940c85d70bed5779d83d20d160de565b0de8436b89c4de6304ddea0fab4b31b5a7bb2b6bc088152245b800db0
7
- data.tar.gz: adb7745ac4a22fef35f4c3fe6ba9e0f3e492bedd6e5ef4cf1081b9dc85c98e97c4943ddba10592dc0512e696d94d7c260ab89aea88973197019e0b8e568345d8
6
+ metadata.gz: 00624f43a7fcc270924dc75217db7e3d9b153fdd5dcde98e8ae6f07be6b57c68962a92bf38892e4324022042d9ab644ca5e63cb1e7c9a289bedae0704af8c26f
7
+ data.tar.gz: 2c96bf498e4c81d0173495a9df466c26ff7cc40ac1ba88ae509499c168cde84acf479900dde308a3cf1abe00b8eada82796a913b7c5c5855ec336a063d68f4e0
@@ -0,0 +1,43 @@
1
+ <% data_shadow = [
2
+ { id: "51", text: "Task 1" },
3
+ { id: "52", text: "Task 2" },
4
+ { id: "53", text: "Task 3" }
5
+ ] %>
6
+
7
+ <% data_outline = [
8
+ { id: "61", text: "Task 1" },
9
+ { id: "62", text: "Task 2" },
10
+ { id: "63", text: "Task 3" }
11
+ ] %>
12
+
13
+ <%= pb_rails("flex", props: { justify: "around" }) do %>
14
+ <%= pb_rails("flex/flex_item", props: { margin_right: "xl" }) do %>
15
+ <%= pb_rails("draggable", props: { drop_zone_type: "shadow", initial_items: data_shadow }) do %>
16
+ <%= pb_rails("caption", props: { margin_bottom: "xs", text: "Shadow", text_align: "center" }) %>
17
+ <%= pb_rails("draggable/draggable_container", props: { html_options: { style: { width: "200px" } } }) do %>
18
+ <% data_shadow.each do |item| %>
19
+ <%= pb_rails("card", props: { drag_id: item[:id], draggable_item: true, margin_bottom: "xs", padding: "xs", padding_right: "xl" }) do %>
20
+ <%= pb_rails("flex", props: { align_items: "stretch", flex_direction: "column" }) do %>
21
+ <%= pb_rails("body", props: { text: item[:text] }) %>
22
+ <% end %>
23
+ <% end %>
24
+ <% end %>
25
+ <% end %>
26
+ <% end %>
27
+ <% end %>
28
+
29
+ <%= pb_rails("flex/flex_item", props: { margin_right: "xl" }) do %>
30
+ <%= pb_rails("draggable", props: { drop_zone_type: "outline", initial_items: data_outline }) do %>
31
+ <%= pb_rails("caption", props: { margin_bottom: "xs", text: "Outline", text_align: "center" }) %>
32
+ <%= pb_rails("draggable/draggable_container", props: { html_options: { style: { width: "200px" } } }) do %>
33
+ <% data_outline.each do |item| %>
34
+ <%= pb_rails("card", props: { drag_id: item[:id], draggable_item: true, margin_bottom: "xs", padding: "xs", padding_right: "xl" }) do %>
35
+ <%= pb_rails("flex", props: { align_items: "stretch", flex_direction: "column" }) do %>
36
+ <%= pb_rails("body", props: { text: item[:text] }) %>
37
+ <% end %>
38
+ <% end %>
39
+ <% end %>
40
+ <% end %>
41
+ <% end %>
42
+ <% end %>
43
+ <% end %>
@@ -0,0 +1,55 @@
1
+ <% initial_items = [
2
+ {
3
+ id: "141",
4
+ url: "https://unsplash.it/500/400/?image=633",
5
+ },
6
+ {
7
+ id: "142",
8
+ url: "https://unsplash.it/500/400/?image=634",
9
+ },
10
+ {
11
+ id: "143",
12
+ url: "https://unsplash.it/500/400/?image=637",
13
+ },
14
+ ] %>
15
+
16
+ <% next_init_items = [
17
+ {
18
+ id: "151",
19
+ url: "https://unsplash.it/500/400/?image=633",
20
+ },
21
+ {
22
+ id: "152",
23
+ url: "https://unsplash.it/500/400/?image=634",
24
+ },
25
+ {
26
+ id: "153",
27
+ url: "https://unsplash.it/500/400/?image=637",
28
+ },
29
+ ] %>
30
+
31
+ <%= pb_rails("draggable", props: {initial_items: initial_items, drop_zone_type: "shadow", drop_zone_color: "primary"}) do %>
32
+ <%= pb_rails("draggable/draggable_container") do %>
33
+ <%= pb_rails("flex", props: { gap: "sm" }) do %>
34
+ <% initial_items.each do |item| %>
35
+ <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
36
+ <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
37
+ <% end %>
38
+ <% end %>
39
+ <% end %>
40
+ <% end %>
41
+ <% end %>
42
+
43
+ <br/>
44
+
45
+ <%= pb_rails("draggable", props: {initial_items: next_init_items, drop_zone_type: "outline", drop_zone_color: "purple"}) do %>
46
+ <%= pb_rails("draggable/draggable_container") do %>
47
+ <%= pb_rails("flex", props: { gap: "sm" }) do %>
48
+ <% initial_items.each do |item| %>
49
+ <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
50
+ <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
51
+ <% end %>
52
+ <% end %>
53
+ <% end %>
54
+ <% end %>
55
+ <% end %>
@@ -0,0 +1 @@
1
+ The default `color` for Draggable kit drop zones is "neutral", with "primary" or "purple" as additional options.
@@ -17,5 +17,6 @@ examples:
17
17
  - draggable_with_cards: Draggable with Cards
18
18
  - draggable_with_table: Draggable with Table
19
19
  - draggable_multiple_containers: Dragging Across Multiple Containers
20
+ - draggable_drop_zones: Draggable Drop Zones
21
+ - draggable_drop_zones_colors: Draggable Drop Zones Colors
20
22
  - draggable_event_listeners: Draggable Event Listeners
21
-
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.18.0.pre.alpha.PLAY2107phonenumberlabeljumpbug7435
4
+ version: 14.18.0.pre.alpha.PLAY2107phonenumberlabeljumpbug7445
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -737,12 +737,15 @@ files:
737
737
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx
738
738
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.md
739
739
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_default_react.md
740
+ - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb
740
741
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx
741
- - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md
742
+ - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.html.erb
742
743
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx
743
- - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.md
744
+ - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_rails.md
745
+ - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_react.md
744
746
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx
745
747
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.md
748
+ - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_react.md
746
749
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.html.erb
747
750
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.md
748
751
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.html.erb