playbook_ui_docs 13.30.0.pre.alpha.PLAY1328fixtimelinekitglobalpropsreact3096 → 13.30.0.pre.alpha.play1367contenttagnoninputkits3159

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '05813b97210befb8bf5db329609990ff637f48a7defa0b0cb9a8f61ceaf68cd5'
-  data.tar.gz: 25da023059632ffbb44140ba1e24799de56d0c3dc198513c3f25cdfa98e0fd1f
+  metadata.gz: 3e5b4bbd6b84f93a1ad58d9a4d7f6a7e7731af60fdaf0f5195469ca43c4c8335
+  data.tar.gz: 7b8784e03ceea5d1aafc16d3ec09a00e79f21816f60ac9cd1aae1039ed761c1f
 SHA512:
-  metadata.gz: 8517a60878e5668d21cae27692409fb51350aa132a02263d96e47f2a0c141463a4dfac9962c1dcaee88f4592ab23400dc8ec97aafde94bfc4a792debfd2d1b40
-  data.tar.gz: 2e9fec1a843f16c91034368c8c0f2cb3b242b32d10f27d7043cb476f5b11c869405cd19d7362b66cf5225ceb8458337b7be0f4bcd6368267944483edb062f6b5
+  metadata.gz: 186e294ec92cfd83d388e2edb2b73197cccac711f6a8b220bc1de8d11f5a82162b4c0586c1435f9a14a8270aeccd96e548fb288b087c3a946de9ff98e9c88840
+  data.tar.gz: 4eda2d541dd003126d66f1a20e00679aab0582364529e16095de617f260add46aeeb922d024f0821a311065ed17b90e1ce0984c900ae425c6db1956c7bb670cf

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.html.erb

