playbook_ui_docs 13.31.0.pre.alpha.powercentrainplaybookpt23212 → 13.31.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d441e50f00946e7fd02767217ed170a78da47b8aaa63652e700873c75718bf40
-  data.tar.gz: f7e8bf2bcb450d1b07e6e346c0b68a554992d8637c7521cc42b98d7350a36383
+  metadata.gz: feb3f7b0088898a56fd33f513dc7c8b3ab7cc1bfcb4f405e5aba095ddf6c4e9c
+  data.tar.gz: 4a0f3a03d13e89a26268dfdde7e7d151c3398f82465468378c26d53287a6611d
 SHA512:
-  metadata.gz: 3a6166b44023fe8117f3a9434e485507ecb2dd5fae84b25626bb60e92a816dddc4d5b251dbd79f26a91426a78d980120f1471ac557fdc4ee480d778a5a90ca07
-  data.tar.gz: 6b631e15afb3103a1302cae21bfaaa0930621280fb12692ff26f4d71758d04974483f82f8d36fb04dba1a864d831cd025a890179487e6c132b71e24ebb515ecf
+  metadata.gz: 49aee6ca71429ab79d36cd539f27dc2b4a389b0e1470f6b8cceabfe2d0110f00af73df3239dfbd685b7a525fe206841681abf05d7f1d2774771079fbd3bccc83
+  data.tar.gz: 73eb5c34285155897770c87eb236b8b8f6064f71efaedc8c544155c246144033f1d4ab61cd93f31ccd06d716983b47a0f4bb7cb5ee42899054f51e470d616505

data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.jsx

@@ -4,10 +4,7 @@ import { DateYearStacked } from '../../'
 const DateYearStackedDefault = (props) => {
   return (
     <div>
-      <DateYearStacked
-          date={new Date()}
-          {...props}
-      />
+      <DateYearStacked date={new Date()} />
       <DateYearStacked
           align="center"
           date={new Date()}

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

@@ -1,19 +1,23 @@
 import React, { useState } from "react";
-import { Flex, Image, Draggable, DraggableProvider } from "../../";
+import { SelectableList, Draggable, DraggableProvider } from "../../";
 
 // Initial items to be dragged
 const data = [
   {
-    id: "21",
-    url: "https://unsplash.it/500/400/?image=633",
+    id: "1",
+    text: "Task 1",
   },
   {
-    id: "22",
-    url: "https://unsplash.it/500/400/?image=634",
+    id: "2",
+    text: "Task 2",
   },
   {
-    id: "23",
-    url: "https://unsplash.it/500/400/?image=637",
+    id: "3",
+    text: "Task 3",
+  },
+  {
+    id: "4",
+    text: "Task 4",
   },
 ];
 
@@ -26,19 +30,20 @@ const DraggableDefault = (props) => {
         onReorder={(items) => setInitialState(items)}
     >
         <Draggable.Container {...props}>
-        <Flex>
-            {initialState.map(({ id, url }) => (
+          <SelectableList variant="checkbox">
+            {initialState.map(({ id, text }) => (
               <Draggable.Item dragId={id} 
                   key={id}
               >
-                <Image alt={id} 
-                    margin="xs"
-                    size="md" 
-                    url={url} 
+                <SelectableList.Item
+                    label={text} 
+                    name={id} 
+                    value={id} 
+                    {...props}
                 />
               </Draggable.Item>
             ))}
-         </Flex>
+          </SelectableList>
         </Draggable.Container>
     </DraggableProvider>
     </>

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

@@ -1,6 +1,4 @@
-The Draggable kit gives you a full subcomponent structure that allows it to be used with almost any kits.
+To use the Draggable kit, you must use the DraggableProvider and pass in `initialItems`. The `onReorder` is a function that returns the data as it changes as items are reordered. Use this to manage state as shown.
 
-`DraggableProvider` = This provider manages all settings that allows drag and drop to function and must be used as the outermost wrapper. It has 2 REQUIRED props: `initialItems` (initial data) and `onReorder` (function that returns mutated data as items are reordered via drag and drop). Devs must manage state as shown.
- 
-`Draggable.Container` = This specifies the container within which items can be dropped.
-`Draggable.Item` = This specifies the items that can be dragged and dropped. `dragId` is a REQUIRED prop for Draggable.Item.
+The `Draggable.Container` specifies the container within which items can be dropped.
+The `Draggable.Item` specifies the items that can be dragged and dropped. `dragId` is a REQUIRED prop for Draggable.Item.

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

@@ -1,9 +1,5 @@
-For a simplified version of the Draggable API for the Card kit, you can do the following:
-
-Use `DraggableProvider` and manage state as shown.
-
-`Draggable.Container` creates the container within which the cards can be dragged and dropped. 
-
-The Card kit is optimized to work with the draggable kit. To enable drag, use the `draggableItem` and `dragId` props on the Card kit as shown. An additional optional boolean prop (set to true by default) of `dragHandle` is also available to show the drag handle icon.
+For a simplified version of the Draggable API for the Card kit, You can use the the Card kit as the Draggable Item by using the `draggableItem` prop. The dragHandle is added by default but this can be opted out of by setting `dragHandle` to false on the Card kit. 
 
+In addition to the above `dragId` is a REQUIRED prop to be passedd to the Card kit when implementing dragging.
 
+The dev must manage state as shown.

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

@@ -1,5 +1,7 @@
-For a simplified version of the Draggable API for the List kit, you can do the following:
+For a simplified version of the Draggable API for the List kit, use the DraggableProvider to wrap the List kit and use the `enableDrag` prop. 
 
-Use `DraggableProvider` and manage state as shown.
+In addition to the above `dragId` is a REQUIRED prop to be passed to the List kit when implementing dragging.
 
-The List kit is optimized to work with the draggable kit. To enable drag, use the `enableDrag` prop on List kit AND `dragId` prop on ListItem. An additional optional boolean prop (set to true by default) of `dragHandle` is also available on List kit to show the drag handle icon.
+The dev must manage state as shown.
+
+The dragHandle is added by default but this can be opted out of by setting `dragHandle` to false on the List kit.

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

@@ -1,5 +1,7 @@
-For a simplified version of the Draggable API for the SelectableList kit, you can do the following:
+For a simplified version of the Draggable API for the SelectableList kit, use the DraggableProvider to wrap the SelectableList kit and use the `enableDrag` prop. 
 
-Use `DraggableProvider` and manage state as shown.
+In addition to the above `dragId` is a REQUIRED prop to be passed to the SelectableList kit when implementing dragging.
 
-The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the `enableDrag` prop on SelectableList kit AND `dragId` prop on SelectableList.Item. An additional optional boolean prop (set to true by default) of `dragHandle` is also available on SelectableList kit to show the drag handle icon.
+The dev must manage state as shown.
+
+The dragHandle is added by default but this can be opted out of by setting `dragHandle` to false on the SelectableList kit.

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -13,14 +13,6 @@
   ]
 %>
 
-<% 
-  example_dropdown_options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
-  ]
-%>
-
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
   <%= form.text_field :example_text_field, props: { label: true, required: true } %>
   <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
@@ -30,7 +22,6 @@
   <%= form.password_field :example_password_field, props: { label: true, required: true } %>
   <%= form.url_field :example_url_field, props: { label: true, required: true } %>
   <%= form.text_area :example_text_area, props: { label: true, required: true } %>
-  <%= form.dropdown_field :example_dropdown, props: { label: true, options: example_dropdown_options, required: true } %>
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>