playbook_ui_docs 13.30.0.pre.alpha.20240515remotebuildkitconversion3150 → 13.31.0.pre.alpha.PBNTR342navtabbing3230

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6cceb594cd31b390837b3358b6eca62a416027b0344fb09dffe7ba18e026dbc2
-  data.tar.gz: dcb581e8619d51cab0a93d3d7cf0fc07e1210aa0d9d50105d4730080f5ba2830
+  metadata.gz: d408e0949eb6bb1ea22c13557263595272d0f6883b2f9675de55c988399eb0b3
+  data.tar.gz: dfeadb8a4e5c4d914697d6c7f93a451ac5d69c09246c1ff89606c2188ed3ea4f
 SHA512:
-  metadata.gz: 4831824bba5a5ae835508c73147d2e3158fc659ea9961851177aef285f2b92e9c0d279b20348724e010ef41928bf787baaf62b4e027e0e18b031ac5b67f0915f
-  data.tar.gz: 8cddbc6e8e59f9c0174d74a7b9c583825d3462b35990f921662b55b384012c355d2c887f1f7889141ed7977422c04dcea01e880e24bbf8847a9a6df18b7b3fa9
+  metadata.gz: 0f072b4577c6aa8a6b929e90106e28c22df57add8eb70cce74747b8bcc852d1c0da8d0c820badce16ec82a54cd8cb0374039a675891b29843f426f1b662d5b97
+  data.tar.gz: d208444eede6743050ebb4c0e0f38dfbcf93b866c63ce38c832f7a71f6751a5cb3fd90ef10c25a2ea4f8156ad7e7e001f1ad7d1d6eb2499c52bcc28ee4380663

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

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

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

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

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

@@ -1,4 +1,6 @@
-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.
+The Draggable kit gives you a full subcomponent structure that allows it to be used with almost any kits.
 
-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.
+`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.

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

@@ -1,5 +1,9 @@
-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. 
+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.
 
-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,7 +1,5 @@
-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. 
+For a simplified version of the Draggable API for the List kit, you can do the following:
 
-In addition to the above `dragId` is a REQUIRED prop to be passed to the List kit when implementing dragging.
+Use `DraggableProvider` and manage state as shown.
 
-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.
+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.

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

@@ -1,7 +1,5 @@
-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. 
+For a simplified version of the Draggable API for the SelectableList kit, you can do the following:
 
-In addition to the above `dragId` is a REQUIRED prop to be passed to the SelectableList kit when implementing dragging.
+Use `DraggableProvider` and manage state as shown.
 
-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.
+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.

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

@@ -13,6 +13,14 @@
   ]
 %>
 
+<% 
+  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" } %>
@@ -22,6 +30,7 @@
   <%= 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 } %>

data/app/pb_kits/playbook/pb_icon/docs/_icon_default.html.erb

@@ -1,6 +1 @@
-<%= pb_rails("icon", props: { icon: "angles-down", fixed_width: true }) %>
-<%= pb_rails("icon", props: { icon: "circle-arrow-right", fixed_width: true }) %>
-<%= pb_rails("icon", props: { icon: "arrow-circle-right", fixed_width: true }) %>
-
-<%= pb_rails("caption", props: { text: "Font Awesome (no alias & not in our Playbook-icons lib)", margin_y: "md" }) %>
-<%= pb_rails("icon", props: { icon: "elephant", fixed_width: true }) %>
+<%= pb_rails("icon", props: { icon: "user", fixed_width: true }) %>

data/app/pb_kits/playbook/pb_icon/docs/_icon_default.jsx

@@ -1,29 +1,12 @@
 import React from "react"
-
 import Icon from "../_icon"
-import {Caption} from "../.."
 
 const IconDefault = (props) => {
   return (
     <div>
-      <Icon fixedWidth
-          icon='angles-down'
-          {...props}
-      />
-      <Icon fixedWidth
-          icon='circle-arrow-right'
-          {...props}
-      />
-      <Icon fixedWidth
-          icon='arrow-circle-right'
-          {...props}
-      />
-      <Caption
-          marginY='md'
-          text='Font Awesome (no alias & not in our Playbook-icons lib)'
-      />
-      <Icon fixedWidth
-          icon='elephant'
+      <Icon
+          fixedWidth
+          icon="user"
           {...props}
       />
     </div>

data/app/pb_kits/playbook/pb_nav/docs/_tab_nav.html.erb

@@ -0,0 +1,12 @@
+<%= pb_rails("nav", props: { orientation: "horizontal", variant: "subtle", tabbing: true }) do %>
+  <%= pb_rails("nav/item", props: { text: "About", active: true, data: { pb_nav_item_tab: "about" }, cursor: "pointer" }) %>
+  <%= pb_rails("nav/item", props: { text: "Case Studies", data: { pb_nav_item_tab: "case_studies" }, cursor: "pointer" }) %>
+<% end %>
+
+<div id="about">
+  This is about!
+</div>
+
+<div id="case_studies">
+  This is case studies!
+</div>

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

@@ -19,6 +19,7 @@ examples:
   - block_nav: Block
   - block_no_title_nav: Without Title
   - new_tab: Open in a New Tab
+  - tab_nav: Tab Nav
 
   react:
   - default_nav: Default