playbook_ui 14.12.0.pre.alpha.testingwithfas5689 → 14.12.0.pre.rc.0

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

@@ -1,56 +1,31 @@
-import React, { useState, useEffect } from "react"
-import { Button, Drawer, Icon, Nav, NavItem } from "playbook-ui"
+import React from "react";
+import { Button, Drawer, Icon, Title } 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 (
-    <div>
-      <Button id='menuButton'
-          padding='xs'
+    <>
+      <Button id="menuButton"
+          padding="sm"
       >
-        <Icon icon='bars'
-            size='2x'
+        <Icon icon="bars"
+            size="3x"
         />
       </Button>
       <Drawer
-          breakpoint="md"
-          placement='bottom'
-          size='full'
-          triggerId='menuButton'
+          behavior="push"
+          closeBreakpoint="md"
+          menuButtonID="menuButton"
+          overlay={false}
+          placement="left"
+          size="lg"
           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>
+        <Title paddingBottom="md">A really neat menu</Title>
+        <Button text="This Button does nothing" />
       </Drawer>
-    </div>
-  )
-}
+    </>
+  );
+};
 
-export default DrawerMenu
+export default DrawerMenu;

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

@@ -1,24 +1,6 @@
-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
-
+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.
 
+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,25 +1,24 @@
-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
@@ -28,23 +27,29 @@ const DrawerSizes = () => {
 
       {/* Drawers for each size */}
       <Drawer
+          behavior="push"
+          fullHeight
           onClose={toggleNoOverlayDrawer}
           opened={openedNoOverlayDrawer}
           overlay={false}
-          size='lg'
+          placement="right"
+          size="lg"
       >
         This is a Drawer with no overlay
       </Drawer>
       <Drawer
+          behavior="push"
+          fullHeight
           onClose={toggleOverlayDrawer}
           opened={openedOverlayDrawer}
-          placement='right'
-          size='lg'
+          overlay
+          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,8 +19,7 @@ const DrawerSizes = () => {
   return (
     <>
       <Flex wrap>
-        <Button 
-            marginRight="md"
+        <Button marginRight="md"
             onClick={toggleXsDrawer}
         >
           XS Drawer
@@ -49,8 +48,11 @@ const DrawerSizes = () => {
 
       {/* Drawers for each size */}
       <Drawer
+          behavior="push"
+          fullHeight
           onClose={toggleXsDrawer}
           opened={openedXsDrawer}
+          overlay
           placement="right"
           size="xs"
       >
@@ -58,32 +60,47 @@ 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,8 +6,7 @@ examples:
   
   react:
   - drawer_default: Default
-  - drawer_behavior: Push Behavior
-  - drawer_menu: Within Element
+  - drawer_menu: Menu Behavior 
   - drawer_sizes: Sizes
   - drawer_overlay: Overlay
   - drawer_borders: Borders 

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

@@ -4,4 +4,3 @@ 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_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 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 more cleaner look.

data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb

@@ -1,14 +1,19 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
     <% if object.label.present? %>
         <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
     <% end %>
     <div class="dropdown_wrapper<%= error_class %>" style="position: relative">
-        <input
-            data-default-value="<%= input_default_value %>"
-            id="dropdown-selected-option"
-            name="<%= object.name %>"
-            style="display: none"
-            <%= object.required ? "required" : ""%>
+        <input 
+            data-default-value="<%= input_default_value %>" 
+            id="dropdown-selected-option" 
+            name="<%= object.name %>" 
+            style="display: none" 
+            <%= object.required ? "required" : ""%> 
         />
         <% if content.present? %>
             <%= content.presence %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb

@@ -1,15 +1,20 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
     <%= pb_rails("list", props: {ordered: false, borderless: false}) do %>
-            <% if content.present? %>
+            <% if content.present? %> 
                 <%= content.presence %>
-            <% else %>
+            <% else %> 
                 <%= pb_rails("list/item", props: {
-                    display: "flex",
-                    justify_content: "center",
-                    padding:"xs",
-                    }) do %>
+                    display: "flex", 
+                    justify_content: "center", 
+                    padding:"xs", 
+                    }) do %> 
                         <%= pb_rails("body", props: {text: "No option"}) %>
                 <% end %>
             <% end %>
-    <% end %>
-<% end %>
+    <% end %>        
+<% end %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb

@@ -1,10 +1,15 @@
-<%= pb_content_tag(:div, id: object.option[:id]) do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.option[:id],
+    **combined_html_options) do %>
     <%= pb_rails("list/item", props: {
-        display: "flex",
-        justify_content: "center",
-        padding:"none",
+        display: "flex", 
+        justify_content: "center", 
+        padding:"none", 
         cursor: "pointer"
-        }) do %>
+        }) do %> 
             <div class="dropdown_option_wrapper">
                 <% if content.present? %>
                     <%= content.presence %>
