playbook_ui 14.24.0.pre.alpha.PLAY2350ftniconspike9659 → 14.24.0.pre.alpha.PLAY2360circleiconbuttonvariantdatabug9404

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "14.24.0"
-  VERSION = "14.24.0.pre.alpha.PLAY2350ftniconspike9659"
+  VERSION = "14.24.0.pre.alpha.PLAY2360circleiconbuttonvariantdatabug9404"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 14.24.0.pre.alpha.PLAY2350ftniconspike9659
+  version: 14.24.0.pre.alpha.PLAY2360circleiconbuttonvariantdatabug9404
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-08-15 00:00:00.000000000 Z
+date: 2025-08-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -308,8 +308,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.html.erb
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx
@@ -352,10 +350,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading_react.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_no_subrows.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_no_subrows.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.jsx
@@ -816,8 +810,6 @@ files:
 - app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_click.jsx
 - app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_default.html.erb
 - app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_default.jsx
-- app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_input_options.html.erb
-- app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_input_options.md
 - app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.html.erb
 - app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.jsx
 - app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.md
@@ -988,9 +980,6 @@ files:
 - app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb
 - app/pb_kits/playbook/pb_date/docs/_date_variants.jsx
 - app/pb_kits/playbook/pb_date/docs/_date_variants_swift.md
-- app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.html.erb
-- app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.jsx
-- app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.md
 - app/pb_kits/playbook/pb_date/docs/_description.md
 - app/pb_kits/playbook/pb_date/docs/example.yml
 - app/pb_kits/playbook/pb_date/docs/index.js
@@ -1579,9 +1568,6 @@ files:
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.md
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_swift.md
-- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.html.erb
-- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.jsx
-- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.md
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.html.erb
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.jsx
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions_swift.md
@@ -2397,14 +2383,11 @@ files:
 - app/pb_kits/playbook/pb_overlay/subcomponents/_overlay_percentage.tsx
 - app/pb_kits/playbook/pb_overlay/subcomponents/_overlay_token.tsx
 - app/pb_kits/playbook/pb_pagination/_pagination.scss
-- app/pb_kits/playbook/pb_pagination/_pagination.test.jsx
 - app/pb_kits/playbook/pb_pagination/_pagination.tsx
 - app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb
 - app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx
 - app/pb_kits/playbook/pb_pagination/docs/_pagination_default_rails.md
 - app/pb_kits/playbook/pb_pagination/docs/_pagination_default_react.md
-- app/pb_kits/playbook/pb_pagination/docs/_pagination_external_control.jsx
-- app/pb_kits/playbook/pb_pagination/docs/_pagination_external_control_react.md
 - app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx
 - app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md
 - app/pb_kits/playbook/pb_pagination/docs/data.js
@@ -3647,9 +3630,9 @@ files:
 - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
 - app/pb_kits/playbook/utilities/text.ts
 - app/pb_kits/playbook/utilities/validEmojiChecker.ts
-- dist/chunks/_line_graph-qk_BN_J0.js
-- dist/chunks/_typeahead-ZLTFtAoW.js
-- dist/chunks/_weekday_stacked-CBQhTZg3.js
+- dist/chunks/_line_graph-D7DgMqnT.js
+- dist/chunks/_typeahead-BzYZCpJO.js
+- dist/chunks/_weekday_stacked-CCn-qLh_.js
 - dist/chunks/lazysizes-B7xYodB-.js
 - dist/chunks/lib-CY5ZPzic.js
 - dist/chunks/pb_form_validation-D3b0JKHH.js

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.html.erb

