playbook_ui 14.24.0 → 14.25.0.pre.alpha.PLAY2379datekitjesttestreact9838

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

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

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

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

@@ -8,6 +8,7 @@ examples:
   - fixed_confirmation_toast_auto_close: Click to Show Auto Close
   - fixed_confirmation_toast_children: Children
   - fixed_confirmation_toast_custom_icon: Custom Icon
+  - fixed_confirmation_toast_no_icon: No Icon
   
   react:
   - fixed_confirmation_toast_default: Default
@@ -17,6 +18,7 @@ examples:
   - fixed_confirmation_toast_auto_close: Click to Show Auto Close
   - fixed_confirmation_toast_children: Children
   - fixed_confirmation_toast_custom_icon: Custom Icon
+  - fixed_confirmation_toast_no_icon: No Icon
 
   swift:
   - fixed_confirmation_toast_default_swift: Default

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

@@ -5,3 +5,4 @@ export { default as FixedConfirmationToastPositions } from './_fixed_confirmatio
 export { default as FixedConfirmationToastAutoClose } from './_fixed_confirmation_toast_auto_close.jsx'
 export { default as FixedConfirmationToastChildren } from './_fixed_confirmation_toast_children.jsx'
 export { default as FixedConfirmationToastCustomIcon } from './_fixed_confirmation_toast_custom_icon.jsx'
+export { default as FixedConfirmationToastNoIcon } from './_fixed_confirmation_toast_no_icon.jsx'

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb

@@ -1,6 +1,7 @@
 <%= pb_content_tag do %>
+    <% if object.icon_value && object.icon_value != "none" %>
     <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true }) %>
-
+    <% end %>
     <% if content %>
         <%= content %>
     <% elsif object.show_text? %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb

@@ -56,7 +56,7 @@ module Playbook
       end
 
       def icon_class
-        icon.present? ? " custom_icon" : ""
+        icon.present? && icon != "none" ? " custom_icon" : ""
       end
 
       def classname

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.test.js

@@ -56,6 +56,12 @@ test('renders custom icon when provided', () => {
     expect(container.querySelector('.custom_icon')).toBeInTheDocument();
 });
 