@@ -13,4 +18,4 @@
                 <% end %>
             </div>
     <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb

@@ -1,16 +1,21 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
     <% if content.present? %>
         <div style="display: inline-block" tabindex="0" data-dropdown-custom-trigger>
           <%= content.presence %>
         </div>
     <% else %>
     <%= pb_rails("flex", props: {
-        align: "center",
-        border_radius:"lg",
-        classname: object.trigger_wrapper_classes,
-        cursor: "pointer",
-        justify: "between",
-        padding_x:"sm",
+        align: "center", 
+        border_radius:"lg", 
+        classname: object.trigger_wrapper_classes, 
+        cursor: "pointer", 
+        justify: "between", 
+        padding_x:"sm", 
         padding_y:"xs",
         html_options: {tabindex:"0"}
         }) do %>
@@ -18,7 +23,7 @@
             <%= pb_rails("flex", props: {align: "center"}) do %>
                 <% if object.custom_display.present?  %>
                     <%= pb_rails("flex", props: {align: "center"}) do %>
-                        <div id="dropdown_trigger_custom_display" style="display: none;">
+                        <div id="dropdown_trigger_custom_display" style="display: none;"> 
                             <%= object.custom_display %>
                         </div>
                         <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
@@ -35,3 +40,4 @@
     <% end %>
     <% end %>
 <% end %>
+      

data/app/pb_kits/playbook/pb_icon/_icon.tsx

@@ -137,7 +137,7 @@ const Icon = (props: IconProps) => {
     pulse = false,
     rotation,
     size,
-    fontStyle = 'fas',
+    fontStyle = 'far',
     spin = false,
     tabIndex,
   } = props

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -33,7 +33,7 @@ module Playbook
                   default: nil
       prop :font_style, type: Playbook::Props::Enum,
                         values: %w[far fas fab fak],
-                        default: "fas"
+                        default: "far"
       prop :spin, type: Playbook::Props::Boolean,
                   default: false
       prop :color, type: Playbook::Props::String
@@ -207,7 +207,7 @@ module Playbook
       end
 
       def font_style_class
-        font_style ? font_style.to_s : "fas"
+        font_style ? font_style.to_s : "far"
       end
 
       def spin_class

data/app/pb_kits/playbook/pb_icon/icon.test.js

