playbook_ui_docs 14.13.0.pre.alpha.PLAY1873rails86087 → 14.13.0.pre.alpha.pbntr799collapsiblerowswithcustomclick6117

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bbb6a9c3f7715ee9d85ab9d242ae07d3e1cfee1a4818ded7d44d998b31604353
-  data.tar.gz: b8267301849e58d67efe8c5a0d228f0dade301cac7ccddd372cb6849abec0a85
+  metadata.gz: 46f220029d479ed4d6e5b795ef54adde354a008090d0e52d034497a17b1fcfee
+  data.tar.gz: 44d3003dc1e8b1807b52e6f5f121ed9de2f0dc1f34fd3eb5e53f3f68e4b24da7
 SHA512:
-  metadata.gz: baccc7e1ee1c0e3d5da847248bfabb37d865ec682c58a0bbcf3234020ed0bf47715314c97dc17c365c6090f37873185e94775216c6f978d1ada42455a72f0a6e
-  data.tar.gz: c495517ae54ea3f254a030009b525b1c99fd33eb6bff3a6edaefc83db71e7db3b6490b015d565b3508812322f19390b64e400dfa3ad9fdc33606f08e9414de74
+  metadata.gz: 68f93e0a74adcfc807bfd344da86db77993c98ed5d2d9643605150e25deb2115aa4d5096c352f2613c9238f4abb791ffc665713efb13e1bc16e5d868dba30eea
+  data.tar.gz: 604444865002cb0d43fdf5005d8018a9778898ece5a31003f59a69f9aa3025a71b87fa799b49eb808ea63582a1a00edb4484538ee2405843ca43a7f327345955

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

@@ -43,9 +43,9 @@
       <% end %>
     <% end %>
 
-    <%= pb_rails("draggable/draggable_container", props: {tag:"tbody"}) do %>
+    <%= pb_rails("table/table_body", props: {draggable_container: true}) do %>
       <% initial_items.each do |item| %>
-        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id], tag:"tr"}) do %>
+        <%= pb_rails("table/table_row", props:{drag_id: item[:id], draggable_item: true}) do %>
           <%= pb_rails("table/table_cell", props: { text: item[:id]}) %>
           <%= pb_rails("table/table_cell") do %>
             <%= pb_rails("flex", props:{align:"center"}) do %>

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

@@ -1 +1,4 @@
-The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this, make use of the `tag` prop on the draggable_container to set it to 'tbody' and the same prop on the draggable_item to set that to 'tr'. This will create the functionality seen here. 
+The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this:
+
+- use the `draggable_container` prop on the table/table_body to designate it as the Draggable Container
+- use the `draggable_item` prop on the table/table_row to designate it as the Draggable Item. Make sure to also pass id to the `drag_id` prop here. 

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

