playbook_ui 14.18.0 → 14.19.0.pre.alpha.PLAY20937693

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.html.erb

@@ -0,0 +1,55 @@
+<% initial_items = [
+  {
+    id: "141",
+    url: "https://unsplash.it/500/400/?image=633",
+  },
+  {
+    id: "142",
+    url: "https://unsplash.it/500/400/?image=634",
+  },
+  {
+    id: "143",
+    url: "https://unsplash.it/500/400/?image=637",
+  },
+] %>
+
+<% next_init_items = [
+  {
+    id: "151",
+    url: "https://unsplash.it/500/400/?image=633",
+  },
+  {
+    id: "152",
+    url: "https://unsplash.it/500/400/?image=634",
+  },
+  {
+    id: "153",
+    url: "https://unsplash.it/500/400/?image=637",
+  },
+] %>
+
+<%= pb_rails("draggable", props: {initial_items: initial_items, drop_zone_type: "shadow", drop_zone_color: "primary"}) do %>
+  <%= pb_rails("draggable/draggable_container") do %>
+    <%= pb_rails("flex", props: { gap: "sm" }) do %>
+      <% initial_items.each do |item| %>
+        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
+          <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<br/>
+
+<%= pb_rails("draggable", props: {initial_items: next_init_items, drop_zone_type: "outline", drop_zone_color: "purple"}) do %>
+  <%= pb_rails("draggable/draggable_container") do %>
+    <%= pb_rails("flex", props: { gap: "sm" }) do %>
+      <% initial_items.each do |item| %>
+        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
+          <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_rails.md

@@ -0,0 +1 @@
+  The default `color` for Draggable kit drop zones is "neutral", with "primary" or "purple" as additional options.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.html.erb

@@ -0,0 +1,55 @@
+<% initial_items = [
+  {
+    id: "211",
+    url: "https://unsplash.it/500/400/?image=633",
+  },
+  {
+    id: "212",
+    url: "https://unsplash.it/500/400/?image=634",
+  },
+  {
+    id: "213",
+    url: "https://unsplash.it/500/400/?image=637",
+  },
+] %>
+
+<% next_init_items = [
+  {
+    id: "2111",
+    url: "https://unsplash.it/500/400/?image=633",
+  },
+  {
+    id: "2112",
+    url: "https://unsplash.it/500/400/?image=634",
+  },
+  {
+    id: "2113",
+    url: "https://unsplash.it/500/400/?image=637",
+  },
+] %>
+
+<%= pb_rails("draggable", props: {initial_items: initial_items, drop_zone_type: "line"}) do %>
+  <%= pb_rails("draggable/draggable_container", props: { drop_zone_direction: "vertical" }) do %>
+    <%= pb_rails("flex", props: { gap: "sm", orientation: "column", height: "367px" }) do %>
+      <% initial_items.each do |item| %>
+        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id], drop_zone_line_color: "purple"}) do %>
+          <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<br/>
+
+<%= pb_rails("draggable", props: {initial_items: next_init_items, drop_zone_type: "line"}) do %>
+  <%= pb_rails("draggable/draggable_container", props: { drop_zone_direction: "horizontal" }) do %>
+    <%= pb_rails("flex", props: { gap: "sm", html_options: { style: "width: 332px;" } }) do %>
+      <% initial_items.each do |item| %>
+        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id], drop_zone_line_color: "primary"}) do %>
+          <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line_rails.md