@@ -0,0 +1,59 @@
+<%# Example sort method for demonstration purposes %>
+<% if params["sort"] %>
+  <% sort_param = params["sort"].gsub(/_(asc|desc)\z/, "") %>
+  <% sort_direction = params["sort"].end_with?("_asc") ? 1 : -1 %>
+  <% @table_data.sort! do |a, b|
+    value_a = a[sort_param]
+    value_b = b[sort_param]
+
+    value_a = value_a.to_i if value_a.is_a?(String) && value_a.match?(/^\d+$/)
+    value_b = value_b.to_i if value_b.is_a?(String) && value_b.match?(/^\d+$/)
+
+    sort_direction * (value_a <=> value_b)
+  end %>
+<% end %>
+
+<% 
+  column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+      sort_menu: [
+        { item: "Year", link: "?sort=year_asc#table-sort", active: params["sort"] == "year_asc", direction: "asc" },
+        { item: "Year", link: "?sort=year_desc#table-sort", active: params["sort"] == "year_desc", direction: "desc" }
+      ],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+  ]
+
+  subrow_headers = ["Quarter", "Month", "Day"]
+%>
+
+<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { id: "subrow_headers", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
+<% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.md

@@ -0,0 +1,6 @@
+Optionally enable sorting by passing `sort_menu` to any `column_definition`(s). Sort options are determined by an array of `item` objects passed to the `sort_menu` prop. 
+
+</br>
+<div class="pb_pill_kit_warning"><div class="pb_title_kit_size_4 pb_pill_text">Disclaimer</div></div>
+
+This example uses a custom sort method that may need to be modified or replaced within your project.

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

@@ -2,14 +2,15 @@ examples:
   rails:
   - advanced_table_beta: Default (Required Props)
   - advanced_table_beta_subrow_headers: SubRow Headers
+  - advanced_table_beta_sort: Enable Sorting
   react:
   - advanced_table_default: Default (Required Props)
   - advanced_table_loading: Loading State
-  - advanced_table_sort: enable Sorting
+  - advanced_table_sort: Enable Sorting
   - advanced_table_sort_control: Sort Control
   - advanced_table_expanded_control: Expanded Control
   - advanced_table_subrow_headers: SubRow Headers
   - advanced_table_collapsible_trail: Collapsible Trail
   - advanced_table_table_options: Table Options
   - advanced_table_table_props: Table Props
-  - advanced_table_inline_row_loading: inline Row Loading
+  - advanced_table_inline_row_loading: Inline Row Loading

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default_swift.md

@@ -0,0 +1,33 @@
+![Date-Time-Stacked-Default](https://github.com/powerhome/playbook/assets/54749071/b877dd01-32fa-49ff-af2d-1f8d819f6f39)
+
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBDateTimeStacked(
+    timeZoneIdentifier: "EDT",
+    isLowercase: true,
+    isMonthStacked: true,
+    isMonthBold: true
+  )
+  PBDateTimeStacked(
+    timeZoneIdentifier: "EDT",
+    isYearDisplayed: true,
+    isLowercase: true,
+    isMonthStacked: true,
+    isMonthBold: true,
+    isYearBold: true,
+    dateVariant: .standard
+  )
+  PBDateTimeStacked(
+    timeZoneIdentifier: "GMT+9",
+    isLowercase: true,
+    isMonthStacked: true,
+    isMonthBold: true
+  )
+  PBDateTimeStacked(
+    timeZoneIdentifier: "MDT",
+    isLowercase: true,
+    isMonthStacked: true,
+    isMonthBold: true
+  )
+}
+```

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_props_swift.md

@@ -0,0 +1,18 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **dateTime** | `Date` | Takes a date type to calculate the current date | `Date()` |  |
+| **timeDate** | `Date` | Takes a date type to calculate the current time | `Date()` |  |
+| **timeZoneIdentifier** | `String` | A string value that is used in a function to get the correct time in the corrresponding time zone. This value is also used to display the time zone next to the time |  |  |
+| **isYearDisplayed** | `Bool` | Determines whether or not the year is displayed with the month and day | `false` | `true` `false` |
+| **isLowercase** | `Bool` | Determines whether or not am/pm is capitalized | `false` | `true` `false` |
+| **isMonthStacked** | `Bool` | Determines whether or not the value for month is stacked over the date | `false` | `true` `false` |
+| **isMonthBold** | `Bool` | Determines whether or not the month is in bold | `false` | `true` `false` |
+| **isYearBold** | `Bool` | Determines whether or not the year is in bold | `false` | `true` `false` |
+| **dateAlignment** | `HorizontalAlignment` | Sets alignment of date | `.trailing` | `leading` `center` `trailing` |
+| **timeAlignment** | `HorizontalAlignment` | Sets alignment of the time zone | `.leading` | `leading` `center` `trailing` |
+| **dateVariant** | `Variant` | Allows user to choose the style in which the date is displayed | `.short(showIcon: false)` | `.short(showIcon: false)` `.dayDate(showYear: false)` `.standard` ` .withIcon(isStandard: true)` `.withIcon(isStandard: false)` |
+| **timeVariant** | `Variant` | Allows user to choose the style in which the time is displayed | `.time` | `.time` `.iconTimeZone` `.withTimeZoneHeader` |
+| **dateSize** | `String` | Allows user to choose the size of the date that is being displayed  | `.title4` | `title4` `body` `caption` `large` `subcaption` |
+| **timeStyle** | `PBFont` | Allows user to choose the size of the time that is being displayed | `.caption` | `body` `caption` `large` `subcaption`|
+| **timeZoneStyle** | `PBFont` | Allows user to choose the size of the time zone that is being displayed | `.caption` | `body` `caption` `large` `subcaption`|

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

@@ -2,6 +2,11 @@ examples:
 
   rails:
   - date_time_stacked_default: Default
-
+  
   react:
   - date_time_stacked_default: Default
+  
+  swift:
+  - date_time_stacked_default_swift: Default
+  - date_time_stacked_props_swift: ""
+

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

@@ -32,13 +32,14 @@ const DraggableDefault = (props) => {
         <Draggable.Container {...props}>
           <SelectableList variant="checkbox">
             {initialState.map(({ id, text }) => (
-              <Draggable.Item id={id} 
+              <Draggable.Item dragId={id} 
                   key={id}
               >
                 <SelectableList.Item
                     label={text} 
                     name={id} 
                     value={id} 
+                    {...props}
                 />
               </Draggable.Item>
             ))}

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

@@ -1,4 +1,4 @@
 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.Container` specifies the container within which items can be dropped.
-The `Draggable.Item` specifies the items that can be dragged and dropped. `Draggable.Item` requires `id` to be passed in as shown.
+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_multiple_containers.jsx

@@ -113,12 +113,13 @@ const DraggableMultipleContainer = (props) => {
                       }) => (
                         <Draggable.Item 
                             container={container}
-                            id={id} 
+                            dragId={id} 
                             key={id}
                         >
                           <Card
                               marginBottom="sm"
                               padding="sm"
+                              {...props}
                           >
                             <Flex justify="between">
                               <FlexItem>
@@ -131,6 +132,7 @@ const DraggableMultipleContainer = (props) => {
                                   <Title paddingLeft="xs" 
                                       size={4}
                                       text={title}
+                                      {...props}
                                   />
                                 </Flex>
                               </FlexItem>
@@ -139,10 +141,12 @@ const DraggableMultipleContainer = (props) => {
                                   rounded
                                   text={badgeProperties(container).text}
                                   variant={badgeProperties(container).color}
+                                  {...props}
                               />
                             </Flex>
                             <Body paddingTop="xs"
                                 text={description} 
+                                {...props}
                             />
                           </Card>
                         </Draggable.Item>

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

@@ -36,29 +36,32 @@ const DraggableWithCards = (props) => {
     >
         <Draggable.Container  {...props}>
           {initialState.map(({ id, text }) => (
-              <Card
+              <Card dragId={id}
                   draggableItem
                   highlight={{ color: "primary", position: "side" }}
-                  id={id}
                   key={id}
                   marginBottom="xs"
                   padding="xs"
+                  {...props}
               >
                 <Flex alignItems="stretch" 
                     flexDirection="column"
                 >
                   <Flex gap="xs">
                     <Title size={4} 
-                        text={text} 
+                        text={text}
+                        {...props} 
                     />
                     <Badge 
                         text="35-12345" 
                         variant="primary" 
+                        {...props}
                     />
                   </Flex>
                       <Caption 
                           size="xs" 
                           text="8:00A • Township Name • 90210" 
+                          {...props}
                       />
                   <Flex gap="xxs" 
                       spacing="between"
@@ -66,6 +69,7 @@ const DraggableWithCards = (props) => {
                     <Flex gap="xxs">
                       <Caption color="error" 
                           size="xs"
+                          {...props}
                       >
                         <Icon icon="house-circle-exclamation" />
                       </Caption>
@@ -78,14 +82,17 @@ const DraggableWithCards = (props) => {
                       <Badge rounded 
                           text="Schedule QA" 
                           variant="warning" 
+                          {...props}
                        />
                       <Badge rounded 
                           text="Flex" 
-                          variant="primary" 
+                          variant="primary"
+                          {...props} 
                       />
                       <Badge rounded 
                           text="R99" 
                           variant="primary" 
+                          {...props}
                       />
                     </Flex>
                   </Flex>

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

@@ -1,3 +1,5 @@
-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 on Card. The dragHandle is added by default but this can be opted out off by setting `dragHandle` to false on the Card kit. 
+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. 
 
-The dev must manage state as shown and pass in id to the Card for dragging to work.
+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.jsx

@@ -30,11 +30,11 @@ const DraggableWithList = (props) => {
     <DraggableProvider initialItems={data}
         onReorder={(items) => setInitialState(items)}
     >
-        <List draggable
+        <List enableDrag
             {...props}
         >
             {initialState.map(({ id, text }) => (
-                <ListItem id={id}
+                <ListItem dragId={id}
                     key={id}
                 >
                     {text}

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

@@ -1 +1,7 @@
-For a simplified version of the Draggable API for the List kit, use the DraggableProvider to wrap the List kit and use the `draggable` prop on List. The dev must manage state as shown and pass in id to the ListItem for dragging to work.
+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. 
+
+In addition to the above `dragId` is a REQUIRED prop to be passed to the List kit when implementing dragging.
+
+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.jsx

@@ -29,16 +29,18 @@ const DraggableWithSelectableList = (props) => {
     <DraggableProvider initialItems={data}
         onReorder={(items) => setInitialState(items)}
     >
-          <SelectableList draggable 
-              variant="checkbox"
+          <SelectableList enableDrag
+              variant="radio"
               {...props}
               >
             {initialState.map(({ id, text }) => (
-                <SelectableList.Item id={id}
+                <SelectableList.Item 
+                    dragId={id}
                     key={id}
                     label={text} 
-                    name={id} 
+                    name="radio-test" 
                     value={id}
+                    {...props}
                 />
             ))}
           </SelectableList>

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

@@ -0,0 +1,7 @@
+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. 
+
+In addition to the above `dragId` is a REQUIRED prop to be passed to the SelectableList kit when implementing dragging.
+
+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_dropdown/docs/_dropdown_error.html.erb

@@ -0,0 +1,9 @@
+<% 
+  options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+  ]
+%>
+
+<%= pb_rails("dropdown", props: { error: "Please make a valid selection", options: options }) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx

@@ -0,0 +1,34 @@
+import React, { useState } from 'react'
+import { Dropdown } from '../../'
+
+const DropdownError = (props) => {
+    const [selectedOption, setSelectedOption] = useState()
+    const error = selectedOption?.value ? null : "Please make a valid selection"
+    const options = [
+        {
+            label: "United States",
+            value: "United States",
+        },
+        {
+            label: "Canada",
+            value: "Canada",
+        },
+        {
+            label: "Pakistan",
+            value: "Pakistan",
+        }
+    ]
+
+    return (
+        <>
+            <Dropdown
+                error={error}
+                onSelect={(selectedItem) => setSelectedOption(selectedItem)}
+                options={options}
+                {...props}
+            />
+        </>
+    )
+}
+
+export default DropdownError

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

@@ -7,6 +7,7 @@ examples:
   - dropdown_with_custom_display_rails: Custom Display
   - dropdown_with_custom_trigger_rails: Custom Trigger
   - dropdown_with_custom_padding: Custom Option Padding
+  - dropdown_error: Dropdown with Error
 
   react:
   - dropdown_default: Default
@@ -16,6 +17,7 @@ examples:
   - dropdown_with_custom_display: Custom Display
   - dropdown_with_custom_trigger: Custom Trigger
   - dropdown_with_custom_padding: Custom Option Padding
+  - dropdown_error: Dropdown with Error
   # - dropdown_with_autocomplete: Autocomplete
   # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
   # - dropdown_with_external_control: useDropdown Hook

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

@@ -8,4 +8,5 @@ export { default as DropdownWithCustomPadding } from './_dropdown_with_custom_pa
 export { default as DropdownWithLabel } from './_dropdown_with_label.jsx'
 export { default as DropdownWithExternalControl } from './_dropdown_with_external_control.jsx'
 export { default as DropdownWithHook } from './_dropdown_with_hook.jsx'
-export { default as DropdownSubcomponentStructure } from './_dropdown_subcomponent_structure.jsx'
+export { default as DropdownSubcomponentStructure } from './_dropdown_subcomponent_structure.jsx'
+export { default as DropdownError } from './_dropdown_error.jsx'

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_custom_icon.html.erb

@@ -0,0 +1,32 @@
+<div>
+  <%= pb_rails("fixed_confirmation_toast", props: {
+    icon: "wrench",
+    text: "Fix before proceeding",
+    status: "error",
+    closeable: true,
+    margin_bottom: "md"
+  })%>
+</div>
+<div>
+  <%= pb_rails("fixed_confirmation_toast", props: {
+    icon: "star",
+    text: "Thank you for completing the form!",
+    status: "success",
+    margin_bottom: "md"
+  })%>
+</div>
+<div>
+  <%= pb_rails("fixed_confirmation_toast", props: {
+    icon: "file-pdf",
+    text: "Saved as PDF",
+    status: "neutral",
+    margin_bottom: "md"
+  })%>
+</div>
+<div>
+  <%= pb_rails("fixed_confirmation_toast", props: {
+    icon: "arrow-down",
+    text: "New Messages",
+    status: "tip"
+  })%>
+</div>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_custom_icon.jsx

@@ -0,0 +1,48 @@
+import React from 'react'
+
+import FixedConfirmationToast from '../_fixed_confirmation_toast'
+
+const FixedConfirmationToastCustomIcon = (props) => {
+  return (
+    <div>
+      <div>
+        <FixedConfirmationToast
+            closeable
+            icon="wrench"
+            marginBottom="md"
+            status="error"
+            text="Fix before proceeding"
+            {...props}
+        />
+      </div>
+      <div>
+        <FixedConfirmationToast
+            icon="star"
+            marginBottom="md"
+            status="success"
+            text="Thank you for completing the form!"
+            {...props}
+        />
+      </div>
+      <div>
+        <FixedConfirmationToast
+            icon="file-pdf"
+            marginBottom="md"
+            status="neutral"
+            text="Saved as PDF"
+            {...props}
+        />
+      </div>
+      <div>
+        <FixedConfirmationToast
+            icon="arrow-down"
+            status="tip"
+            text="New Messages"
+            {...props}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default FixedConfirmationToastCustomIcon

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

@@ -6,6 +6,7 @@ examples:
   - fixed_confirmation_toast_close: Click to Close
   - fixed_confirmation_toast_positions: Click to Show Positions
   - fixed_confirmation_toast_children: Children
+  - fixed_confirmation_toast_custom_icon: Custom Icon
   
   react:
   - fixed_confirmation_toast_default: Default
@@ -14,6 +15,7 @@ examples:
   - fixed_confirmation_toast_positions: Click to Show Positions
   - fixed_confirmation_toast_auto_close: Click to Show Auto Close
   - fixed_confirmation_toast_children: Children
+  - fixed_confirmation_toast_custom_icon: Custom Icon
 
   swift:
   - fixed_confirmation_toast_default_swift: Default

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

@@ -4,3 +4,4 @@ export { default as FixedConfirmationToastClose } from './_fixed_confirmation_to
 export { default as FixedConfirmationToastPositions } from './_fixed_confirmation_toast_positions.jsx'
 export { default as FixedConfirmationToastAutoClose } from './_fixed_confirmation_toast_auto_close.jsx'
 export { default as FixedConfirmationToastChildren } from './_fixed_confirmation_toast_children.jsx'
+export { default as FixedConfirmationToastCustomIcon } from './_fixed_confirmation_toast_custom_icon.jsx'

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

@@ -1 +1 @@
-<%= pb_rails("icon", props: { icon: "user", fixed_width: true }) %>
+<%= pb_rails("icon", props: { icon: "user", fixed_width: true }) %>

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

@@ -1,6 +1,5 @@
-import React from 'react'
-
-import Icon from '../_icon'
+import React from "react"
+import Icon from "../_icon"
 
 const IconDefault = (props) => {
   return (

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

@@ -1,5 +1,5 @@
 <%= pb_rails("nav", props: { variant: "bold" }) do %>
-    <%= pb_rails("nav/item", props: { text: "Overview", link: "#", collapsible: true, icon_left:"city" }) do %>
+    <%= pb_rails("nav/item", props: { text: "Overview", link: "#", collapsible: true, icon_left:"city", collapsed: false }) do %>
         <%= pb_rails("nav", props: { variant: "bold" }) do %>
             <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
             <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx

@@ -9,6 +9,7 @@ const CollapsibleNav = (props) => {
     >
       <NavItem
           active
+          collapsed={false}
           collapsible 
           iconLeft="city" 
           link="#" 

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.md

@@ -1 +1,3 @@
-The `collapsible` prop allows users to create a nested, collapsible nav. Pass `collapsible` to any NavItem and pass that navItem any number of NavItems as children to create a collapsible nav.
+The `collapsible` prop allows users to create a nested, collapsible nav. Pass `collapsible` to any NavItem and pass that navItem any number of NavItems as children to create a collapsible nav.
+
+The optional `collapsed` prop can also be used to set the default state for the collapsed nav on first render of the page. `collapsed` takes a boolean value that is set to true (meaning nav is collapsed) by default. Set it to false as shown here to have the nav open on first render.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("overlay") do %>
+    <%= pb_rails("table", props: { size: "sm" }) do %>
+        <thead>
+            <tr>
+                <th>Column 1</th>
+                <th>Column 2</th>
+                <th>Column 3</th>
+                <th>Column 4</th>
+                <th>Column 5</th>
+            </tr>
+        </thead>
+        <tbody>
+            <% 7.times do %>
+                <tr>
+                    <td>Value 1</td>
+                    <td>Value 2</td>
+                    <td>Value 3</td>
+                    <td>Value 4</td>
+                    <td>Value 5</td>
+                </tr>
+            <% end %>   
+        </tbody>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md

@@ -1,7 +1,7 @@
-Overlays require a `color`, which sets the "start" (opaque) color of a gradient mask. Because this overlay is intended to reveal underlying content, the "end" color is fixed to transparent.
+Overlays optionally accept a `color`, which sets the "start" (opaque) color of a gradient mask. Because this overlay is intended to reveal underlying content, the "end" color is fixed to transparent. 
 
-The optional `layout` prop accepts a `position` and a `size` as a key:value pair object.
+The optional `layout` prop accepts the `position` and `size` of the overlay as a key:value pair.
 
-The `position` key accepts `top`, `bottom`, `y` (for both top and bottom) `right`, `left`, or `x` (for both left and right), which sets the side(s) where the `color` overlay starts. The direction of the overlay is always toward the opposite side of the position. For example, the default position of `bottom` starts the overlay on the bottom edge of your container and extends it toward the opposite side: the top.
+The `position` key accepts `bottom` (default), `top`, `y` (for both top and bottom) `right`, `left`, or `x` (for both left and right), which sets the side(s) where the `color` overlay starts. The direction of the overlay is always toward the opposite side of the position. For example, the default position of `bottom` starts the overlay on the bottom edge of your container and extends it toward the opposite side: the top.
 
-The `size` value accepts our [spacing tokens](https://playbook.powerapp.cloud/visual_guidelines/spacing) or a percentage value as a string, and literally translates to how much of the container is covered by the overlay. By default, `size` is set to `full` (100%) so that your overlay covers the entire container with a smooth fade from `color` at its starting edge, fading to transparent and ending at the containers opposite edge.
+The `size` value is `full` (100%) by default, but accepts our [spacing tokens](https://playbook.powerapp.cloud/visual_guidelines/spacing) or a percentage value as a string, and literally translates to how much of the container is covered by the overlay(s). 

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.html.erb

@@ -0,0 +1,11 @@
+<%= pb_rails("overlay", props: { layout: { "x": "xl" }, color: "card_light" }) do %>
+    <%= pb_rails("flex", props: { column_gap: "lg", orientation: "row", overflow_x: "auto" }) do %>
+        <% 15.times do %>
+            <%= pb_rails("flex/flex_item") do %>
+                <%= pb_rails("card") do %>
+                    Card content
+                <% end %>
+            <% end %>
+        <% end %>
+    <% end %>
+<% end %>

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

@@ -2,3 +2,7 @@ examples:
   react:
   - overlay_default: Default
   - overlay_multi_directional: Multi-directional
+
+  rails:
+    - overlay_default: Default
+    - overlay_multi_directional: Multi-directional