playbook_ui 14.25.0.pre.alpha.testingcss10239 → 14.25.0.pre.rc.0

data/app/pb_kits/playbook/pb_pagination/_pagination.test.jsx

@@ -1,212 +0,0 @@
-import React from 'react'
-import { ensureAccessible, renderKit, render, fireEvent, screen } from '../utilities/test-utils'
-import Pagination from './_pagination'
-
-const defaultProps = {
-  data: { testid: 'pagination-test' },
-  total: 10,
-  current: 1,
-  range: 5,
-}
-
-describe('Pagination Component', () => {
-  test('returns namespaced class name', () => {
-    const kit = renderKit(Pagination, defaultProps)
-    expect(kit).toBeInTheDocument()
-    expect(kit).toHaveClass('pb_paginate')
-  })
-
-  it("should be accessible", async () => {
-    ensureAccessible(Pagination, defaultProps)
-  })
-
-  test('renders with default props', () => {
-    render(<Pagination {...defaultProps} />)
-    
-    const pagination = screen.getByTestId('pagination-test')
-    expect(pagination).toBeInTheDocument()
-    expect(pagination).toHaveClass('pb_paginate')
-  })
-
-  test('renders pagination buttons correctly', () => {
-    render(<Pagination {...defaultProps} />)
-    
-    expect(screen.getByText('1')).toBeInTheDocument()
-    expect(screen.getByText('2')).toBeInTheDocument()
-    expect(screen.getByText('3')).toBeInTheDocument()
-    expect(screen.getByText('4')).toBeInTheDocument()
-    expect(screen.getByText('5')).toBeInTheDocument()
-    
-    // Check for navigation arrows by looking for the li elements with specific classes
-    const leftArrow = document.querySelector('.pagination-left')
-    const rightArrow = document.querySelector('.pagination-right')
-    expect(leftArrow).toBeInTheDocument()
-    expect(rightArrow).toBeInTheDocument()
-  })
-
-  test('highlights current page as active', () => {
-    render(<Pagination {...defaultProps}
-        current={3} 
-           />)
-    
-    const activePage = screen.getByText('3')
-    expect(activePage).toHaveClass('active')
-  })
-
-  test('calls onChange when page is clicked', () => {
-    const mockOnChange = jest.fn()
-    render(<Pagination {...defaultProps} 
-        onChange={mockOnChange}
-           />)
-    
-    const pageButton = screen.getByText('3')
-    fireEvent.click(pageButton)
-    
-    expect(mockOnChange).toHaveBeenCalledWith(3)
-  })
-
-  test('disables left arrow on first page', () => {
-    render(<Pagination {...defaultProps}
-        current={1}
-           />)
-    
-    const leftArrow = document.querySelector('.pagination-left')
-    expect(leftArrow).toHaveClass('disabled')
-  })
-
-  test('disables right arrow on last page', () => {
-    render(<Pagination {...defaultProps}
-        current={10}
-           />)
-    
-    const rightArrow = document.querySelector('.pagination-right')
-    expect(rightArrow).toHaveClass('disabled')
-  })
-
-  test('does not render when total is 1 or less', () => {
-    const { container } = render(<Pagination {...defaultProps} 
-        total={1}
-                                 />)
-    
-    expect(container.firstChild).toBeNull()
-  })
-
-  test('renders with custom className', () => {
-    render(<Pagination {...defaultProps}
-        className="custom-class" 
-           />)
-    
-    const pagination = screen.getByTestId('pagination-test')
-    expect(pagination).toHaveClass('custom-class')
-  })
-
-  test('renders with custom id', () => {
-    render(<Pagination {...defaultProps}
-        id="custom-id" 
-           />)
-    
-    const pagination = screen.getByTestId('pagination-test')
-    expect(pagination).toHaveAttribute('id', 'custom-id')
-  })
-
-  test('renders with custom range', () => {
-    render(<Pagination {...defaultProps}
-        range={3} 
-           />)
-    
-    expect(screen.getByText('1')).toBeInTheDocument()
-    expect(screen.getByText('2')).toBeInTheDocument()
-    expect(screen.getByText('3')).toBeInTheDocument()
-    expect(screen.getByText('9')).toBeInTheDocument()
-    expect(screen.getByText('10')).toBeInTheDocument()
-  })
-
-  test('handles large number of pages correctly', () => {
-    render(<Pagination {...defaultProps}
-        current={50}
-        range={5}
-        total={100}
-           />)
-
-    const pagination = screen.getByTestId('pagination-test')
-    expect(pagination).toBeInTheDocument()
-    expect(pagination).toHaveClass('pb_paginate')
-
-    
-    expect(screen.getByText('48')).toBeInTheDocument()
-    expect(screen.getByText('49')).toBeInTheDocument()
-    expect(screen.getByText('50')).toBeInTheDocument()
-    expect(screen.getByText('51')).toBeInTheDocument()
-    expect(screen.getByText('52')).toBeInTheDocument()
-  })
-
-  test('syncs with external current prop changes', () => {
-    const { rerender } = render(<Pagination {...defaultProps} 
-        current={1}
-                                />)
-    
-    expect(screen.getByText('1')).toHaveClass('active')
-    
-    rerender(<Pagination {...defaultProps} 
-        current={3} 
-             />)
-    
-    expect(screen.getByText('3')).toHaveClass('active')
-    expect(screen.getByText('1')).not.toHaveClass('active')
-  })
-
-  test('validates current prop is within valid range', () => {
-    const { rerender } = render(<Pagination {...defaultProps} 
-        current={1} 
-                                />)
-    
-    rerender(<Pagination {...defaultProps} 
-        current={0} 
-            />)
-    
-    expect(screen.getByText('1')).toHaveClass('active')
-    
-    rerender(<Pagination {...defaultProps} 
-        current={15}
-             />)
-    
-    expect(screen.getByText('1')).toHaveClass('active')
-  })
-
-  test('handles htmlOptions props', () => {
-    const htmlOptions = { 'data-test': 'test-value' }
-    render(<Pagination {...defaultProps}
-        htmlOptions={htmlOptions}
-           />)
-    
-    const pagination = screen.getByTestId('pagination-test')
-    expect(pagination).toHaveAttribute('data-test', 'test-value')
-  })
-
-  test('renders first and last page buttons when range is small', () => {
-    render(<Pagination {...defaultProps}
-        current={10}
-        range={3}
-        total={20}
-           />)
-    
-    expect(screen.getByText('1')).toBeInTheDocument()
-    expect(screen.getByText('20')).toBeInTheDocument()
-    
-    expect(screen.getByText('9')).toBeInTheDocument()
-    expect(screen.getByText('10')).toBeInTheDocument()
-    expect(screen.getByText('11')).toBeInTheDocument()
-  })
-
-  test('renders second and second-to-last page buttons when needed', () => {
-    render(<Pagination {...defaultProps} 
-        current={10}
-        range={3}
-        total={20}
-           />)
-    
-    expect(screen.getByText('2')).toBeInTheDocument()
-    
-    expect(screen.getByText('19')).toBeInTheDocument()
-  })
-}) 

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_external_control.jsx

