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

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

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

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

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

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

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

@@ -1,99 +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 DrawerSizes = () => {
-  // Individual state variables for each drawer size
-  const [openedXsDrawer, setOpenedXsDrawer] = useState(false);
-  const [openedSmDrawer, setOpenedSmDrawer] = useState(false);
-  const [openedMdDrawer, setOpenedMdDrawer] = useState(false);
-  const [openedLgDrawer, setOpenedLgDrawer] = useState(false);
-  const [openedXlDrawer, setOpenedXlDrawer] = useState(false);
-
-  // Toggle functions for each drawer
-  const toggleXsDrawer = () => setOpenedXsDrawer(!openedXsDrawer);
-  const toggleSmDrawer = () => setOpenedSmDrawer(!openedSmDrawer);
-  const toggleMdDrawer = () => setOpenedMdDrawer(!openedMdDrawer);
-  const toggleLgDrawer = () => setOpenedLgDrawer(!openedLgDrawer);
-  const toggleXlDrawer = () => setOpenedXlDrawer(!openedXlDrawer);
-
-  return (
-    <>
-      <Flex wrap>
-        <Button 
-            marginRight="md"
-            onClick={toggleXsDrawer}
-        >
-          XS Drawer
-        </Button>
-        <Button marginRight="md"
-            onClick={toggleSmDrawer}
-        >
-          SM Drawer
-        </Button>
-        <Button marginRight="md"
-            onClick={toggleMdDrawer}
-        >
-          MD Drawer
-        </Button>
-        <Button marginRight="md"
-            onClick={toggleLgDrawer}
-        >
-          LG Drawer
-        </Button>
-        <Button marginRight="md"
-            onClick={toggleXlDrawer}
-        >
-          XL Drawer
-        </Button>
-      </Flex>
-
-      {/* Drawers for each size */}
-      <Drawer
-          onClose={toggleXsDrawer}
-          opened={openedXsDrawer}
-          placement="right"
-          size="xs"
-      >
-        XS 
-      </Drawer>
-
-      <Drawer
-          onClose={toggleSmDrawer}
-          opened={openedSmDrawer}
-          size="sm"
-      >
-        This is an SM Drawer
-      </Drawer>
-
-      <Drawer
-          onClose={toggleMdDrawer}
-          opened={openedMdDrawer}
-          placement="right"
-      >
-        This is an MD Drawer
-      </Drawer>
-
-      <Drawer
-          onClose={toggleLgDrawer}
-          opened={openedLgDrawer}
-          size="lg"
-      >
-        This is an LG Drawer
-      </Drawer>
-
-      <Drawer
-          onClose={toggleXlDrawer}
-          opened={openedXlDrawer}
-          placement="right"
-          size="xl"
-      >
-        This is an XL Drawer
-      </Drawer>
-    </>
-  );
-};
-
-export default DrawerSizes;

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

@@ -1,20 +0,0 @@
-examples:
-  
-  rails:
-  - drawer_default: Default
-  - drawer_behavior: Push Behavior
-  - drawer_menu: Within Element
-  - drawer_sizes: Sizes
-  - drawer_overlay: Overlay
-  - drawer_breakpoints: Breakpoints
-  - drawer_borders: Borders 
-  
-  
-  react:
-  - drawer_default: Default
-  - drawer_behavior: Push Behavior
-  - drawer_menu: Within Element
-  - drawer_sizes: Sizes
-  - drawer_overlay: Overlay
-  - drawer_breakpoints: Breakpoints
-  - drawer_borders: Borders 

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

@@ -1,7 +0,0 @@
-export { default as DrawerDefault } from './_drawer_default.jsx'
-export { default as DrawerSizes } from './_drawer_sizes.jsx'
-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.html.erb

@@ -1,20 +0,0 @@
-<% if within_element %>
-    <%= pb_content_tag(:div, data: {breakpoint: object.breakpoint} ) do %>
-        <%= content %>
-    <% end %>
-<% else %>
-    <div class="pb_drawer_wrapper"
-        id="drawer-wrapper-<%= object.id %>"
-        style="display:none;"
-        data-behavior="<%= object.behavior %>"
-        data-size="<%= object.size %>"
-        data-placement="<%= object.placement %>"
-        data-breakpoint="<%= object.breakpoint %>"
-        >
-        <div class="<%= overlay_classes %>" style="display:none;" id="drawer-overlay-<%= object.id %>"> 
-            <%= pb_content_tag do %>
-                <%= content %>
-            <% end %>
-        </div>
-    </div>
-<% end %>