+test("renders no icon when icon prop is 'none'", () => {
+    const { container } = render(<FixedConfirmationToast icon="none" />);
+    expect(container.querySelector('.pb_icon')).not.toBeInTheDocument();
+    expect(container.querySelector('.custom_icon')).not.toBeInTheDocument();
+});
+
 test('renders correctly with multiLine prop', () => {
     const { container } = render(<FixedConfirmationToast multiLine />);
     expect(container.querySelector('._multi_line')).toBeInTheDocument();

data/app/pb_kits/playbook/pb_flex/_flex.tsx

@@ -4,6 +4,9 @@ import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
 import { GenericObject, Sizes } from '../types'
 
+type SizeType = Sizes | "none"
+type SizeResponsiveType = { [key: string]: SizeType }
+
 type FlexProps = {
   children: React.ReactChild[] | React.ReactNode,
   className?: string,
@@ -18,9 +21,9 @@ type FlexProps = {
   reverse?: boolean,
   vertical?: "top" | "center" | "bottom" | "stretch" | "baseline" | "none",
   align?: "start" | "center" | "end" | "stretch" | "baseline" | "none",
-  gap?: Sizes | "none",
-  rowGap?: Sizes| "none",
-  columnGap?: Sizes| "none",
+  gap?: SizeType | SizeResponsiveType,
+  rowGap?: SizeType | SizeResponsiveType,
+  columnGap?: SizeType | SizeResponsiveType,
   wrap?: boolean,
   alignSelf?: "start" | "end" | "center" | "stretch" | "none"
 } & GlobalProps
@@ -53,9 +56,9 @@ const Flex = (props: FlexProps): React.ReactElement => {
   const alignClass = align !== 'none' ? `align_items_${align}` : `align_items_${vertical}`
   const inlineClass = inline === true ? 'inline' : ''
   const spacingClass = spacing !== undefined ? `spacing_${spacing}` : ''
-  const gapClass = gap !== 'none' ? `gap_${gap}` : ''
-  const rowGapClass = rowGap !== 'none' ? `rowGap_${rowGap}` : ''
-  const columnGapClass = columnGap !== 'none' ? `columnGap_${columnGap}` : ''
+  const gapClass = (gap !== 'none' && typeof gap === 'object') ? `gap_${gap}` : ''
+  const rowGapClass = (rowGap !== 'none' && typeof rowGap === 'object') ? `rowGap_${rowGap}` : ''
+  const columnGapClass = (columnGap !== 'none' && typeof columnGap === 'object') ? `columnGap_${columnGap}` : ''
   const wrapClass = wrap === true ? 'wrap' : ''
   const reverseClass = reverse === true ? 'reverse' : ''
   const alignSelfClass = alignSelf !== 'none' ? `align_self_${alignSelf}` : ''

data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.html.erb

@@ -1,4 +1,4 @@
-<%= pb_rails("title", props: {size: 4, text: "Row"}) %>
+<%= pb_rails("title", props: {size: 4, text: "Gap"}) %>
 <br/>
 <div class="flex-doc-example">
   <%= pb_rails("flex", props:{ gap: "xxs", wrap:true}) do %>
@@ -31,3 +31,14 @@
    <%= pb_rails("flex/flex_item") do %>4<% end %>
   <% end %>
 </div>
+
+<br/><br/>
+<%= pb_rails("title", props: {size: 4, text: "Responsive"}) %>
+<br/>
+<div class="flex-doc-example">
+  <%= pb_rails("flex", props: { gap: { xs: "none", sm: "sm", md: "md", lg: "lg", xl: "xl" }, wrap: true }) do %>
+   <% 40.times do |i| %>
+    <%= pb_rails("flex/flex_item") do %> <%=i%> <% end %>
+   <% end %>
+  <% end %>
+</div>

data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
+import Title from '../../pb_title/_title'
 
 const FlexGap = (props) => {
   const count = () => {
@@ -13,6 +14,8 @@ const FlexGap = (props) => {
 
   return (
     <>
+      <Title size={4}>Gap</Title>
+      <br />
       <div className="flex-doc-example">
         <Flex
             gap="xxs"
@@ -27,8 +30,10 @@ const FlexGap = (props) => {
         </Flex>
       </div>
 
-      <br />
+      <br /><br />
 
+      <Title size={4}>Column Gap</Title>
+      <br />
       <div className="flex-doc-example">
         <Flex
             columnGap="lg"
@@ -48,6 +53,9 @@ const FlexGap = (props) => {
           </FlexItem>
         </Flex>
       </div>
+      <br /><br />
+
+      <Title size={4}>Row Gap</Title>
       <br />
       <div className="flex-doc-example">
         <Flex
@@ -69,6 +77,23 @@ const FlexGap = (props) => {
           </FlexItem>
         </Flex>
       </div>
+
+      <br /><br />
+      <Title size={4}>Responsive</Title>
+      <br />
+      <div className="flex-doc-example">
+        <Flex
+            gap={{ xs: "none", sm: "sm", md: "md", lg: "lg", xl: "xl" }}
+            wrap
+            {...props}
+        >
+          {count().map((v, key) => (
+            <FlexItem key={key}>
+              {v}
+            </FlexItem>
+            ))}
+        </Flex>
+      </div>
     </>
   )
 }

data/app/pb_kits/playbook/pb_flex/docs/_flex_gap_rails.md

@@ -0,0 +1,11 @@
+##### Prop
+
+`gap` | `row_gap` | `column_gap` | **Type**: String | Hash | **Values**: xxs | xs | sm | md | lg | xl | none
+
+Setting the gap prop sets the `row_gap` and the `column_gap` props to the same size and creates equal space within a flex container.
+
+Setting the `row_gap` prop creates space between rows in a flex container.
+
+Setting the `column_gap` prop creates space between columns in a flex container.
+
+You can also set responsive values by passing a hash with device sizes and values. 

data/app/pb_kits/playbook/pb_flex/docs/_flex_gap_react.md

@@ -0,0 +1,11 @@
+##### Prop
+
+`gap` | `rowGap` | `columnGap` | **Type**: String | Object | **Values**: xxs | xs | sm | md | lg | xl | none
+
+Setting the gap prop sets the `rowGap` and the `columnGap` props to the same size and creates equal space within a flex container.
+
+Setting the `rowGap` prop creates space between rows in a flex container.
+
+Setting the `columnGap` prop creates space between columns in a flex container.
+
+You can also set responsive values by passing an object with device sizes and values. 

data/app/pb_kits/playbook/pb_flex/flex.rb

@@ -24,17 +24,11 @@ module Playbook
                      default: "none",
                      deprecated: true
 
-      prop :gap, type: Playbook::Props::Enum,
-                 values: %w[xxs xs sm md lg xl none],
-                 default: "none"
+      prop :gap
 
-      prop :row_gap, type: Playbook::Props::Enum,
-                     values: %w[xxs xs sm md lg xl none],
-                     default: "none"
+      prop :row_gap
 
-      prop :column_gap, type: Playbook::Props::Enum,
-                        values: %w[xxs xs sm md lg xl none],
-                        default: "none"
+      prop :column_gap
 
       prop :reverse, type: Playbook::Props::Boolean,
                      default: false
@@ -133,7 +127,7 @@ module Playbook
       end
 
       def gap_class
-        if gap == "none"
+        if gap == "none" || gap.nil? || gap.is_a?(Hash)
           nil
         else
           "gap_#{gap}"
@@ -141,7 +135,7 @@ module Playbook
       end
 
       def row_gap_class
-        if row_gap == "none"
+        if row_gap == "none" || row_gap.nil? || row_gap.is_a?(Hash)
           nil
         else
           "rowGap_#{row_gap}"
@@ -149,7 +143,7 @@ module Playbook
       end
 
       def column_gap_class
-        if column_gap == "none"
+        if column_gap == "none" || column_gap.nil? || column_gap.is_a?(Hash)
           nil
         else
           "columnGap_#{column_gap}"

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

@@ -242,4 +242,8 @@ svg {
       animation: fa-spin 1s infinite linear;
     }
   }
+
+  &.dark {
+    color: white;
+  }
 }

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

@@ -0,0 +1,212 @@
+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/_pagination.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import classnames from 'classnames'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
@@ -123,6 +123,13 @@ const Pagination = ( props: PaginationProps) => {
     
     return buttons;
   };
+
+  // Sync internal state with external current prop
+  useEffect(() => {
+    if (current >= 1 && current <= total) {
+      setCurrentPage(current);
+    }
+  }, [current, total]);
   
 
   const ariaProps = buildAriaProps(aria)

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

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

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

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

@@ -6,3 +6,4 @@ examples:
   react:
   - pagination_default: Default
   - pagination_page_change: Page Change
+  - pagination_external_control: External Control

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

@@ -1,2 +1,3 @@
 export { default as PaginationDefault } from './_pagination_default.jsx'
 export { default as PaginationPageChange } from './_pagination_page_change.jsx'
+export { default as PaginationExternalControl } from './_pagination_external_control.jsx'