playbook_ui_docs 14.25.0.pre.alpha.testingcss10064 → 14.25.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2782b4b1bb02f94b09aac7a98b4c33b979eaf7d3dcd9e920f91864593020d084
-  data.tar.gz: 129ff7af882ffc75eac5d64688439265c96360d5cc9bfd5618bf83996241d2e2
+  metadata.gz: 874ed8c9f3437a3c991e142fbfb085433782b65d49c600e48b588b1a469d89c5
+  data.tar.gz: cb13f3345acc62c8eb1653c988b8de177bdedd9082762fa8a85f91dbf612d763
 SHA512:
-  metadata.gz: 37690189e784d751c0df1ae02d22eae41d0182f3989d97c8dfb0237edfae34ecc0af222477eb056bb88476f58988a5cf48b72c0cebdcd0c91ad2dd25fbd7d8b6
-  data.tar.gz: 51ac45a86b29bb4a3aebb761033b17c54dbc8090fbf51e35132aac774cbfd790a817075335aeb24f1b9557c3065d56e833b0bb2dd3332a176d4f97c50121ba7c
+  metadata.gz: e9d9f046c5badb3b704b4fc9aabd4ed52c977afc71192135959284400fa8e120569abf5c913238432e8779b9349f12544a7bfdb329586c7eb9fe692d713b79c1
+  data.tar.gz: 6e2c8a86d238f41dcc34f2ba3242dc0b0c2560fcf167ea4ccfaf4d8f8db0fa8ce48814352b96eb9b1cbdae4480ef01767cfaf6db66cebadef5b6450a851b1533

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

@@ -68,10 +68,8 @@ examples:
   - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
   - advanced_table_row_styling: Row Styling
-  - advanced_table_padding_control_per_row: Padding Control using Row Styling
   - advanced_table_column_styling: Column Styling
   - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
-  - advanced_table_padding_control: Padding Control using Column Styling
   - advanced_table_column_border_color: Column Group Border Color
   - advanced_table_fullscreen: Fullscreen
   - advanced_table_infinite_scroll: Infinite Scroll

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

@@ -43,6 +43,4 @@ export {default as AdvancedTableWithCustomHeader} from './_advanced_table_with_c
 export { default as AdvancedTableCustomSort } from './_advanced_table_custom_sort.jsx'
 export { default as AdvancedTableWithCustomHeaderMultiHeader } from './_advanced_table_with_custom_header_multi_header.jsx'
 export { default as AdvancedTableSortPerColumn } from './_advanced_table_sort_per_column.jsx'
-export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced_table_sort_per_column_for_multi_column.jsx'
-export { default as AdvancedTablePaddingControl } from './_advanced_table_padding_control.jsx'
-export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
+export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced_table_sort_per_column_for_multi_column.jsx'

data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb

@@ -50,7 +50,7 @@
 <% end %>
 
 <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
-  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "dark" }) do %>
+  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "bg_dark" }) do %>
     <%= pb_rails("body", props: { text: "Dark", dark: true }) %>
   <% end %>
   <%= pb_rails("card/card_body", props: { padding: "md" }) do %>

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

@@ -5,7 +5,6 @@ examples:
   - circle_icon_button_link: Link
   - circle_icon_button_loading: Loading
   - circle_icon_button_size: Size
-  - circle_icon_button_input_options: Input Options
   
   react:
   - circle_icon_button_default: Default

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb

@@ -21,27 +21,13 @@
         let currentClass = okayLoadingButton.className;
         let cancelClass = cancelButton ? cancelButton.className : "";
 
-        okayLoadingButton.disabled = true;
-        okayLoadingButton.classList.add("pb_button_loading");
-        okayLoadingButton.classList.remove("pb_button_enabled");
-        okayLoadingButton.classList.add("pb_button_disabled");
-
-        if (cancelButton) {
-            cancelButton.disabled = true;
-            cancelButton.classList.remove("pb_button_enabled");
-            cancelButton.classList.add("pb_button_disabled");
-        }
-
         setTimeout(function() {
             okayLoadingButton.disabled = false;
-            okayLoadingButton.classList.remove("pb_button_loading");
-            okayLoadingButton.classList.remove("pb_button_disabled");
-            okayLoadingButton.classList.add("pb_button_enabled");
+            okayLoadingButton.className = currentClass.replace("_disabled_loading", "_enabled");
 
             if (cancelButton) {
             cancelButton.disabled = false;
-            cancelButton.classList.remove("pb_button_disabled");
-            cancelButton.classList.add("pb_button_enabled");
+            cancelButton.className = cancelClass.replace("_disabled", "_enabled");
             }
         }, 5000);
 

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.html.erb