@@ -1,112 +0,0 @@
-import React, { useState } from "react";
-import Flex from '../../pb_flex/_flex'
-import Pagination from '../../pb_pagination/_pagination'
-import Select from '../../pb_select/_select'
-import Table from '../../pb_table/_table'
-
-import { data } from "./data";
-
-const PaginationExternalControl = (props) => {
-  const [totalItems, setTotalItems] = useState(20);
-  const [itemsPerPage, setItemsPerPage] = useState(5);
-  const [currentPage, setCurrentPage] = useState(1);
-
-  const totalPages = Math.ceil(totalItems / itemsPerPage);
-
-  const handlePageChange = (page) => {
-    setCurrentPage(page);
-  };
-
-  const limitedData = data.slice(0, totalItems);
-  const startIndex = (currentPage - 1) * itemsPerPage;
-  const paginatedItems = limitedData.slice(startIndex, startIndex + itemsPerPage);
-
-  const handleTotalItemsChange = (event) => {
-    const value = Number(event.target.value);
-    setTotalItems(value);
-    setCurrentPage(1);
-  };
-
-  const handleItemsPerPageChange = (event) => {
-    const value = Number(event.target.value);
-    setItemsPerPage(value);
-    setCurrentPage(1);
-  };
-
-  return (
-    <>
-        <Flex gap="sm">
-            <Select
-                label="Total Items"
-                onChange={handleTotalItemsChange}
-                options={[
-                    { value: "5", text: "5" },
-                    { value: "10", text: "10" },
-                    { value: "20", text: "20" }
-                ]}
-                size="sm"
-                value={String(totalItems)}
-                {...props}
-            />
-
-            <Select
-                label="Items per Page"
-                onChange={handleItemsPerPageChange}
-                options={[
-                    { value: "3", text: "3" },
-                    { value: "5", text: "5" },
-                    { value: "10", text: "10" }
-                ]}
-                size="sm"
-                value={String(itemsPerPage)}
-                {...props}
-            />
-        </Flex>
-
-        <Pagination
-            current={currentPage}
-            key={`pagination-top-${currentPage}`}
-            marginBottom="xs"
-            onChange={handlePageChange}
-            range={5}
-            total={totalPages}
-            {...props}
-        />
-        <Table 
-            marginBottom="xs"
-            responsive="none" 
-            size="sm" 
-            {...props}
-        >
-            <Table.Head>
-            <Table.Row>
-                <Table.Header>{"Column 1"}</Table.Header>
-                <Table.Header>{"Column 2"}</Table.Header>
-                <Table.Header>{"Column 3"}</Table.Header>
-                <Table.Header>{"Column 4"}</Table.Header>
-                <Table.Header>{"Column 5"}</Table.Header>
-            </Table.Row>
-            </Table.Head>
-            <Table.Body>
-            {paginatedItems.map((row, index) => (
-                <Table.Row key={index}>
-                {row.map((cell, cellIndex) => (
-                    <Table.Cell key={cellIndex}>{cell}</Table.Cell>
-                ))}
-                </Table.Row>
-            ))}
-            </Table.Body>
-        </Table>
-        <Pagination
-            current={currentPage}
-            key={`pagination-bottom-${currentPage}`}
-            onChange={handlePageChange}
-            range={5}
-            total={totalPages}
-            {...props}
-        />
-    </>
-  )
-}
-
-export default PaginationExternalControl 

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_external_control_react.md

@@ -1,3 +0,0 @@
-The Pagination component supports external control of the current page. This allows for programmatically reseting or changing the current page when filters or other criteria change, without needing to unmount and remount the component.
-
-In this example, changing the "Total Items" or "Items per Page" dropdowns will automatically reset the pagination to page 1, demonstrating how external control works. The pagination component will update its internal state to reflect the new `current` prop value.