playbook_ui_docs 15.6.0 → 15.7.0.pre.alpha.play263313229

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_timeline/docs/_timeline_show_current_year.html.erb

@@ -0,0 +1,60 @@
+<%= pb_rails("timeline", props: {orientation: "horizontal", show_date: true}) do %>
+    <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal", line_style: "solid", date: Date.today, show_current_year: true }) do %>
+        <%= pb_rails("title_detail", props: {
+            title: "Jackson Heights",
+            detail: "37-27 74th Street"
+        }) %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted" }) do %>
+        <%= pb_rails("title_detail", props: {
+            title: "Greenpoint",
+            detail: "81 Gate St Brooklyn"
+        }) %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: { line_style: "solid"}) do |item| %>
+      <% item.label do %>
+        <%= pb_rails("timeline/label", props: { date: Date.today, show_current_year: true }) %>
+      <% end %>
+      <% item.step do %>
+        <%= pb_rails("timeline/step", props: { icon: 'map-marker-alt', icon_color: 'purple' }) %>
+      <% end %>
+      <% item.detail do %>
+        <%= pb_rails("title_detail", props: {
+          title: "Society Hill",
+          detail: "72 E St Astoria"
+        }) %>
+      <% end %>
+    <% end %>
+<% end %>
+
+<br /><br /><br />
+
+<%= pb_rails("timeline", props: {orientation: "vertical", show_date: true}) do %>
+    <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal", line_style: "solid", date: Date.today, show_current_year: true }) do %>
+        <%= pb_rails("title_detail", props: {
+            title: "Jackson Heights",
+            detail: "37-27 74th Street"
+        }) %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted" }) do %>
+        <%= pb_rails("title_detail", props: {
+            title: "Greenpoint",
+            detail: "81 Gate St Brooklyn"
+        }) %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: { line_style: "solid"}) do |item| %>
+      <% item.label do %>
+        <%= pb_rails("timeline/label", props: { date: Date.today, show_current_year: true }) %>
+      <% end %>
+      <% item.step do %>
+        <%= pb_rails("timeline/step", props: { icon: 'map-marker-alt', icon_color: 'purple' }) %>
+      <% end %>
+      <% item.detail do %>
+        <%= pb_rails("title_detail", props: {
+          title: "Society Hill",
+          detail: "72 E St Astoria"
+        }) %>
+      <% end %>
+    <% end %>
+<% end %>
+

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.jsx

@@ -0,0 +1,118 @@
+import React from 'react'
+
+import Timeline from '../_timeline'
+import TitleDetail from '../../pb_title_detail/_title_detail'
+
+const TimelineShowCurrentYear = (props) => (
+  <div>
+    <Timeline
+        orientation="horizontal"
+        showDate
+        {...props}
+    >
+      <Timeline.Item
+          date={new Date()}
+          icon="user"
+          iconColor="royal"
+          showCurrentYear
+          {...props}
+      >
+        <TitleDetail
+            detail="37-27 74th Street"
+            title="Jackson Heights"
+            {...props}
+        />
+      </Timeline.Item>
+      <Timeline.Item
+          icon="check"
+          iconColor="teal"
+          lineStyle="dotted"
+          {...props}
+      >
+        <TitleDetail
+            detail="81 Gate St Brooklyn"
+            title="Greenpoint"
+            {...props}
+        />
+      </Timeline.Item>
+      <Timeline.Item
+          lineStyle="solid"
+          {...props}
+      >
+        <Timeline.Label
+            date={new Date()}
+            showCurrentYear
+        />
+        <Timeline.Step
+            icon="map-marker-alt"
+            iconColor="purple"
+        />
+        <Timeline.Detail>
+          <TitleDetail
+              detail="72 E St Astoria"
+              title="Society Hill"
+              {...props}
+          />
+        </Timeline.Detail>
+      </Timeline.Item>
+    </Timeline>
+
+    <br />
+    <br />
+    <br />
+
+    <Timeline
+        orientation="vertical"
+        showDate
+        {...props}
+    >
+      <Timeline.Item
+          date={new Date()}
+          icon="user"
+          iconColor="royal"
+          showCurrentYear
+          {...props}
+      >
+        <TitleDetail
+            detail="37-27 74th Street"
+            title="Jackson Heights"
+            {...props}
+        />
+      </Timeline.Item>
+      <Timeline.Item
+          icon="check"
+          iconColor="teal"
+          lineStyle="dotted"
+          {...props}
+      >
+        <TitleDetail
+            detail="81 Gate St Brooklyn"
+            title="Greenpoint"
+            {...props}
+        />
+      </Timeline.Item>
+      <Timeline.Item
+          lineStyle="solid"
+          {...props}
+      >
+        <Timeline.Label
+            date={new Date()}
+            showCurrentYear
+        />
+        <Timeline.Step
+            icon="map-marker-alt"
+            iconColor="purple"
+        />
+        <Timeline.Detail>
+          <TitleDetail
+              detail="72 E St Astoria"
+              title="Society Hill"
+              {...props}
+          />
+        </Timeline.Detail>
+      </Timeline.Item>
+    </Timeline>
+  </div>
+)
+
+export default TimelineShowCurrentYear

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.md

@@ -0,0 +1 @@
+By default, the Timeline 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. Pass it to `Timeline.Item`/`timeline/item` when using its `date` prop, or to `Timeline.Label`/`timeline/label` if following the "With Children" pattern.

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.md

@@ -1 +1 @@
-Use the optional `showDate` prop to render the timeline kit with a visible date. If the date is from the current year, the year will not be displayed, however if date is NOT from the current year, the kit will display the year as well.
+Use the optional `showDate` prop to render the timeline kit with a visible date. By default, if the date is from the current year, the year will not be displayed; however, if the date is NOT from the current year, the kit will display the year as well.

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

@@ -5,6 +5,7 @@ examples:
   - timeline_vertical: Vertical
   - timeline_with_date: With Date
   - timeline_with_children: With Children
+  - timeline_show_current_year: Show Current Year
   - timeline_with_gap: With Gap
 
 
@@ -13,4 +14,5 @@ examples:
   - timeline_vertical: Vertical
   - timeline_with_date: With Date
   - timeline_with_children: With Children
+  - timeline_show_current_year: Show Current Year
   - timeline_with_gap: With Gap

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

@@ -3,4 +3,5 @@ export { default as TimelineVertical } from './_timeline_vertical.jsx'
 export { default as TimelineWithDate } from './_timeline_with_date.jsx'
 export { default as TimelineWithChildren } from './_timeline_with_children.jsx'
 export { default as TimelineWithGap } from './_timeline_with_gap.jsx'
+export { default as TimelineShowCurrentYear } from './_timeline_show_current_year.jsx'