@@ -0,0 +1,8 @@
+<%= pb_rails("button", props: { text: "Push Drawer", margin_right: "sm", data: {"open-drawer": "drawer-3"} }) %>
+
+<%= pb_rails("drawer", props: { 
+    id:"drawer-3", 
+    behavior: "push"
+}) do  %>
+    Test me (Push Behavior)
+<% end %>

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

@@ -0,0 +1,41 @@
+import React, { useState } from "react"
+
+import Button from '../../pb_button/_button'
+import Drawer from '../../pb_drawer/_drawer'
+import Flex from '../../pb_flex/_flex'
+
+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.html.erb

@@ -0,0 +1,33 @@
+<%= pb_rails("flex") do %>
+    <%= pb_rails("button", props: { text: "Drawer with border right", margin_right: "sm", data: {"open-drawer": "drawer-12"} }) %>
+
+    <%= pb_rails("drawer", props: { 
+        id:"drawer-12", 
+        overlay: false,
+        border: "right"
+    }) do  %>
+        Test me (Border Right)
+    <% end %>
+    
+    
+    <%= pb_rails("button", props: { text: "Drawer with border left", margin_right: "sm", data: {"open-drawer": "drawer-13"} }) %>
+    
+    <%= pb_rails("drawer", props: { 
+        id:"drawer-13", 
+        overlay: false,
+        border: "left"
+    }) do  %>
+        Test me (Border Left)
+    <% end %>
+
+    <%= pb_rails("button", props: { text: "Drawer with border full", data: {"open-drawer": "drawer-14"} }) %>
+    
+    <%= pb_rails("drawer", props: { 
+        id:"drawer-14", 
+        overlay: false,
+        border: "full"
+    }) do  %>
+        Test me (Border Full)
+    <% end %>
+<% end %>
+

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

@@ -0,0 +1,78 @@
+import React, { useState } from "react";
+
+import Button from '../../pb_button/_button'
+import Drawer from '../../pb_drawer/_drawer'
+import Flex from '../../pb_flex/_flex'
+
+const DrawerBorders = () => {
+  // Individual state variables for each drawer size
+  const [openedBRightDrawer, setOpenedBRightDrawer] = useState(false);
+  const [openedBLeftDrawer, setOpenedBLeftDrawer] = useState(false);
+  const [openedBFullDrawer, setOpenedBFullDrawer] = useState(false);
+
+  // Toggle functions for each drawer
+  const toggleBRightDrawer = () => setOpenedBRightDrawer(!openedBRightDrawer);
+  const toggleBLeftDrawer = () => setOpenedBLeftDrawer(!openedBLeftDrawer);
+  const toggleBFullDrawer = () => setOpenedBFullDrawer(!openedBFullDrawer);
+
+  return (
+    <>
+      <Flex 
+          wrap
+      >
+        <Button marginRight="md"
+            onClick={toggleBRightDrawer}
+        >
+         Drawer with border right
+        </Button>
+        <Button marginRight="md"
+            onClick={toggleBLeftDrawer}
+        >
+         Drawer with border left
+        </Button>
+        <Button marginRight="md"
+            onClick={toggleBFullDrawer}
+        >
+          Drawer with border full
+        </Button>
+      </Flex>
+
+      {/* Drawers for each size */}
+      <Drawer
+          behavior="float"
+          border="right"
+          onClose={toggleBRightDrawer}
+          opened={openedBRightDrawer}
+          overlay={false}
+          placement="right"
+          size="lg"
+      >
+        This is a Drawer with border right  
+      </Drawer>
+      <Drawer
+          behavior="float"
+          border="left"
+          onClose={toggleBLeftDrawer}
+          opened={openedBLeftDrawer}
+          overlay={false}
+          placement="right"
+          size="lg"
+      >
+        This is a Drawer with border left
+      </Drawer>
+      <Drawer
+          behavior="float"
+          border="full"
+          onClose={toggleBFullDrawer}
+          opened={openedBFullDrawer}
+          overlay={false}
+          placement="right"
+          size="lg"
+      >
+        This is a Drawer with border full
+      </Drawer>
+    </>
+  );
+};
+
+export default DrawerBorders;

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.html.erb

@@ -0,0 +1,3 @@
+
+<%= pb_rails("body", props: { text: " The breakpoint prop determines when the Drawer is always visible. Above the specified breakpoint, the Drawer remains open on the page. Below it, only the trigger element is shown, allowing you to toggle the drawer open and closed. To see this in action, click the button below and resize your window.", padding_bottom: "md" }) %>
+<%= pb_rails("button", props: { text: "Open Doc Example in New Tab", new_window: true, link: "/drawer_page", margin_right: "lg" }) %>

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

