playbook_ui 14.25.0.pre.alpha.testingcss9798 → 14.25.0.pre.alpha.testingcss10064

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5be7aa941d1c03b6131a2df30b8d11f4dfddf7c8f5dc4372b2369df7d58fe6ed
-  data.tar.gz: f8879e9b0dfd2a424a1e17931b0a06710b58a6a352604f7c3bc637903be79252
+  metadata.gz: 3e87c0470bff796e237c63f993cede71218d1e88755e07b892a23af2c251b38f
+  data.tar.gz: 1542b3c097c5ac6d3dd47b0c4098ab7df31fa5226b4d3a03b3d66d56beffdc2b
 SHA512:
-  metadata.gz: d2c3c2321c62420d0296f925a3a5b8468ecb25e08eba3b5b1e2d1e80c6141462bf536cef0c2b3610117d7f499e9cd2dca14b99ad9922b5b24f8f0a77e69823c8
-  data.tar.gz: 588a432377d4322d6371f8d41e157467240a63ee95975d84aea02da07e74d8db24100ad78534b8202466892e53333333ebc32f5d11b9da7503d7055189271915
+  metadata.gz: d40d2fd146e983865122a237a8bd7af908ad8418369227fe0ff71c622ee160af8bb30895198a26839c194e1badb927e530fbfd4f42c2ab1510fe4021c8991ea1
+  data.tar.gz: fb04f80c66bb59e996bb00b13de44479d13e96bb4b69ac406b5fd3fa881ab0a384de79f524472dfc4dac21973851292cf0f13b889e1a3866f98c1b8255a61f4f

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_fixed_confirmation_toast/docs/_fixed_confirmation_toast_props_swift.md

@@ -2,7 +2,8 @@
 | Name | Type | Description | Default | Values |
 | --- | ----------- | --------- | --------- | --------- |
 | **text** | `String` |`Value for the toast message` | `nil` |   |
-| **variant** | `Variant` | `Determines the type pf toast message being displayed` | `.custom()` |  `error`, `success`, 
-`neutral`, `custom()` |
+| **font** | `PBFont` |`Value for the toast message font style` | `.title4` |   |
+| **animatedIcon** | `AnyView` |`Value for the option to use an animated icon` | `nil` |   |
+| **variant** | `Variant` | `Determines the type pf toast message being displayed` | `.custom()` |  `error` `success` `neutral` `custom()` |
 | **actionView** | `dismissAction` | Dismisses the toast message | `.default` | `default` `custom()` `withTimer()` |
 | **dismissAction** | `(() -> Void)` | `Triggers the dismiss action` |  |  |

data/app/pb_kits/playbook/pb_layout/_layout.scss

@@ -378,7 +378,7 @@ $colors: (
 // Collapse Settings for each position and breakpoint
 @each $position in $positions {
   @each $breakpoint_name, $breakpoint in $breakpoints {
-    .pb_layout_kit_sidebar_#{$position}_collapse_#{$breakpoint_name} {
+    .layout_#{$position}_collapse_#{$breakpoint_name} {
       @include break_at($breakpoint) {
         @if $position == 'left' {
           grid-template-areas: "layout_collapsed_#{$breakpoint_name}_sidebar" "layout_collapsed_#{$breakpoint_name}_body";

data/app/pb_kits/playbook/pb_user/docs/_user_props_table.md

@@ -1,11 +1,18 @@
 ### Props
 | Name | Type | Description | Default | Values |
 | --- | ----------- | --------- | --------- | --------- |
-| **name** | `String` | Sets the User's name |  |  |
+| **name** | `String` | Sets the User's name | `""` |  |
+| **nameFont** | `Typography` | Font styling for the user's name | `.init(font: .title4, variant: .bold)` |  |
+| **image** | `Image?` | Sets image for the avatar | `nil` |  |
+| **orientation** | `Orientation` | Changes the orientation of the User | `.horizontal` | `.horizontal` `.vertical` |
+| **size** | `Size` | Changes the size of the User | `.medium` | `.xxSmall` `.xSmall` `.small` `.medium` `.large` `.xLarge` |
+| **territory** | `String?` | Adds the User's territory | `nil` |  |
+| **title** | `String?` | Adds a title | `nil` |  |
+| **subtitle** | `AnyView?` | Adds a subtitle view | `nil` |  |
+| **status** | `PBOnlineStatus.Status?` | An indicator for the current status of the user | `nil` | `.online` `.away` `.offline` |
 | **displayAvatar** | `Bool` | Displays the User's avatar | `true` | `true` `false` |
-| **image** | `Image` | Sets image for the avatar |  |  |
-| **orientation** | `Orientation` | Changes the orientation of the User | `.horizontal` | `.horizontal` `.verticle` |
-| **size** | `UserAvatarSize` | Changes the size of the User | `.medium` | `.small` `.medium` `.large` |
-| **territory** | `String` | Adds the User's territory |  |  |
-| **title** | `String` | Adds a title |  |  |
-| **status** | `PBAvatar.PresenceStatus?` | An idicator for the current status of the user | `.none` | `.online` `.away` `.offline` |
+| **territoryTitleFont** | `PBFont` | Font for territory and title text | `.subcaption` | `.title1` `.body` `.caption` `.subcaption` `.badgeText` `.title4` |
+| **isActive** | `Bool` | Sets whether the user is active | `true` | `true` `false` |
+| **hasInactiveBadge** | `Bool` | Shows inactive badge when user is not active | `false` | `true` `false` |
+| **spacing** | `CGFloat` | Controls spacing between elements | `Spacing.small` | `.none` `.xxSmall` `.xSmall` `.small` `.medium` `.large` `.xLarge` |
+