playbook_ui 14.25.0.pre.alpha.testingcss9700 → 14.25.0.pre.alpha.testingcss9751

data/app/pb_kits/playbook/pb_drawer/_drawer.tsx

@@ -1,231 +0,0 @@
-import React, { useState, useEffect, useRef } from "react"
-import classnames from "classnames"
-
-import {
-  buildAriaProps,
-  buildCss,
-  buildDataProps,
-  buildHtmlProps,
-} from "../utilities/props"
-import { globalProps, globalInlineProps } from "../utilities/globalProps"
-import { DrawerContext } from "./context"
-import { useBreakpoint } from "./hooks/useBreakpoint"
-
-type DrawerProps = {
-  aria?: { [key: string]: string }
-  behavior?: "floating" | "push"
-  border?: "full" | "none" | "right" | "left"
-  breakpoint?: "none" | "xs" | "sm" | "md" | "lg" | "xl"
-  children: React.ReactNode | React.ReactNode[] | string
-  className?: string
-  data?: { [key: string]: string }
-  htmlOptions?: { [key: string]: string | number | boolean | (() => void) }
-  id?: string
-  triggerId?: string
-  onClose?: () => void
-  opened: boolean
-  overlay: boolean
-  placement?: "left" | "right" | "top" | "bottom"
-  size?: "xs" | "sm" | "md" | "lg" | "xl" | "full"
-  text?: string
-  withinElement?: boolean
-}
-
-const Drawer = (props: DrawerProps): React.ReactElement | null => {
-  const {
-    aria = {},
-    behavior = "floating",
-    border = "none",
-    breakpoint = "none",
-    className,
-    data = {},
-    htmlOptions = {},
-    id,
-    size = "md",
-    children,
-    triggerId,
-    opened,
-    onClose,
-    overlay = true,
-    placement = "left",
-    withinElement = false,
-  } = props
-
-  const drawerRef = useRef<HTMLDivElement>(null)
-  const [menuButtonOpened, setMenuButtonOpened] = useState(false)
-  const [shouldRender, setShouldRender] = useState(false)
-  const [isAnimating, setIsAnimating] = useState(false)
-
-  const { isOpenBreakpointOpen, isUserClosed, setIsUserClosed } = useBreakpoint(
-    {
-      breakpoint: breakpoint,
-      triggerId,
-    }
-  )
-
-  const modalIsOpened =
-    (isOpenBreakpointOpen && !isUserClosed) || menuButtonOpened || opened
-
-  useEffect(() => {
-    if (withinElement) return;
-
-    const sizeMap: { [key: string]: string } = {
-      xl: "365px",
-      lg: "300px",
-      md: "250px",
-      sm: "200px",
-      xs: "64px",
-      full: "100%",
-    };
-    const body = document.querySelector("body");
-    if (modalIsOpened && behavior === "push" && body) {
-      if (placement === "left") {
-        body.style.cssText = `margin-left: ${sizeMap[size]} !important; margin-right: '' !important;`;
-      } else if (placement === "right") {
-        body.style.cssText = `margin-right: ${sizeMap[size]} !important; margin-left: '' !important;`;
-      }
-
-      body.classList.add("PBDrawer__Body--open");
-    } else if (body) {
-      if (body.classList.contains("PBDrawer__Body--open")) {
-        body.classList.add("PBDrawer__Body--close");
-      }
-      body.style.cssText = "";
-      body.classList.remove("PBDrawer__Body--open");
-    }
-  }, [modalIsOpened]);
-
-  // Helper functions
-  const updateDrawerHeight = () => {
-    if (drawerRef.current) {
-      const height = drawerRef.current.scrollHeight;
-      drawerRef.current.style.setProperty('--drawer-height', `${height}px`);
-    }
-  }
-  
-  useEffect(() => {
-    if (modalIsOpened) {
-      setShouldRender(true)
-      if (withinElement) {
-        const timer = setTimeout(() => {
-          updateDrawerHeight()
-          setIsAnimating(true)
-        }, 10)
-        return () => clearTimeout(timer)
-      } else {
-        setIsAnimating(true)
-      }
-    } else {
-      setIsAnimating(false)
-      const timer = setTimeout(() => {
-        setShouldRender(false)
-      }, 250)
-      return () => clearTimeout(timer)
-    }
-  }, [modalIsOpened])
-
-
-
-  const handleMenuButtonClick = () => {
-    if (modalIsOpened) {
-      setMenuButtonOpened(false)
-      setIsUserClosed(true)
-    } else {
-      setMenuButtonOpened(true)
-      setIsUserClosed(false)
-    }
-  }
-
-  // Setup menu button click handler
-  useEffect(() => {
-    if (!triggerId) return;
-    
-    const menuButton = document.getElementById(triggerId)
-    if (menuButton) {
-      menuButton.addEventListener("click", handleMenuButtonClick)
-      return () => menuButton.removeEventListener("click", handleMenuButtonClick)
-    }
-  }, [modalIsOpened])
-
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
-  const dynamicInlineProps = globalInlineProps(props)
-
-  const drawerClasses = classnames(
-    "pb_drawer",
-    buildCss("pb_drawer", size as string, placement as string),
-    {
-      "drawer_border-full": border === "full",
-      "drawer_border-right": border === "right",
-      "drawer_border-left": border === "left",
-      pb_drawer_within_element: withinElement,
-      pb_drawer_after_open: isAnimating,
-      pb_drawer_before_close: !isAnimating && shouldRender,
-    },
-    withinElement ? "shadow_none" : "shadow_deepest",
-    globalProps(props),
-    className
-  )
-
-  const overlayClasses = classnames(
-    `pb_drawer${overlay ? "_overlay" : "_no_overlay"}`,
-    `drawer_content_${placement}`,
-    !overlay && "no-background",
-    {
-      pb_drawer_overlay_after_open: isAnimating,
-      pb_drawer_overlay_before_close: !isAnimating && shouldRender,
-    }
-  )
-
-  const api = {
-    onClose: () => {
-      if (triggerId) {
-        setMenuButtonOpened(false)
-      }
-      setIsUserClosed(true)
-      if (onClose) {
-        onClose()
-      }
-    },
-  }
-
-  const drawerContent = (
-    <div
-        className={drawerClasses}
-        onClick={(e) => e.stopPropagation()}
-        ref={drawerRef}
-    >
-      {children}
-    </div>
-  )
-
-  // Step 5: Only render when shouldRender is true
-  if (!shouldRender) return null
-
-  return (
-    <DrawerContext.Provider value={api}>
-      {withinElement ? (
-        drawerContent
-      ) : (
-        <div
-            {...ariaProps}
-            {...dataProps}
-            {...htmlProps}
-            className={classnames(buildCss("pb_drawer_wrapper"), className)}
-            style={dynamicInlineProps}
-        >
-          <div
-              className={overlayClasses}
-              id={id}
-              onClick={overlay ? api.onClose : undefined}
-          >
-            {drawerContent}
-          </div>
-        </div>
-      )}
-    </DrawerContext.Provider>
-  )
-}
-
-export default Drawer

data/app/pb_kits/playbook/pb_drawer/_drawer_context.tsx

@@ -1,3 +0,0 @@
-import React from "react";
-
-export const DrawerContext = React.createContext(null);

data/app/pb_kits/playbook/pb_drawer/context.ts

@@ -1,11 +0,0 @@
-import React from 'react'
-
-const noop = (): void => void 0
-
-type DrawerContextType = {
-  onClose: () => void
-}
-
-export const DrawerContext = React.createContext<DrawerContextType>({
-  onClose: noop,
-})

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

@@ -1,8 +0,0 @@
-<%= 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

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

@@ -1,33 +0,0 @@
-<%= 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

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

@@ -1,3 +0,0 @@
-
-<%= 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

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

@@ -1,20 +0,0 @@
-<%= 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

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

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

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

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

@@ -1,21 +0,0 @@
-<%= 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 %>
-