playbook_ui_docs 14.12.0.pre.rc.10 → 14.12.0.pre.rc.12

data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data_with_id.json

@@ -0,0 +1,299 @@
+[
+  {
+    "year": "2021",
+    "id": "1",
+    "quarter": null,
+    "month": null,
+    "day": null,
+    "newEnrollments": "20",
+    "scheduledMeetings": "10",
+    "attendanceRate": "51%",
+    "completedClasses": "3",
+    "classCompletionRate": "33%",
+    "graduatedStudents": "19",
+    "children": [
+      {
+        "year": "2021",
+        "id": "2",
+        "quarter": "Q1",
+        "month": null,
+        "day": null,
+        "newEnrollments": "2",
+        "scheduledMeetings": "35",
+        "attendanceRate": "32%",
+        "completedClasses": "15",
+        "classCompletionRate": "52%",
+        "graduatedStudents": "36",
+        "children": [
+          {
+            "year": "2021",
+            "id": "3",
+            "quarter": "Q1",
+            "month": "January",
+            "day": null,
+            "newEnrollments": "16",
+            "scheduledMeetings": "20",
+            "attendanceRate": "11%",
+            "completedClasses": "13",
+            "classCompletionRate": "47%",
+            "graduatedStudents": "28",
+            "children": [
+              {
+                "year": "2021",
+                "id": "4",
+                "quarter": "Q1",
+                "month": "January",
+                "day": "10",
+                "newEnrollments": "34",
+                "scheduledMeetings": "28",
+                "attendanceRate": "97%",
+                "completedClasses": "20",
+                "classCompletionRate": "15%",
+                "graduatedStudents": "17"
+              },
+              {
+                "year": "2021",
+                "id": "5",
+                "quarter": "Q1",
+                "month": "January",
+                "day": "20",
+                "newEnrollments": "43",
+                "scheduledMeetings": "23",
+                "attendanceRate": "66%",
+                "completedClasses": "26",
+                "classCompletionRate": "47%",
+                "graduatedStudents": "9"
+              }
+            ]
+          },
+          {
+            "year": "2021",
+            "id": "6",
+            "quarter": "Q1",
+            "month": "February",
+            "day": null,
+            "newEnrollments": "20",
+            "scheduledMeetings": "41",
+            "attendanceRate": "95%",
+            "completedClasses": "26",
+            "classCompletionRate": "83%",
+            "graduatedStudents": "43",
+            "children": [
+              {
+                "year": "2021",
+                "id": "7",
+                "quarter": "Q1",
+                "month": "February",
+                "day": "15",
+                "newEnrollments": "19",
+                "scheduledMeetings": "35",
+                "attendanceRate": "69%",
+                "completedClasses": "8",
+                "classCompletionRate": "75%",
+                "graduatedStudents": "23"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "year": "2022",
+    "id": "8",
+    "quarter": null,
+    "month": null,
+    "day": null,
+    "newEnrollments": "25",
+    "scheduledMeetings": "17",
+    "attendanceRate": "75%",
+    "completedClasses": "5",
+    "classCompletionRate": "45%",
+    "graduatedStudents": "32",
+    "children": [
+      {
+        "year": "2022",
+        "id": "9",
+        "quarter": "Q1",
+        "month": null,
+        "day": null,
+        "newEnrollments": "2",
+        "scheduledMeetings": "35",
+        "attendanceRate": "32%",
+        "completedClasses": "15",
+        "classCompletionRate": "52%",
+        "graduatedStudents": "36",
+        "children": [
+          {
+            "year": "2022",
+            "id": "10",
+            "quarter": "Q1",
+            "month": "January",
+            "day": null,
+            "newEnrollments": "16",
+            "scheduledMeetings": "20",
+            "attendanceRate": "11%",
+            "completedClasses": "13",
+            "classCompletionRate": "47%",
+            "graduatedStudents": "28",
+            "children": [
+              {
+                "year": "2022",
+                "id": "11",
+                "quarter": "Q1",
+                "month": "January",
+                "day": "15",
+                "newEnrollments": "34",
+                "scheduledMeetings": "28",
+                "attendanceRate": "97%",
+                "completedClasses": "20",
+                "classCompletionRate": "15%",
+                "graduatedStudents": "17"
+              },
+              {
+                "year": "2022",
+                "id": "12",
+                "quarter": "Q1",
+                "month": "January",
+                "day": "25",
+                "newEnrollments": "43",
+                "scheduledMeetings": "23",
+                "attendanceRate": "66%",
+                "completedClasses": "26",
+                "classCompletionRate": "47%",
+                "graduatedStudents": "9"
+              }
+            ]
+          },
+          {
+            "year": "2022",
+            "id": "13",
+            "quarter": "Q1",
+            "month": "May",
+            "day": null,
+            "newEnrollments": "20",
+            "scheduledMeetings": "41",
+            "attendanceRate": "95%",
+            "completedClasses": "26",
+            "classCompletionRate": "83%",
+            "graduatedStudents": "43",
+            "children": [
+              {
+                "year": "2022",
+                "id": "14",
+                "quarter": "Q1",
+                "month": "May",
+                "day": "2",
+                "newEnrollments": "19",
+                "scheduledMeetings": "35",
+                "attendanceRate": "69%",
+                "completedClasses": "8",
+                "classCompletionRate": "75%",
+                "graduatedStudents": "23"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "year": "2023",
+    "id": "15",
+    "quarter": null,
+    "month": null,
+    "day": null,
+    "newEnrollments": "10",
+    "scheduledMeetings": "15",
+    "attendanceRate": "65%",
+    "completedClasses": "4",
+    "classCompletionRate": "49%",
+    "graduatedStudents": "29",
+    "children": [
+      {
+        "year": "2023",
+        "id": "16",
+        "quarter": "Q1",
+        "month": null,
+        "day": null,
+        "newEnrollments": "2",
+        "scheduledMeetings": "35",
+        "attendanceRate": "32%",
+        "completedClasses": "15",
+        "classCompletionRate": "52%",
+        "graduatedStudents": "36",
+        "children": [
+          {
+            "year": "2023",
+            "id": "17",
+            "quarter": "Q1",
+            "month": "March",
+            "day": null,
+            "newEnrollments": "16",
+            "scheduledMeetings": "20",
+            "attendanceRate": "11%",
+            "completedClasses": "13",
+            "classCompletionRate": "47%",
+            "graduatedStudents": "28",
+            "children": [
+              {
+                "year": "2023",
+                "id": "18",
+                "quarter": "Q1",
+                "month": "March",
+                "day": "10",
+                "newEnrollments": "34",
+                "scheduledMeetings": "28",
+                "attendanceRate": "97%",
+                "completedClasses": "20",
+                "classCompletionRate": "15%",
+                "graduatedStudents": "17"
+              },
+              {
+                "year": "2023",
+                "id": "19",
+                "quarter": "Q1",
+                "month": "March",
+                "day": "11",
+                "newEnrollments": "43",
+                "scheduledMeetings": "23",
+                "attendanceRate": "66%",
+                "completedClasses": "26",
+                "classCompletionRate": "47%",
+                "graduatedStudents": "9"
+              }
+            ]
+          },
+          {
+            "year": "2023",
+            "id": "20",
+            "quarter": "Q1",
+            "month": "April",
+            "day": null,
+            "newEnrollments": "20",
+            "scheduledMeetings": "41",
+            "attendanceRate": "95%",
+            "completedClasses": "26",
+            "classCompletionRate": "83%",
+            "graduatedStudents": "43",
+            "children": [
+              {
+                "year": "2023",
+                "id": "21",
+                "quarter": "Q1",
+                "month": "April",
+                "day": "15",
+                "newEnrollments": "19",
+                "scheduledMeetings": "35",
+                "attendanceRate": "69%",
+                "completedClasses": "8",
+                "classCompletionRate": "75%",
+                "graduatedStudents": "23"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+]

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

@@ -27,3 +27,8 @@ examples:
   - advanced_table_pagination_with_props: Pagination Props
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
+  # - advanced_table_no_subrows: Table with No Subrows
+  - advanced_table_selectable_rows: Selectable Rows
+  - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
+  - advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
+  - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)

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

@@ -13,4 +13,9 @@ export { default as AdvancedTableCustomCell } from './_advanced_table_custom_cel
 export { default as AdvancedTablePagination } from './_advanced_table_pagination.jsx'
 export { default as AdvancedTablePaginationWithProps } from './_advanced_table_pagination_with_props.jsx'
 export { default as AdvancedTableColumnHeaders } from './_advanced_table_column_headers.jsx'
-export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'
+export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'
+export { default as AdvancedTableSelectableRows } from './_advanced_table_selectable_rows.jsx'
+export { default as AdvancedTableSelectableRowsNoSubrows } from './_advanced_table_selectable_rows_no_subrows.jsx'
+export { default as AdvancedTableNoSubrows } from './_advanced_table_no_subrows.jsx'
+export { default as AdvancedTableSelectableRowsHeader } from './_advanced_table_selectable_rows_header.jsx'
+export { default as AdvancedTableSelectableRowsActions } from './_advanced_table_selectable_rows_actions.jsx'

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_turbo_frames.html.erb

@@ -0,0 +1,13 @@
+<%= pb_rails("date_picker", props: { picker_id: "date-picker-turbo-frames", custom_event_type: "datePickerLoader" }) %>
+<%= pb_rails("button", props: { id: "date-picker-loader", text: "Click Event Simulation" }) %>
+
+<script>
+    document.getElementById("date-picker-loader").addEventListener("click", () => {
+        window.document.dispatchEvent(
+            new CustomEvent("datePickerLoader", {
+                bubbles: true,
+            })
+        )
+        console.log("Event 'datePickerLoader' dispatched - in a real implementation, this event would trigger the date picker's reinitialization through the custom_event_type prop connection")
+    })
+</script>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_turbo_frames_rails.md

@@ -0,0 +1,3 @@
+The `custom_event_type` prop allows you to specify a custom event that will trigger the date picker's initialization, in addition to the default initialization on `DOMContentLoaded`. This is particularly useful in dynamic contexts like Turbo Frame updates where you need to reinitialize the date picker after new content loads. For Turbo integration, use `custom_event_type: "turbo:before-render"` to ensure the date picker properly reinitializes after Turbo navigation events. 
+
+In this example, we demonstrate the setup pattern by connecting a button to dispatch a "datePickerLoader" event - while the date picker's event listener is properly configured through the `custom_event_type` prop, this demo only logs the event dispatch to the console to illustrate the connection structure.

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

@@ -28,6 +28,7 @@ examples:
   - date_picker_time: Time Selection
   - date_picker_positions: Custom Positions
   - date_picker_positions_element: Custom Position (based on element)
+  - date_picker_turbo_frames: Within Turbo Frames
 
   react:
   - date_picker_default: Default

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.jsx

@@ -0,0 +1,38 @@
+import React, { useState } from "react"
+import { Button, Drawer, Flex } from "playbook-ui"
+
+const useDrawer = (visible = false) => {
+  const [opened, setOpened] = useState(visible)
+  const toggle = () => setOpened(!opened)
+
+  return [opened, toggle]
+}
+
+const DrawerBehavior = () => {
+  const [drawerOpen, toggleDrawerOpen] = useDrawer()
+
+  return (
+    <>
+      <Flex wrap>
+        <Button id='sm'
+            marginRight='md'
+            onClick={toggleDrawerOpen}
+        >
+          {"Push Behavior"}
+        </Button>
+      </Flex>
+      <Flex>
+        <Drawer
+            behavior={"push"}      
+            onClose={toggleDrawerOpen}
+            opened={drawerOpen}
+            size={"lg"}
+        >
+          Test me (Push Behavior)
+        </Drawer>
+      </Flex>
+    </>
+  )
+}
+
+export default DrawerBehavior

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx

@@ -6,19 +6,15 @@ const DrawerBorders = () => {
   const [openedBRightDrawer, setOpenedBRightDrawer] = useState(false);
   const [openedBLeftDrawer, setOpenedBLeftDrawer] = useState(false);
   const [openedBFullDrawer, setOpenedBFullDrawer] = useState(false);
-  const [openedBDefaultDrawer, setOpenedBDefaultDrawer] = useState(false);
-  const [openedBRoundedDrawer, setOpenedBRoundedDrawer] = useState(false);
 
   // Toggle functions for each drawer
   const toggleBRightDrawer = () => setOpenedBRightDrawer(!openedBRightDrawer);
   const toggleBLeftDrawer = () => setOpenedBLeftDrawer(!openedBLeftDrawer);
   const toggleBFullDrawer = () => setOpenedBFullDrawer(!openedBFullDrawer);
-  const toggleBDefaultDrawer = () => setOpenedBDefaultDrawer(!openedBDefaultDrawer);
-  const toggleBRoundedDrawer = () => setOpenedBRoundedDrawer(!openedBRoundedDrawer);
 
   return (
     <>
-      <Flex padding="md"
+      <Flex 
           wrap
       >
         <Button marginRight="md"
@@ -36,23 +32,12 @@ const DrawerBorders = () => {
         >
           Drawer with border full
         </Button>
-        <Button marginRight="md"    
-            onClick={toggleBDefaultDrawer}
-        >
-          Default Drawer
-        </Button>
-        <Button marginRight="md"
-            onClick={toggleBRoundedDrawer}
-        > 
-          Rounded Drawer
-        </Button>
       </Flex>
 
       {/* Drawers for each size */}
       <Drawer
           behavior="float"
           border="right"
-          fullHeight
           onClose={toggleBRightDrawer}
           opened={openedBRightDrawer}
           overlay={false}
@@ -64,11 +49,10 @@ const DrawerBorders = () => {
       <Drawer
           behavior="float"
           border="left"
-          fullHeight
           onClose={toggleBLeftDrawer}
           opened={openedBLeftDrawer}
           overlay={false}
-          placement="right"
+          placement="left"
           size="lg"
       >
         This is a Drawer with border left
@@ -76,40 +60,14 @@ const DrawerBorders = () => {
       <Drawer
           behavior="float"
           border="full"
-          fullHeight
           onClose={toggleBFullDrawer}
           opened={openedBFullDrawer}
           overlay={false}
-          placement="right"
+          placement="left"
           size="lg"
       >
         This is a Drawer with border full
       </Drawer>
-      <Drawer
-          behavior="float"
-          fullHeight
-          onClose={toggleBDefaultDrawer}
-          opened={openedBDefaultDrawer}
-          overlay={false}
-          placement="right"
-          size="lg"
-      >   
-        This is a Default Drawer
-      </Drawer>
-      <Drawer
-          behavior="float"
-          borderRadius="rounded"
-          fullHeight
-          onClose={toggleBRoundedDrawer}
-          opened={openedBRoundedDrawer}
-          overlay={false}
-          placement="right"
-          size="lg"
-      >
-      <div style={{ paddingTop: '100px', paddingLeft: '12px' }}>
-        This is a Rounded Drawer
-      </div>
-      </Drawer>
     </>
   );
 };

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx

@@ -26,7 +26,6 @@ const DrawerBreakpoints = () => {
         <Drawer
             behavior={"push"}
             breakpoint="sm"
-            fullHeight
             onClose={toggleSmallDrawer}
             opened={smallDrawerOpened}
             overlay={false}

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.jsx

@@ -9,8 +9,8 @@ const useDrawer = (visible = false) => {
 };
 
 const DrawerDefault = () => {
-  const [headerSeparatorDrawerOpened, toggleHeaderSeparatorDrawer] = useDrawer();
-  const [bothSeparatorsDrawerOpened, toggleBothSeparatorsDrawer] = useDrawer();
+  const [drawerLeftOpen, toggleDrawerLeftOpen] = useDrawer();
+  const [drawerRightOpen, toggleDrawerRightOpen ] = useDrawer();
 
   return (
     <>
@@ -18,13 +18,13 @@ const DrawerDefault = () => {
         <Button
             id="sm"
             marginRight="md"
-            onClick={toggleHeaderSeparatorDrawer}
+            onClick={toggleDrawerLeftOpen}
         >
           {"Left Drawer"}
         </Button>
         <Button
             marginRight="xl"
-            onClick={toggleBothSeparatorsDrawer}
+            onClick={toggleDrawerRightOpen}
         >
           {"Right Drawer"}
         </Button>
@@ -32,12 +32,8 @@ const DrawerDefault = () => {
       <Flex>
         {/* Left Drawer */}
         <Drawer
-            behavior={"push"}
-            fullHeight
-            onClose={toggleHeaderSeparatorDrawer}
-            opened={headerSeparatorDrawerOpened}
-            overlay
-            placement={"left"}
+            onClose={toggleDrawerLeftOpen}
+            opened={drawerLeftOpen}
             size={"lg"}
         >
           Test me (Left Drawer)
@@ -45,11 +41,8 @@ const DrawerDefault = () => {
 
         {/* Right Drawer */}
         <Drawer
-            behavior={"push"}
-            fullHeight
-            onClose={toggleBothSeparatorsDrawer}
-            opened={bothSeparatorsDrawerOpened}
-            overlay
+            onClose={toggleDrawerRightOpen}
+            opened={drawerRightOpen}
             placement={"right"}
             size={"lg"}
         >
@@ -60,4 +53,4 @@ const DrawerDefault = () => {
   );
 };
 
-export default DrawerDefault;
+export default DrawerDefault;

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.jsx

@@ -1,31 +1,56 @@
-import React from "react";
-import { Button, Drawer, Icon, Title } from "playbook-ui";
+import React, { useState, useEffect } from "react"
+import { Button, Drawer, Icon, Nav, NavItem } from "playbook-ui"
 
 const DrawerMenu = () => {
+  const [isSmallScreen, setIsSmallScreen] = useState(false)
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(max-width: 600px)")
+    setIsSmallScreen(mediaQuery.matches)
+    const handler = (e) => setIsSmallScreen(e.matches)
+    mediaQuery.addEventListener('change', handler)
+    return () => mediaQuery.removeEventListener('change', handler)
+  }, [])
 
   return (
-    <>
-      <Button id="menuButton"
-          padding="sm"
+    <div>
+      <Button id='menuButton'
+          padding='xs'
       >
-        <Icon icon="bars"
-            size="3x"
+        <Icon icon='bars'
+            size='2x'
         />
       </Button>
       <Drawer
-          behavior="push"
-          closeBreakpoint="md"
-          menuButtonID="menuButton"
-          overlay={false}
-          placement="left"
-          size="lg"
+          breakpoint="md"
+          placement='bottom'
+          size='full'
+          triggerId='menuButton'
           withinElement
       >
-        <Title paddingBottom="md">A really neat menu</Title>
-        <Button text="This Button does nothing" />
+        <Nav 
+            highlight={false}
+            link='#'
+            orientation={isSmallScreen ? 'vertical' : 'horizontal'} 
+            padding={isSmallScreen ? 'none' : 'sm'}
+        >
+          <NavItem link='#'
+              text='About'
+          />
+          <NavItem active
+              link='#'
+              text='Case Studies'
+          />
+          <NavItem link='#'
+              text='Service'
+          />
+          <NavItem link='#'
+              text='Contacts'
+          />
+        </Nav>
       </Drawer>
-    </>
-  );
-};
+    </div>
+  )
+}
 
-export default DrawerMenu;
+export default DrawerMenu

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.md

@@ -1,6 +1,24 @@
-Our drawer kit can fulfill your responsive menu needs! Using the `closeBreakpoint` prop you can have the menu close on smaller screens like phones/tablets.
+The Drawer component can be used to create responsive navigation menus and sidebars. It provides flexible options for controlling when and how the drawer appears based on screen size.
+
+### Within Element
+The `withinElement` prop allows you to render the drawer within its parent container:
+- The drawer will be positioned relative to its parent element
+- Useful for creating nested navigation structures
+- This must be used in conjunction with the `triggerId` prop
+
+This provides a clean way to create responsive navigation patterns that adapt to different screen sizes while maintaining a consistent user experience.
+
+### Trigger Id
+The `triggerId` prop allows you to connect an element to control the drawer:
+- The specified element will toggle the drawer open/closed
+- The element is automatically hidden when the drawer is opened via breakpoint
+- The element reappears when the drawer is closed via breakpoint
+
+### Breakpoint
+Use the `breakpoint` prop to control when the drawer automatically opens or closes based on screen size. For example, setting `breakpoint="md"` will:
+- Close the drawer on screens smaller than the medium breakpoint (992px)
+- Automatically open the drawer on screens larger than or equal to the medium breakpoint
+
 
-Set a menu button with  the `menuButtonID` props. When the Drawer is open, the menu button will be hidden. But when your Brakpoint closes the drawer, you can toggle the Drawer open/close with your menu butotn.
 
-Also use the `withinElement` props to have the Drawer open within a specific element, instead of the default behavior of it taking up the entire screen size.