playbook_ui 15.6.0 → 15.7.0.pre.alpha.PLAY2678emojimask13284

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_24_hour.html.erb

@@ -0,0 +1,2 @@
+<%= pb_rails("time_picker", props: { id: "time-picker-24-hour", label: "24-Hour Format", time_format: "24hour" }) %>
+

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_24_hour.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import TimePicker from '../../pb_time_picker/_time_picker'
+
+const TimePicker24Hour = (props) => (
+  <div>
+    <TimePicker
+        id="time-picker-24-hour"
+        label="24-Hour Format"
+        timeFormat="24hour"
+        {...props}
+    />
+  </div>
+)
+
+export default TimePicker24Hour
+

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_24_hour.md

@@ -0,0 +1 @@
+Set `time_format` / `timeFormat` to 24hour to display the time selection dropdown in a 24-hour format.

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_default.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("time_picker", props: { id: "time-picker-default" }) %>

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_default.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import TimePicker from '../../pb_time_picker/_time_picker'
+
+const TimePickerDefault = (props) => (
+  <div>
+    <TimePicker
+        id="time-picker-default"
+        {...props}
+    />
+  </div>
+)
+
+export default TimePickerDefault

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_default.md

@@ -0,0 +1 @@
+Use the Time Picker for time-only selection. For date and time selection, use the [DatePicker with Time Selection Enabled](https://playbook.powerapp.cloud/kits/date_picker/react#time-selection) instead.

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_default_time.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("time_picker", props: { id: "time-picker-default-time-12hr", default_time: "2:30 PM", label: "12-Hour Format (2:30 PM)" }) %>
+<%= pb_rails("time_picker", props: { id: "time-picker-default-time-24hr", default_time: "14:30", label: "24-Hour Format (14:30)" }) %>
+<%= pb_rails("time_picker", props: { id: "time-picker-default-time-24hr-format", default_time: "14:30", label: "24-Hour Format with timeFormat (14:30)", time_format: "24hour" }) %>
+

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_default_time.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import TimePicker from '../../pb_time_picker/_time_picker'
+
+const TimePickerDefaultTime = (props) => (
+  <div>
+    <TimePicker
+        defaultTime="2:30 PM"
+        id="time-picker-default-time-12hr"
+        label="12-Hour Format (2:30 PM)"
+        {...props}
+    />
+    <TimePicker
+        defaultTime="14:30"
+        id="time-picker-default-time-24hr"
+        label="24-Hour Format (14:30)"
+        {...props}
+    />
+    <TimePicker
+        defaultTime="14:30"
+        id="time-picker-default-time-24hr-format"
+        label="24-Hour Format with timeFormat (14:30)"
+        timeFormat="24hour"
+        {...props}
+    />
+  </div>
+)
+
+export default TimePickerDefaultTime
+

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_default_time.md

@@ -0,0 +1 @@
+The `default_time` / `defaultTime` prop sets a default time value and accepts both 12-hour and 24-hour formats.

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_disabled.html.erb

@@ -0,0 +1,13 @@
+<%= pb_rails("time_picker", props: {
+  disabled: true,
+  id: "time-picker-disabled",
+  label: "Disabled Time Picker"
+}) %>
+
+<%= pb_rails("time_picker", props: {
+  default_time: "14:30",
+  disabled: true,
+  id: "time-picker-disabled-with-value",
+  label: "Disabled with Default Time"
+}) %>
+

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_disabled.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import TimePicker from '../../pb_time_picker/_time_picker'
+
+const TimePickerDisabled = (props) => (
+  <div>
+    <TimePicker
+        disabled
+        id="time-picker-disabled"
+        label="Disabled Time Picker"
+        {...props}
+    />
+    <TimePicker
+        defaultTime="14:30"
+        disabled
+        id="time-picker-disabled-with-value"
+        label="Disabled with Default Time"
+        {...props}
+    />
+  </div>
+)
+
+export default TimePickerDisabled
+

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_error.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("time_picker", props: {
+  error: "Please select a valid time",
+  id: "time-picker-error"
+}) %>
+

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_error.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import TimePicker from '../../pb_time_picker/_time_picker'
+
+const TimePickerError = (props) => (
+  <div>
+    <TimePicker
+        error="Please select a valid time"
+        id="time-picker-error"
+        {...props}
+    />
+  </div>
+)
+
+export default TimePickerError
+

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_input_options.html.erb

@@ -0,0 +1,14 @@
+<%= pb_rails("time_picker", props: {
+  id: "time-picker-input-options",
+  label: "Appointment Time",
+  input_options: {
+    aria: { 
+      describedby: "appointment-help-text",
+      label: "Select your preferred appointment time"
+    },
+    data: { 
+      testid: "appointment-time-input"
+    },
+    placeholder: "Choose a time"
+  }
+}) %>

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_label.html.erb

@@ -0,0 +1,2 @@
+<%= pb_rails("time_picker", props: { id: "time-picker-label", label: "Select Time" }) %>
+

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_label.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import TimePicker from '../_time_picker'
+
+const TimePickerLabel = (props) => (
+  <div>
+    <TimePicker
+        id="time-picker-label"
+        label="Select Time"
+        {...props}
+    />
+  </div>
+)
+
+export default TimePickerLabel
+

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_min_max_time.html.erb

@@ -0,0 +1,42 @@
+<%= pb_rails("time_picker", props: { 
+  id: "time-picker-min-only",
+  label: "Minimum Time Only",
+  min_time: "09:00",
+}) %>
+
+<%= pb_rails("time_picker", props: { 
+  id: "time-picker-max-only",
+  label: "Maximum Time Only",
+  max_time: "17:00",
+  time_format: "24hour",
+}) %>
+
+<%= pb_rails("time_picker", props: { 
+  id: "time-picker-min-max-12hr",
+  label: "Min & Max Time Range (12-hour)",
+  min_time: "09:00",
+  max_time: "17:00",
+}) %>
+
+<%= pb_rails("time_picker", props: { 
+  id: "time-picker-min-max-24hr",
+  label: "Min & Max Time Range (24-hour)",
+  min_time: "09:00",
+  max_time: "17:00",
+  time_format: "24hour",
+}) %>
+
+<%= pb_rails("time_picker", props: { 
+  id: "time-picker-pm-only",
+  label: "PM Only Range (AM disabled)",
+  min_time: "13:00",
+  max_time: "17:00",
+}) %>
+
+<%= pb_rails("time_picker", props: { 
+  id: "time-picker-am-only",
+  label: "AM Only Range (PM disabled)",
+  min_time: "06:00",
+  max_time: "11:30"
+}) %>
+

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_min_max_time.jsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import TimePicker from '../../pb_time_picker/_time_picker'
+
+const TimePickerMinMaxTime = (props) => (
+  <div>
+    <TimePicker
+        id="time-picker-min-only"
+        label="Minimum Time Only"
+        minTime="09:00"
+        {...props}
+    />
+    <TimePicker
+        id="time-picker-max-only"
+        label="Maximum Time Only"
+        maxTime="17:00"
+        timeFormat="24hour"
+        {...props}
+    />
+    <TimePicker
+        id="time-picker-min-max-12hr"
+        label="Min & Max Time Range (12-hour)"
+        maxTime="17:00"
+        minTime="09:00"
+        {...props}
+    />
+    <TimePicker
+        id="time-picker-min-max-24hr"
+        label="Min & Max Time Range (24-hour)"
+        maxTime="17:00"
+        minTime="09:00"
+        timeFormat="24hour"
+        {...props}
+    />
+    <TimePicker
+        id="time-picker-pm-only"
+        label="PM Only Range (AM disabled)"
+        maxTime="17:00"
+        minTime="13:00"
+        {...props}
+    />
+    <TimePicker
+        id="time-picker-am-only"
+        label="AM Only Range (PM disabled)"
+        maxTime="11:30"
+        minTime="06:00"
+        {...props}
+    />
+  </div>
+)
+
+export default TimePickerMinMaxTime
+

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_min_max_time.md

@@ -0,0 +1 @@
+Use the `min_time` / `minTime` and `max_time` / `maxTime` props to restrict the selectable time range. This example demonstrates minimum-only, maximum-only, and combined ranges in both 12-hour and 24-hour formats.

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.jsx

@@ -0,0 +1,45 @@
+import React, { useState } from 'react'
+import TimePicker from '../../pb_time_picker/_time_picker'
+import Body from '../../pb_body/_body'
+
+const TimePickerOnHandler = (props) => {
+  const [selectedTime, setSelectedTime] = useState('')
+  const [closedTime, setClosedTime] = useState('')
+
+  const handleTimeChange = (time) => {
+    setSelectedTime(time)
+  }
+
+  const handleTimeClose = (time) => {
+    setClosedTime(time)
+  }
+
+  return (
+    <div>
+      {(selectedTime || closedTime) && (
+        <div style={{ marginBottom: '16px' }}>
+          {selectedTime && (
+            <Body
+                text={`onChange: ${selectedTime}`}
+            />
+          )}
+          {closedTime && (
+            <Body
+                marginTop={selectedTime ? "xs" : "none"}
+                text={`onClose: ${closedTime}`}
+            />
+          )}
+        </div>
+      )}
+      <TimePicker
+          id="time-picker-on-handler"
+          onChange={handleTimeChange}
+          onClose={handleTimeClose}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TimePickerOnHandler
+

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.md

@@ -0,0 +1 @@
+Demonstrates the `onChange` and `onClose` event handlers for the Time Picker.

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_timezone.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("time_picker", props: { id: "time-picker-timezone", show_timezone: true }) %>
+<%= pb_rails("time_picker", props: { id: "time-picker-timezone-24hour", show_timezone: true, time_format: "24hour" }) %>
+

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_timezone.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import TimePicker from '../../pb_time_picker/_time_picker'
+
+const TimePickerTimezone = (props) => (
+  <div>
+    <TimePicker
+        id="time-picker-timezone"
+        showTimezone
+        {...props}
+    />
+    <TimePicker
+        id="time-picker-timezone-24hour"
+        showTimezone
+        timeFormat="24hour"
+        {...props}
+    />
+  </div>
+)
+
+export default TimePickerTimezone
+

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_timezone.md

@@ -0,0 +1 @@
+Enable timezone display by passing `show_timezone` / `showTimezone`.

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

@@ -0,0 +1,24 @@
+examples:
+  
+  rails:
+  - time_picker_default: Default
+  - time_picker_24_hour: 24-Hour Format
+  - time_picker_default_time: Default Time
+  - time_picker_label: Custom Label
+  - time_picker_timezone: With Timezone
+  - time_picker_min_max_time: Min & Max Time
+  - time_picker_error: Error
+  - time_picker_disabled: Disabled
+  - time_picker_input_options: Input Options
+  
+  
+  react:
+  - time_picker_default: Default
+  - time_picker_24_hour: 24-Hour Format
+  - time_picker_default_time: Default Time
+  - time_picker_label: Custom Label
+  - time_picker_timezone: With Timezone
+  - time_picker_min_max_time: Min & Max Time
+  - time_picker_error: Error
+  - time_picker_disabled: Disabled
+  - time_picker_on_handler: onChange & onClose Handlers

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

@@ -0,0 +1,9 @@
+export { default as TimePickerDefault } from './_time_picker_default.jsx'
+export { default as TimePickerDefaultTime } from './_time_picker_default_time.jsx'
+export { default as TimePicker24Hour } from './_time_picker_24_hour.jsx'
+export { default as TimePickerLabel } from './_time_picker_label.jsx'
+export { default as TimePickerTimezone } from './_time_picker_timezone.jsx'
+export { default as TimePickerOnHandler } from './_time_picker_on_handler.jsx'
+export { default as TimePickerMinMaxTime } from './_time_picker_min_max_time.jsx'
+export { default as TimePickerError } from './_time_picker_error.jsx'
+export { default as TimePickerDisabled } from './_time_picker_disabled.jsx'

data/app/pb_kits/playbook/pb_time_picker/index.ts

@@ -0,0 +1,40 @@
+import PbEnhancedElement from "../pb_enhanced_element";
+
+const TIME_PICKER_SELECTOR = '[data-pb-time-picker]';
+const VALIDATION_MESSAGE_CLASS = '.pb_body_kit_negative';
+
+export default class PbTimePicker extends PbEnhancedElement {
+  static get selector(): string {
+    return TIME_PICKER_SELECTOR;
+  }
+
+  connect(): void {
+    this.setValidationMessage();
+  }
+
+  setValidationMessage(): void {
+    const element = this.element as HTMLElement;
+    const validationMessage = element.dataset?.validationMessage;
+    const inputElement = element.querySelector("input");
+
+    if (validationMessage) {
+      const setErrorTextContent = (text: string, timeout: number): void => {
+        setTimeout(() => {
+          const errorMessageElement = element.querySelector(VALIDATION_MESSAGE_CLASS);
+          if (errorMessageElement) {
+            errorMessageElement.textContent = text;
+          } else {
+            setErrorTextContent(text, 100);
+          }
+        }, timeout);
+      };
+
+      inputElement?.addEventListener("change", (e) => {
+        const target = e.target as HTMLInputElement;
+        if (!target.checkValidity()) {
+          setErrorTextContent(validationMessage, 300);
+        }
+      });
+    }
+  }
+}

data/app/pb_kits/playbook/pb_time_picker/time_picker.html.erb

@@ -0,0 +1 @@
+<%= react_component("TimePicker", object.time_picker_react_props, 'data-pb-time-picker': true, 'data-validation-message': object.validation_message) %>

data/app/pb_kits/playbook/pb_time_picker/time_picker.rb

@@ -0,0 +1,80 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbTimePicker
+    class TimePicker < ::Playbook::KitBase
+      prop :default_time, type: Playbook::Props::String
+      prop :disabled, type: Playbook::Props::Boolean,
+                      default: false
+      prop :error, type: Playbook::Props::String
+      prop :input_options, type: Playbook::Props::HashProp,
+                           default: {}
+      prop :label, type: Playbook::Props::String,
+                   default: "Time Picker"
+      prop :max_time, type: Playbook::Props::String
+      prop :min_time, type: Playbook::Props::String
+      prop :name, type: Playbook::Props::String
+      prop :required, type: Playbook::Props::Boolean,
+                      default: false
+      prop :show_timezone, type: Playbook::Props::Boolean,
+                           default: false
+      prop :time_format, type: Playbook::Props::Enum,
+                         values: %w[AMPM 24hour],
+                         default: "AMPM"
+      prop :validation_message, type: Playbook::Props::String,
+                                default: ""
+      prop :value, type: Playbook::Props::String
+
+      def classname
+        generate_classname("pb_time_picker") + error_class + disabled_class
+      end
+
+      def error_class
+        error.present? ? " error" : ""
+      end
+
+      def disabled_class
+        disabled ? " disabled" : ""
+      end
+
+      # Flatten nested data/aria hashes for React compatibility
+      # Rails tag helpers do this automatically, but React needs flat attributes
+      def formatted_input_options
+        result = {}
+        input_options.each do |key, value|
+          if key.to_s == "data" && value.is_a?(Hash)
+            value.each { |k, v| result["data-#{k.to_s.dasherize}"] = v }
+          elsif key.to_s == "aria" && value.is_a?(Hash)
+            value.each { |k, v| result["aria-#{k.to_s.dasherize}"] = v }
+          else
+            result[key] = value
+          end
+        end
+        result
+      end
+
+      def time_picker_react_props
+        props = {
+          className: classname,
+          data: data,
+          defaultTime: default_time,
+          disabled: disabled,
+          error: error,
+          htmlOptions: html_options,
+          id: id,
+          inputOptions: formatted_input_options,
+          label: label,
+          maxTime: max_time,
+          minTime: min_time,
+          name: name,
+          required: required,
+          showTimezone: show_timezone,
+          timeFormat: time_format,
+          validationMessage: validation_message,
+          value: value,
+        }
+        props.compact
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_time_picker/time_picker.test.jsx

@@ -0,0 +1,114 @@
+import React from 'react'
+import { render, screen, fireEvent } from '../utilities/test-utils'
+
+import TimePicker from './_time_picker'
+
+describe('TimePicker', () => {
+  test('renders with default props', () => {
+    render(<TimePicker data={{ testid: 'time-picker' }} />)
+    expect(screen.getByTestId('time-picker')).toBeInTheDocument()
+  })
+
+  test('renders with custom label', () => {
+    render(<TimePicker label="Appointment Time" />)
+    expect(screen.getByText('Appointment Time')).toBeInTheDocument()
+  })
+
+  test('renders label as accessible label element with htmlFor', () => {
+    render(
+      <TimePicker
+          id="test-picker"
+          label="Select Time"
+      />
+    )
+    const label = screen.getByText('Select Time').closest('label')
+    expect(label).toBeInTheDocument()
+    expect(label).toHaveAttribute('for', 'test-picker-input')
+  })
+
+  test('renders with error state', () => {
+    render(
+      <TimePicker
+          data={{ testid: 'error-picker' }}
+          error="Please select a valid time"
+      />
+    )
+    expect(screen.getByTestId('error-picker')).toHaveClass('error')
+    expect(screen.getByText('Please select a valid time')).toBeInTheDocument()
+  })
+
+  test('renders with disabled state', () => {
+    render(
+      <TimePicker
+          data={{ testid: 'disabled-picker' }}
+          disabled
+          label="Disabled Picker"
+      />
+    )
+    expect(screen.getByTestId('disabled-picker')).toHaveClass('disabled')
+    const input = screen.getByPlaceholderText('Select Time')
+    expect(input).toBeDisabled()
+  })
+
+  test('renders with default time value', () => {
+    render(<TimePicker defaultTime="14:30" />)
+    const input = screen.getByPlaceholderText('Select Time')
+    expect(input).toHaveValue('2:30 PM')
+  })
+
+  test('renders with default time in 24-hour format', () => {
+    render(
+      <TimePicker
+          defaultTime="14:30"
+          timeFormat="24hour"
+      />
+    )
+    const input = screen.getByPlaceholderText('Select Time')
+    expect(input).toHaveValue('14:30')
+  })
+
+  test('opens dropdown on input click when not disabled', () => {
+    render(<TimePicker data={{ testid: 'clickable-picker' }} />)
+    const input = screen.getByPlaceholderText('Select Time')
+    fireEvent.click(input)
+    expect(screen.getByText('Hour', { selector: '.pb_caption_kit_sm' })).toBeInTheDocument()
+  })
+
+  test('does not open dropdown on input click when disabled', () => {
+    render(<TimePicker disabled />)
+    const input = screen.getByPlaceholderText('Select Time')
+    fireEvent.click(input)
+    expect(screen.queryByText('Hour', { selector: '.pb_caption_kit_sm' })).not.toBeInTheDocument()
+  })
+
+  test('renders with required attribute', () => {
+    render(<TimePicker required />)
+    const input = screen.getByPlaceholderText('Select Time')
+    expect(input).toHaveAttribute('required')
+  })
+
+  test('renders timezone when showTimezone is true', () => {
+    render(<TimePicker showTimezone />)
+    const input = screen.getByPlaceholderText('Select Time')
+    fireEvent.click(input)
+    // Timezone text should contain parentheses like "EST (Eastern Standard Time)"
+    const timezoneElement = screen.getByText(/\(.*Time.*\)/)
+    expect(timezoneElement).toBeInTheDocument()
+  })
+
+  test('renders 24-hour format without AM/PM selectors', () => {
+    render(<TimePicker timeFormat="24hour" />)
+    const input = screen.getByPlaceholderText('Select Time')
+    fireEvent.click(input)
+    expect(screen.queryByText('AM')).not.toBeInTheDocument()
+    expect(screen.queryByText('PM')).not.toBeInTheDocument()
+  })
+
+  test('renders 12-hour format with AM/PM selectors', () => {
+    render(<TimePicker timeFormat="AMPM" />)
+    const input = screen.getByPlaceholderText('Select Time')
+    fireEvent.click(input)
+    expect(screen.getByText('AM')).toBeInTheDocument()
+    expect(screen.getByText('PM')).toBeInTheDocument()
+  })
+})