@@ -0,0 +1,90 @@
+import React, { useState } from "react";
+import { Flex, Table, Body, Avatar, DraggableProvider } from "playbook-ui";
+
+// Initial items to be dragged
+const data = [
+    {
+        id: "1",
+        task: "Task 1",
+        assignee_name: "Terry Miles",
+        assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
+      },
+      {
+        id: "2",
+        task: "Task 2",
+        assignee_name: "Sophia Miles",
+        assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
+      },
+      {
+        id: "3",
+        task: "Task 3",
+        assignee_name: "Alice Jones",
+        assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
+      },
+      {
+        id: "4",
+        task: "Task 4",
+        assignee_name: "Mike James",
+        assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
+      },
+      {
+        id: "5",
+        task: "Task 5",
+        assignee_name: "James Guy",
+        assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
+      }
+];
+
+const DraggableWithTableReact = (props) => {
+  const [initialState, setInitialState] = useState(data);
+
+  return (
+    <>
+    <DraggableProvider initialItems={data}
+        onReorder={(items) => setInitialState(items)}
+    >
+        <Table
+            responsive="none"
+            size="sm" 
+            {...props}
+        >
+          <Table.Head>
+            <Table.Row>
+              <Table.Header>{"id"}</Table.Header>
+              <Table.Header>{"name"}</Table.Header>
+              <Table.Header>{"task number"}</Table.Header>
+            </Table.Row>
+          </Table.Head>
+          <Table.Body draggableContainer>
+            {initialState.map(({ id, task, assignee_name, assignee_img }) => (
+              <Table.Row 
+                  dragId={id} 
+                  draggableItem
+                  key={id}
+              >
+                <Table.Cell>{id}</Table.Cell>
+                <Table.Cell>
+                  <Flex align="center">
+                    <Avatar 
+                        imageUrl={assignee_img} 
+                        size="xs" 
+                    />
+                    <Body 
+                        paddingLeft="xxs" 
+                        text={assignee_name} 
+                        {...props}
+                    />
+                  </Flex>
+                </Table.Cell>
+                <Table.Cell>{task}</Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+    </DraggableProvider>
+    </>
+
+  );
+};
+
+export default DraggableWithTableReact;

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

@@ -0,0 +1,5 @@
+The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this:
+
+- Wrap the Table with the `DraggableProvider` and manage state as shown. 
+- use the `draggableContainer` prop on the Table.Body to designate it as the Draggable Container
+- use the `draggableItem` prop on the Table.Row to designate it as the Draggable Item. Make sure to also pass id to the `dragId` prop here. 

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

@@ -4,7 +4,9 @@ examples:
   - draggable_with_list: Draggable with List Kit
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
+  - draggable_with_table_react: Draggable with Table
   - draggable_multiple_containers: Dragging Across Multiple Containers
+
   rails:
   - draggable_default_rails: Default
   - draggable_with_list_rails: Draggable with List Kit

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

@@ -2,4 +2,5 @@ export { default as DraggableDefault } from './_draggable_default.jsx'
 export { default as DraggableWithCards } from './_draggable_with_cards.jsx'
 export { default as DraggableWithList } from './_draggable_with_list.jsx'
 export { default as DraggableWithSelectableList } from './_draggable_with_selectable_list.jsx'
-export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'
+export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'
+export { default as DraggableWithTableReact } from './_draggable_with_table_react.jsx'

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx

@@ -16,7 +16,7 @@ const TableWithCollapsible = (props) => {
     );
   };
 
-return (
+  return (
       <Table
           size="sm"
           {...props}

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.html.erb

@@ -0,0 +1,51 @@
+<% content = capture do %>
+    <%= pb_rails("card", props: { border_none: true, border_radius: "none", padding: "md" }) do %>
+        <%= pb_rails("body", props: { text: "Nested content inside a Table Row" }) %>
+    <% end %>
+<% end %>
+
+<%= pb_rails("table", props: { size: "sm" }) do %>
+  <%= pb_rails("table/table_head") do %>
+      <%= pb_rails("table/table_row") do %>
+        <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
+        <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
+        <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
+        <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
+        <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
+        <%= pb_rails("table/table_header", props: { text: ""}) %>
+       <% end %>
+  <% end %>
+  <%= pb_rails("table/table_body") do %>
+      <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, toggle_cell_id: "cell-1", id: "5" }) do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text_align: "right", id: "cell-1", cursor: "pointer" }) do %>
+            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
+          <% end %>
+      <% end %>
+     <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, toggle_cell_id: "cell-2", id: "6" }) do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text_align: "right", id: "cell-2", cursor: "pointer" }) do %>
+            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
+          <% end %>
+      <% end %>
+    <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, toggle_cell_id: "cell-3", id: "7" }) do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text_align: "right", id: "cell-3", cursor: "pointer" }) do %>
+            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
+          <% end %>
+      <% end %>
+  <% end %>
+<% end %>
+  

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click_rails.md

@@ -0,0 +1,2 @@
+When using the `collapsible` prop, the default functionality is that the entire Row will be clickable to toggle the Row. To limit the click event to a specific Table Cell, you can use the `toggle_cell_id` prop to pass in the id of the Cell you want to use as the trigger.
+__NOTE__: `toggle_cell_id` and the `id` on the Cell you want to use as the trigger MUST be the same. Please also be aware that you will need to pass in an `id` to any Table Rows you want to be collapsible. Make sure every `id` is unique if you are using multipe collapsibles.

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

@@ -31,6 +31,7 @@ examples:
     - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
     - table_outer_padding: Outer Padding
     - table_with_collapsible: Table with Collapsible
+    - table_with_collapsible_with_custom_click: Table with Collapsible with Custom Click
     - table_with_collapsible_with_custom_content_rails: Table with Collapsible with Custom Content
     - table_with_collapsible_with_nested_rows_rails: Table with Collapsible with Nested Rows
     - table_with_collapsible_with_nested_table_rails: Table with Collapsible with Nested Table

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.html.erb

@@ -27,6 +27,20 @@
     placeholder: "123-45-6789"
   }) %>
 
+  <%= pb_rails("text_input", props: {
+    label: "Credit Card",
+    mask: "credit_card",
+    margin_bottom: "md",
+    placeholder: "1234 5678 9012 3456"
+  }) %>
+
+  <%= pb_rails("text_input", props: {
+    label: "CVV",
+    mask: "cvv",
+    margin_bottom: "md",
+    placeholder: "123"
+  }) %>
+
   <%= pb_rails("title" , props: {
     text: "Hidden Input Under The Hood",
     padding_bottom: "sm"