@@ -0,0 +1,26 @@
+import React from "react"
+import Button from '../../pb_button/_button'
+import Body from "../../pb_body/_body"
+
+const DrawerMenu = () => {
+  return (
+    <>
+      <Body>
+        The breakpoint prop determines when the Drawer is always visible. Above
+        the specified breakpoint, the Drawer remains open on the page. Below it,
+        only the trigger element is shown, allowing you to toggle the drawer
+        open and closed. To see this in action, click the button below and
+        resize your window.
+      </Body>
+      <Button
+          link='https://8njdkc.csb.app/'
+          marginTop='md' 
+          newWindow 
+      >
+        Open Doc Example in New Tab
+      </Button>
+    </>
+  )
+}
+
+export default DrawerMenu

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb

@@ -0,0 +1,20 @@
+<%= pb_rails("flex") do %>
+    <%= pb_rails("button", props: { text: "Left Drawer", margin_right: "sm", data: {"open-drawer": "drawer-1"} }) %>
+
+    <%= pb_rails("drawer", props: { 
+        id:"drawer-1", 
+    }) do  %>
+        Test me (Left Drawer)
+    <% end %>
+    
+    
+    <%= pb_rails("button", props: { text: "Right Drawer", data: {"open-drawer": "drawer-2"} }) %>
+    
+    <%= pb_rails("drawer", props: { 
+        id:"drawer-2", 
+        placement: "right"
+    }) do  %>
+        Test me (Right Drawer)
+    <% end %>
+<% end %>
+

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

@@ -0,0 +1,59 @@
+import React, { useState } from "react";
+
+import Button from '../../pb_button/_button'
+import Drawer from '../../pb_drawer/_drawer'
+import Flex from '../../pb_flex/_flex'
+
+const useDrawer = (visible = false) => {
+  const [opened, setOpened] = useState(visible);
+  const toggle = () => setOpened(!opened);
+
+  return [opened, toggle];
+};
+
+const DrawerDefault = () => {
+  const [drawerLeftOpen, toggleDrawerLeftOpen] = useDrawer();
+  const [drawerRightOpen, toggleDrawerRightOpen ] = useDrawer();
+
+  return (
+    <>
+      <Flex wrap>
+        <Button
+            id="sm"
+            marginRight="md"
+            onClick={toggleDrawerLeftOpen}
+        >
+          {"Left Drawer"}
+        </Button>
+        <Button
+            marginRight="xl"
+            onClick={toggleDrawerRightOpen}
+        >
+          {"Right Drawer"}
+        </Button>
+      </Flex>
+      <Flex>
+        {/* Left Drawer */}
+        <Drawer
+            onClose={toggleDrawerLeftOpen}
+            opened={drawerLeftOpen}
+            size={"lg"}
+        >
+          Test me (Left Drawer)
+        </Drawer>
+
+        {/* Right Drawer */}
+        <Drawer
+            onClose={toggleDrawerRightOpen}
+            opened={drawerRightOpen}
+            placement={"right"}
+            size={"lg"}
+        >
+          Test me (Right Drawer)
+        </Drawer>
+      </Flex>
+    </>
+  );
+};
+
+export default DrawerDefault;

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("button", props: { padding: "xs", margin_right: "sm", data: {"open-drawer": "drawer-4"} }) do %>
+    <%= pb_rails("icon", props: { icon: "bars", size: "2x" }) %>
+<% end %>
+
+<%= pb_rails("drawer", props: { 
+    id:"drawer-4", 
+    within_element: true,
+    placement: "bottom",
+    breakpoint: "md",
+    size: "full"
+}) do  %>
+    <%= pb_rails("nav", props: { display: {xl: "none", lg: "none", md: "none", sm: "block" } }) do %>
+        <%= pb_rails("nav/item", props: { text: "Photos", link: "#" }) %>
+        <%= pb_rails("nav/item", props: { text: "Music", link: "#" }) %>
+        <%= pb_rails("nav/item", props: { text: "Video", link: "#", active: true }) %>
+        <%= pb_rails("nav/item", props: { text: "Files", link: "#" }) %>
+    <% end %>
+    <%= pb_rails("nav", props: { display: {md: "block", sm: "none", xs: "none" }, orientation: "horizontal" }) do %>
+        <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
+        <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
+        <%= pb_rails("nav/item", props: { text: "Service ", link: "#" }) %>
+        <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
+    <% end %>
+<% end %>

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

