playbook_ui 14.25.0.pre.alpha.testingcss9798 → 14.25.0.pre.alpha.testingcss10239

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5be7aa941d1c03b6131a2df30b8d11f4dfddf7c8f5dc4372b2369df7d58fe6ed
-  data.tar.gz: f8879e9b0dfd2a424a1e17931b0a06710b58a6a352604f7c3bc637903be79252
+  metadata.gz: c56d482bc374ac4f4c557dc4c38a5566256e97c5c42e888e44b9d4a4eece739f
+  data.tar.gz: cbb0c351a9df1754580fb350b28825ca262a2593540568199dcbf6ff71647f81
 SHA512:
-  metadata.gz: d2c3c2321c62420d0296f925a3a5b8468ecb25e08eba3b5b1e2d1e80c6141462bf536cef0c2b3610117d7f499e9cd2dca14b99ad9922b5b24f8f0a77e69823c8
-  data.tar.gz: 588a432377d4322d6371f8d41e157467240a63ee95975d84aea02da07e74d8db24100ad78534b8202466892e53333333ebc32f5d11b9da7503d7055189271915
+  metadata.gz: 360fdcd96e91166da90fb76c1dcb5b270344cd04cdb53d15532eb553e472bd8cb845d32d8656a22edd3b1c791800ee26d64a8085351a030f8f911e3cd9be9854
+  data.tar.gz: b7456754e270e0092c9ba439e87417efe03448981e34bea2ac54bcaec189b1cac065621d2d76df2a8af021da5cfc1afe5c77413ec40b1953add06e710d8817c8

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/sass_partials/_time_selection_styles.scss

@@ -52,7 +52,8 @@
         background: transparent;
       }
 
-      .pb_selectable_card_kit > label {
+      .pb_selectable_card_kit_enabled > label,
+      .pb_selectable_card_kit_checked_enabled > label {
         padding: 0;
         margin: 0;
         width: 60px;

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_typeahead/docs/_typeahead_with_pills.html.erb

@@ -7,7 +7,7 @@
   ]
 %>
 
-<%= pb_rails("typeahead", props: { id: "typeahead-pills-example1", default_options: [options.first], options: options, label: "Colors", name: :foo, pills: true }) %>
+<%= pb_rails("typeahead", props: { id: "typeahead-pills-example1", default_options: [options.first], options: options, label: "Products", name: :foo, pills: true }) %>
 
 <%= pb_rails("button", props: {id: "clear-pills", text: "Clear All Options", variant: "secondary"}) %>
 

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx

@@ -13,7 +13,7 @@ const TypeaheadWithPills = (props) => {
     <>
       <Typeahead
           isMulti
-          label="Colors"
+          label="Products"
           options={options}
           placeholder=""
           {...props}

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.html.erb

@@ -7,25 +7,4 @@
   ]
 %>
 
-<%= pb_rails("typeahead", props: { id: "typeahead-pills-example1", pill_color: "neutral", default_options: [options.first], options: options, label: "Colors", name: :foo, pills: true }) %>
-
-<%= pb_rails("button", props: {id: "clear-pills", text: "Clear All Options", variant: "secondary"}) %>
-
-<!-- This section is an example of the available JavaScript event hooks -->
-<%= javascript_tag defer: "defer" do %>
-  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-select", function(event) {
-    console.log('Option selected')
-    console.dir(event.detail)
-  })
-  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-remove", function(event) {
-    console.log('Option removed')
-    console.dir(event.detail)
-  })
-  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-clear", function() {
-    console.log('All options cleared')
-  })
-
-  document.querySelector('#clear-pills').addEventListener('click', function() {
-    document.dispatchEvent(new CustomEvent('pb-typeahead-kit-typeahead-pills-example1:clear'))
-  })
-<% end %>
+<%= pb_rails("typeahead", props: { id: "typeahead-pills-example2", pill_color: "neutral", options: options, label: "Products", name: :foo, pills: true }) %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.jsx

@@ -13,7 +13,7 @@ const TypeaheadWithPills = (props) => {
     <>
       <Typeahead
           isMulti
-          label="Colors"
+          label="Products"
           options={options}
           pillColor="neutral"
           placeholder=""

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.html.erb

@@ -9,9 +9,9 @@
 
 <%= pb_rails("typeahead", props: {
     id: "typeahead-without-pills-example1",
-    placeholder: "All Colors",
+    placeholder: "All Products",
     options: options, 
-    label: "Colors",
+    label: "Products",
     name: :foo,
     is_multi: false
   })

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` |
+