data/app/pb_kits/playbook/pb_drawer/drawer.rb

@@ -1,56 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbDrawer
-    class Drawer < Playbook::KitBase
-      prop :size, type: Playbook::Props::Enum,
-                  values: %w[xs sm md lg xl full],
-                  default: "md"
-      prop :placement, type: Playbook::Props::Enum,
-                       values: %w[left right bottom],
-                       default: "left"
-      prop :behavior, type: Playbook::Props::Enum,
-                      values: %w[floating push],
-                      default: "floating"
-      prop :overlay, type: Playbook::Props::Boolean,
-                     default: true
-      prop :within_element, type: Playbook::Props::Boolean,
-                            default: false
-      prop :border, type: Playbook::Props::Enum,
-                    values: %w[full none right left],
-                    default: "none"
-      prop :breakpoint, type: Playbook::Props::Enum,
-                        values: %w[none xs sm md lg xl],
-                        default: "none"
-
-      def classname
-        generate_classname("pb_drawer pb_drawer_#{size}_#{placement} #{within_class} #{border_classes}")
-      end
-
-      def border_classes
-        case border
-        when "full"
-          "drawer_border-full"
-        when "right"
-          "drawer_border-right"
-        when "left"
-          "drawer_border-left"
-        else
-          ""
-        end
-      end
-
-      def overlay_close
-        !should_close_on_overlay_click ? "overlay_close" : ""
-      end
-
-      def within_class
-        within_element ? "pb_drawer_within_element_rails" : ""
-      end
-
-      def overlay_classes
-        "pb_drawer_#{overlay ? '' : 'no_'}overlay drawer_content_#{placement} pb_drawer_overlay_after_open #{overlay ? '' : 'no-background'}"
-      end
-    end
-  end
-end

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

@@ -1,81 +0,0 @@
-import React, { useState } from 'react';
-import { render, fireEvent, screen } from '../utilities/test-utils';
-import { Drawer, Button } from 'playbook-ui';
-import { waitFor } from '@testing-library/react';
-
-const size = 'sm';
-
-function DrawerTest({ props }) {
-  const [isOpen, setIsOpen] = useState(false);
-  const close = () => setIsOpen(false);
-  const open = () => setIsOpen(true);
-
-  return (
-    <>
-    <Button onClick={open}>{'Open Drawer'}</Button>
-      <Drawer
-          className="wrapper"
-          id="drawer-id"
-          onClose={close}
-          opened={isOpen}
-          placement="left"
-          portalClassName="portal"
-          size={size}
-          {...props}
-      >
-        {props && props.children}
-      </Drawer>
-    </>
-  );
-}
-
-test('renders with the right border class when border prop is right', async () => {
-  render(<DrawerTest props={{ border: 'right' }} />);
-
-  fireEvent.click(screen.getByText('Open Drawer'));
-
-  await waitFor(() => expect(document.getElementById('drawer-id')).toBeInTheDocument());
-
-  const container = document.getElementById('drawer-id');
-  const drawer = container.querySelector('#drawer-id .pb_drawer');
-
-  expect(drawer).toHaveClass('drawer_border-right');
-});
-
-test('renders with the full border class when border prop is full', async () => {
-  render(<DrawerTest props={{ border: 'full' }} />);
-
-  fireEvent.click(screen.getByText('Open Drawer'));
-
-  await waitFor(() => expect(document.getElementById('drawer-id')).toBeInTheDocument());
-
-  const container = document.getElementById('drawer-id');
-  const drawer = container.querySelector('#drawer-id .pb_drawer');
-  expect(drawer).toHaveClass('drawer_border-full');
-});
-
-test('does not have a border class when border prop is none', async () => {
-  render(<DrawerTest props={{ border: 'none' }} />);
-
-  fireEvent.click(screen.getByText('Open Drawer'));
-
-  await waitFor(() => expect(document.getElementById('drawer-id')).toBeInTheDocument());
-
-  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');
-});
-
-test('renders the correct size class for a large drawer', async () => {
-  render(<DrawerTest props={{ size: 'lg' }} />);
-
-  fireEvent.click(screen.getByText('Open Drawer'));
-
-  await waitFor(() => expect(document.getElementById('drawer-id')).toBeInTheDocument());
-
-  const container = document.getElementById('drawer-id');
-  const drawer = container.querySelector('#drawer-id .pb_drawer');
-  expect(drawer).toHaveClass('pb_drawer pb_drawer_lg_left');
-});

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

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

@@ -1,21 +0,0 @@
-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'
-  }
-}