@@ -0,0 +1,61 @@
+import React, { useState, useEffect } from "react"
+
+import Button from '../../pb_button/_button'
+import Drawer from '../../pb_drawer/_drawer'
+import Icon from '../../pb_icon/_icon'
+import Nav from '../../pb_nav/_nav'
+import NavItem from '../../pb_nav/_item'
+
+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 (
+    <div>
+      <Button id='menuButton'
+          padding='xs'
+      >
+        <Icon icon='bars'
+            size='2x'
+        />
+      </Button>
+      <Drawer
+          breakpoint='md'
+          placement='bottom'
+          size='full'
+          triggerId='menuButton'
+          withinElement
+      >
+        <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

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

@@ -0,0 +1,24 @@
+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
+
+
+
+

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.html.erb

@@ -0,0 +1,21 @@
+<%= pb_rails("flex") do %>
+    <%= pb_rails("button", props: { text: "No Overlay Drawer", margin_right: "sm", data: {"open-drawer": "drawer-10"} }) %>
+
+    <%= pb_rails("drawer", props: { 
+        id:"drawer-10", 
+        overlay: false
+    }) do  %>
+        Test me (No Overlay)
+    <% end %>
+    
+    
+    <%= pb_rails("button", props: { text: "Overlay Drawer", data: {"open-drawer": "drawer-11"} }) %>
+    
+    <%= pb_rails("drawer", props: { 
+        id:"drawer-11", 
+        placement: "right"
+    }) do  %>
+        Test me (Has Overlay)
+    <% end %>
+<% end %>
+

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

@@ -0,0 +1,54 @@
+import React, { useState } from "react"
+
+import Button from '../../pb_button/_button'
+import Drawer from '../../pb_drawer/_drawer'
+import Flex from '../../pb_flex/_flex'
+
+const DrawerSizes = () => {
+  // Individual state variables for each drawer size
+  const [openedNoOverlayDrawer, setOpenedNoOverlayDrawer] = useState(false)
+  const [openedOverlayDrawer, setOpenedOverlayDrawer] = useState(false)
+
+  // Toggle functions for each drawer
+  const toggleNoOverlayDrawer = () =>
+    setOpenedNoOverlayDrawer(!openedNoOverlayDrawer)
+  const toggleOverlayDrawer = () => setOpenedOverlayDrawer(!openedOverlayDrawer)
+
+  return (
+    <>
+      <Flex wrap>
+        <Button marginRight='md'
+            onClick={toggleNoOverlayDrawer}
+        >
+          No Overlay Drawer
+        </Button>
+        <Button marginRight='md'
+            onClick={toggleOverlayDrawer}
+        >
+          Overlay Drawer
+        </Button>
+      </Flex>
+
+      {/* Drawers for each size */}
+      <Drawer
+          onClose={toggleNoOverlayDrawer}
+          opened={openedNoOverlayDrawer}
+          overlay={false}
+          placement='right'
+          size='lg'
+      >
+        This is a Drawer with no overlay
+      </Drawer>
+      <Drawer
+          onClose={toggleOverlayDrawer}
+          opened={openedOverlayDrawer}
+          placement='right'
+          size='lg'
+      >
+        This is a Drawer with an overlay
+      </Drawer>
+    </>
+  )
+}
+
+export default DrawerSizes

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

@@ -0,0 +1 @@
+Click the button to close the drawer when there is no overlay.

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.html.erb

@@ -0,0 +1,49 @@
+<%= pb_rails("flex") do %>
+    <%= pb_rails("button", props: { text: "XS Drawer", margin_right: "sm", data: {"open-drawer": "drawer-5"} }) %>
+
+    <%= pb_rails("drawer", props: { 
+        id:"drawer-5", 
+        size: "xs"
+    }) do  %>
+        XS 
+    <% end %>
+    
+    <%= pb_rails("button", props: { text: "SM Drawer", margin_right: "sm", data: {"open-drawer": "drawer-6"} }) %>
+
+    <%= pb_rails("drawer", props: { 
+        id:"drawer-6", 
+        size: "sm",
+        placement: "right"
+    }) do  %>
+        This is a small drawer 
+    <% end %>
+
+    <%= pb_rails("button", props: { text: "MD Drawer", margin_right: "sm", data: {"open-drawer": "drawer-7"} }) %>
+
+    <%= pb_rails("drawer", props: { 
+        id:"drawer-7", 
+        size: "md"
+    }) do  %>
+        This is a medium drawer 
+    <% end %>
+
+    <%= pb_rails("button", props: { text: "LG Drawer", margin_right: "sm", data: {"open-drawer": "drawer-8"} }) %>
+
+    <%= pb_rails("drawer", props: { 
+        id:"drawer-8", 
+        size: "lg",
+        placement: "right"
+    }) do  %>
+        This is a large drawer 
+    <% end %>
+
+    <%= pb_rails("button", props: { text: "XL Drawer", margin_right: "sm", data: {"open-drawer": "drawer-9"} }) %>
+
+    <%= pb_rails("drawer", props: { 
+        id:"drawer-9", 
+        size: "xl"
+    }) do  %>
+        This is an extra large drawer 
+    <% end %>
+<% end %>
+