@@ -1,43 +0,0 @@
-<% column_definitions = [
-  {
-    accessor: "year",
-    label: "Year",
-    cellAccessors: ["quarter", "month", "day"],
-  },
-  {
-    label: "Enrollment Data",
-    columns: [
-      {
-        accessor: "newEnrollments",
-        label: "New Enrollments",
-      },
-      {
-        accessor: "scheduledMeetings",
-        label: "Scheduled Meetings",
-      },
-    ],
-  },
-  {
-    label: "Performance Data",
-    columns: [
-      {
-        accessor: "attendanceRate",
-        label: "Attendance Rate",
-      },
-      {
-        accessor: "completedClasses",
-        label: "Completed Classes",
-      },
-      {
-        accessor: "classCompletionRate",
-        label: "Class Completion Rate",
-      },
-      {
-        accessor: "graduatedStudents",
-        label: "Graduated Students",
-      },
-    ],
-  },
-] %>
-
-<%= pb_rails("advanced_table", props: { id: "table_multi_headers_vertical_borders", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true } }) %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx

@@ -1,64 +0,0 @@
-import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-import MOCK_DATA from "./advanced_table_mock_data.json"
-
-const AdvancedTableColumnHeadersVerticalBorder = (props) => {
-  const columnDefinitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      label: "Enrollment Data",
-      columns: [
-        {
-          accessor: "newEnrollments",
-          label: "New Enrollments",
-        },
-        {
-          accessor: "scheduledMeetings",
-          label: "Scheduled Meetings",
-        },
-      ],
-    },
-    {
-      label: "Performance Data",
-      columns: [
-        {
-          accessor: "attendanceRate",
-          label: "Attendance Rate",
-        },
-        {
-          accessor: "completedClasses",
-          label: "Completed Classes",
-        },
-        {
-          accessor: "classCompletionRate",
-          label: "Class Completion Rate",
-        },
-        {
-          accessor: "graduatedStudents",
-          label: "Graduated Students",
-        },
-      ],
-    },
-  ];
-  
-  const tableProps = {
-    verticalBorder: true
-  }
-
-  return (
-    <>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          tableData={MOCK_DATA}
-          tableProps={tableProps}
-          {...props}
-      />
-    </>
-  )
-}
-
-export default AdvancedTableColumnHeadersVerticalBorder

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control.jsx

