playbook_ui 14.24.0.pre.alpha.testingwithoutlazyload9529 → 14.24.0.pre.rc.0

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_dropdown/_dropdown_mixin.scss

@@ -1,36 +0,0 @@
-@import "../tokens/colors";
-
-// activeStyle fontColor sass map to go through text colors + set of custom colors
-$custom-font-colors: (
-  primary: $primary
-);
-
-$merged-font-colors: map-merge($text_colors, $custom-font-colors);
-
-$font-colors: ();
-
-@each $key, $val in $merged-font-colors {
-  $font-colors: map-merge($font-colors, ($key: $val));
-}
-
-@mixin apply-font-color($color) {
-  color: $color;
-
-  [class^="pb_body"],
-  [class^="pb_title_kit"],
-  a {
-    color: $color !important;
-  }
-}
-
-// activeStyle backgroundColor map (set of custom colors)
-$custom-background-colors: (
-  "bg_light": $bg_light,
-  "white": $white,
-);
-
-$background-colors: ();
-
-@each $key, $val in $custom-background-colors {
-  $background-colors: map-merge($background-colors, ($key: $val));
-}

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options.jsx

@@ -1,90 +0,0 @@
-import React from 'react'
-import Dropdown from '../_dropdown'
-
-const DropdownCustomActiveStyleOptions = (props) => {
-
-
-  const options = [
-    {
-      label: "United States",
-      value: "unitedStates",
-      id: "us"
-    },
-    {
-      label: "Canada",
-      value: "canada",
-      id: "ca"
-    },
-    {
-      label: "Pakistan",
-      value: "pakistan",
-      id: "pk"
-    }
-  ];  
-
-
-  return (
-  <div>
-    <Dropdown
-        activeStyle={{
-          backgroundColor: "bg_light",
-          fontColor: "primary",
-        }}
-        label="Background Color: bg_light; Font Color: primary"
-        marginBottom="sm"
-        options={options}
-        {...props}
-    >
-      <Dropdown.Trigger/>
-      <Dropdown.Container>
-        {options.map((option) => (
-          <Dropdown.Option key={option.id} 
-              option={option}
-          />
-        ))}
-      </Dropdown.Container>
-    </Dropdown>
-    <Dropdown
-        activeStyle={{
-          backgroundColor: "white",
-          fontColor: "primary",
-        }}
-        label="Background Color: white; Font Color: primary"
-        marginBottom="sm"
-        options={options}
-        {...props}
-    />
-    <Dropdown
-        activeStyle={{
-          backgroundColor: "bg_light",
-          fontColor: "text_lt_default",
-        }}
-        autocomplete
-        label="Background Color: bg_light; Font Color: text_lt_default"
-        marginBottom="sm"
-        options={options}
-        {...props}
-    />
-    <Dropdown
-        activeStyle={{
-          fontColor: "text_lt_lighter",
-        }}
-        label="Font Color: text_lt_lighter"
-        marginBottom="sm"
-        options={options}
-        {...props}
-    >
-      <Dropdown.Trigger/>
-      <Dropdown.Container>
-        {options.map((option) => (
-          <Dropdown.Option key={option.id} 
-              option={option}
-          />
-        ))}
-      </Dropdown.Container>
-    </Dropdown>
-  </div>
-  )
-}
-
-export default  DropdownCustomActiveStyleOptions

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options_react.md

