playbook_ui 14.25.0 → 15.0.0.pre.alpha.PLAY1981sectionseparatorverticalchildren10469

data/app/pb_kits/playbook/pb_date/date.test.js

@@ -0,0 +1,506 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import PbDate from './_date'
+import DateTime from '../pb_kit/dateTime'
+
+// Mock DateTime utility functions
+jest.mock('../pb_kit/dateTime', () => ({
+  toWeekday: jest.fn(),
+  toMonth: jest.fn(),
+  toDay: jest.fn(),
+  toYear: jest.fn(),
+}))
+
+// Set test date
+const TEST_DATE = new Date('2025-08-19T10:30:00Z') // Monday, August 19, 2025
+const CURRENT_YEAR = new Date().getFullYear()
+
+describe('PbDate Kit', () => {
+  beforeEach(() => {
+    // Reset mocks before each test
+    jest.clearAllMocks()
+
+    // Set up default mock returns
+    DateTime.toWeekday.mockReturnValue('Monday')
+    DateTime.toMonth.mockReturnValue('August')
+    DateTime.toDay.mockReturnValue('19')
+    DateTime.toYear.mockReturnValue(2025)
+
+    // Mock console.error to avoid noise in tests
+    jest.spyOn(console, 'error').mockImplementation(() => {})
+  })
+
+  afterEach(() => {
+    console.error.mockRestore()
+  })
+
+  // Default Props
+  describe('Default Props', () => {
+    test('renders with minimal required props', () => {
+      const testId = 'pb-date-default'
+      render(
+        <PbDate
+            data={{ testid: testId }}
+            value={TEST_DATE}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).toBeInTheDocument()
+      expect(kit).toHaveClass('pb_date_kit_left')
+    })
+
+    test('displays date in default format without day of week', () => {
+      // Mock current year to test hiding logic
+      DateTime.toYear.mockReturnValue(CURRENT_YEAR)
+
+      const testId = 'pb-date-format'
+      render(
+        <PbDate
+            data={{ testid: testId }}
+            value={TEST_DATE}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveTextContent('August 19')
+      expect(kit).not.toHaveTextContent('Monday')
+      expect(kit).not.toHaveTextContent(`, ${CURRENT_YEAR}`)
+    })
+
+    test('applies default CSS classes', () => {
+      const testId = 'pb-date-css'
+      render(
+        <PbDate
+            data={{ testid: testId }}
+            value={TEST_DATE}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveClass('pb_date_kit_left')
+    })
+  })
+
+  // Prop Variations
+  describe('Prop Variations', () => {
+    test('renders with showDayOfWeek enabled', () => {
+      const testId = 'pb-date-weekday'
+      render(
+        <PbDate
+            data={{ testid: testId }}
+            showDayOfWeek
+            value={TEST_DATE}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveTextContent('Monday')
+      expect(kit).toHaveTextContent('•')
+      expect(kit).toHaveTextContent('August 19')
+    })
+
+    test('renders with showCurrentYear enabled', () => {
+      const testId = 'pb-date-current-year'
+      render(
+        <PbDate
+            data={{ testid: testId }}
+            showCurrentYear
+            value={TEST_DATE}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveTextContent(', 2025')
+    })
+
+    test('renders with showIcon enabled for medium size', () => {
+      const testId = 'pb-date-icon-md'
+      render(
+        <PbDate
+            data={{ testid: testId }}
+            showIcon
+            size="md"
+            value={TEST_DATE}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      const iconContainer = kit.querySelector('.pb_icon_kit_container')
+      expect(iconContainer).toBeInTheDocument()
+    })
+
+    test('renders with showIcon enabled for small size', () => {
+      const testId = 'pb-date-icon-sm'
+      render(
+        <PbDate
+            data={{ testid: testId }}
+            showIcon
+            size="sm"
+            value={TEST_DATE}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      const iconContainer = kit.querySelector('.pb_icon_kit_container')
+      expect(iconContainer).toBeInTheDocument()
+    })
+
+    test('renders different sizes correctly', () => {
+      const sizes = ['sm', 'md', 'lg']
+
+      sizes.forEach(size => {
+        const testId = `pb-date-size-${size}`
+        render(
+          <PbDate
+              data={{ testid: testId }}
+              size={size}
+              value={TEST_DATE}
+          />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toBeInTheDocument()
+
+        expect(kit).toHaveTextContent('August 19')
+      })
+    })
+
+    test('renders different alignments correctly', () => {
+      const alignments = ['left', 'center', 'right']
+
+      alignments.forEach(alignment => {
+        const testId = `pb-date-align-${alignment}`
+        render(
+          <PbDate
+              alignment={alignment}
+              data={{ testid: testId }}
+              value={TEST_DATE}
+          />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass(`pb_date_kit_${alignment}`)
+      })
+    })
+
+    test('renders in dark mode', () => {
+      const testId = 'pb-date-dark'
+      render(
+        <PbDate
+            dark
+            data={{ testid: testId }}
+            value={TEST_DATE}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).toBeInTheDocument()
+    })
+
+    test('renders in unstyled mode', () => {
+      const testId = 'pb-date-unstyled'
+      render(
+        <PbDate
+            data={{ testid: testId }}
+            showDayOfWeek
+            showIcon
+            unstyled
+            value={TEST_DATE}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveTextContent('Monday')
+      expect(kit).toHaveTextContent('•')
+      expect(kit).toHaveTextContent('August 19')
+
+      expect(kit.querySelector('.pb_title_kit')).not.toBeInTheDocument()
+      expect(kit.querySelector('.pb_caption_kit')).not.toBeInTheDocument()
+    })
+
+    test('applies custom className', () => {
+      const testId = 'pb-date-custom-class'
+      const customClass = 'my-custom-date-class'
+
+      render(
+        <PbDate
+            className={customClass}
+            data={{ testid: testId }}
+            value={TEST_DATE}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveClass(customClass)
+    })
+
+    test('applies custom id', () => {
+      const customId = 'my-custom-date-id'
+
+      render(
+        <PbDate
+            id={customId}
+            value={TEST_DATE}
+        />
+      )
+
+      const kit = document.getElementById(customId)
+      expect(kit).toBeInTheDocument()
+      expect(kit).toHaveAttribute('id', customId)
+    })
+  })
+
+  // Year Display
+  describe('Year Display Logic', () => {
+    test('hides current year by default', () => {
+      DateTime.toYear.mockReturnValue(CURRENT_YEAR)
+
+      const testId = 'pb-date-current-year-hidden'
+      render(
+        <PbDate
+            data={{ testid: testId }}
+            value={TEST_DATE}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).not.toHaveTextContent(`, ${CURRENT_YEAR}`)
+    })
+
+    test('shows current year when showCurrentYear is true', () => {
+      DateTime.toYear.mockReturnValue(CURRENT_YEAR)
+
+      const testId = 'pb-date-force-current-year'
+      render(
+        <PbDate
+            data={{ testid: testId }}
+            showCurrentYear
+            value={TEST_DATE}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveTextContent(`, ${CURRENT_YEAR}`)
+    })
+
+    test('shows non-current year automatically', () => {
+      const pastYear = CURRENT_YEAR - 1
+      DateTime.toYear.mockReturnValue(pastYear)
+
+      const testId = 'pb-date-past-year'
+      render(
+        <PbDate
+            data={{ testid: testId }}
+            value={TEST_DATE}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveTextContent(`, ${pastYear}`)
+    })
+
+    test('shows future year automatically', () => {
+      const futureYear = CURRENT_YEAR + 1
+      DateTime.toYear.mockReturnValue(futureYear)
+
+      const testId = 'pb-date-future-year'
+      render(
+        <PbDate
+            data={{ testid: testId }}
+            value={TEST_DATE}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveTextContent(`, ${futureYear}`)
+    })
+  })
+
+  // Edge Cases
+  describe('Edge Cases', () => {
+    test('handles leap year date', () => {
+      const leapYearDate = new Date('2024-02-29T12:00:00Z')
+      DateTime.toMonth.mockReturnValue('February')
+      DateTime.toDay.mockReturnValue('29')
+      DateTime.toYear.mockReturnValue(2024)
+      DateTime.toWeekday.mockReturnValue('Thursday')
+
+      const testId = 'pb-date-leap-year'
+      render(
+        <PbDate
+            data={{ testid: testId }}
+            value={leapYearDate}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveTextContent('February 29')
+    })
+
+    test('handles beginning of year', () => {
+      const newYearDate = new Date('2023-01-01T00:00:00Z')
+      DateTime.toMonth.mockReturnValue('January')
+      DateTime.toDay.mockReturnValue('1')
+      DateTime.toYear.mockReturnValue(2023)
+      DateTime.toWeekday.mockReturnValue('Sunday')
+
+      const testId = 'pb-date-new-year'
+      render(
+        <PbDate
+            data={{ testid: testId }}
+            value={newYearDate}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveTextContent('January 1')
+    })
+
+    test('handles end of year', () => {
+      const endYearDate = new Date('2023-12-31T23:59:59Z')
+      DateTime.toMonth.mockReturnValue('December')
+      DateTime.toDay.mockReturnValue('31')
+      DateTime.toYear.mockReturnValue(2023)
+      DateTime.toWeekday.mockReturnValue('Sunday')
+
+      const testId = 'pb-date-end-year'
+      render(
+        <PbDate
+            data={{ testid: testId }}
+            value={endYearDate}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveTextContent('December 31')
+    })
+
+    test('handles very old date', () => {
+      const oldDate = new Date('1900-01-01T00:00:00Z')
+      DateTime.toMonth.mockReturnValue('January')
+      DateTime.toDay.mockReturnValue('1')
+      DateTime.toYear.mockReturnValue(1900)
+      DateTime.toWeekday.mockReturnValue('Monday')
+
+      const testId = 'pb-date-old'
+      render(
+        <PbDate
+            data={{ testid: testId }}
+            value={oldDate}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveTextContent('January 1')
+      expect(kit).toHaveTextContent(', 1900')
+    })
+
+    test('handles far future date', () => {
+      const futureDate = new Date('2099-12-31T23:59:59Z')
+      DateTime.toMonth.mockReturnValue('December')
+      DateTime.toDay.mockReturnValue('31')
+      DateTime.toYear.mockReturnValue(2099)
+      DateTime.toWeekday.mockReturnValue('Friday')
+
+      const testId = 'pb-date-future'
+      render(
+        <PbDate
+            data={{ testid: testId }}
+            value={futureDate}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveTextContent('December 31')
+      expect(kit).toHaveTextContent(', 2099')
+    })
+  })
+
+  // Accessibility and HTML
+  describe('Accessibility and HTML Attributes', () => {
+    test('applies aria attributes correctly', () => {
+      const testId = 'pb-date-aria'
+      const ariaLabel = 'Custom date label'
+
+      render(
+        <PbDate
+            aria={{ label: ariaLabel }}
+            data={{ testid: testId }}
+            value={TEST_DATE}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveAttribute('aria-label', ariaLabel)
+    })
+
+    test('applies data attributes correctly', () => {
+      const testId = 'pb-date-data'
+      const customData = 'custom-value'
+
+      render(
+        <PbDate
+            data={{ testid: testId, custom: customData }}
+            value={TEST_DATE}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveAttribute('data-custom', customData)
+    })
+
+    test('applies HTML options correctly', () => {
+      const testId = 'pb-date-html'
+      const title = 'Custom title'
+
+      render(
+        <PbDate
+            data={{ testid: testId }}
+            htmlOptions={{ title }}
+            value={TEST_DATE}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveAttribute('title', title)
+    })
+  })
+
+  // Componenet Integration
+  describe('Component Integration', () => {
+    test('calls DateTime utility functions correctly', () => {
+      render(
+        <PbDate value={TEST_DATE} />
+      )
+
+      expect(DateTime.toWeekday).toHaveBeenCalledWith(TEST_DATE)
+      expect(DateTime.toMonth).toHaveBeenCalledWith(TEST_DATE)
+      expect(DateTime.toDay).toHaveBeenCalledWith(TEST_DATE)
+      expect(DateTime.toYear).toHaveBeenCalledWith(TEST_DATE)
+    })
+
+    test('renders all components together correctly', () => {
+      const testId = 'pb-date-full-featured'
+      render(
+        <PbDate
+            alignment="center"
+            data={{ testid: testId }}
+            showDayOfWeek
+            showIcon
+            size="lg"
+            value={TEST_DATE}
+        />
+      )
+
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveClass('pb_date_kit_center')
+      expect(kit).toHaveTextContent('Monday')
+      expect(kit).toHaveTextContent('•')
+      expect(kit).toHaveTextContent('August 19')
+
+      const iconContainer = kit.querySelector('.pb_icon_kit_container')
+      expect(iconContainer).toBeInTheDocument()
+    })
+  })
+})

data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss

@@ -8,7 +8,7 @@
 @import "./sass_partials/input_styles";
 @import "./sass_partials/quick_pick_styles";
 
-[class^=pb_date_picker_kit] {
+.pb_date_picker_kit {
   .input_wrapper {
     position: relative;
 

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -4,6 +4,7 @@ import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
 import { getAllIcons } from "../utilities/icons/allicons"
+import { camelToSnakeCase } from '../utilities/text'
 
 import datePickerHelper from './date_picker_helper'
 import Icon from '../pb_icon/_icon'
@@ -114,6 +115,20 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
   const inputAriaProps = buildAriaProps(inputAria)
   const inputDataProps = buildDataProps(inputData)
 
+  // Convert cursor prop to CSS-style format to apply to input tag below
+  const getCursorStyle = (cursor?: string): string => {
+    // If input is disabled, always use 'not-allowed'
+    if (disableInput) return 'not-allowed'
+
+    // If cursor prop is provided, convert it to styling format
+    if (cursor) {
+      return camelToSnakeCase(cursor).replace(/_/g, '-')
+    }
+
+    // Default to 'pointer'
+    return 'pointer'
+  }
+
   useEffect(() => {
     datePickerHelper({
       allowInput,
@@ -149,6 +164,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
       required: false,
     }, scrollContainer)
   }, initializeOnce ? [] : undefined)
+
   const filteredProps = {...props}
   if (filteredProps.marginBottom === undefined) {
     filteredProps.marginBottom = "sm"
@@ -163,6 +179,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     error ? 'error' : null,
     className
   )
+
   const iconWrapperClass = () => {
     let base = 'cal_icon_wrapper'
     if (dark) {
@@ -176,6 +193,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     }
     return base
   }
+
   const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
 
   return (
@@ -206,6 +224,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
                   name={name}
                   onChange={inputOnChange}
                   placeholder={placeholder}
+                  style={{ cursor: getCursorStyle(filteredProps.cursor) }}
                   value={inputValue}
               />
 

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -10,6 +10,7 @@
       <%= pb_rails("text_input", props: {
         aria: object.input_aria,
         autocomplete: false,
+        cursor: object.cursor,
         dark: object.dark,
         data: object.input_data,
         disabled: object.disable_input,

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -89,6 +89,48 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     }
   }
 
+  // Helper function to get min/max years based on yearRange. If minDate/maxDate provided, grab year from those values
+  const getMinMaxYears = () => {
+    const [minYear, maxYear] = yearRange;
+
+    const extractYear = (dateOption: typeof minDate | typeof maxDate): number | null => {
+      if (!dateOption) return null;
+
+      // If it's already a number, assume it's a year
+      if (typeof dateOption === 'number') {
+        return dateOption;
+      }
+
+      // If it's a string, extract year with regex
+      if (typeof dateOption === 'string') {
+        const match = dateOption.match(/\b(19|20)\d{2}\b/);
+        return match ? parseInt(match[0], 10) : null;
+      }
+
+      // If it's a Date object, get the year directly
+      if (dateOption instanceof Date) {
+        return dateOption.getFullYear();
+      }
+
+      return null;
+    };
+
+    const setMinYear = minDate ? (extractYear(minDate) ?? minYear) : minYear;
+    const setMaxYear = maxDate ? (extractYear(maxDate) ?? maxYear) : maxYear;
+
+    return { setMinYear, setMaxYear };
+  };
+
+  const { setMinYear, setMaxYear } = getMinMaxYears()
+
+  // Helper function to get min/max dates based on yearRange
+  const getMinMaxDates = () => {
+    const setMinDate = minDate || `01/01/${setMinYear}`
+    const setMaxDate = maxDate || `12/31/${setMaxYear}`
+
+    return { setMinDate, setMaxDate }
+  }
+
   const disabledWeekDays = () => {
     return (
       [
@@ -201,6 +243,8 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   // |             Flatpickr initializer w/ config             |
   // ===========================================================
 
+  const { setMinDate, setMaxDate } = getMinMaxDates()
+
   flatpickr(`#${pickerId}`, {
     allowInput,
     closeOnSelect,
@@ -212,8 +256,8 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     locale: {
       rangeSeparator: ' to '
     },
-    maxDate,
-    minDate,
+    maxDate: setMaxDate,
+    minDate: setMinDate,
     mode,
     nextArrow: '<i class="far fa-angle-right"></i>',
     onOpen: [() => {
@@ -250,7 +294,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
 
   // create html option tags for desired years
   let years = ''
-  for (let year = yearRange[1]; year >= yearRange[0]; year--) {
+  for (let year = setMaxYear; year >= setMinYear; year--) {
     years += `<option value="${year}">${year}</option>`
   }
 
@@ -323,7 +367,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   }
 // === End of Automatic Sync Logic ===
 
-    
+
   // Adding dropdown icons to year and month select
   dropdown.insertAdjacentHTML('afterend', `<i class="year-dropdown-icon">${angleDown}</i>`)
   if (picker.monthElements[0].parentElement) {