playbook_ui 14.12.0.pre.rc.11 → 14.12.0.pre.rc.12

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.
 

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

@@ -1,24 +1,25 @@
-import React, { useState } from "react";
-import { Button, Drawer, Flex } from "playbook-ui";
+import React, { useState } from "react"
+import { Button, Drawer, Flex } from "playbook-ui"
 
 const DrawerSizes = () => {
   // Individual state variables for each drawer size
-  const [openedNoOverlayDrawer, setOpenedNoOverlayDrawer] = useState(false);
-  const [openedOverlayDrawer, setOpenedOverlayDrawer] = useState(false);
+  const [openedNoOverlayDrawer, setOpenedNoOverlayDrawer] = useState(false)
+  const [openedOverlayDrawer, setOpenedOverlayDrawer] = useState(false)
 
   // Toggle functions for each drawer
-  const toggleNoOverlayDrawer = () => setOpenedNoOverlayDrawer(!openedNoOverlayDrawer);
-  const toggleOverlayDrawer = () => setOpenedOverlayDrawer(!openedOverlayDrawer);
+  const toggleNoOverlayDrawer = () =>
+    setOpenedNoOverlayDrawer(!openedNoOverlayDrawer)
+  const toggleOverlayDrawer = () => setOpenedOverlayDrawer(!openedOverlayDrawer)
 
   return (
     <>
       <Flex wrap>
-        <Button marginRight="md"
+        <Button marginRight='md'
             onClick={toggleNoOverlayDrawer}
         >
           No Overlay Drawer
         </Button>
-        <Button marginRight="md"
+        <Button marginRight='md'
             onClick={toggleOverlayDrawer}
         >
           Overlay Drawer
@@ -27,29 +28,23 @@ const DrawerSizes = () => {
 
       {/* Drawers for each size */}
       <Drawer
-          behavior="push"
-          fullHeight
           onClose={toggleNoOverlayDrawer}
           opened={openedNoOverlayDrawer}
           overlay={false}
-          placement="right"
-          size="lg"
+          size='lg'
       >
         This is a Drawer with no overlay
       </Drawer>
       <Drawer
-          behavior="push"
-          fullHeight
           onClose={toggleOverlayDrawer}
           opened={openedOverlayDrawer}
-          overlay
-          placement="right"
-          size="lg"
+          placement='right'
+          size='lg'
       >
-        This is a Drawer with an overlay 
+        This is a Drawer with an overlay
       </Drawer>
     </>
-  );
-};
+  )
+}
 
-export default DrawerSizes;
+export default DrawerSizes

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