@@ -16,7 +16,7 @@ describe("Icon Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("fa-user pb_icon_kit fa-fw fas")
+        expect(kit).toHaveClass("fa-user pb_icon_kit fa-fw far")
     })
 
     test("renders rotate prop", () => {[
@@ -31,7 +31,7 @@ describe("Icon Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass(`fa-user pb_icon_kit fa-fw fa-rotate-${rotateProp} fas`)
+        expect(kit).toHaveClass(`fa-user pb_icon_kit fa-fw fa-rotate-${rotateProp} far`)
 
         cleanup()
     })
@@ -48,7 +48,7 @@ describe("Icon Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("fa-user pb_icon_kit fa-fw fa-flip-horizontal fas")
+        expect(kit).toHaveClass("fa-user pb_icon_kit fa-fw fa-flip-horizontal far")
     })
 
 
@@ -63,7 +63,7 @@ describe("Icon Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("fa-spinner pb_icon_kit fa-fw fa-spin fas")
+        expect(kit).toHaveClass("fa-spinner pb_icon_kit fa-fw fa-spin far")
     })
 
     test("renders pull icon", () => {
@@ -77,7 +77,7 @@ describe("Icon Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("fa-arrow-left pb_icon_kit fa-fw fa-pull-left fas")
+        expect(kit).toHaveClass("fa-arrow-left pb_icon_kit fa-fw fa-pull-left far")
     })
 
     test("renders pull icon", () => {
@@ -91,7 +91,7 @@ describe("Icon Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("fa-arrow-left pb_icon_kit fa-fw fa-pull-left fas")
+        expect(kit).toHaveClass("fa-arrow-left pb_icon_kit fa-fw fa-pull-left far")
     })
 
     test("renders border around icon", () => {
@@ -105,7 +105,7 @@ describe("Icon Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("fa-user pb_icon_kit fa-border fa-fw fas")
+        expect(kit).toHaveClass("fa-user pb_icon_kit fa-border fa-fw far")
     })
 
     test("renders size prop", () => {
@@ -132,7 +132,7 @@ describe("Icon Kit", () => {
             )
     
             const kit = screen.getByTestId(testId)
-            expect(kit).toHaveClass(`pb_icon_kit fa-user fa-fw fa-${sizeProp} fas`)
+            expect(kit).toHaveClass(`pb_icon_kit fa-user fa-fw fa-${sizeProp} far`)
 
             cleanup()
         }) 

data/app/pb_kits/playbook/pb_list/item.html.erb

@@ -1,32 +1,10 @@
-<% if object.draggable? %>
-  <%= pb_rails("draggable/draggable_item", props:{drag_id: object.drag_id}) do %>
-    <%= content_tag(:li,
-                    aria: object.aria,
-                    class: object.classname,
-                    data: object.data,
-                    id: object.id,
-                    tabindex: object.tabindex,
-                    **combined_html_options
-      ) do %>
-      <% if object.drag_handle %>
-        <span style="vertical-align: middle;">
-          <%= pb_rails("body") do %>
-            <svg width="auto" height="auto" viewBox="0 0 31 25" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="pb_custom_icon svg-inline--fa vertical_align_middle  svg_fw"><path d="M12.904 6.355a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm0 7.5a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm1.5 6c0 .844-.703 1.5-1.5 1.5a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5zm4.5-13.5a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm1.5 6c0 .844-.703 1.5-1.5 1.5a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5zm-1.5 9a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5z" fill="#242B42"></path></svg>
-          <% end %>
-        </span>
-      <% end %>
-      <%= content.presence %>
-    <% end %>
-  <% end %>
-<% else %>
-  <%= content_tag(:li,
-                  aria: object.aria,
-                  class: object.classname,
-                  data: object.data,
-                  id: object.id,
-                  tabindex: object.tabindex,
-                  **combined_html_options
-    ) do %>
+<%= content_tag(:li,
+                aria: object.aria,
+                class: object.classname,
+                data: object.data,
+                id: object.id,
+                tabindex: object.tabindex,
+                **combined_html_options
+  ) do %>
     <%= content.presence %>
-  <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_list/item.rb

@@ -3,18 +3,11 @@
 module Playbook
   module PbList
     class Item < Playbook::KitBase
-      prop :drag_handle, type: Playbook::Props::Boolean,
-                         default: true
-      prop :drag_id, type: Playbook::Props::String
       prop :tabindex
 
       def classname
         generate_classname("pb_item_kit")
       end
-
-      def draggable?
-        drag_id.present?
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_list/list.html.erb

@@ -1,33 +1,13 @@
-<% if object.enable_drag %>
-  <%= pb_rails("draggable", props: {initial_items: object.items}) do %>
-    <%= pb_rails("draggable/draggable_container") do %>
-      <%= content_tag(:div, class: object.list_classname) do %>
-        <%= content_tag(:"#{object.ordered_class}",
-                        aria: object.aria,
-                        class: object.classname,
-                        data: object.data,
-                        id: object.id,
-                        role: object.role,
-                        tabindex: object.tabindex,
-                        **combined_html_options
-          ) do %>
-            <%= content.presence %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% else %>
-  <%= content_tag(:div, class: object.list_classname) do %>
-    <%= content_tag(:"#{object.ordered_class}",
-                    aria: object.aria,
-                    class: object.classname,
-                    data: object.data,
-                    id: object.id,
-                    role: object.role,
-                    tabindex: object.tabindex,
-                    **combined_html_options
-      ) do %>
-        <%= content.presence %>
-    <% end %>
+<%= content_tag(:div, class: object.list_classname) do %>
+  <%= content_tag(:"#{object.ordered_class}",
+                  aria: object.aria,
+                  class: object.classname,
+                  data: object.data,
+                  id: object.id,
+                  role: object.role,
+                  tabindex: object.tabindex,
+                  **combined_html_options
+    ) do %>
+      <%= content.presence %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_list/list.rb

@@ -7,10 +7,6 @@ module Playbook
                         default: false
       prop :dark, type: Playbook::Props::Boolean,
                   default: false
-      prop :enable_drag, type: Playbook::Props::Boolean,
-                         default: false
-      prop :items, type: Playbook::Props::Array,
-                   default: []
       prop :layout, type: Playbook::Props::Enum,
                     values: ["left", "right", ""],
                     default: ""