@@ -1,4 +0,0 @@
-The `activeStyle` prop can be used to customize the appearance of the dropdown selection indicator. It accepts an object with the following keys: `backgroundColor` sets the background color of the selected item (and its hover state); `fontColor` sets the font color of the selected item.
-
-`backgroundColor` **Type**: String | **Values**: bg_light | white | **Default**: (no selection) is primary
-`fontColor` **Type**: String | **Values**: primary | all [Playbook Text Colors](https://playbook.powerapp.cloud/visual_guidelines/colors) | **Default**: (no selection) is white

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_multi_level_select/docs/_multi_level_select_show_checked_children.html.erb

@@ -1,75 +0,0 @@
-<% treeData = [{
-  label: "Power Home Remodeling",
-  value: "powerHomeRemodeling",
-  id: "100",
-  expanded: true,
-  children: [
-    {
-      label: "People",
-      value: "people",
-      id: "101",
-      children: [
-        {
-          label: "Talent Acquisition",
-          value: "talentAcquisition",
-          id: "102",
-        },
-        {
-          label: "Business Affairs",
-          value: "businessAffairs",
-          id: "103",
-          children: [
-            {
-              label: "Initiatives",
-              value: "initiatives",
-              id: "104",
-            },
-            {
-              label: "Learning & Development",
-              value: "learningAndDevelopment",
-              id: "105",
-            },
-          ],
-        },
-        {
-          label: "People Experience",
-          value: "peopleExperience",
-          id: "106",
-        },
-      ],
-    },
-    {
-      label: "Contact Center",
-      value: "contactCenter",
-      id: "107",
-      children: [
-        {
-          label: "Appointment Management",
-          value: "appointmentManagement",
-          id: "108",
-        },
-        {
-          label: "Customer Service",
-          value: "customerService",
-          id: "109",
-        },
-        {
-          label: "Energy",
-          value: "energy",
-          id: "110",
-        },
-      ],
-    },
-  ],
-}] %>
-
-<% # Pre-selected node IDs to demonstrate the functionality %>
-<% preSelectedIds = ["102", "104", "109"] %>
-
-<%= pb_rails("multi_level_select", props: {
-  id: "multi-level-select-show-checked-children-rails",
-  name: "my_array",
-  tree_data: treeData,
-  selected_ids: preSelectedIds,
-  show_checked_children: false
-}) %>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_show_checked_children.jsx

@@ -1,94 +0,0 @@
-import React from "react";
-import MultiLevelSelect from "../_multi_level_select";
-
-const treeData = [
-  {
-    label: "Power Home Remodeling",
-    value: "powerHomeRemodeling",
-    id: "powerhome1",
-    expanded: true,
-    children: [
-      {
-        label: "People",
-        value: "people",
-        id: "people1",
-        children: [
-          {
-            label: "Talent Acquisition",
-            value: "talentAcquisition",
-            id: "talent1",
-          },
-          {
-            label: "Business Affairs",
-            value: "businessAffairs",
-            id: "business1",
-            children: [
-              {
-                label: "Initiatives",
-                value: "initiatives",
-                id: "initiative1",
-              },
-              {
-                label: "Learning & Development",
-                value: "learningAndDevelopment",
-                id: "development1",
-              },
-            ],
-          },
-          {
-            label: "People Experience",
-            value: "peopleExperience",
-            id: "experience1",
-          },
-        ],
-      },
-      {
-        label: "Contact Center",
-        value: "contactCenter",
-        id: "contact1",
-        children: [
-          {
-            label: "Appointment Management",
-            value: "appointmentManagement",
-            id: "appointment1",
-          },
-          {
-            label: "Customer Service",
-            value: "customerService",
-            id: "customer1",
-          },
-          {
-            label: "Energy",
-            value: "energy",
-            id: "energy1",
-          },
-        ],
-      },
-    ],
-  },
-];
-
-// Pre-selected node IDs to demonstrate the functionality
-const preSelectedIds = ["talent1", "initiative1", "customer1"];
-
-const MultiLevelSelectShowCheckedChildren = (props) => {
-  return (
-    <div>
-      <MultiLevelSelect
-          id='multiselect-checked-children'
-          onSelect={(selectedNodes) =>
-            console.log(
-              "Selected Items",
-              selectedNodes
-            )
-          }
-          selectedIds={preSelectedIds}
-          showCheckedChildren={false}
-          treeData={treeData}
-          {...props}
-      />
-    </div>
-  )
-};
-
-export default MultiLevelSelectShowCheckedChildren;

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_show_checked_children.md

@@ -1,3 +0,0 @@
-If you wish to control the auto-expansion of nodes with selected descendants in your multi-level select, you can utilize `showCheckedChildren/show_checked_children`. This prop (set to 'true' by default) controls whether items will be expanded on first render. When set to true, a node with selected descendants will automatically render as expanded so the selected nodes are visible. If you do NOT wish for this to be the case, you can set this prop to false.
-
-The prop will still honor any `expanded` attribute set up within your tree data.

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