playbook_ui_docs 14.13.0.pre.alpha.play1851checkboxreacthook6083 → 14.13.0.pre.alpha.play1900progresspillwidth6122

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a24929a83b6d4d0d6790bcbe603ea89914b1804164c97cb01986ccdde94e123a
-  data.tar.gz: b805a13fccbf05bdc5ef5aaf5e9c0423f4a068cbb14ef19bee7e0334e5f7afd2
+  metadata.gz: 9fb428e50c3af1a8371eec2321be845864bbb05375331d7bfa4ca4bf1d8cb141
+  data.tar.gz: 210047e9bdcf09f0aa6636add91823447b22586ec3cc657bf12601e19abe015a
 SHA512:
-  metadata.gz: e466b36bb7467675f8d25f0e010e772142fc3337232474451dcc1a172d1289a1929dff3e8d096f490002466f9d0dec462742c5f486a70262656a456203da29d0
-  data.tar.gz: 729706182805df0575d2768d197d502fb042610c4fc80a8553893ae6d1aae2aada0585a8641ba2041b39991ab38d2f4c41a9c64ae18f6dbc2ca11f54c97e0ac3
+  metadata.gz: e13d938e6b2b211566da7deeea992472d6c069824c001fc8b47fb68117f2df1a7d8e8fe55dce5a2278bb184b0eb989e93bc5bb267b62838cc9ceb5697ab26590
+  data.tar.gz: c3ed3503c89920b541f09a87d454bf0708cba655392357e9828bb2e60c244c9b67e373241a7923c850b58f772ce444c1a5baae5f98d9dca2a2b3e901e5d34fc9

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

@@ -11,7 +11,6 @@ examples:
   react:
   - checkbox_default: Default
   - checkbox_checked: Load as checked
-  - checkbox_react_hook: React Hook Form
   - checkbox_custom: Custom Checkbox
   - checkbox_error: Default w/ Error
   - checkbox_indeterminate: Indeterminate Checkbox
@@ -22,4 +21,4 @@ examples:
     - checkbox_error_swift: Default w/ Error
     - checkbox_indeterminate_swift: Indeterminate Checkbox
     - checkbox_props_swift: ""
-    
+    

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

@@ -1,6 +1,5 @@
 export { default as CheckboxDefault } from './_checkbox_default.jsx'
 export { default as CheckboxCustom } from './_checkbox_custom.jsx'
-export { default as CheckboxReactHook } from './_checkbox_react_hook.jsx'
 export { default as CheckboxError } from './_checkbox_error.jsx'
 export { default as CheckboxChecked } from './_checkbox_checked.jsx'
 export { default as CheckboxIndeterminate } from './_checkbox_indeterminate.jsx'

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_progress_pills/docs/_progress_pills_default.html.erb

@@ -1 +1,2 @@
 <%= pb_rails("progress_pills", props: { aria: { label: "2 out of 3 steps complete" }, steps: 3, active: 2 }) %>
+<%= pb_rails("progress_pills", props: { aria: { label: "9 out of 18 steps complete" }, steps: 18, active: 9, margin_top: "md" }) %>

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.jsx

@@ -10,6 +10,13 @@ const ProgressPillsDefault = (props) => {
                 steps={3}
                 {...props}
             />
+            <ProgressPills
+                active={9}
+                aria={{ label: '9 out of 18 steps complete' }}
+                marginTop="md"
+                steps={18}
+                {...props}
+            />
         </>
     )
 }

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.md

@@ -0,0 +1 @@
+Progress pills start at `45px` wide if the container allows, but will shrink down to `1px` as the container gets smaller. Resize this window to see each pill shrink.

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("progress_pills", props: { aria: { label: "2 out of 5 steps complete" }, steps: 5, active: 2, full_width_pill: true }) %>

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import ProgressPills from '../_progress_pills'
+
+const ProgressPillsFullWidth = (props) => {
+    return (
+        <>
+            <ProgressPills
+                active={2}
+                aria={{ label: '2 out of 5 steps complete' }}
+                fullWidthPill
+                steps={5}
+                {...props}
+            />
+        </>
+    )
+}
+
+export default ProgressPillsFullWidth

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width_rails.md

@@ -0,0 +1 @@
+Pass `full_width_pill: true` to the Progress Pill kit to get true 100% full width pills. The kit will take up the full width of the container that it is in.

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width_react.md

@@ -0,0 +1 @@
+Pass `fullWidthPill` to the Progress Pill kit to get true 100% full width pills. The kit will take up the full width of the container that it is in.

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

@@ -3,9 +3,11 @@ examples:
   rails:
   - progress_pills_default: Default
   - progress_pills_status: Status
+  - progress_pills_full_width: Full Container Width
 
 
 
   react:
   - progress_pills_default: Default
   - progress_pills_status: Status
+  - progress_pills_full_width: Full Container Width

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

@@ -1,2 +1,3 @@
 export { default as ProgressPillsDefault } from './_progress_pills_default.jsx'
 export { default as ProgressPillsStatus } from './_progress_pills_status.jsx'
+export { default as ProgressPillsFullWidth } from './_progress_pills_full_width.jsx'

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"