@@ -19,7 +19,8 @@ const DrawerSizes = () => {
   return (
     <>
       <Flex wrap>
-        <Button marginRight="md"
+        <Button 
+            marginRight="md"
             onClick={toggleXsDrawer}
         >
           XS Drawer
@@ -48,11 +49,8 @@ const DrawerSizes = () => {
 
       {/* Drawers for each size */}
       <Drawer
-          behavior="push"
-          fullHeight
           onClose={toggleXsDrawer}
           opened={openedXsDrawer}
-          overlay
           placement="right"
           size="xs"
       >
@@ -60,47 +58,32 @@ const DrawerSizes = () => {
       </Drawer>
 
       <Drawer
-          behavior="push"
-          fullHeight
           onClose={toggleSmDrawer}
           opened={openedSmDrawer}
-          overlay
-          placement="right"
           size="sm"
       >
         This is an SM Drawer
       </Drawer>
 
       <Drawer
-          behavior="push"
-          fullHeight
           onClose={toggleMdDrawer}
           opened={openedMdDrawer}
-          overlay
           placement="right"
-          size="md"
       >
         This is an MD Drawer
       </Drawer>
 
       <Drawer
-          behavior="push"
-          fullHeight
           onClose={toggleLgDrawer}
           opened={openedLgDrawer}
-          overlay
-          placement="right"
           size="lg"
       >
         This is an LG Drawer
       </Drawer>
 
       <Drawer
-          behavior="push"
-          fullHeight
           onClose={toggleXlDrawer}
           opened={openedXlDrawer}
-          overlay
           placement="right"
           size="xl"
       >

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

@@ -6,7 +6,8 @@ examples:
   
   react:
   - drawer_default: Default
-  - drawer_menu: Menu Behavior 
+  - drawer_behavior: Push Behavior
+  - drawer_menu: Within Element
   - drawer_sizes: Sizes
   - drawer_overlay: Overlay
   - drawer_borders: Borders 

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

@@ -4,3 +4,4 @@ export { default as DrawerOverlay } from './_drawer_overlay.jsx'
 export { default as DrawerBorders } from './_drawer_borders.jsx'
 export { default as DrawerBreakpoints } from './_drawer_breakpoints.jsx'
 export { default as DrawerMenu } from './_drawer_menu.jsx'
+export { default as DrawerBehavior } from './_drawer_behavior.jsx'

data/app/pb_kits/playbook/pb_drawer/drawer.test.jsx

@@ -39,7 +39,7 @@ test('renders with the right border class when border prop is right', async () =
   const container = document.getElementById('drawer-id');
   const drawer = container.querySelector('#drawer-id .pb_drawer');
 
-  expect(drawer).toHaveClass('drawer_border_right');
+  expect(drawer).toHaveClass('drawer_border-right');
 });
 
 test('renders with the full border class when border prop is full', async () => {
@@ -51,7 +51,7 @@ test('renders with the full border class when border prop is full', async () =>
 
   const container = document.getElementById('drawer-id');
   const drawer = container.querySelector('#drawer-id .pb_drawer');
-  expect(drawer).toHaveClass('drawer_border_full');
+  expect(drawer).toHaveClass('drawer_border-full');
 });
 
 test('does not have a border class when border prop is none', async () => {
@@ -63,9 +63,9 @@ test('does not have a border class when border prop is none', async () => {
 
   const container = document.getElementById('drawer-id');
   const drawer = container.querySelector('#drawer-id .pb_drawer');
-  expect(drawer).not.toHaveClass('drawer_border_right');
-  expect(drawer).not.toHaveClass('drawer_border_left');
-  expect(drawer).not.toHaveClass('drawer_border_full');
+  expect(drawer).not.toHaveClass('drawer_border-right');
+  expect(drawer).not.toHaveClass('drawer_border-left');
+  expect(drawer).not.toHaveClass('drawer_border-full');
 });
 
 test('renders the correct size class for a large drawer', async () => {

data/app/pb_kits/playbook/pb_drawer/hooks/useBreakpoint.tsx

@@ -0,0 +1,60 @@
+import { useState, useEffect } from 'react'
+
+export const breakpointValues = {
+  none: 0,
+  xs: 575,
+  sm: 768,
+  md: 992,
+  lg: 1200,
+  xl: 1400,
+} as const
+
+type BreakpointSize = keyof typeof breakpointValues
+
+interface UseBreakpointProps {
+  breakpoint?: BreakpointSize
+  triggerId?: string
+}
+
+export const useBreakpoint = ({ 
+  breakpoint = 'none',
+  triggerId 
+}: UseBreakpointProps) => {
+  const [isOpenBreakpointOpen, setIsOpenBreakpointOpen] = useState(false)
+  const [isUserClosed, setIsUserClosed] = useState(false)
+
+  useEffect(() => {
+    if (breakpoint === 'none') return
+
+    const handleResize = () => {
+      const width = window.innerWidth
+      
+        const openBreakpointWidth = breakpointValues[breakpoint]
+        if (width >= openBreakpointWidth) {
+          setIsOpenBreakpointOpen(true)
+        } else {
+          setIsOpenBreakpointOpen(false)
+          setIsUserClosed(false)
+        }
+
+      // Handle menu button visibility
+      if (triggerId) {
+        const menuButton = document.getElementById(triggerId)
+        if (menuButton) {
+          menuButton.style.display = isOpenBreakpointOpen ? 'none' : ''
+        }
+      }
+    }
+
+    window.addEventListener('resize', handleResize)
+    handleResize()
+
+    return () => window.removeEventListener('resize', handleResize)
+  }, [breakpoint, triggerId, isOpenBreakpointOpen])
+
+  return {
+    isOpenBreakpointOpen,
+    isUserClosed,
+    setIsUserClosed
+  }
+} 

data/app/pb_kits/playbook/pb_drawer/hooks/useDrawerAnimation.tsx

@@ -0,0 +1,21 @@
+import { useState, useEffect } from 'react'
+
+export const useDrawerAnimation = (isOpen: boolean) => {
+  const [animationState, setAnimationState] = useState('')
+
+  useEffect(() => {
+    if (isOpen) {
+      setAnimationState('afterOpen')
+    } else if (!isOpen && animationState === 'afterOpen') {
+      setAnimationState('beforeClose')
+      setTimeout(() => {
+        setAnimationState('')
+      }, 200)
+    }
+  }, [isOpen])
+
+  return {
+    animationState,
+    isVisible: isOpen || animationState === 'beforeClose'
+  }
+} 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md

@@ -1 +1 @@
-For the `subtle` variant, it is recommended that you set the `Separators` prop to `false` to remove the separator lines between the options for a more cleaner look.
+For the `subtle` variant, it is recommended that you set the `Separators` prop to `false` to remove the separator lines between the options for a cleaner look.

data/app/pb_kits/playbook/pb_icon_button/_icon_button.scss

@@ -0,0 +1,78 @@
+$icon_colors: (
+  default: $text_lt_default,
+  link:   $primary_action
+);
+
+@mixin icon_button_variant($variant) {
+  .icon_button_icon {
+    color: map-get($icon_colors, $variant);
+  }
+}
+
+.pb_icon_button_kit_default,
+.pb_icon_button_kit_link {
+  width: fit-content;
+  height: fit-content;
+
+  &:hover {
+    [class*="pb_button_kit"] {
+      background-color: $bg_light;
+    }
+    .icon_button_icon {
+      color: $primary_action;
+    }
+  }
+
+  &:active {
+    [class*="pb_button_kit"] {
+      background-color: $bg_light;
+    }
+    .icon_button_icon {
+      color: $primary_action;
+    }
+  }
+
+  &:hover:active {
+    [class*="pb_button_kit"] {
+      background-color: $bg_light;
+    }
+    .icon_button_icon {
+      color: $text_lt_default;
+    }
+  }
+
+  &:focus {
+    outline: 2px solid $primary_action;
+    border-radius: 8px;
+  }
+
+  [class*="pb_button_kit"] {
+    min-height: 0;
+    background: none;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    flex-grow: 0;
+    width: fit-content;
+    height: fit-content;
+    line-height: normal;
+    flex-basis: auto;
+    min-width: 0;
+    padding: 0;
+
+    .icon_button_icon {
+      display: block;
+      vertical-align: middle;
+    }
+  }
+}
+
+.pb_icon_button_kit_default {
+  @include icon_button_variant(default);
+}
+
+.pb_icon_button_kit_link {
+  @include icon_button_variant(link);
+}

data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("icon_button") %>
+</br>
+<%= pb_rails("icon_button", props: {variant: "link"}) %>

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

@@ -0,0 +1,7 @@
+examples:
+  
+  rails:
+  - icon_button_default: Default
+  
+  
+  

data/app/pb_kits/playbook/pb_icon_button/icon_button.html.erb

@@ -0,0 +1,16 @@
+<%= pb_content_tag do %>
+  <%= pb_rails("button", props: { type: object.type,
+                                  link: object.link,
+                                  new_window:object.new_window,
+                                  target: object.target,
+                                  dark: object.dark,
+                                  border_radius: "lg" }) do %>
+  <%= pb_rails("icon", props: { icon: object.icon,
+                                fixed_width: true,
+                                dark: object.dark,
+                                size: "2x",
+                                color: "text_lt_default",
+                                classname: "icon_button_icon",
+                                padding_x: "xxs", padding_y: "xs" }) %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_icon_button/icon_button.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbIconButton
+    class IconButton < ::Playbook::KitBase
+      prop :type, type: Playbook::Props::Enum,
+                  values: %w[button submit reset],
+                  default: "button"
+      prop :icon, required: false, default: "bars"
+      prop :link
+      prop :new_window, type: Playbook::Props::Boolean,
+                        default: false
+      prop :target
+      prop :variant, type: Playbook::Props::Enum,
+                     values: %w[default link],
+                     default: "default"
+      def classname
+        generate_classname("pb_icon_button_kit", variant)
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx

@@ -12,6 +12,7 @@ type LoadingInlineProps = {
   aria?: { [key: string]: string },
   className?: string,
   data?: { [key: string]: string },
+  dark?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   text?: string,
@@ -23,6 +24,7 @@ const LoadingInline = (props: LoadingInlineProps) => {
     aria = {},
     className,
     data = {},
+    dark = false,
     htmlOptions = {},
     id,
     text = ' Loading',
@@ -45,7 +47,10 @@ const LoadingInline = (props: LoadingInlineProps) => {
         className={classes}
         id={id}
     >
-      <Body color="light">
+      <Body
+          color="light"
+          dark={dark}
+      >
         <Icon
             aria={{ label: 'loading icon' }}
             fixedWidth

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss

@@ -24,6 +24,10 @@ $pb_multiple_users_size_xxs: map-get($avatar-sizes, "xxs");
     color: $primary;
     font-weight: $bold;
     font-size: $font_smallest - 1;
+
+    &.dark {
+      border: $pb_multiple_users_border_size solid $bg_dark;
+    }
   }
 
   .multiple_users_badge_xxs {

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.tsx

@@ -50,6 +50,7 @@ const MultipleUsers = (props: MultipleUsersProps): React.ReactElement => {
 
   const itemClasses = classnames(
     'pb_multiple_users_item',
+    dark && 'dark',
     buildCss('multiple_users_badge', avatarSizeClass)
   )
 

data/app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb

@@ -4,7 +4,7 @@
     <% end %>
 
     <% if object.more_than_four %>
-      <div class="pb_multiple_users_item multiple_users_badge_<%= object.size %>">
+      <div class="pb_multiple_users_item multiple_users_badge_<%= object.size %><%= object.dark ? " dark" : "" %>">
         <%= "+#{object.users.count - object.display_count}" %>
       </div>
     <% end %>