@@ -1,60 +0,0 @@
-import React from "react"
-import AdvancedTable from '../_advanced_table'
-import Background from '../../pb_background/_background'
-import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
-
-const AdvancedTablePaddingControl = (props) => {
-  const columnDefinitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      columnStyling:{cellPadding: "none"},
-      customRenderer: (row, value) => (
-        <Background 
-            backgroundColor={row.original.newEnrollments > 20 ? "success_secondary" : "warning_secondary"}
-            padding="xs" 
-        >
-         {value}
-        </Background>
-      ), 
-
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-    {
-      accessor: "attendanceRate",
-      label: "Attendance Rate",
-    },
-    {
-      accessor: "completedClasses",
-      label: "Completed Classes",
-    },
-    {
-      accessor: "classCompletionRate",
-      label: "Class Completion Rate",
-    },
-    {
-      accessor: "graduatedStudents",
-      label: "Graduated Students",
-    },
-  ]
-
-  return (
-    <div>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          tableData={MOCK_DATA}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default AdvancedTablePaddingControl

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control.md

@@ -1,3 +0,0 @@
-`columnStyling` can also be used to control padding on all cells in a given column via the use of the `cellPadding` key/value pair. `cellPadding` lets you use 'xxs', 'xs', 'sm', 'md', 'lg', 'xl' and 'none'.  
-
-This control can be used in conjunction with the `customRenderer` item within each columnDefinition to achieve custom background colors for individual cells as seen here. 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row.jsx

@@ -1,57 +0,0 @@
-import React from "react"
-import AdvancedTable from '../_advanced_table'
-import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
-
-const AdvancedTablePaddingControlPerRow = (props) => {
-  const columnDefinitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-    {
-      accessor: "attendanceRate",
-      label: "Attendance Rate",
-    },
-    {
-      accessor: "completedClasses",
-      label: "Completed Classes",
-    },
-    {
-      accessor: "classCompletionRate",
-      label: "Class Completion Rate",
-    },
-    {
-      accessor: "graduatedStudents",
-      label: "Graduated Students",
-    },
-  ]
-
-const rowStyling = [
-  {
-    rowId: "1",
-    cellPadding:"md"
-  },
-];
-
-  return (
-    <div>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          rowStyling={rowStyling}
-          tableData={MOCK_DATA}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default AdvancedTablePaddingControlPerRow

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row.md

@@ -1 +0,0 @@
-`rowStyling` can also be used to control padding on all cells in a given row via the use of the `cellPadding` key/value pair as shown here. `cellPadding` lets you use 'xxs', 'xs', 'sm', 'md', 'lg', 'xl' and 'none'.

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_input_options.html.erb

@@ -1,24 +0,0 @@
-<%= pb_rails("circle_icon_button", props: {
-  icon: "plus",
-  input_options: {
-    data: { "test-id": "add-button", remote: true },
-  }
-}) %>
-<br/>
-<%= pb_rails("circle_icon_button", props: {
-  icon: "pen",
-  variant: "secondary",
-  input_options: {
-    data: { "test-id": "edit-button" },
-    classname: "custom-secondary-button-class"
-  }
-}) %>
-<br/>
-<%= pb_rails("circle_icon_button", props: {
-  icon: "user",
-  variant: "link",
-  input_options: {
-    data: { "test-id": "user-button" },
-    id: "user-button-id"
-  }
-}) %>

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_input_options.md

@@ -1,3 +0,0 @@
-Use the `input_options` prop to pass additional attributes directly to the internal Playbook Button component. While the wrapper div has access to the standard `data` prop from KitBase, `input_options` allows you to attach attributes specifically to the internal button element.
-
-This is particularly useful when you need data attributes or other HTML attributes to apply to the button itself.

data/app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.html.erb

@@ -1,4 +0,0 @@
-<%= pb_rails("date", props: {
-  date: Date.today,
-  show_current_year: true
-}) %>

data/app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.jsx

@@ -1,17 +0,0 @@
-import React from 'react'
-
-import FormattedDate from '../../pb_date/_date'
-
-const DateWithShowCurrentYear = (props) => {
-  return (
-    <>
-      <FormattedDate
-          showCurrentYear
-          value={new Date()}
-          {...props}
-      />
-    </>
-  )
-}
-
-export default DateWithShowCurrentYear

data/app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.md

@@ -1 +0,0 @@
-By default, the Date kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting `showCurrentYear`/`show_current_year` to true as shown here. 

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.html.erb

@@ -1,22 +0,0 @@
-<%= pb_rails("fixed_confirmation_toast", props: {
-  text: "Error Message",
-  status: "error",
-  icon: "none",
-  closeable: true
-})%>
-
-<br><br>
-
-<%= pb_rails("fixed_confirmation_toast", props: {
-  text: "Items Successfully Moved",
-  status: "success",
-  icon: "none"
-})%>
-
-<br><br>
-
-<%= pb_rails("fixed_confirmation_toast", props: {
-  text: "Scan to Assign Selected Items",
-  status: "neutral",
-  icon: "none"
-})%>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.jsx

@@ -1,43 +0,0 @@
-import React from 'react'
-
-import FixedConfirmationToast from '../_fixed_confirmation_toast'
-
-const FixedConfirmationToastNoIcon = (props) => {
-  return (
-    <div>
-      <div>
-        <FixedConfirmationToast
-            closeable
-            icon="none"
-            status="error"
-            text="Error Message"
-            {...props}
-        />
-      </div>
-
-      <br />
-
-      <div>
-        <FixedConfirmationToast
-            icon="none"
-            status="success"
-            text="Items Successfully Moved"
-            {...props}
-        />
-      </div>
-
-      <br />
-
-      <div>
-        <FixedConfirmationToast
-            icon="none"
-            status="neutral"
-            text="Scan to Assign Selected Items"
-            {...props}
-        />
-      </div>
-    </div>
-  )
-}
-
-export default FixedConfirmationToastNoIcon

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.md

@@ -1 +0,0 @@
-Setting `icon` prop to "none" will render the fixed confirmation toast without the left side icon. 

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()
-  })
-})