@@ -0,0 +1,5 @@
+When using the "line" style, make sure to set the appropriate `direction` attribute within the `drop_zone_direction` prop on the `draggable/draggable_container` component based on the orientation of your draggable view: "vertical" or "horizontal." Note that the direction attribute only applies to the "line" style and does not affect other drop zone styles. Also, set the `drop_zone_line_color` prop on the `draggable/draggable_item` component to "primary" or "purple".
+
+The length of the line is calculated based off of the width (for "vertical") or height (for "horizontal") of the parent container holding the draggable items. 
+
+Additionally, if the parent container of the `draggable`/`draggable/draggable_container` (or a subcontainer within) does not have a set height (for "vertical") or width (for "horizontal"), like the [Draggable Drop Zones doc example](https://playbook.powerapp.cloud/kits/draggable/rails#draggable-drop-zones) does, elements on the page may jump up (for "vertical") or to the left (for "horizontal") when an item is actively being dragged. To prevent this, give a parent element a fixed height (for "vertical") or width (for "horizontal") as demonstrated in this doc example.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_rails.md

@@ -0,0 +1,5 @@
+The Draggable kit lets you customize the style of drop zones that appear when dragging an item.
+
+By default, drop zones are in the "ghost" style, but you can also choose from "shadow," "outline," and "line."
+
+When using the "line" type, make sure to set the appropriate `direction` attribute on the `draggable/draggable_container` component based on the orientation of your draggable view: "vertical" or "horizontal." Note that the direction attribute only applies to the "line" type and does not affect other drop zone styles. For more on the "line" style in particular, check out the [Draggable Drop Zones Line doc example](https://playbook.powerapp.cloud/kits/draggable/rails#draggable-drop-zones-line).

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.jsx

@@ -0,0 +1,59 @@
+import React, { useState } from "react";
+
+import Flex from '../../pb_flex/_flex'
+import Image from '../../pb_image/_image'
+import Draggable from '../../pb_draggable/_draggable'
+import { DraggableProvider } from '../../pb_draggable/context'
+
+const data = [
+  {
+    id: "100",
+    url: "https://unsplash.it/500/400/?image=638",
+  },
+  {
+    id: "200",
+    url: "https://unsplash.it/500/400/?image=639",
+  },
+  {
+    id: "300",
+    url: "https://unsplash.it/500/400/?image=640",
+  },
+];
+
+const DraggableDefault = (props) => {
+  const [initialState, setInitialState] = useState(data);
+
+  return (
+    <>
+    <DraggableProvider initialItems={data}
+        onReorder={(items) => setInitialState(items)}
+    >
+        <Draggable.Container {...props}>
+        <Flex>
+            {initialState.map(({ id, url }) => (
+              <Draggable.Item dragId={id} 
+                  key={id}
+                  onDrag={() => console.log(`${id} drag!`)}
+                  onDragEnd={() => console.log(`${id} drag end!`)}
+                  onDragEnter={() => console.log(`${id} drag enter!`)}
+                  onDragLeave={() => console.log(`${id} drag leave!`)}
+                  onDragOver={() => console.log(`${id} drag over!`)}
+                  onDragStart={() => console.log(`${id} drag start!`)}
+                  onDrop={() => console.log(`${id} drop!`)}
+              >
+                <Image alt={id} 
+                    margin="xs"
+                    size="md" 
+                    url={url} 
+                />
+              </Draggable.Item>
+            ))}
+         </Flex>
+        </Draggable.Container>
+    </DraggableProvider>
+    </>
+
+  );
+};
+
+export default DraggableDefault;

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_react.md

@@ -0,0 +1 @@
+You can add drag event listeners for `onDrag`, `onDragEnd`, `onDragEnter`, `onDragLeave`, `onDragOver`, `onDragStart`, and `onDrop`.

data/app/pb_kits/playbook/pb_draggable/docs/example.yml

@@ -9,6 +9,7 @@ examples:
   - draggable_drop_zones: Draggable Drop Zones
   - draggable_drop_zones_colors: Draggable Drop Zones Colors
   - draggable_drop_zones_line: Draggable Drop Zones Line
+  - draggable_event_listeners: Draggable Event Listeners
 
   rails:
   - draggable_default: Default
@@ -17,5 +18,7 @@ examples:
   - draggable_with_cards: Draggable with Cards
   - draggable_with_table: Draggable with Table
   - draggable_multiple_containers: Dragging Across Multiple Containers
+  - draggable_drop_zones: Draggable Drop Zones
+  - draggable_drop_zones_colors: Draggable Drop Zones Colors
+  - draggable_drop_zones_line: Draggable Drop Zones Line
   - draggable_event_listeners: Draggable Event Listeners
-

data/app/pb_kits/playbook/pb_draggable/docs/index.js

@@ -6,4 +6,5 @@ export { default as DraggableMultipleContainers } from './_draggable_multiple_co
 export { default as DraggableWithTable } from './_draggable_with_table.jsx'
 export { default as DraggableDropZones } from './_draggable_drop_zones.jsx'
 export { default as DraggableDropZonesColors } from './_draggable_drop_zones_colors.jsx'
-export { default as DraggableDropZonesLine } from './_draggable_drop_zones_line.jsx'
+export { default as DraggableDropZonesLine } from './_draggable_drop_zones_line.jsx'
+export { default as DraggableEventListeners } from './_draggable_event_listeners.jsx'

data/app/pb_kits/playbook/pb_draggable/draggable.rb

@@ -5,9 +5,17 @@ module Playbook
     class Draggable < ::Playbook::KitBase
       prop :initial_items, type: Playbook::Props::Array,
                            default: []
+      prop :drop_zone_type, type: Playbook::Props::Enum,
+                            values: %w[ghost shadow outline line],
+                            default: "ghost"
+      prop :drop_zone_color, type: Playbook::Props::Enum,
+                             values: %w[neutral primary purple],
+                             default: "neutral"
 
       def data
-        Hash(prop(:data)).merge(pb_draggable: true)
+        Hash(prop(:data)).merge(pb_draggable: true,
+                                drop_zone_type: drop_zone_type,
+                                drop_zone_color: drop_zone_color)
       end
 
       def classname

data/app/pb_kits/playbook/pb_draggable/draggable_container.rb

@@ -7,13 +7,23 @@ module Playbook
                  default: "div"
       prop :container, type: Playbook::Props::String,
                        default: ""
+      prop :drop_zone_direction, type: Playbook::Props::Enum,
+                                 values: ["horizontal", "vertical", nil],
+                                 default: nil
 
       def data
         Hash(prop(:data)).merge(pb_draggable_container: true)
       end
 
       def classname
-        generate_classname("pb_draggable_container")
+        direction_class = case drop_zone_direction
+                          when "horizontal"
+                            "line_horizontal"
+                          when "vertical"
+                            "line_vertical"
+                          end
+
+        generate_classname("pb_draggable_container", direction_class, separator: " ")
       end
     end
   end

data/app/pb_kits/playbook/pb_draggable/draggable_item.rb

@@ -9,13 +9,23 @@ module Playbook
                  default: "div"
       prop :container, type: Playbook::Props::String,
                        default: ""
+      prop :drop_zone_line_color, type: Playbook::Props::Enum,
+                                  values: ["primary", "purple", nil],
+                                  default: nil
 
       def data
         Hash(prop(:data)).merge(pb_draggable_item: true)
       end
 
       def classname
-        generate_classname("pb_draggable_item")
+        line_color_class = case drop_zone_line_color
+                           when "primary"
+                             "drop_zone_color_primary"
+                           when "purple"
+                             "drop_zone_color_purple"
+                           end
+
+        generate_classname("pb_draggable_item", line_color_class, separator: " ")
       end
     end
   end